Repository: strapi/strapi
File: packages/core/admin/ee/admin/src/components/AuditLogs/Widgets.tsx (TypeScript)

Code before:
  const navigate = useNavigate();

  const getAuditLogDetailsLink = (item: AuditLog): string => {
    return `/settings/audit-logs?pageSize=${AUDIT_LOGS_DEFAULT_PAGE_SIZE}&page=1&sort=date:DESC&id=${item.id}`;
  };

  const handleRowClick = (document: AuditLog) => () => {
    trackUsage('willOpenAuditLogDetails');
    const link = getAuditLogDetailsLink(document);
    navigate(link);
  };

  return (
    <Table colCount={4} rowCount={items?.length ?? 0}>
      <Tbody>
        {items?.map((item) => {
          const action = formatMessage(
            {
              id: `Settings.permissions.auditLogs.${item.action}`,
              // @ts-expect-error – getDefaultMessage probably doesn't benefit from being so strongly typed unless we just add string at the end.
              defaultMessage: getDefaultMessage(item.action),
            },
            { model: (item.payload?.model as string) ?? '' }
          );
          const actionDate = formatTimeStamp(item.date);
          const userDisplayName = item?.user?.displayName ?? '-';
          return (
            <Tr
              onClick={handleRowClick(item)}
              cursor="pointer"
              key={`lastActivity_auditLog_${item.id}`}
            >
              <Td>
                <Typography title={action} variant="omega" textColor="neutral800">
                  {action}
                </Typography>
              </Td>
              <Td>
                <Typography title={actionDate} variant="omega" textColor="neutral800">
                  {actionDate}
                </Typography>
              </Td>
              <Td>
                <Typography title={userDisplayName} variant="omega" textColor="neutral800">
                  {userDisplayName}
                </Typography>
              </Td>
              <Td onClick={(e) => e.stopPropagation()}>
                <Box display="inline-block">
                  <IconButton
                    tag={Link}

Review comment (suggestion):
i'm a bit confused by when you use optional chaining and when you don't. you should only use the ? if TS says the value can be null/undefined

Code after:
  &::first-letter {
    text-transform: uppercase;
  }
`;

const LastActivityTable = ({ items }: { items: AuditLog[] }) => {
  const { formatMessage } = useIntl();
  const { trackUsage } = useTracking();
  const navigate = useNavigate();

  const getAuditLogDetailsLink = (item: AuditLog): string => {
    return `/settings/audit-logs?pageSize=${AUDIT_LOGS_DEFAULT_PAGE_SIZE}&page=1&sort=date:DESC&id=${item.id}`;
  };

  const handleRowClick = (document: AuditLog) => () => {
    trackUsage('willOpenAuditLogDetails');
    const link = getAuditLogDetailsLink(document);
    navigate(link);
  };

  return (
    <Table colCount={4} rowCount={items?.length ?? 0}>
      <Tbody>
        {items?.map((item) => {
          const action = formatMessage(
            {
              id: `Settings.permissions.auditLogs.${item.action}`,
              // @ts-expect-error – getDefaultMessage probably doesn't benefit from being so strongly typed unless we just add string at the end.
              defaultMessage: getDefaultMessage(item.action),
            },
            { model: (item.payload.model as string) ?? '' }
          );
          const userDisplayName = item.user?.displayName ?? '-';
          return (
            <Tr
              onClick={handleRowClick(item)}
              cursor="pointer"
              key={`lastActivity_auditLog_${item.id}`}
            >
              <Td>
                <Typography title={action} variant="omega" textColor="neutral800">
                  {action}
                </Typography>
              </Td>
              <Td>
                <Typography variant="omega" textColor="neutral800">
                  <RelativeTime timestamp={new Date(item.date)} />
                </Typography>
              </Td>
              <Td>
                <Typography title={userDisplayName} variant="omega" textColor="neutral800">