Added routes

apps/web/src/features/groups/detail/RemoveAttendeeModal.tsx

@@ -0,0 +1,99 @@
+import { Clock, Loader2, Trash2, UserCheck, UserMinus } from 'lucide-react'
+import { Button, Modal } from '../../../components/ui'
+import { useGroupDetail } from './GroupDetailProvider'
+
+export function RemoveAttendeeModal() {
+  const {
+    attendeeToRemove,
+    cancelRemoveAttendee,
+    confirmRemoveAttendee,
+    group,
+    firstWaitlistEntry,
+    waitlistTotal,
+    isSubmittingRemoval,
+  } = useGroupDetail()
+
+  return (
+    <Modal
+      isOpen={attendeeToRemove !== null}
+      onClose={cancelRemoveAttendee}
+      title="Quitar del grupo"
+      maxWidth="md"
+    >
+      {attendeeToRemove ? (
+        <div className="space-y-4">
+          <p className="text-sm text-foreground/70">
+            {attendeeToRemove.fullName} dejará de ser miembro del grupo{' '}
+            <strong className="text-primary">{group?.name}</strong>
+            {firstWaitlistEntry ? ' y el cupo quedará libre.' : '.'}
+            {attendeeToRemove.phone ? (
+              <span className="mt-1 block text-xs text-foreground/50">Teléfono: {attendeeToRemove.phone}</span>
+            ) : null}
+          </p>
+
+          {firstWaitlistEntry ? (
+            <div className="space-y-3 rounded-xl border border-accent/20 bg-accent-soft p-4">
+              <div className="flex items-center gap-2 text-xs font-semibold text-primary">
+                <Clock className="size-4 text-accent" />
+                <span>
+                  Hay {waitlistTotal} persona{waitlistTotal === 1 ? '' : 's'} esperando un cupo
+                </span>
+              </div>
+              <p className="text-sm text-foreground/80">
+                ¿Quieres pasar a <strong className="text-primary">{firstWaitlistEntry.fullName}</strong>, el
+                primero de la lista de espera, al grupo?
+              </p>
+              <div className="flex flex-col gap-2.5 pt-1">
+                <Button
+                  variant="primary"
+                  onClick={() => confirmRemoveAttendee(true)}
+                  disabled={isSubmittingRemoval}
+                  className="gap-2"
+                >
+                  {isSubmittingRemoval ? (
+                    <Loader2 className="size-4 animate-spin" />
+                  ) : (
+                    <UserCheck className="size-4" />
+                  )}
+                  <span>Quitar y pasar a {firstWaitlistEntry.fullName} al grupo</span>
+                </Button>
+                <Button
+                  variant="outline"
+                  onClick={() => confirmRemoveAttendee(false)}
+                  disabled={isSubmittingRemoval}
+                  className="gap-2"
+                >
+                  {isSubmittingRemoval ? (
+                    <Loader2 className="size-4 animate-spin" />
+                  ) : (
+                    <UserMinus className="size-4" />
+                  )}
+                  <span>Solo quitar del grupo</span>
+                </Button>
+              </div>
+            </div>
+          ) : (
+            <div className="flex items-center justify-end gap-2.5 border-t border-border pt-2">
+              <Button variant="ghost" onClick={cancelRemoveAttendee}>
+                Cancelar
+              </Button>
+              <Button
+                variant="primary"
+                onClick={() => confirmRemoveAttendee(false)}
+                disabled={isSubmittingRemoval}
+                className="gap-2"
+              >
+                {isSubmittingRemoval ? (
+                  <Loader2 className="size-4 animate-spin" />
+                ) : (
+                  <Trash2 className="size-4" />
+                )}
+                <span>Quitar del grupo</span>
+              </Button>
+            </div>
+          )}
+        </div>
+      ) : null}
+    </Modal>
+  )
+}