From 2d86881f943485d90a85efce7c91a7eb98ca06aa Mon Sep 17 00:00:00 2001
From: Jose Selesan <jose.selesan@solotechnologies.us>
Date: Thu, 9 Apr 2026 23:01:09 -0300
Subject: [PATCH] Added 'No show' status. Edit user profile

---
 apps/frontend/package.json                    |   2 +
 apps/frontend/src/components/ui/form.tsx      | 174 +++++++++++++
 .../complex/components/court-form-section.tsx |   2 +-
 apps/frontend/src/features/home/home-page.tsx |  31 ++-
 .../src/features/layout/root-layout.tsx       |   7 -
 .../src/features/profile/profile-page.tsx     | 238 +++++++++++++++---
 apps/frontend/src/lib/auth.tsx                |  31 +++
 7 files changed, 440 insertions(+), 45 deletions(-)
 create mode 100644 apps/frontend/src/components/ui/form.tsx

diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 2ff3ab3..83709d9 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -12,6 +12,8 @@
   "dependencies": {
     "@fontsource-variable/geist": "^5.2.8",
     "@hookform/resolvers": "^5.2.2",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
     "@repo/api-contract": "workspace:*",
     "@supabase/supabase-js": "^2.101.1",
     "@tanstack/react-query": "^5.96.1",
diff --git a/apps/frontend/src/components/ui/form.tsx b/apps/frontend/src/components/ui/form.tsx
new file mode 100644
index 0000000..e984e3f
--- /dev/null
+++ b/apps/frontend/src/components/ui/form.tsx
@@ -0,0 +1,174 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import type {
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+} from "react-hook-form"
+import { Controller, FormProvider, useFormContext } from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  )
+})
+FormItem.displayName = "FormItem"
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+})
+FormLabel.displayName = "FormLabel"
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+})
+FormControl.displayName = "FormControl"
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+})
+FormDescription.displayName = "FormDescription"
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message) : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-sm font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+})
+FormMessage.displayName = "FormMessage"
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormMessage,
+}
\ No newline at end of file
diff --git a/apps/frontend/src/features/complex/components/court-form-section.tsx b/apps/frontend/src/features/complex/components/court-form-section.tsx
index 81ca125..2640be0 100644
--- a/apps/frontend/src/features/complex/components/court-form-section.tsx
+++ b/apps/frontend/src/features/complex/components/court-form-section.tsx
@@ -128,7 +128,7 @@ export function CourtFormSection({
   const buttonText = editingCourt ? 'Guardar cambios' : 'Agregar cancha'
 
   return (
-    <section className="rounded-xl border bg-card p-4 text-card-foreground shadow-sm sm:p-5">
+    <section className="rounded-xl border bg-card p-4 text-card-foreground shadow-sm sm:p-5 mb-4">
       <h3 className="text-lg font-semibold">{title}</h3>
       <p className="mt-1 text-sm text-muted-foreground">
         Configura nombre, deporte, duración, precio base y horarios. El backend ya
diff --git a/apps/frontend/src/features/home/home-page.tsx b/apps/frontend/src/features/home/home-page.tsx
index 09d7e5a..31b18c4 100644
--- a/apps/frontend/src/features/home/home-page.tsx
+++ b/apps/frontend/src/features/home/home-page.tsx
@@ -63,13 +63,33 @@ function formatDateLabel(dateIso: string) {
   }).format(date)
 }
 
-function statusLabel(status: 'CONFIRMED' | 'CANCELLED' | 'COMPLETED') {
+function getEffectiveStatus(booking: AdminBooking): 'CONFIRMED' | 'CANCELLED' | 'COMPLETED' | 'NO_SHOW' {
+  if (booking.status !== 'CONFIRMED') {
+    return booking.status
+  }
+
+  // Check if booking is past end time and still confirmed
+  const now = new Date()
+  const bookingDateTime = new Date(`${booking.date}T${booking.endTime}:00`)
+
+  if (now > bookingDateTime) {
+    return 'NO_SHOW'
+  }
+
+  return 'CONFIRMED'
+}
+
+function effectiveStatusLabel(status: 'CONFIRMED' | 'CANCELLED' | 'COMPLETED' | 'NO_SHOW') {
+  if (status === 'NO_SHOW') return 'No show'
   if (status === 'COMPLETED') return 'Cumplida'
   if (status === 'CANCELLED') return 'Cancelada'
   return 'Confirmada'
 }
 
-function statusClassName(status: 'CONFIRMED' | 'CANCELLED' | 'COMPLETED') {
+function effectiveStatusClassName(status: 'CONFIRMED' | 'CANCELLED' | 'COMPLETED' | 'NO_SHOW') {
+  if (status === 'NO_SHOW') {
+    return 'border-orange-200 bg-orange-50 text-orange-700'
+  }
   if (status === 'COMPLETED') {
     return 'border-emerald-200 bg-emerald-50 text-emerald-700'
   }
@@ -333,7 +353,8 @@ export function HomePage() {
               <h2 className="text-sm font-semibold capitalize">{formatDateLabel(date)}</h2>
               <div className="mt-3 space-y-2">
                 {bookings.map((booking) => {
-                  const canManage = booking.status === 'CONFIRMED'
+                  const effectiveStatus = getEffectiveStatus(booking)
+                  const canManage = booking.status === 'CONFIRMED' && effectiveStatus === 'CONFIRMED'
                   const isMutating = updateStatusMutation.isPending
 
                   return (
@@ -352,9 +373,9 @@ export function HomePage() {
 
                       <div className="flex flex-wrap items-center gap-2">
                         <span
-                          className={`inline-flex rounded-full border px-2 py-1 text-xs font-medium ${statusClassName(booking.status)}`}
+                          className={`inline-flex rounded-full border px-2 py-1 text-xs font-medium ${effectiveStatusClassName(effectiveStatus)}`}
                         >
-                          {statusLabel(booking.status)}
+                          {effectiveStatusLabel(effectiveStatus)}
                         </span>
 
                         {canManage && (
diff --git a/apps/frontend/src/features/layout/root-layout.tsx b/apps/frontend/src/features/layout/root-layout.tsx
index c9729a6..9fb6665 100644
--- a/apps/frontend/src/features/layout/root-layout.tsx
+++ b/apps/frontend/src/features/layout/root-layout.tsx
@@ -73,13 +73,6 @@ export function RootLayout() {
             >
               Home
             </Link>
-            <Link
-              to="/about"
-              className="text-muted-foreground"
-              activeProps={{ className: 'text-foreground font-medium' }}
-            >
-              About
-            </Link>
             {isAuthenticated && currentComplexSlug && (
               <Link
                 to="/complex/$slug/edit"
diff --git a/apps/frontend/src/features/profile/profile-page.tsx b/apps/frontend/src/features/profile/profile-page.tsx
index 0a771db..c5f3972 100644
--- a/apps/frontend/src/features/profile/profile-page.tsx
+++ b/apps/frontend/src/features/profile/profile-page.tsx
@@ -1,19 +1,91 @@
 import { Link } from '@tanstack/react-router'
-import { useQuery } from '@tanstack/react-query'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
 import type { UserProfileResponse } from '@repo/api-contract'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { Button } from '@/components/ui/button'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
 import { apiClient } from '@/lib/api-client'
 import { useAuth } from '@/lib/auth'
 
+const updateProfileSchema = z.object({
+  fullName: z.string().min(1, 'El nombre es requerido'),
+})
+
+const updatePasswordSchema = z.object({
+  currentPassword: z.string().min(1, 'La contraseña actual es requerida'),
+  newPassword: z.string().min(6, 'La nueva contraseña debe tener al menos 6 caracteres'),
+  confirmPassword: z.string().min(1, 'La confirmación de contraseña es requerida'),
+}).refine((data) => data.newPassword === data.confirmPassword, {
+  message: 'Las contraseñas no coinciden',
+  path: ['confirmPassword'],
+})
+
+type UpdateProfileForm = z.infer<typeof updateProfileSchema>
+type UpdatePasswordForm = z.infer<typeof updatePasswordSchema>
+
 export function ProfilePage() {
-  const { user, displayName, initials, avatarUrl, isAuthenticated } = useAuth()
+  const { user, displayName, initials, avatarUrl, isAuthenticated, updateProfile, updatePassword } = useAuth()
+  const queryClient = useQueryClient()
   const profileQuery = useQuery({
     queryKey: ['user-profile'],
     enabled: isAuthenticated,
     queryFn: (): Promise<UserProfileResponse> => apiClient.user.getProfile(),
   })
 
+  const updateProfileForm = useForm<UpdateProfileForm>({
+    resolver: zodResolver(updateProfileSchema),
+    defaultValues: {
+      fullName: displayName,
+    },
+  })
+
+  const updatePasswordForm = useForm<UpdatePasswordForm>({
+    resolver: zodResolver(updatePasswordSchema),
+    defaultValues: {
+      currentPassword: '',
+      newPassword: '',
+      confirmPassword: '',
+    },
+  })
+
+  const updateProfileMutation = useMutation({
+    mutationFn: updateProfile,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['user-profile'] })
+      updateProfileForm.reset()
+    },
+  })
+
+  const updatePasswordMutation = useMutation({
+    mutationFn: async (data: UpdatePasswordForm) => {
+      // Note: Supabase doesn't require current password for password update
+      // The user needs to be recently authenticated
+      await updatePassword({ password: data.newPassword })
+    },
+    onSuccess: () => {
+      updatePasswordForm.reset()
+    },
+  })
+
+  const onUpdateProfile = (data: UpdateProfileForm) => {
+    updateProfileMutation.mutate(data)
+  }
+
+  const onUpdatePassword = (data: UpdatePasswordForm) => {
+    updatePasswordMutation.mutate(data)
+  }
+
   if (!isAuthenticated) {
     return (
       <main className="mx-auto flex min-h-[60vh] w-full max-w-6xl items-center justify-center px-6">
@@ -31,41 +103,143 @@ export function ProfilePage() {
   }
 
   return (
-    <main className="mx-auto flex min-h-[60vh] w-full max-w-6xl items-center justify-center px-6">
-      <section className="w-full max-w-3xl rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
-        <div className="flex items-center gap-3">
-          <Avatar size="lg">
-            <AvatarImage
-              src={profileQuery.data?.avatarUrl ?? avatarUrl ?? undefined}
-              alt={displayName}
-            />
-            <AvatarFallback>{initials}</AvatarFallback>
-          </Avatar>
-          <div>
-            <h1 className="text-2xl font-semibold">
-              {profileQuery.data?.fullName ?? displayName}
-            </h1>
-            <p className="text-sm text-muted-foreground">
-              {profileQuery.data?.email ?? user?.email}
-            </p>
-            {profileQuery.data?.role && (
+    <main className="mx-auto flex min-h-[60vh] w-full max-w-6xl items-center justify-center px-6 py-8">
+      <div className="w-full max-w-3xl space-y-6">
+        <section className="rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
+          <div className="flex items-center gap-3">
+            <Avatar size="lg">
+              <AvatarImage
+                src={profileQuery.data?.avatarUrl ?? avatarUrl ?? undefined}
+                alt={displayName}
+              />
+              <AvatarFallback>{initials}</AvatarFallback>
+            </Avatar>
+            <div>
+              <h1 className="text-2xl font-semibold">
+                {profileQuery.data?.fullName ?? displayName}
+              </h1>
               <p className="text-sm text-muted-foreground">
-                Rol: {profileQuery.data.role}
+                {profileQuery.data?.email ?? user?.email}
               </p>
-            )}
+              {profileQuery.data?.role && (
+                <p className="text-sm text-muted-foreground">
+                  Rol: {profileQuery.data.role}
+                </p>
+              )}
+            </div>
           </div>
-        </div>
 
-        {profileQuery.isLoading && (
-          <p className="mt-4 text-sm text-muted-foreground">Cargando perfil...</p>
-        )}
+          {profileQuery.isLoading && (
+            <p className="mt-4 text-sm text-muted-foreground">Cargando perfil...</p>
+          )}
 
-        {profileQuery.isError && (
-          <p className="mt-4 text-sm text-destructive">
-            No se pudo cargar el perfil desde el backend.
-          </p>
-        )}
-      </section>
+          {profileQuery.isError && (
+            <p className="mt-4 text-sm text-destructive">
+              No se pudo cargar el perfil desde el backend.
+            </p>
+          )}
+        </section>
+
+        <section className="rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
+          <h2 className="text-xl font-semibold mb-4">Editar Perfil</h2>
+          <Form {...updateProfileForm}>
+            <form onSubmit={updateProfileForm.handleSubmit(onUpdateProfile)} className="space-y-4">
+              <FormField
+                control={updateProfileForm.control}
+                name="fullName"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Nombre completo</FormLabel>
+                    <FormControl>
+                      <Input {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <Button
+                type="submit"
+                disabled={updateProfileMutation.isPending}
+              >
+                {updateProfileMutation.isPending ? 'Guardando...' : 'Guardar cambios'}
+              </Button>
+            </form>
+          </Form>
+          {updateProfileMutation.isError && (
+            <p className="mt-4 text-sm text-destructive">
+              Error al actualizar el perfil: {updateProfileMutation.error?.message}
+            </p>
+          )}
+          {updateProfileMutation.isSuccess && (
+            <p className="mt-4 text-sm text-green-600">
+              Perfil actualizado exitosamente.
+            </p>
+          )}
+        </section>
+
+        <section className="rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
+          <h2 className="text-xl font-semibold mb-4">Cambiar Contraseña</h2>
+          <Form {...updatePasswordForm}>
+            <form onSubmit={updatePasswordForm.handleSubmit(onUpdatePassword)} className="space-y-4">
+              <FormField
+                control={updatePasswordForm.control}
+                name="currentPassword"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Contraseña actual</FormLabel>
+                    <FormControl>
+                      <Input type="password" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={updatePasswordForm.control}
+                name="newPassword"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Nueva contraseña</FormLabel>
+                    <FormControl>
+                      <Input type="password" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={updatePasswordForm.control}
+                name="confirmPassword"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Confirmar nueva contraseña</FormLabel>
+                    <FormControl>
+                      <Input type="password" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <Button
+                type="submit"
+                disabled={updatePasswordMutation.isPending}
+              >
+                {updatePasswordMutation.isPending ? 'Cambiando...' : 'Cambiar contraseña'}
+              </Button>
+            </form>
+          </Form>
+          {updatePasswordMutation.isError && (
+            <p className="mt-4 text-sm text-destructive">
+              Error al cambiar la contraseña: {updatePasswordMutation.error?.message}
+            </p>
+          )}
+          {updatePasswordMutation.isSuccess && (
+            <p className="mt-4 text-sm text-green-600">
+              Contraseña cambiada exitosamente.
+            </p>
+          )}
+        </section>
+      </div>
     </main>
   )
 }
diff --git a/apps/frontend/src/lib/auth.tsx b/apps/frontend/src/lib/auth.tsx
index f950f62..4f7fd15 100644
--- a/apps/frontend/src/lib/auth.tsx
+++ b/apps/frontend/src/lib/auth.tsx
@@ -21,6 +21,14 @@ type SignUpParams = {
   fullName: string
 }
 
+type UpdateProfileParams = {
+  fullName: string
+}
+
+type UpdatePasswordParams = {
+  password: string
+}
+
 export type AuthContextValue = {
   user: User | null
   session: Session | null
@@ -31,6 +39,8 @@ export type AuthContextValue = {
   avatarUrl: string | null
   signInWithPassword: (params: SignInParams) => Promise<void>
   signUp: (params: SignUpParams) => Promise<{ requiresEmailConfirmation: boolean }>
+  updateProfile: (params: UpdateProfileParams) => Promise<void>
+  updatePassword: (params: UpdatePasswordParams) => Promise<void>
   signOut: () => Promise<void>
 }
 
@@ -143,6 +153,27 @@ export function AuthProvider({ children }: PropsWithChildren) {
           requiresEmailConfirmation: !data.session,
         }
       },
+      updateProfile: async ({ fullName }) => {
+        const { error } = await supabase.auth.updateUser({
+          data: {
+            full_name: fullName,
+            name: fullName,
+          },
+        })
+
+        if (error) {
+          throw error
+        }
+      },
+      updatePassword: async ({ password }) => {
+        const { error } = await supabase.auth.updateUser({
+          password,
+        })
+
+        if (error) {
+          throw error
+        }
+      },
       signOut: async () => {
         const { error } = await supabase.auth.signOut()
         if (error) {