From c4ea4591a14549f721e7930d0f1f722ab158ccdd Mon Sep 17 00:00:00 2001 From: Elena Tretiakova <vesnushkalena@gmail.com> Date: Mon, 13 Jan 2025 13:07:59 +0100 Subject: [PATCH] Add explanationary widget to dashboard --- .../Dashboard/ExplanatoryTextWidget.tsx | 36 +++++++++++++++++++ .../Dashboard/RequiredFormsWidget/index.tsx | 2 +- .../PatientDetails/Dashboard/config.ts | 4 +++ .../PatientDetails/Dashboard/styles.ts | 11 ++++++ src/locale/en/messages.po | 20 +++++++++-- 5 files changed, 70 insertions(+), 3 deletions(-) create mode 100644 src/containers/PatientDetails/Dashboard/ExplanatoryTextWidget.tsx create mode 100644 src/containers/PatientDetails/Dashboard/styles.ts diff --git a/src/containers/PatientDetails/Dashboard/ExplanatoryTextWidget.tsx b/src/containers/PatientDetails/Dashboard/ExplanatoryTextWidget.tsx new file mode 100644 index 0000000..1608601 --- /dev/null +++ b/src/containers/PatientDetails/Dashboard/ExplanatoryTextWidget.tsx @@ -0,0 +1,36 @@ +import { Trans } from '@lingui/macro'; + +import { Text } from '@beda.software/emr/components'; + +import { S } from './styles'; + +export function ExplanatoryTextWidget() { + return ( + <S.Content> + <Text style={{ fontWeight: 500 }}> + <Trans> + With over 40,000,000 mammograms run annually in the US, there are psychological consequences of + breast cancer imaging that are well documented among patients such as stress and anxiety from + largely false positive or indeterminant readings by radiologists. + </Trans> + </Text> + <br /> + <br /> + <Text style={{ fontWeight: 500 }}> + <Trans>The research purpose of this + project is to determine how we may develop Artificial Intelligence (AI) models of breast imaging + that facilitate new ways of detecting and treating disease and improve patient outcomes by + assembling a de-identified breast cancer radiographic imaging repository. + </Trans> + </Text> + <br /> + <br /> + <Text style={{ fontWeight: 500 }}> + <Trans>This project also aims to + document how patients may use a trusted social health or wellness network to better understand their + imaging. + </Trans> + </Text> + </S.Content> + ); +} diff --git a/src/containers/PatientDetails/Dashboard/RequiredFormsWidget/index.tsx b/src/containers/PatientDetails/Dashboard/RequiredFormsWidget/index.tsx index 9200458..fbf68d4 100644 --- a/src/containers/PatientDetails/Dashboard/RequiredFormsWidget/index.tsx +++ b/src/containers/PatientDetails/Dashboard/RequiredFormsWidget/index.tsx @@ -10,7 +10,7 @@ import { RenderRemoteData } from '@beda.software/fhir-react'; import { RequiredFormsWidgetData, useRequiredFormsWidget } from './hooks'; export function RequiredFormsWidget(props: { patient: Patient }) { - const title = t`Required forms`; + const title = t`Sign up for The Breast Cancer AI Study!`; const { patient } = props; const { response } = useRequiredFormsWidget(patient); const navigate = useNavigate(); diff --git a/src/containers/PatientDetails/Dashboard/config.ts b/src/containers/PatientDetails/Dashboard/config.ts index a877aef..3e83dba 100644 --- a/src/containers/PatientDetails/Dashboard/config.ts +++ b/src/containers/PatientDetails/Dashboard/config.ts @@ -3,12 +3,16 @@ import type { Dashboard, DashboardInstance } from '@beda.software/emr/dist/compo import { GeneralIInformationWidget } from './GeneralIInformationWidget'; import { MedicalImagesAuthorizationWidget } from './MedicalImagesAuthorizationWidget'; import { RequiredFormsWidget } from './RequiredFormsWidget'; +import { ExplanatoryTextWidget } from './ExplanatoryTextWidget'; export const patientDashboardConfig: DashboardInstance = { top: [ { widget: GeneralIInformationWidget, }, + { + widget: ExplanatoryTextWidget, + }, ], left: [ { diff --git a/src/containers/PatientDetails/Dashboard/styles.ts b/src/containers/PatientDetails/Dashboard/styles.ts new file mode 100644 index 0000000..0a6330f --- /dev/null +++ b/src/containers/PatientDetails/Dashboard/styles.ts @@ -0,0 +1,11 @@ +import styled from 'styled-components'; + +export const S = { + Content: styled.div` + border-radius: 10px; + background-color: ${({ theme }) => theme.neutralPalette.gray_2}; + color: ${({ theme }) => theme.neutralPalette.gray_13}; + border: 1px solid ${({ theme }) => theme.antdTheme?.colorBorderSecondary}; + padding: 10px 16px; + `, +}; diff --git a/src/locale/en/messages.po b/src/locale/en/messages.po index 8a19ca5..65e043f 100644 --- a/src/locale/en/messages.po +++ b/src/locale/en/messages.po @@ -113,8 +113,8 @@ msgid "Request a new link" msgstr "" #: src/containers/PatientDetails/Dashboard/RequiredFormsWidget/index.tsx:13 -msgid "Required forms" -msgstr "" +#~ msgid "Required forms" +#~ msgstr "" #: src/containers/SetPassword/index.tsx:37 msgid "Save" @@ -146,6 +146,10 @@ msgstr "" msgid "Sign Up" msgstr "" +#: src/containers/PatientDetails/Dashboard/RequiredFormsWidget/index.tsx:13 +msgid "Sign up for The Breast Cancer AI Study!" +msgstr "" + #: src/containers/ForgotPassword/index.tsx:82 #: src/containers/SetPassword/index.tsx:61 #: src/containers/SignUp/index.tsx:86 @@ -156,6 +160,14 @@ msgstr "" msgid "Submitted?" msgstr "" +#: src/containers/PatientDetails/Dashboard/ExplanatoryTextWidget.tsx:20 +msgid "The research purpose of this project is to determine how we may develop Artificial Intelligence (AI) models of breast imaging that facilitate new ways of detecting and treating disease and improve patient outcomes by assembling a de-identified breast cancer radiographic imaging repository." +msgstr "" + +#: src/containers/PatientDetails/Dashboard/ExplanatoryTextWidget.tsx:29 +msgid "This project also aims to document how patients may use a trusted social health or wellness network to better understand their imaging." +msgstr "" + #: src/containers/SignUp/index.tsx:49 #~ msgid "We have sent you email. Please click on the link in the email to complete registration" #~ msgstr "" @@ -168,6 +180,10 @@ msgstr "" msgid "We have sent you email. Please click on the link in the email to reset your password." msgstr "" +#: src/containers/PatientDetails/Dashboard/ExplanatoryTextWidget.tsx:11 +msgid "With over 40,000,000 mammograms run annually in the US, there are psychological consequences of breast cancer imaging that are well documented among patients such as stress and anxiety from largely false positive or indeterminant readings by radiologists." +msgstr "" + #: src/containers/PatientDetails/Dashboard/RequiredFormsWidget/index.tsx:40 msgid "Yes" msgstr ""