Added routes

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

@@ -0,0 +1,41 @@
+import { Check } from 'lucide-react'
+import { Button, Modal } from '../../../components/ui'
+import { useGroupDetail } from './GroupDetailProvider'
+
+export function BulkCapacityModal() {
+  const {
+    isBulkCapacityModalOpen,
+    closeBulkCapacityModal,
+    confirmBulkImportOverCapacity,
+    validRowsCount,
+    attendeesTotal,
+    group,
+  } = useGroupDetail()
+
+  return (
+    <Modal
+      isOpen={isBulkCapacityModalOpen}
+      onClose={closeBulkCapacityModal}
+      title="Aviso de cupo"
+      description="La carga supera el cupo del grupo."
+      maxWidth="md"
+    >
+      <div className="space-y-4">
+        <p className="text-sm text-foreground/70">
+          Estás por importar <strong className="text-primary">{validRowsCount}</strong> miembro(s), pero el
+          grupo ya tiene <strong className="text-primary">{attendeesTotal}</strong> inscrito(s) y su cupo es
+          de <strong className="text-primary">{group?.capacity}</strong>. ¿Deseas importarlos de todos modos?
+        </p>
+        <div className="flex items-center justify-end gap-2.5 pt-2">
+          <Button variant="ghost" onClick={closeBulkCapacityModal}>
+            Cancelar
+          </Button>
+          <Button variant="primary" onClick={confirmBulkImportOverCapacity} className="gap-2">
+            <Check className="size-4" />
+            Importar de todos modos
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  )
+}