Show number of guests in categories

Resolves: GREG-193

frontend/src/routes/sponsor/frontpage/index.tsx

@@ -217,7 +217,9 @@ const InvitedGuests = ({ persons }: GuestProps) => {
       <StyledAccordionSummary
         expandIcon={<ArrowUpwardIcon sx={{ fill: 'black' }} />}
       >
-        <Typography variant="h2">{t('common:sentInvitations')}</Typography>
+        <Typography variant="h2">
+          {`${t('common:sentInvitations')} (${guests.length})`}
+        </Typography>
       </StyledAccordionSummary>
       <AccordionDetails>
         <Typography variant="body1">
@@ -248,7 +250,9 @@ const ActiveGuests = ({ persons }: GuestProps) => {
       <StyledAccordionSummary
         expandIcon={<ArrowUpwardIcon sx={{ fill: 'black' }} />}
       >
-        <Typography variant="h2">{t('common:activeGuests')}</Typography>
+        <Typography variant="h2">
+          {`${t('common:activeGuests')} (${guests.length})`}
+        </Typography>
       </StyledAccordionSummary>
       <AccordionDetails>
         <Typography variant="body1">
@@ -281,7 +285,7 @@ const WaitingGuests = ({ persons }: GuestProps) => {
         expandIcon={<ArrowUpwardIcon sx={{ fill: 'black' }} />}
       >
         <Typography variant="h2">
-          {t('common:waitingGuests')}{' '}
+          {`${t('common:waitingGuests')} (${guests.length})`}{' '}
           {guests.length > 0 && (
             <NotificationsActiveIcon
               sx={{ color: 'error.main', fontSize: '1.625rem' }}