Adjust status logic in frontend

The status column now signifies if the role on that line is active or
not.

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

@@ -18,7 +18,8 @@ import Page from 'components/page'
 import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
 import { Guest, Role } from 'interfaces'
-import format from 'date-fns/format'
+import { isBefore, format } from 'date-fns'
+
 import SponsorGuestButtons from '../../components/sponsorGuestButtons'
 
 interface GuestProps {
@@ -43,7 +44,8 @@ const PersonLine = ({
   cancelCallback,
 }: PersonLineProps) => {
   const [t, i18n] = useTranslation(['common'])
-
+  const today = new Date()
+  today.setHours(0, 0, 0, 0)
   return (
     <TableRow
       key={`${person.first} ${person.last}`}
@@ -57,7 +59,7 @@ const PersonLine = ({
       </TableCell>
 
       {showStatusColumn &&
-        (person.active ? (
+        (!isBefore(role.end_date, today) ? (
           <TableCell sx={{ color: 'green' }} align="left">
             {t('common:active')}
           </TableCell>