diff --git a/public/images/ecr-viewer_how-it-works.gif b/public/images/ecr-viewer_how-it-works.gif new file mode 100644 index 0000000..5e5c67c Binary files /dev/null and b/public/images/ecr-viewer_how-it-works.gif differ diff --git a/src/app/components/Footer/Footer.tsx b/src/app/components/Footer/Footer.tsx index c82d640..b8eca94 100644 --- a/src/app/components/Footer/Footer.tsx +++ b/src/app/components/Footer/Footer.tsx @@ -17,7 +17,7 @@ export default function Footer() { Home , - + Our products , diff --git a/src/app/components/Header/Header.tsx b/src/app/components/Header/Header.tsx index deaab11..006daa5 100644 --- a/src/app/components/Header/Header.tsx +++ b/src/app/components/Header/Header.tsx @@ -46,7 +46,7 @@ const heroContent: HeroContent = { const navigationItems = [ { key: 'products', - href: '/our-products', + href: '/products', text: 'Our products', }, { diff --git a/src/app/components/NavigationLink/NavigationLink.tsx b/src/app/components/NavigationLink/NavigationLink.tsx index 059ad34..6f693a0 100644 --- a/src/app/components/NavigationLink/NavigationLink.tsx +++ b/src/app/components/NavigationLink/NavigationLink.tsx @@ -12,9 +12,15 @@ export function NavigationLink({ onClick, }: NavigationLinkProps) { const pathname = usePathname(); - const isActive = pathname === href; + const isActive = pathname.includes(href.toString()); + return ( - + {valueSection.description}

- + {valueSection.ctaText} diff --git a/src/app/product-detail/page.tsx b/src/app/product-detail/page.tsx deleted file mode 100644 index a03c743..0000000 --- a/src/app/product-detail/page.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import Link from 'next/link'; - -export default function ProductDetail() { - return ( -
-

Product Detail

-
    -
  • - Home -
    • -
  • - Our products -
    • -
  • - Product detail -
    • -
  • - Resources -
    • -
-
- ); -} diff --git a/src/app/products/ecr-viewer/page.tsx b/src/app/products/ecr-viewer/page.tsx new file mode 100644 index 0000000..fff3ff0 --- /dev/null +++ b/src/app/products/ecr-viewer/page.tsx @@ -0,0 +1,664 @@ +'use client'; +import { ContentContainer } from '@/app/components/ContentContainer/ContentContainer'; +import Hero from '@/app/components/Hero/Hero'; +import { basePath } from '@/app/utils/constants'; +import { + ProcessList, + ProcessListItem, + ProcessListHeading, + Accordion, + Link, + SideNav, +} from '@trussworks/react-uswds'; +import classNames from 'classnames'; +import Image from 'next/image'; +import { SetStateAction, useState } from 'react'; +import './styles.scss'; + +export default function EcrViewer() { + return ( +
+ + +
+
+
+ +
+
+
+
+
+

Overview

+
+

+ + The eCR Viewer is a tool that aims to improve the + usability of electronic case reporting (eCR) data by + displaying a summary of key data contained in an eCR + document so that public health staff can quickly find the + information they need. + + + In user research with public health staff, we've heard + that eCR data is often difficult to make sense of — it's + like getting someone's entire medical record dropped on + your desk. The eCR Viewer aims to make relevant + information easier to find by displaying eCR data in a way + that's more intuitive. + + + There are two versions of the eCR Viewer — one that's + integrated directly into a case surveillance system, and + another that's an independent tool. + + + The integrated version allows users to access the eCR + Viewer directly within their surveillance system, + replacing the existing way they view eCR documents. Direct + integration is currently supported by NBS (National + Electronic Disease Surveillance System Base System). + + + The non-integrated version offers a standalone tool for + non-NBS jurisdictions to manage and view eCR documents + separately from their surveillance system. + +

+
+
+
+
+

The value to you

+
    +
  • + Surfaces the most relevant information in a summary at the top + of the eCR, so any staff member can quickly find the + information they need +
    • +
  • + Combines information from both the eICR and RR, so + epidemiologists reviewing the eCR can understand why it was + sent to their jurisdiction +
    • +
  • + Lives outside your case surveillance system as an API, which + reduces storage burden on your overall system while allowing + seamless access for epidemiologists who need it +
    • +
  • + Keeps data formats consistent regardless of which EHR system + generated the eCR +
    • +
  • Open source and free to use
    • +
  • + Offers flexible hosting, either within your jurisdiction or + through a CDC-hosted option +
    • +
+
+
+
+

Demo

+
+ placeholder video + + See how the eCR Viewer can improve the way your jurisdiction + uses eCR data. + +
+
+
+
+
+
+

Product features

+

+ Using the eCR Viewer, public health staff can easily find + data relevant to a reportable condition. The eCR Viewer + offers several features that make eCR data more usable for + your jurisdiction. +

+
+
+

eCR Summary

+

+ The eCR Viewer surfaces key information in a summary at the + top of the eCR document, helping you understand the eCR + document at a glance. This eCR Summary is divided into three + categories: Patient Summary, Encounter Summary, and + Condition Summary. +

+
+ eCR Viewer - how it works +
+

Combined RR and eICR

+

+ + The eCR Viewer combines electronic initial case report + (eICR) and Reportability Response (RR) data together, + enabling you to see all of the reportable conditions for + the eCR, why the eCR was triggered, and which + jurisdictions the eCR was sent to, none of which are + possible to view in the eICR data alone. + + + The eCR Viewer also pulls out more data fields from the + eICR XML, allowing public health staff to see more data + than what's currently available by default in the HTML or + surveillance system views + +

+
+
+

Consistent data display

+

+ No matter who sent the eCR, every eCR you view in the eCR + Viewer will look the same. The eCR Viewer groups the full + eCR document into five main sections: +

+
    +
  • Patient Info
    • +
  • Encounter Info
    • +
  • Clinical Info
    • +
  • Lab Info
    • +
  • eCR Metadata
    • +
+

+ The ordering of the five main sections, as well as the + fields within those sections, is always the same, so you can + quickly scroll through the eCR to find the information + you're looking for. +

+
+
+
+
+

How it works

+
+
+

We currently offer two versions of the eCR Viewer.

+
    +
  1. Direct integration with NBS
    2. +
  2. Standalone option for non-NBS jurisdictions
    3. +
+

Below, we outline how each version works.

+
+
+

Integrated eCR Viewer

+

+ The integrated version allows users to access the eCR Viewer + directly within their surveillance system. Direct + integration is currently supported by NBS. Once installed, + the eCR Viewer is activated from the existing eCR document + view in NBS, using the “View eICR Document” button. This + will open a separate window with the eCR Viewer. +

+
+
+

Non-integrated eCR Viewer

+

+ The non-integrated version offers a standalone tool for + users to view eCR documents outside of their jurisdiction's + surveillance system. In addition to the core eCR Viewer, + this tool provides an eCR Library homepage, allowing users + to filter and sort eCR documents. Users would log into the + standalone tool separately from their surveillance system. +

+
+
+
+
+
+
+

Getting started

+
+

+ Before you can use the eCR Viewer, you'll need to set it + up and get your staff comfortable with how the eCR Viewer + can help improve their data workflows. +

+
+

+ What's expected from a pilot partner: +

+
    +
  • + Work with the DIBBs team to set expectations and + establish a regular meeting cadence +
    • +
  • + Deploy the eCR Viewer in your production environment +
    • +
  • + Provide feedback on an ongoing basis to ensure the eCR + Viewer in working properly +
    • +
+
+
+
+ + + + Gather your team + +

+ You'll need someone at your jurisdiction to act as the + point of contact with the DIBBs team as well as a + technical point of contact who is familiar with your data + environment. Sometimes one person fills both of those + roles. +

+ + + + Attend kickoff call + +

+ During this kickoff, we'll discuss how eCR Viewer works, + the technical requirements, and your eCR data needs. +

+ + + + Get set up + +

+ Work with the DIBBs team to test the eCR Viewer with your + staff and to get the tool up and running in your data + environment. +

+ + + + Provide ongoing feedback + +

+ Tell us what's going well and what could be better so we + can improve your experience with the eCR Viewer. +

+ + +
+
+
+
+

+ Technical resources +

+

+ Find the resources you need to successfully use the eCR Viewer + in your jurisdiction. +

+
+
+

Installing eCR Viewer

+
    +
  • + + Non Integrated Viewer Installation Guide + +
    • +
  • + + Installation Guide for NBS integration + +
    • +
  • + DIBBs Installation Guide - Helm +
    • +
  • + Hosting options +
    • +
+
+
+

Maintenance & Support

+
    +
  • + Runbook for common issues +
    • +
  • + Maintenance guide +
    • +
  • + Customer Support Plan Technical +
    • +
+
+
+

Terraform

+
    +
  • + AWS Terraform Installation +
    • +
  • + Azure Terraform Installation +
    • +
+
+
+

Troubleshooting

+
    +
  • + Usage Guide +
    • +
  • + Azure Technical Testing +
    • +
+
+
+
+
+
+
+

FAQs

+

+ Find answers to commonly asked questions about the eCR Viewer. +

+
+ + Case investigators, epidemiologists, and other public + health practitioners who actively reference eCRs for + their work will use the eCR Viewer as a workflow + optimization tool. + + ), + }, + { + id: '2', + className: 'bg-background', + headingLevel: 'h3', + expanded: false, + title: + 'What case surveillance systems are compatible with eCR Viewer?', + content: ( + <> + We have two versions of eCR Viewer currently available: +
    +
  1. A version integrated directly within NBS
    2. +
  2. + A standalone version that operates outside of a + jurisdiction's surveillance system +
    3. +
+ We are also working on a direct integration with + EpiTrax. If you're interested in integrating the eCR + Viewer with other surveillance systems, please reach out + to us at . + + ), + }, + { + id: '3', + className: 'bg-background', + headingLevel: 'h3', + expanded: false, + title: 'Where can I find the eCR Viewer within NBS?', + content: ( + <> + You can open the eCR Viewer by clicking the “View eICR + Document” button while looking at the eCR page in NBS. + Clicking this button would open the new eCR Viewer, + replacing the existing eCR document viewer. + + ), + }, + { + id: '4', + className: 'bg-background', + headingLevel: 'h3', + expanded: false, + title: + "Can my jurisdiction set up eCR Viewer if we don't use NBS?", + content: ( + <> + Yes! The standalone eCR Viewer offers flexibility for + jurisdictions with other surveillance systems (e.g., + Maven). Staff will be able to view eCR documents through + a separate homepage called the eCR Library rather than + within the surveillance system itself. + + ), + }, + { + id: '5', + className: 'bg-background', + headingLevel: 'h3', + expanded: false, + title: + 'Who at our organization needs to be involved to set up this tool? ', + content: ( + <> + We'll need participation from several people in your + public health department to successfully set up the eCR + Viewer. This includes: +
    +
  1. + A jurisdictional subject matter expert who can help + the DIBBs team understand how and where DIBBs + tooling could be hosted +
      +
    1. + This could be an engineer or IT personnel, + either directly embedded in your public health + department or shared at the jurisdiction. +
      2. +
    +
    2. +
  2. + An eCR expert who is familiar with existing eCR + workflows and data sources +
      +
    1. + This could be an epidemiologist, program + manager, or anyone else in your jurisdiction who + is familiar with existing eCR data workflows. +
      2. +
    +
    3. +
+ + ), + }, + { + id: '6', + className: 'bg-background', + headingLevel: 'h3', + expanded: false, + title: + 'Can you speak to privacy preservation in your tool?', + content: ( + <> + All information is transmitted and protected using + standards mandated by individual jurisdictions or the + Department of Health and Human Services as applicable + based on hosting location. + + ), + }, + { + id: '7', + className: 'bg-background', + headingLevel: 'h3', + expanded: false, + title: 'What is the long-term viability of this product?', + content: ( + <> + Our team is working with stakeholders at CDC to + establish a roadmap for near- and long-term support. As + eCR data becomes more embedded in the public health + ecosystem, this product will also give your jurisdiction + the chance to provide direct feedback to CDC on what you + need to make eCR data as usable as possible to improve + public health outcomes. + + ), + }, + { + id: '8', + className: 'bg-background', + headingLevel: 'h3', + expanded: false, + title: 'How do I get started?', + content: ( + <> + Reach out to our team at for a free + consultation and find our whether the eCR Viewer is + right for your jurisdiction. + + ), + }, + ]} + /> +
+

Have a question that isn't answered above?

+

+ Please get in touch with our team at +

+
+
+
+
+ +
+
+ +
+ ); +} + +function Navigation() { + const [selectedHash, setSelectedHash] = useState('#overview'); + + return ( + , + , + , + , + , + , + ]} + /> + ); +} + +interface NavItemProps { + title: string; + id: string; + selectedHash: string; + setSelectedHash: (value: SetStateAction) => void; +} +function NavItem({ title, id, selectedHash, setSelectedHash }: NavItemProps) { + const itemHash = `#${id}`; + return ( + setSelectedHash(itemHash)} + > + {title} + + ); +} + +interface GithubNavProps { + version: string; + githubHref: string; +} + +function GithubNav({ version, githubHref }: GithubNavProps) { + return ( +
+
+

+ Current version: {version} +

+
+ + GitHub Respository + +
+
+ ); +} + +function SendMailLink() { + return ( + + dibbs@cdc.gov + + ); +} diff --git a/src/app/products/ecr-viewer/styles.scss b/src/app/products/ecr-viewer/styles.scss new file mode 100644 index 0000000..255053d --- /dev/null +++ b/src/app/products/ecr-viewer/styles.scss @@ -0,0 +1,28 @@ +li.usa-process-list__item { + border-left-color: #dae9ee; + + &:before { + background-color: var(--background); + color: #6499af; + box-shadow: 0 0; + border-color: #6499af; + } + + h4 { + color: #224a58; + } +} + +button.usa-accordion__button { + background-color: #dae9ee; + + &:hover { + background-color: #cce0e7; // placeholder color + } +} + +.list__full-width { + li { + min-width: 100%; + } +} diff --git a/src/app/our-products/page.tsx b/src/app/products/page.tsx similarity index 99% rename from src/app/our-products/page.tsx rename to src/app/products/page.tsx index e3833f8..3a36f45 100644 --- a/src/app/our-products/page.tsx +++ b/src/app/products/page.tsx @@ -25,7 +25,7 @@ function StandaloneProducts() { clinical information for conditions present in the eCR." imgSrc={`${basePath}/images/placeholder.png`} linkText="Learn more about eCR Viewer" - linkToHref="#" + linkToHref="/products/ecr-viewer" /> Home
  • - Our products + Our products
  • Product detail