@ltht-react/timeline 2.0.3 → 2.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ltht-react/timeline",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "> TODO: description",
   "author": "Jonny Dyson",
   "homepage": "",
@@ -8,7 +8,8 @@
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
   "files": [
-    "lib"
+    "lib",
+    "src"
   ],
   "directories": {
     "lib": "lib",
@@ -23,15 +24,15 @@
   },
   "dependencies": {
     "@emotion/styled": "^11.0.0",
-    "@ltht-react/banner": "^2.0.3",
-    "@ltht-react/hooks": "^2.0.3",
-    "@ltht-react/icon": "^2.0.3",
-    "@ltht-react/select": "^2.0.3",
-    "@ltht-react/styles": "^2.0.3",
-    "@ltht-react/types": "^2.0.3",
-    "@ltht-react/utils": "^2.0.3",
+    "@ltht-react/banner": "^2.0.4",
+    "@ltht-react/hooks": "^2.0.4",
+    "@ltht-react/icon": "^2.0.4",
+    "@ltht-react/select": "^2.0.4",
+    "@ltht-react/styles": "^2.0.4",
+    "@ltht-react/types": "^2.0.4",
+    "@ltht-react/utils": "^2.0.4",
     "html-react-parser": "^5.0.6",
     "react": "^18.2.0"
   },
-  "gitHead": "6f18742bbf2f44123b6478257e52fbbdd291a25b"
+  "gitHead": "b8fe243323a0f1b9ab345475db38c73fd3b35312"
 }

package/src/atoms/timeline-author.tsx

@@ -0,0 +1,88 @@
+import { FC, HTMLAttributes } from 'react'
+import Icon from '@ltht-react/icon'
+import styled from '@emotion/styled'
+
+import {
+  AuditEvent,
+  DocumentReference,
+  Maybe,
+  QuestionnaireResponse,
+  TimelineDomainResourceType,
+} from '@ltht-react/types'
+import PRIMARY_AUTHOR from '../constants'
+
+const StyledTimelineItemLeft = styled.div`
+  flex-grow: 1;
+`
+
+const TimelineAuthor: FC<Props> = ({ domainResource, domainResourceType, ...rest }) => {
+  if (!domainResource) return <></>
+
+  switch (domainResourceType) {
+    case TimelineDomainResourceType.QuestionnaireResponse: {
+      const qr = domainResource as QuestionnaireResponse
+      if (!qr?.author) {
+        return <></>
+      }
+      return (
+        <StyledTimelineItemLeft {...rest}>
+          <Icon type="user" size="medium" color="grey" /> by {qr?.author?.display}
+        </StyledTimelineItemLeft>
+      )
+    }
+    case TimelineDomainResourceType.DocumentReference: {
+      const docRef = domainResource as DocumentReference
+      const authorList: string[] = []
+
+      if (docRef?.author == null) {
+        return <></>
+      }
+
+      docRef.author.forEach((auth) => {
+        if (auth) {
+          authorList.push(auth.specialty ? `${auth.fullName} (${auth.specialty})` : `${auth.fullName}`)
+        }
+      })
+
+      if (authorList.length === 0) {
+        return <></>
+      }
+
+      return (
+        <StyledTimelineItemLeft {...rest}>
+          <Icon type="user" size="medium" color="grey" /> by {authorList.join(', ')}
+        </StyledTimelineItemLeft>
+      )
+    }
+    case TimelineDomainResourceType.AuditEvent: {
+      const audit = domainResource as AuditEvent
+      let authorName = ''
+
+      audit.agent.forEach((agent) => {
+        agent?.role?.forEach((role) => {
+          const isPrimaryAuthor = !!role?.coding?.find((x) => x?.code === PRIMARY_AUTHOR)
+          !authorName && isPrimaryAuthor && (authorName = agent.who?.display || '')
+        })
+      })
+
+      if (!authorName) {
+        return <></>
+      }
+
+      return (
+        <StyledTimelineItemLeft {...rest}>
+          <Icon type="user" size="medium" color="grey" /> by {authorName}
+        </StyledTimelineItemLeft>
+      )
+    }
+  }
+
+  return <></>
+}
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  domainResource?: Maybe<AuditEvent | QuestionnaireResponse | DocumentReference>
+  domainResourceType: TimelineDomainResourceType
+}
+
+export default TimelineAuthor

package/src/atoms/timeline-button.tsx

@@ -0,0 +1,44 @@
+import { ButtonBanner } from '@ltht-react/banner'
+import Icon from '@ltht-react/icon'
+import { FC, HTMLAttributes } from 'react'
+import { ITimelineItem } from '../molecules/timeline-item'
+
+const TimelineButton: FC<Props> = ({ timelineItem, className }) => {
+  const { clickHandler, buttonState, buttonText } = timelineItem
+
+  switch (buttonState) {
+    case 'no-button':
+      return <></>
+    case 'permission-denied-button':
+      return (
+        <ButtonBanner className={className} type="warning" disabled>
+          {buttonText ?? 'Insufficient privileges to view this item'}
+        </ButtonBanner>
+      )
+    case 'selectable-button':
+      return (
+        <ButtonBanner className={className} type="info" onClick={clickHandler}>
+          {buttonText ?? ''}
+        </ButtonBanner>
+      )
+    case 'selected-button':
+      return (
+        <ButtonBanner
+          className={className}
+          type="highlight"
+          icon={<Icon type="info-circle" color="info-blue" size="medium" />}
+          onClick={clickHandler}
+        >
+          {buttonText ?? ''}
+        </ButtonBanner>
+      )
+    default:
+      throw new Error('ButtonState must be a valid value.')
+  }
+}
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  timelineItem: ITimelineItem
+}
+
+export default TimelineButton

package/src/atoms/timeline-description.tsx

@@ -0,0 +1,52 @@
+import { FC, HTMLAttributes } from 'react'
+import {
+  AuditEvent,
+  DocumentReference,
+  Maybe,
+  QuestionnaireResponse,
+  TimelineDomainResourceType,
+} from '@ltht-react/types'
+import parseHtml from 'html-react-parser'
+import styled from '@emotion/styled'
+
+const StyledDescription = styled.div`
+  p {
+    margin: 0 0.2rem;
+    display: inline;
+  }
+`
+
+const TimelineDescription: FC<Props> = ({ domainResource, domainResourceType, ...rest }) => {
+  if (!domainResource) return <></>
+
+  switch (domainResourceType) {
+    case TimelineDomainResourceType.QuestionnaireResponse: {
+      const qr = domainResource as QuestionnaireResponse
+      if (!qr.questionnaire?.description) {
+        return <></>
+      }
+      return <StyledDescription {...rest}>{parseHtml(qr.questionnaire?.description)}</StyledDescription>
+    }
+    case TimelineDomainResourceType.DocumentReference: {
+      const docRef = domainResource as DocumentReference
+      return docRef.description ? <>{docRef.description}</> : <></>
+    }
+    case TimelineDomainResourceType.AuditEvent: {
+      const audit = domainResource as AuditEvent
+      if (!audit.outcomeDesc) {
+        return <></>
+      }
+
+      return <StyledDescription {...rest}>{parseHtml(audit.outcomeDesc)}</StyledDescription>
+    }
+    default:
+      return <></>
+  }
+}
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  domainResource?: Maybe<AuditEvent | QuestionnaireResponse | DocumentReference>
+  domainResourceType: TimelineDomainResourceType
+}
+
+export default TimelineDescription

package/src/atoms/timeline-time.tsx

@@ -0,0 +1,49 @@
+import { FC, HTMLAttributes } from 'react'
+import {
+  AuditEvent,
+  DocumentReference,
+  Maybe,
+  QuestionnaireResponse,
+  TimelineDomainResourceType,
+} from '@ltht-react/types'
+import { formatTime } from '@ltht-react/utils'
+
+const TimelineTime: FC<Props> = ({ domainResource, domainResourceType, ...rest }) => {
+  if (!domainResource) return <></>
+
+  switch (domainResourceType) {
+    case TimelineDomainResourceType.QuestionnaireResponse: {
+      const qr = domainResource as QuestionnaireResponse
+      if (!qr?.authored?.value) {
+        return <></>
+      }
+      const time = formatTime(new Date(qr?.authored.value))
+      return <div {...rest}>{time}</div>
+    }
+    case TimelineDomainResourceType.DocumentReference: {
+      const docRef = domainResource as DocumentReference
+      if (docRef && docRef?.created?.value) {
+        const time = formatTime(new Date(docRef.created.value))
+        return <div {...rest}>{time}</div>
+      }
+      return <></>
+    }
+    case TimelineDomainResourceType.AuditEvent: {
+      const audit = domainResource as AuditEvent
+      if (audit && audit?.recorded?.value) {
+        const time = formatTime(new Date(audit.recorded.value))
+        return <div {...rest}>{time}</div>
+      }
+      return <></>
+    }
+    default:
+      return <></>
+  }
+}
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  domainResource?: Maybe<AuditEvent | QuestionnaireResponse | DocumentReference>
+  domainResourceType: TimelineDomainResourceType
+}
+
+export default TimelineTime

package/src/atoms/timeline-title-redacted.tsx

@@ -0,0 +1,13 @@
+import { FC, HTMLAttributes } from 'react'
+import { TEXT_COLOURS } from '@ltht-react/styles'
+import styled from '@emotion/styled'
+
+const StyledRedactedMessage = styled.div`
+  color: ${TEXT_COLOURS.SECONDARY.VALUE};
+`
+
+const TimelineTitleRedacted: FC<HTMLAttributes<HTMLDivElement>> = (props) => (
+  <StyledRedactedMessage {...props}>Insufficient Privileges</StyledRedactedMessage>
+)
+
+export default TimelineTitleRedacted

package/src/atoms/timeline-title.tsx

@@ -0,0 +1,41 @@
+import { FC, HTMLAttributes } from 'react'
+import {
+  AuditEvent,
+  DocumentReference,
+  Maybe,
+  QuestionnaireResponse,
+  TimelineDomainResourceType,
+} from '@ltht-react/types'
+
+const TimelineTitle: FC<Props> = ({ domainResource, domainResourceType, ...rest }) => {
+  if (!domainResource) return <></>
+
+  switch (domainResourceType) {
+    case TimelineDomainResourceType.QuestionnaireResponse: {
+      const qr = domainResource as QuestionnaireResponse
+      const questionnaireTitle = qr.metadata.isRedacted
+        ? 'Insufficient privileges'
+        : qr.text?.text ?? qr.questionnaire?.title
+      return <div {...rest}>{questionnaireTitle}</div>
+    }
+    case TimelineDomainResourceType.DocumentReference: {
+      const docRef = domainResource as DocumentReference
+      const docTitle = docRef.metadata.isRedacted ? 'Insufficient privileges' : docRef.text?.text
+      return <div {...rest}>{docTitle}</div>
+    }
+    case TimelineDomainResourceType.AuditEvent: {
+      const audit = domainResource as AuditEvent
+      const auditTitle = audit.metadata.isRedacted ? 'Insufficient privileges' : audit.text?.text
+      return <div {...rest}>{auditTitle}</div>
+    }
+    default:
+      return <></>
+  }
+}
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  domainResource?: Maybe<AuditEvent | QuestionnaireResponse | DocumentReference>
+  domainResourceType: TimelineDomainResourceType
+}
+
+export default TimelineTitle

package/src/constants.ts

@@ -0,0 +1,3 @@
+const PRIMARY_AUTHOR = 'PRIMAUTH'
+
+export default PRIMARY_AUTHOR

package/src/index.tsx

@@ -0,0 +1,6 @@
+import Timeline, { ITimelineFilter, ITimelineFilterOption } from './organisms/timeline'
+import { ITimelineItem } from './molecules/timeline-item'
+import PRIMARY_AUTHOR from './constants'
+
+export default Timeline
+export { ITimelineItem, ITimelineFilter, ITimelineFilterOption, PRIMARY_AUTHOR }

package/src/molecules/timeline-item-redacted.tsx

@@ -0,0 +1,47 @@
+import { FC } from 'react'
+import styled from '@emotion/styled'
+import { HIGHLIGHT_GREEN, TRANSLUCENT_DARK_BLUE } from '@ltht-react/styles'
+import { useWindowSize } from '@ltht-react/hooks'
+import { isMobileView } from '@ltht-react/utils'
+import TimelineTitleRedacted from '../atoms/timeline-title-redacted'
+
+const StyledTimelineItem = styled.div<IStyledTimelineItem>`
+  background-color: ${({ isSelected }) => (isSelected ? HIGHLIGHT_GREEN.VALUE : TRANSLUCENT_DARK_BLUE)};
+  padding: 0.5rem;
+`
+const StyledTimelineItemTop = styled.div`
+  display: flex;
+  color: black;
+  padding-bottom: 0.25rem;
+`
+const StyledTitle = styled.div<IStyledMobile>`
+  flex-grow: 1;
+  color: black;
+  font-size: ${({ isMobile }) => (isMobile ? 'medium' : 'large')};
+  font-weight: bold;
+`
+
+const TimelineItemRedacted: FC = () => {
+  const { width } = useWindowSize()
+  const isMobile = isMobileView(width)
+
+  return (
+    <StyledTimelineItem isSelected={false}>
+      <StyledTimelineItemTop>
+        <StyledTitle isMobile={isMobile}>
+          <TimelineTitleRedacted />
+        </StyledTitle>
+      </StyledTimelineItemTop>
+    </StyledTimelineItem>
+  )
+}
+
+interface IStyledTimelineItem {
+  isSelected: boolean
+}
+
+interface IStyledMobile {
+  isMobile: boolean
+}
+
+export default TimelineItemRedacted

package/src/molecules/timeline-item.tsx

@@ -0,0 +1,129 @@
+import { FC } from 'react'
+import styled from '@emotion/styled'
+import { HIGHLIGHT_GREEN, TRANSLUCENT_DARK_BLUE } from '@ltht-react/styles'
+import {
+  AuditEvent,
+  DocumentReference,
+  Maybe,
+  QuestionnaireResponse,
+  TimelineDomainResourceType,
+} from '@ltht-react/types'
+import { useWindowSize } from '@ltht-react/hooks'
+import { isMobileView } from '@ltht-react/utils'
+import TimelineDescription from '../atoms/timeline-description'
+import TimelineAuthor from '../atoms/timeline-author'
+import TimelineTitle from '../atoms/timeline-title'
+import TimelineTime from '../atoms/timeline-time'
+import TimelineButton from '../atoms/timeline-button'
+
+const StyledTimelineItem = styled.div<IStyledTimelineItem>`
+  background-color: ${({ isSelected }) => (isSelected ? HIGHLIGHT_GREEN.VALUE : TRANSLUCENT_DARK_BLUE)};
+  padding-top: 0.5rem;
+`
+
+const StyledTimelineAuthor = styled(TimelineAuthor)`
+  flex-grow: 1;
+  margin-bottom: 0.5rem;
+`
+
+const StyledTimelineTime = styled(TimelineTime)`
+  color: black;
+`
+
+const StyledTimelineItemTop = styled.div`
+  display: flex;
+  color: black;
+  padding-bottom: 0.25rem;
+  margin: 0.5rem;
+`
+
+const StyledTimelineItemMiddle = styled.div`
+  color: black;
+  padding-bottom: 1rem;
+  margin: 0.5rem;
+`
+
+const StyledTimelineItemBottom = styled.div`
+  color: grey;
+  display: flex;
+  margin: 0.5rem;
+`
+
+const StyledTimelineTitle = styled(TimelineTitle, {
+  shouldForwardProp: (prop) => prop !== 'isMobile',
+})<IStyledMobile>`
+  flex-grow: 1;
+  color: black;
+  font-size: ${({ isMobile }) => (isMobile ? 'medium' : 'large')};
+  font-weight: bold;
+`
+
+const StyledTimelineDescription = styled(TimelineDescription)`
+  color: black;
+  font-size: small;
+`
+
+const TimelineItem: FC<IProps> = ({ timelineItem, domainResourceType }) => {
+  const { width } = useWindowSize()
+  const isMobile = isMobileView(width)
+
+  if (!timelineItem?.domainResource) {
+    return <></>
+  }
+
+  const { domainResource, buttonState } = timelineItem
+
+  const itemKey = `timelineItem_${domainResource.id}`
+
+  return (
+    <StyledTimelineItem isSelected={buttonState === 'selected-button'} key={itemKey}>
+      <StyledTimelineItemTop>
+        <StyledTimelineTitle
+          isMobile={isMobile}
+          domainResource={domainResource}
+          domainResourceType={domainResourceType}
+        />
+        {isMobile && (
+          <StyledTimelineTime domainResource={timelineItem.domainResource} domainResourceType={domainResourceType} />
+        )}
+      </StyledTimelineItemTop>
+
+      <StyledTimelineItemMiddle>
+        <StyledTimelineDescription
+          domainResource={timelineItem.domainResource}
+          domainResourceType={domainResourceType}
+        />
+      </StyledTimelineItemMiddle>
+
+      <StyledTimelineItemBottom>
+        <StyledTimelineAuthor domainResource={timelineItem.domainResource} domainResourceType={domainResourceType} />
+      </StyledTimelineItemBottom>
+
+      <TimelineButton timelineItem={timelineItem} />
+    </StyledTimelineItem>
+  )
+}
+
+interface IProps {
+  timelineItem: Maybe<ITimelineItem>
+  domainResourceType: TimelineDomainResourceType
+}
+
+export interface ITimelineItem {
+  domainResource?: Maybe<AuditEvent | QuestionnaireResponse | DocumentReference>
+  buttonState: TimeLineItemButtonState
+  clickHandler?(): void
+  buttonText?: string
+}
+
+type TimeLineItemButtonState = 'no-button' | 'selectable-button' | 'selected-button' | 'permission-denied-button'
+
+interface IStyledTimelineItem {
+  isSelected: boolean
+}
+
+interface IStyledMobile {
+  isMobile: boolean
+}
+
+export default TimelineItem

package/src/organisms/timeline.tsx

@@ -0,0 +1,415 @@
+import { FC, useEffect, useState } from 'react'
+import styled from '@emotion/styled'
+import Icon from '@ltht-react/icon'
+import { TEXT_COLOURS, BANNER_COLOURS, TABLET_MINIMUM_MEDIA_QUERY } from '@ltht-react/styles'
+import {
+  AuditEvent,
+  DocumentReference,
+  Maybe,
+  QuestionnaireResponse,
+  TimelineDomainResourceType,
+} from '@ltht-react/types'
+import { formatDate, formatDateExplicitMonth, formatTime, isMobileView } from '@ltht-react/utils'
+import { useWindowSize } from '@ltht-react/hooks'
+import Select from '@ltht-react/select'
+
+import TimelineTime from '../atoms/timeline-time'
+import TimelineItem, { ITimelineItem } from '../molecules/timeline-item'
+import TimelineItemRedacted from '../molecules/timeline-item-redacted'
+
+const StyledTimeline = styled.div`
+  position: relative;
+  margin: -0.75rem;
+`
+
+const StyledTimelineDayBody = styled.div<IStyledMobile>`
+  background-color: white;
+  position: relative;
+
+  &:before {
+    content: '';
+    position: absolute;
+    z-index: 1;
+    height: ${({ isMobile }) => (isMobile ? '0%' : '100%')};
+    left: calc(50% - 1px);
+    border-width: 0 0 0 2px;
+    border-color: ${TEXT_COLOURS.INFO};
+    border-style: solid;
+  }
+`
+
+const StyledTimelineDayHeader = styled.div`
+  background-color: ${BANNER_COLOURS.DEFAULT.BACKGROUND};
+  padding: 0.5rem;
+  text-align: center;
+  font-weight: bold;
+`
+
+const StyledTimelineDayItem = styled.div<IStyledMobile>`
+  display: inline-block;
+  width: 100%;
+  justify-content: center;
+  padding: ${({ isMobile }) => (isMobile ? '' : '0 0.5rem')};
+  margin: ${({ isMobile }) => (isMobile ? '0.5rem 0' : '1rem 0')};
+`
+
+const StyledTimelineDayContent = styled.div<IStyledMobile>`
+  width: ${({ isMobile }) => (isMobile ? '100%' : '49%')};
+  padding: 0 0.5rem;
+  display: inline-block;
+  vertical-align: top;
+`
+
+const StyledTimelineDayLine = styled.div`
+  width: 2%;
+  vertical-align: top;
+  margin-top: 0.125rem;
+  display: inline-block;
+  text-align: center;
+  position: relative;
+  height: 100%;
+`
+
+const StyledTimelineDayTimeLeft = styled.div`
+  width: 49%;
+  padding: 0 0.5rem;
+  display: inline-block;
+  vertical-align: top;
+  text-align: right;
+  font-weight: bold;
+`
+
+const StyledTimelineDayTimeRight = styled.div`
+  width: 49%;
+  padding: 0 0.5rem;
+  display: inline-block;
+  vertical-align: top;
+  text-align: left;
+  font-weight: bold;
+`
+
+const StyledOuterCircle = styled(Icon)`
+  position: absolute;
+  z-index: 1;
+  transform: translate(-50%);
+  -webkit-transform: translate(-50%);
+  -ms-transform: translate(-50%);
+  left: 50%;
+  color: ${TEXT_COLOURS.INFO};
+  font-size: 0.75rem;
+`
+
+const StyledInnerCircle = styled(Icon)`
+  position: absolute;
+  z-index: 2;
+  top: 0.125rem;
+  transform: translate(-50%);
+  -webkit-transform: translate(-50%);
+  -ms-transform: translate(-50%);
+  left: 50%;
+  color: white;
+  font-size: 0.5rem;
+`
+
+const StyledFilters = styled.div`
+  position: sticky;
+  margin-bottom: 1rem;
+  top: 0;
+  background-color: ${BANNER_COLOURS.DEFAULT.BACKGROUND};
+  z-index: 1000;
+  padding: 0.5em;
+  display: block;
+
+  ${TABLET_MINIMUM_MEDIA_QUERY} {
+    display: flex;
+    padding: 1em;
+  }
+`
+
+const StyledFilter = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 0.5rem;
+
+  ${TABLET_MINIMUM_MEDIA_QUERY} {
+    max-width: 200px;
+  }
+
+  > select {
+    min-width: 100px;
+    flex: 2;
+
+    ${TABLET_MINIMUM_MEDIA_QUERY} {
+      flex: unset;
+    }
+  }
+
+  > label {
+    flex: 1;
+    white-space: pre;
+    padding-right: 0.5em;
+
+    ${TABLET_MINIMUM_MEDIA_QUERY} {
+      flex: unset;
+    }
+  }
+`
+
+const Timeline: FC<IProps> = ({ timelineItems, domainResourceType, filters, onFilterChange }) => {
+  const { width } = useWindowSize()
+  const isMobile = isMobileView(width)
+  const timelineDates: { [date: string]: { item: Maybe<ITimelineItem>[]; formattedDate: string } } = {}
+  const [activeFilters, setActiveFilters] = useState<Record<number, string>>({})
+  useEffect(() => setActiveFilters([]), [filters])
+
+  timelineItems?.forEach((timelineItem) => {
+    if (!timelineItem?.domainResource) {
+      return
+    }
+    let date = ''
+    let displayDate = ''
+
+    switch (domainResourceType) {
+      case TimelineDomainResourceType.QuestionnaireResponse: {
+        const qr = timelineItem?.domainResource as QuestionnaireResponse
+        if (!qr.authored?.value) {
+          return
+        }
+        date = formatDate(new Date(qr.authored?.value))
+        displayDate = formatDateExplicitMonth(new Date(qr.authored?.value))
+        break
+      }
+
+      case TimelineDomainResourceType.DocumentReference: {
+        const docRef = timelineItem?.domainResource as DocumentReference
+        if (!docRef.created?.value) {
+          return
+        }
+        date = formatDate(new Date(docRef.created.value))
+        displayDate = formatDateExplicitMonth(new Date(docRef.created.value))
+        break
+      }
+
+      case TimelineDomainResourceType.AuditEvent: {
+        const audit = timelineItem?.domainResource as AuditEvent
+        if (!audit.recorded?.value) {
+          return
+        }
+        date = formatDate(new Date(audit.recorded?.value))
+        displayDate = formatDateExplicitMonth(new Date(audit.recorded?.value))
+        break
+      }
+      default:
+        throw Error('Unrecognised resource type')
+    }
+
+    const lookup = timelineDates[date]
+    if (!lookup) {
+      timelineDates[date] = { item: [timelineItem], formattedDate: displayDate }
+    } else {
+      lookup.item.push(timelineItem)
+      timelineDates[date] = lookup
+    }
+  })
+
+  let position = 0
+
+  const handleFilterChange = (key: number, filter: ITimelineFilter, value?: string) => {
+    const newActiveFilters = { ...activeFilters }
+
+    if (value && value.length > 0 && filter.options.some((x) => x.value === value)) {
+      newActiveFilters[key] = value
+    } else {
+      delete newActiveFilters[key]
+    }
+
+    setActiveFilters(newActiveFilters)
+    onFilterChange && onFilterChange(Object.values(newActiveFilters).filter((x) => x && x.length > 0))
+  }
+
+  return (
+    <StyledTimeline key="timeline" data-testid="timeline">
+      {filters && (
+        <StyledFilters>
+          {filters.map((filter, key) => (
+            <StyledFilter key={key}>
+              <label htmlFor={`${filter.label}-${key}`}>{filter.label}:</label>
+              <Select
+                id={`${filter.label}-${key}`}
+                options={filter.options}
+                onChange={(e) => handleFilterChange(key, filter, e.target.value)}
+              />
+            </StyledFilter>
+          ))}
+        </StyledFilters>
+      )}
+      {Object.entries(timelineDates).map(([dateKey, value]) => {
+        position += 1
+        return (
+          <div key={dateKey} data-testid={dateKey}>
+            <StyledTimelineDayHeader>{value.formattedDate}</StyledTimelineDayHeader>
+            <StyledTimelineDayBody isMobile={isMobile}>
+              {value.item?.map((timelineItem, idx) => {
+                let content: JSX.Element = <></>
+                if (!timelineItem?.domainResource) {
+                  return <></>
+                }
+                let currentTime = ''
+                let previousTime = ''
+
+                switch (domainResourceType) {
+                  case TimelineDomainResourceType.QuestionnaireResponse: {
+                    const qr = timelineItem?.domainResource as QuestionnaireResponse
+                    if (!qr.authored?.value) {
+                      return <></>
+                    }
+                    currentTime = formatTime(new Date(qr.authored.value))
+                    previousTime = currentTime
+
+                    if (idx > 0) {
+                      const previousItem = value.item[idx - 1]?.domainResource as QuestionnaireResponse
+                      if (!previousItem?.authored?.value) {
+                        return <></>
+                      }
+                      previousTime = formatTime(new Date(previousItem?.authored.value))
+                    }
+                    break
+                  }
+                  case TimelineDomainResourceType.DocumentReference: {
+                    const docRef = timelineItem?.domainResource as DocumentReference
+                    if (!docRef.created?.value) {
+                      return <></>
+                    }
+                    currentTime = formatTime(new Date(docRef.created.value))
+                    previousTime = currentTime
+
+                    if (idx > 0) {
+                      const previousItem = value.item[idx - 1]?.domainResource as DocumentReference
+                      if (!previousItem?.created?.value) {
+                        return <></>
+                      }
+                      previousTime = formatTime(new Date(previousItem?.created?.value))
+                    }
+                    break
+                  }
+                  case TimelineDomainResourceType.AuditEvent: {
+                    const audit = timelineItem?.domainResource as AuditEvent
+                    if (!audit.recorded?.value) {
+                      return <></>
+                    }
+                    currentTime = formatTime(new Date(audit.recorded?.value))
+                    previousTime = currentTime
+
+                    if (idx > 0) {
+                      const previousItem = value.item[idx - 1]?.domainResource as AuditEvent
+                      if (!previousItem?.recorded?.value) {
+                        return <></>
+                      }
+                      previousTime = formatTime(new Date(previousItem?.recorded?.value))
+                    }
+                    break
+                  }
+                }
+
+                if (currentTime !== previousTime) {
+                  position += 1
+                }
+
+                const itemKey = `timeline_day_item_${dateKey}_${currentTime}_${idx}`
+
+                const isRedacted = timelineItem.domainResource.metadata.isRedacted ?? false
+
+                if (isMobile) {
+                  content = (
+                    <StyledTimelineDayContent isMobile>
+                      {isRedacted ? (
+                        <TimelineItemRedacted />
+                      ) : (
+                        <TimelineItem timelineItem={timelineItem} domainResourceType={domainResourceType} />
+                      )}
+                    </StyledTimelineDayContent>
+                  )
+                } else if (position % 2 === 1) {
+                  const contentKey = `content_left_${itemKey}`
+                  content = (
+                    <div key={contentKey} data-testid={contentKey}>
+                      <StyledTimelineDayContent isMobile={false}>
+                        {isRedacted ? (
+                          <TimelineItemRedacted />
+                        ) : (
+                          <TimelineItem timelineItem={timelineItem} domainResourceType={domainResourceType} />
+                        )}
+                      </StyledTimelineDayContent>
+                      <StyledTimelineDayLine>
+                        <StyledOuterCircle type="circle" color="info-blue" size="medium" />
+                        <StyledInnerCircle type="circle" color="info-blue" size="medium" />
+                      </StyledTimelineDayLine>
+                      <StyledTimelineDayTimeRight>
+                        <TimelineTime
+                          domainResource={timelineItem?.domainResource}
+                          domainResourceType={domainResourceType}
+                        />
+                      </StyledTimelineDayTimeRight>
+                    </div>
+                  )
+                } else if (position % 2 === 0) {
+                  const contentKey = `content_right_${itemKey}`
+                  content = (
+                    <div key={contentKey} data-testid={contentKey}>
+                      <StyledTimelineDayTimeLeft>
+                        <TimelineTime
+                          domainResource={timelineItem?.domainResource}
+                          domainResourceType={domainResourceType}
+                        />
+                      </StyledTimelineDayTimeLeft>
+                      <StyledTimelineDayLine>
+                        <StyledOuterCircle type="circle" color="info-blue" size="medium" />
+                        <StyledInnerCircle type="circle" color="info-blue" size="medium" />
+                      </StyledTimelineDayLine>
+                      <StyledTimelineDayContent isMobile={false}>
+                        {isRedacted ? (
+                          <TimelineItemRedacted />
+                        ) : (
+                          <TimelineItem timelineItem={timelineItem} domainResourceType={domainResourceType} />
+                        )}
+                      </StyledTimelineDayContent>
+                    </div>
+                  )
+                }
+
+                return (
+                  <StyledTimelineDayItem isMobile={isMobile} key={itemKey} data-testid={itemKey}>
+                    {content}
+                  </StyledTimelineDayItem>
+                )
+              })}
+            </StyledTimelineDayBody>
+          </div>
+        )
+      })}
+    </StyledTimeline>
+  )
+}
+
+interface IProps {
+  timelineItems: Maybe<ITimelineItem>[]
+  domainResourceType: TimelineDomainResourceType
+  filters?: ITimelineFilter[]
+  onFilterChange?: (value: string[]) => void
+}
+
+interface IStyledMobile {
+  isMobile: boolean
+}
+
+export interface ITimelineFilter {
+  label: string
+  options: ITimelineFilterOption[]
+}
+
+export interface ITimelineFilterOption {
+  value?: string
+  label: string
+}
+
+export default Timeline