41 lines
1.4 KiB
TypeScript
41 lines
1.4 KiB
TypeScript
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>
|
|
)
|
|
} |