Skip to content

jimfuqian/BB2-3280 Update POC frontend for C4DIC according to designs from FIGMA #76

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JFU-NAVA-PBC merged 4 commits into from
Sep 9, 2024
Merged

jimfuqian/BB2-3280 Update POC frontend for C4DIC according to designs from FIGMA #76

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
67fdf8b
final touches.
JFU-NAVA-PBC Aug 28, 2024
dde9f77
point to bb2 local from feature branch as server with FHIR_URL=test.b…
JFU-NAVA-PBC Aug 29, 2024
5d48c7d
render c4dic coverage supporting image etc.
JFU-NAVA-PBC Sep 3, 2024
3f19b6d
adjust code to process C4DIC Coverage from BFD TEST, e.g. payer as co…
JFU-NAVA-PBC Sep 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion client/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ function App() {
<Records />
</div>
</TabPanel>
<TabPanel id="dic-new-design" tab="Insurance Card (New Design)">
<TabPanel id="dic-new-design" tab="Insurance Card">
<a href='/card_only' target="_blank">Show in new window</a>
<div className="bb-c-c4dic-card-png default-card">
<InsuranceCard />
Expand Down
108 changes: 74 additions & 34 deletions client/src/components/c4dic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,14 +25,28 @@ export type CoverageInfo = {
status: string,
relationship: string, // self, spouse etc.
referenceYear: string,
cardImage: {
description: string,
label: string,
image: {
type: string,
data: string
}
},
colorPallette: {
foreground: string,
background: string,
highlight: string
},
c4dicSupportingImageSrc: string
}

export type InsuranceInfo = {
name: string,
gender: string,
dob: string,
identifier: string, // mbi
coverages: CoverageInfo[] // Part A, Part B, Part C, Part D
coverages: CoverageInfo[] // e.g. Part A, Part B, Part C, Part D
}

export type ErrorResponse = {
Expand Down Expand Up @@ -61,8 +75,24 @@ export default function InsuranceCard() {
endDate: c.endDate,
status: c.active,
relationship: c.relationship,
referenceYear: c.referenceYear}
referenceYear: c.referenceYear,
cardImage: {
description: c.cardImage.description,
label: c.cardImage.label,
image: {
type: c.cardImage.image.type,
data: c.cardImage.image.data
}
},
colorPallette: {
foreground: c.colorPallette.foreground,
background: c.colorPallette.background,
highlight: c.colorPallette.highlight
},
c4dicSupportingImageSrc: `data:image/png;base64,${c.cardImage.image.data}`
}
});

setInsInfo(
{
name: insuranceData.insData.name,
Expand Down Expand Up @@ -109,39 +139,49 @@ export default function InsuranceCard() {
return (
<div className="content-wrapper">
<div className="ins-c4dic-card">
<pre className="ins-fld-text">{insInfo?.name||""} Gender: {insInfo?.gender||""} DOB: {insInfo?.dob||""}</pre>
<pre className="ins-fld-text">MBI: {insInfo?.identifier||""}</pre>
<div className="pii-sec bb-c-c4dic-card-pii-area">
<pre className="ins-fld-text">Full Name: {insInfo?.name||""} Gender: {insInfo?.gender||""} DOB: {insInfo?.dob||""}</pre>
<pre className="ins-fld-text">MBI: {insInfo?.identifier||""}</pre>
</div>

{insInfo?.coverages.map(c => {
return (
<div>
<pre className="ins-fld-text">
Coverage Type: {c.clazz}
</pre>
<pre className="ins-fld-text">
Payer: {c.payer}
</pre>
<pre className="ins-fld-text">
Contract Number: {c.contractId}
</pre>
<pre className="ins-fld-text">
Start Date: {c.startDate}
</pre>
<pre className="ins-fld-text">
End Date: {c.endDate}
</pre>
<pre className="ins-fld-text">
Status: {c.status}
</pre>
<pre className="ins-fld-text">
Relationship to insured: {c.relationship||""}
</pre>
<pre className="ins-fld-text">
Reference Year: {c.referenceYear}
</pre>
</div>
)
})}
<div className="coverage-sec bb-c-c4dic-card-coverages-area">
{insInfo?.coverages.map(c => {
const coverageColorStyle = {
backgroundColor: c?.colorPallette?.highlight,
color: c?.colorPallette?.foreground,
};

return (
<div>
<pre className="ins-fld-text" style={coverageColorStyle}>
Coverage Type: {c.clazz}
</pre>
<pre className="ins-fld-text">
Payer: {c.payer}
</pre>
<pre className="ins-fld-text" style={coverageColorStyle}>
Contract Number: {c.contractId}
</pre>
<pre className="ins-fld-text">
Start Date: {c.startDate}
</pre>
<pre className="ins-fld-text" style={coverageColorStyle}>
End Date: {c.endDate}
</pre>
<pre className="ins-fld-text">
Status: {c.status}
</pre>
<pre className="ins-fld-text" style={coverageColorStyle}>
Relationship to insured: {c.relationship||""}
</pre>
<pre className="ins-fld-text">
Reference Year: {c.referenceYear}
</pre>
<img className="bb-c-card-img" src={c.c4dicSupportingImageSrc} alt="cardImage"></img>
</div>
)
})}
</div>
</div>
</div>
);
Expand Down
37 changes: 37 additions & 0 deletions client/src/styles/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,6 +160,43 @@ input[type=number]::-webkit-input-placeholder {
background-position: center;
}

.bb-c-c4dic-card-pii-area {
top: 65px;
background-color: transparent;
position: relative;
left: 10px;
padding: 10px;
}

.bb-c-c4dic-card-coverages-area {
top: 120px;
background-color: transparent;
position: relative;
left: 10px;
padding: 10px;
display: flex;
overflow-x: auto;
}

.bb-c-c4dic-1-coverage {
background-color: transparent;
position: relative;
padding: 10px;
border: 5px solid #d6d7d9;
}

.bb-c-card-img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 120px;
}

.bb-c-card-img:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
width: 470px;
}

.bb-c-card.default-card {
color: #323a45;
max-width: 700px;
Expand Down
10 changes: 1 addition & 9 deletions client/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8220,7 +8220,7 @@ react-transition-group@^4.4.2:
loose-envify "^1.4.0"
prop-types "^15.6.2"

react@^16.14.0, react@^18.0.0, react@^18.2.0, "react@>= 16", react@>=0.14.9, react@>=16.0.0, react@>=16.6.0, react@>=16.8, "react@0.14.x || ^15.0.0 || ^16.0.0":
react@^18.0.0, react@^18.2.0, "react@>= 16", react@>=0.14.9, react@>=16.0.0, react@>=16.6.0, react@>=16.8, "react@0.14.x || ^15.0.0 || ^16.0.0":
version "18.2.0"
resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
Expand Down Expand Up @@ -8548,14 +8548,6 @@ saxes@^5.0.1:
dependencies:
xmlchars "^2.2.0"

scheduler@^0.19.1:
version "0.19.1"
resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz"
integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"

scheduler@^0.23.0:
version "0.23.0"
resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz"
Expand Down
2 changes: 2 additions & 0 deletions docker-compose.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ services:
dockerfile: ./Dockerfile
args:
BUILD_DEVELOPMENT: ${BUILD_DEVELOPMENT}
environment:
HOST_IP: "192.168.0.144"
ports:
- "3001:3001"
- "10678:10678"
Expand Down
2 changes: 1 addition & 1 deletion server/Dockerfile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,4 +23,4 @@ RUN pipenv install --system --deploy --ignore-pipfile

EXPOSE 3001

CMD ["sh", "-c", "python -m debugpy --listen 0.0.0.0:10678 app.py"]
CMD ["sh", "-c", "python -u -m debugpy --listen 0.0.0.0:10678 app.py"]
Empty file added server/__init__.py
View file
Open in desktop
Empty file.
Loading