Merge pull request 'Fixed mobile bottom toolbar' (#13) from mobile-fixes into development

Reviewed-on: https://gitea.2pidev.com/jselesan/playzer/pulls/13

apps/backend/src/lib/http/problem-mapper.ts

@@ -17,6 +17,7 @@ function statusFromError(error: AppError): ContentfulStatusCode {
     case 'unexpected':
       return 500;
     default:
+      
       return 500;
   }
 }

apps/frontend/src/features/booking/components/booking-mobile.tsx

@@ -17,6 +17,7 @@ import {
   ChevronLeft,
   ChevronRight,
   CircleDot,
+  Download,
   Dumbbell,
   Grid2X2,
   Laptop,
@@ -38,10 +39,13 @@ import { useBooking } from '../booking-provider';
 import type { BookingCourtSchedule, BookingTimelineSegment } from '../booking.types';
 import { fromIsoDateLocal, toIsoDateLocal } from '../lib/booking-time';
 
+type MobileTab = 'panel' | 'status' | 'bookings' | 'more';
+
 export function BookingMobile() {
   const { schedules, isLoading, isError, errorMessage } = useBooking();
   const [selectedCourtId, setSelectedCourtId] = useState<string | null>(null);
   const [search, setSearch] = useState('');
+  const [activeTab, setActiveTab] = useState<MobileTab>('panel');
 
   const selectedSchedule = useMemo(() => {
     if (!selectedCourtId) return null;
@@ -67,52 +71,60 @@ export function BookingMobile() {
     <div className="min-h-dvh pb-24">
       <MobileTopBar />
       <div className="space-y-6 px-3 pt-5">
-        <MobilePanelHeader />
-        <MobileFilters />
-        <MobileSummary />
+        {activeTab === 'panel' && (
+          <>
+            <MobilePanelHeader />
+            <MobileFilters />
+            <MobileSummary />
 
-        <section className="space-y-4">
-          <h2 className="text-xl font-semibold tracking-normal">Canchas</h2>
-          <div className="relative">
-            <Search className="pointer-events-none absolute left-3 top-1/2 size-5 -translate-y-1/2 text-muted-foreground" />
-            <Input
-              className="h-12 rounded-lg border-border/70 bg-card/75 pl-11 text-sm shadow-sm"
-              placeholder="Buscar cancha..."
-              value={search}
-              onChange={(event) => setSearch(event.target.value)}
-            />
-          </div>
+            <section className="space-y-4">
+              <h2 className="text-xl font-semibold tracking-normal">Canchas</h2>
+              <div className="relative">
+                <Search className="pointer-events-none absolute left-3 top-1/2 size-5 -translate-y-1/2 text-muted-foreground" />
+                <Input
+                  className="h-12 rounded-lg border-border/70 bg-card/75 pl-11 text-sm shadow-sm"
+                  placeholder="Buscar cancha..."
+                  value={search}
+                  onChange={(event) => setSearch(event.target.value)}
+                />
+              </div>
 
-          {isLoading && (
-            <div className="rounded-lg border bg-card/75 px-4 py-8 text-sm text-muted-foreground">
-              Cargando reservas...
-            </div>
-          )}
+              {isLoading && (
+                <div className="rounded-lg border bg-card/75 px-4 py-8 text-sm text-muted-foreground">
+                  Cargando reservas...
+                </div>
+              )}
 
-          {isError && !isLoading && (
-            <div className="rounded-lg border bg-card/75 px-4 py-8 text-sm text-destructive">
-              {errorMessage}
-            </div>
-          )}
+              {isError && !isLoading && (
+                <div className="rounded-lg border bg-card/75 px-4 py-8 text-sm text-destructive">
+                  {errorMessage}
+                </div>
+              )}
 
-          {!isLoading && !isError && filteredSchedules.length === 0 && (
-            <div className="rounded-lg border bg-card/75 px-4 py-8 text-sm text-muted-foreground">
-              No hay canchas para los filtros seleccionados.
-            </div>
-          )}
+              {!isLoading && !isError && filteredSchedules.length === 0 && (
+                <div className="rounded-lg border bg-card/75 px-4 py-8 text-sm text-muted-foreground">
+                  No hay canchas para los filtros seleccionados.
+                </div>
+              )}
 
-          {!isLoading &&
-            !isError &&
-            filteredSchedules.map((schedule) => (
-              <MobileCourtCard
-                key={schedule.court.id}
-                schedule={schedule}
-                onOpen={() => setSelectedCourtId(schedule.court.id)}
-              />
-            ))}
-        </section>
+              {!isLoading &&
+                !isError &&
+                filteredSchedules.map((schedule) => (
+                  <MobileCourtCard
+                    key={schedule.court.id}
+                    schedule={schedule}
+                    onOpen={() => setSelectedCourtId(schedule.court.id)}
+                  />
+                ))}
+            </section>
+          </>
+        )}
+
+        {activeTab === 'status' && <MobileStatusTab />}
+        {activeTab === 'bookings' && <MobileBookingsTab />}
+        {activeTab === 'more' && <MobileMoreTab />}
       </div>
-      <MobileBottomNav active="panel" />
+      <MobileBottomNav active={activeTab} onSelect={setActiveTab} />
     </div>
   );
 }
@@ -406,6 +418,262 @@ function MobileSummary() {
   );
 }
 
+function MobileStatusTab() {
+  const {
+    courts,
+    selectedSportId,
+    selectedStatus,
+    visibleTimeRange,
+    setSelectedSportId,
+    setSelectedStatus,
+    setVisibleTimeRange,
+  } = useBooking();
+  const sports = [...new Map(courts.map((court) => [court.sport.id, court.sport])).values()];
+  const activeRangeValue = `${visibleTimeRange.start}-${visibleTimeRange.end}`;
+  const statusOptions = [
+    { 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' },
+    { label: '06:00 - 00:00', start: '06:00', end: '23:59' },
+    { label: '08:00 - 14:00', start: '08:00', end: '14:00' },
+    { label: '14:00 - 22:00', start: '14:00', end: '22:00' },
+  ];
+
+  return (
+    <>
+      <section>
+        <h1 className="text-2xl font-semibold tracking-normal">Estado</h1>
+        <p className="mt-1 text-sm text-muted-foreground">Filtra disponibilidad por cancha.</p>
+      </section>
+
+      <MobileFilters />
+      <MobileSummary />
+
+      <section className="space-y-3 rounded-lg border border-border/70 bg-card/70 p-4">
+        <div className="space-y-2">
+          <p className="text-sm font-medium">Estado</p>
+          <div className="grid grid-cols-2 gap-2">
+            {statusOptions.map((option) => (
+              <MobileFilterChip
+                key={option.value}
+                active={selectedStatus === option.value}
+                label={option.label}
+                onClick={() => setSelectedStatus(option.value)}
+              />
+            ))}
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <p className="text-sm font-medium">Deporte</p>
+          <div className="flex gap-2 overflow-x-auto pb-1">
+            <MobileFilterChip
+              active={selectedSportId === 'all'}
+              label="Todos"
+              onClick={() => setSelectedSportId('all')}
+            />
+            {sports.map((sport) => (
+              <MobileFilterChip
+                key={sport.id}
+                active={selectedSportId === sport.id}
+                label={sport.name}
+                onClick={() => setSelectedSportId(sport.id)}
+              />
+            ))}
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <p className="text-sm font-medium">Horario visible</p>
+          <div className="grid grid-cols-2 gap-2">
+            {timeRangeOptions.map((option) => (
+              <MobileFilterChip
+                key={`${option.start}-${option.end}`}
+                active={activeRangeValue === `${option.start}-${option.end}`}
+                label={option.label}
+                onClick={() => setVisibleTimeRange({ start: option.start, end: option.end })}
+              />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section className="rounded-lg border border-border/70 bg-card/70 p-4">
+        <StatusLegend />
+      </section>
+    </>
+  );
+}
+
+function MobileFilterChip({
+  active,
+  label,
+  onClick,
+}: {
+  active: boolean;
+  label: string;
+  onClick: () => void;
+}) {
+  return (
+    <Button
+      type="button"
+      variant={active ? 'default' : 'outline'}
+      className={cn(
+        'h-11 shrink-0 rounded-lg px-4 text-sm',
+        !active && 'border-border/70 bg-secondary/45 text-muted-foreground'
+      )}
+      onClick={onClick}
+    >
+      {label}
+    </Button>
+  );
+}
+
+function MobileBookingsTab() {
+  const { selectedDate, schedules, openBookingTools, openCreateBooking } = useBooking();
+  const reservedSegments = schedules
+    .flatMap((schedule) =>
+      schedule.segments
+        .filter((segment) => segment.booking)
+        .map((segment) => ({ schedule, segment }))
+    )
+    .sort((a, b) => a.segment.startMinutes - b.segment.startMinutes);
+
+  return (
+    <>
+      <section className="flex items-start justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-semibold tracking-normal">Reservas</h1>
+          <p className="mt-1 text-sm text-muted-foreground">{formatMobileDate(selectedDate)}</p>
+        </div>
+        <Button
+          type="button"
+          className="h-11 shrink-0 rounded-lg px-3 shadow-lg shadow-primary/20"
+          onClick={() => openCreateBooking()}
+        >
+          <Plus className="size-4" />
+          Nueva
+        </Button>
+      </section>
+
+      <MobileFilters />
+
+      <section className="space-y-3">
+        {reservedSegments.length === 0 ? (
+          <div className="rounded-lg border border-border/70 bg-card/75 px-4 py-8 text-sm text-muted-foreground">
+            No hay reservas para este día.
+          </div>
+        ) : (
+          reservedSegments.map(({ schedule, segment }) => (
+            <button
+              key={segment.id}
+              type="button"
+              className="grid w-full grid-cols-[1fr_auto] items-center gap-3 rounded-lg border border-border/70 bg-card/75 p-4 text-left shadow-sm"
+              onClick={() => openBookingTools(segment)}
+            >
+              <div className="min-w-0">
+                <p className="truncate text-base font-semibold">{segment.booking?.customerName}</p>
+                <p className="mt-1 text-sm text-muted-foreground">
+                  {schedule.court.name} · {schedule.court.sport.name}
+                </p>
+              </div>
+              <div className="text-right">
+                <p className="text-sm font-medium">
+                  {segment.startTime} - {segment.endTime}
+                </p>
+                <p className="mt-1 text-xs text-reserved">Reservado</p>
+              </div>
+            </button>
+          ))
+        )}
+      </section>
+    </>
+  );
+}
+
+function MobileMoreTab() {
+  const navigate = useNavigate();
+  const { currentComplexSlug } = useCurrentComplexStore();
+  const { openCreateBooking, exportDayReport } = useBooking();
+
+  return (
+    <>
+      <section>
+        <h1 className="text-2xl font-semibold tracking-normal">Más</h1>
+        <p className="mt-1 text-sm text-muted-foreground">Accesos rápidos del panel.</p>
+      </section>
+
+      <section className="overflow-hidden rounded-lg border border-border/70 bg-card/75">
+        <MobileMenuAction
+          icon={<CalendarDays className="size-5" />}
+          label="Nueva reserva"
+          onClick={() => openCreateBooking()}
+        />
+        <MobileMenuAction
+          icon={<Download className="size-5" />}
+          label="Exportar reservas del día"
+          onClick={exportDayReport}
+        />
+        <MobileMenuAction
+          icon={<User className="size-5" />}
+          label="Mi perfil"
+          onClick={() => {
+            void navigate({ to: '/profile' });
+          }}
+        />
+        {currentComplexSlug && (
+          <MobileMenuAction
+            icon={<Settings className="size-5" />}
+            label="Configuración del complejo"
+            onClick={() => {
+              void navigate({
+                to: '/complex/$slug/edit',
+                params: { slug: currentComplexSlug },
+              });
+            }}
+          />
+        )}
+      </section>
+    </>
+  );
+}
+
+function MobileMenuAction({
+  icon,
+  label,
+  onClick,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      className="flex min-h-14 w-full items-center justify-between gap-3 border-b border-border/70 px-4 py-3 text-left last:border-b-0"
+      onClick={onClick}
+    >
+      <span className="inline-flex items-center gap-3 font-medium">
+        <span className="text-muted-foreground">{icon}</span>
+        {label}
+      </span>
+      <ChevronRight className="size-5 text-muted-foreground" />
+    </button>
+  );
+}
+
+function formatMobileDate(date: string) {
+  return new Intl.DateTimeFormat('es-AR', {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+  }).format(new Date(`${date}T00:00:00`));
+}
+
 function SummaryPill({
   value,
   label,
@@ -729,28 +997,38 @@ function MetricDots({ schedule }: { schedule: BookingCourtSchedule }) {
   );
 }
 
-function MobileBottomNav({ active }: { active: 'panel' | 'status' | 'bookings' | 'more' }) {
+function MobileBottomNav({
+  active,
+  onSelect,
+}: {
+  active: MobileTab;
+  onSelect: (tab: MobileTab) => void;
+}) {
   return (
     <nav className="fixed inset-x-0 bottom-0 z-40 grid grid-cols-4 border-t border-border/70 bg-background/90 px-2 pb-3 pt-2 backdrop-blur-xl">
       <BottomNavItem
         active={active === 'panel'}
         icon={<Grid2X2 className="size-5" />}
         label="Panel"
+        onClick={() => onSelect('panel')}
       />
       <BottomNavItem
         active={active === 'status'}
         icon={<ListChecks className="size-5" />}
         label="Estado"
+        onClick={() => onSelect('status')}
       />
       <BottomNavItem
         active={active === 'bookings'}
         icon={<CalendarDays className="size-5" />}
         label="Reservas"
+        onClick={() => onSelect('bookings')}
       />
       <BottomNavItem
         active={active === 'more'}
         icon={<MoreHorizontal className="size-5" />}
         label="Más"
+        onClick={() => onSelect('more')}
       />
     </nav>
   );
@@ -760,14 +1038,17 @@ function BottomNavItem({
   active,
   icon,
   label,
-}: { active: boolean; icon: React.ReactNode; label: string }) {
+  onClick,
+}: { active: boolean; icon: React.ReactNode; label: string; onClick: () => void }) {
   return (
     <button
       type="button"
+      aria-current={active ? 'page' : undefined}
       className={cn(
         'flex flex-col items-center gap-1 rounded-lg px-2 py-1.5 text-xs text-muted-foreground',
         active && 'text-primary'
       )}
+      onClick={onClick}
     >
       {icon}
       <span>{label}</span>