Skip to content
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

Patient header UI update in Patient details page #9377

Open
wants to merge 12 commits into
base: develop
Choose a base branch
from
+191 −180
Open

Patient header UI update in Patient details page #9377

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
316f2e2
patient header and other fixes
Mahendar0701 Dec 11, 2024
e1e7f6d
Merge branch 'develop' into patient-header-ui-design
Mahendar0701 Dec 11, 2024
82736a6
Merge branch 'develop' into patient-header-ui-design
Mahendar0701 Dec 11, 2024
38bcda5
changes
Mahendar0701 Dec 11, 2024
b6621a5
transfer label position updated
Mahendar0701 Dec 11, 2024
242e3d0
Merge branch 'develop' into patient-header-ui-design
Mahendar0701 Dec 11, 2024
1eb78d2
allergies
Mahendar0701 Dec 12, 2024
b408d5b
allergies
Mahendar0701 Dec 12, 2024
53ec8ad
changes
Mahendar0701 Dec 12, 2024
83d2fb8
adjusted margin
Mahendar0701 Dec 13, 2024
596e470
Merge branch 'develop' into patient-header-ui-design
Mahendar0701 Dec 13, 2024
86a3597
added varients to badge
Mahendar0701 Dec 13, 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
6 changes: 3 additions & 3 deletions public/locale/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -354,7 +354,6 @@
"asset_type": "Asset Type",
"assets": "Assets",
"assign": "Assign",
"unassign":"Unassign",
"assign_a_volunteer_to": "Assign a volunteer to {{name}}",
"assign_bed": "Assign Bed",
"assign_to_volunteer": "Assign to a Volunteer",
Expand Down Expand Up @@ -1118,7 +1117,7 @@
"patient_consultation__treatment__summary__spo2": "SpO2",
"patient_consultation__treatment__summary__temperature": "Temperature",
"patient_created": "Patient Created",
"patient_details": "Patient Details",
"patient_details": "Details of Patient",
"patient_details_incomplete": "Patient Details Incomplete",
"patient_face": "Patient Face",
"patient_name": "Patient name",
Expand Down Expand Up @@ -1444,6 +1443,7 @@
"type_your_comment": "Type your comment",
"type_your_reason_here": "Type your reason here",
"unable_to_get_current_position": "Unable to get current position.",
"unassign": "Unassign",
"unconfirmed": "Unconfirmed",
"unique_id": "Unique Id",
"unknown": "Unknown",
Expand Down Expand Up @@ -1558,8 +1558,8 @@
"voice_autofill": "Voice Autofill",
"volunteer_assigned": "Volunteer assigned successfully",
"volunteer_contact": "Volunteer Contact",
"volunteer_update" : "Volunteer updated successfully",
"volunteer_unassigned": "Volunteer unassigned successfully",
"volunteer_update": "Volunteer updated successfully",
"ward": "Ward",
"warranty_amc_expiry": "Warranty / AMC Expiry",
"weekly_working_hours_error": "Average weekly working hours must be a number between 0 and 168",
Expand Down
4 changes: 2 additions & 2 deletions src/components/Patient/PatientDetailsTab/Demography.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ export const Demography = (props: PatientProps) => {
const EmergencyContact = (props: { number?: string; name?: string }) => (
<div className="sm:col-span-2">
<div className="mr-6 flex flex-col items-start justify-between rounded-md border border-orange-300 bg-orange-50 p-4 sm:flex-row">
{/* Emergency Contact Section */}
{/* Emergency contact Section */}
<div className="flex-1">
<div className="text-sm font-normal leading-5 text-gray-600">
{t("emergency_contact")}
Expand Down Expand Up @@ -229,7 +229,7 @@ export const Demography = (props: PatientProps) => {
},
{
label: t("state"),
value: patientData.state,
value: patientData?.state_object?.name,
},
{
label: t("district"),
Expand Down
302 changes: 150 additions & 152 deletions src/components/Patient/PatientHome.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@ import Loading from "../Common/Loading";
import Page from "../Common/Page";
import { SkillModel, UserBareMinimum } from "../Users/models";
import { patientTabs } from "./PatientDetailsTab";
import { isPatientMandatoryDataFilled } from "./Utils";
import { AssignedToObjectModel, PatientModel, SampleTestModel } from "./models";

export const parseOccupation = (occupation: string | undefined) => {
Expand Down Expand Up @@ -284,173 +283,158 @@ export const PatientHome = (props: {
</div>
</div>

<div>
<div className="ml-auto mt-4 flex flex-wrap gap-3">
{isPatientMandatoryDataFilled(patientData) &&
(!patientData.last_consultation ||
patientData.last_consultation?.facility !==
patientData.facility ||
(patientData.last_consultation?.discharge_date &&
patientData.is_active)) && (
<span className="relative inline-flex">
<Chip
size="small"
variant="danger"
startIcon="l-notes"
text={t("no_consultation_filed")}
/>
<span className="absolute -right-1 -top-1 flex h-3 w-3 items-center justify-center">
<span className="center absolute inline-flex h-4 w-4 animate-ping rounded-full bg-red-400"></span>
<span className="relative inline-flex h-3 w-3 rounded-full bg-red-600"></span>
<div className=" flex gap-4 justify-between flex-wrap">
<div className="mt-4 flex gap-4">
<div>
<p className="text-xs font-normal leading-tight text-gray-600">
{t("facility")}:
</p>
<p className="mt-1 flex text-sm font-semibold leading-tight text-gray-900">
{patientData.facility_object?.name || "-"}
</p>
</div>

{patientData?.last_consultation
?.treating_physician_object && (
<div>
<h4 className="text-xs font-normal leading-tight text-gray-600">
{t("treating_doctor")}:
</h4>
<div className="mt-1 flex space-x-2">
<p className="flex text-sm font-semibold leading-tight text-gray-900">
{formatName(
patientData.last_consultation
.treating_physician_object,
)}
</p>
<span className="tooltip text-xs text-secondary-800 flex items-end font-normal leading-tight">
{!!skillsQuery.data?.results?.length &&
formatSkills(skillsQuery.data?.results)}
{(skillsQuery.data?.results?.length || 0) > 3 && (
<ul
className="tooltip-text tooltip-bottom flex flex-col text-xs font-medium"
role="tooltip"
>
{skillsQuery.data?.results.map((skill) => (
<li key={skill.skill_object.id}>
{skill.skill_object.name}
</li>
))}
</ul>
)}
</span>
</span>
)}
{patientData.is_vaccinated && (
<Chip
variant="custom"
size="small"
className="bg-blue-100 text-blue-800"
startIcon="l-syringe"
text={t("vaccinated")}
/>
</div>
</div>
)}
{patientData.allow_transfer ? (
<Chip
variant="warning"
size="small"
startIcon="l-unlock"
text={t("transfer_allowed")}
/>
) : (
<Chip
startIcon="l-lock"
size="small"
text={t("transfer_blocked")}
/>
{patientData?.last_consultation?.assigned_to_object && (
<div>
<p className="text-xs font-normal leading-tight text-gray-600">
{t("assigned_doctor")}:
</p>
<div className="mt-1 flex space-x-2 text-sm font-semibold leading-tight text-gray-900">
<p>
{formatName(
patientData.last_consultation.assigned_to_object,
)}
</p>
{patientData?.last_consultation?.assigned_to_object
.alt_phone_number && (
<a
href={`https://wa.me/${patientData.last_consultation.assigned_to_object.alt_phone_number.replace(/\D+/g, "")}`}
target="_blank"
rel="noreferrer"
className="flex items-center space-x-1 text-xs text-green-500"
>
<CareIcon icon="l-whatsapp" />{" "}
<span>{t("video_call")}</span>
</a>
Mahendar0701 marked this conversation as resolved.
Show resolved Hide resolved
)}
</div>
</div>
)}

{patientData.gender === 2 && (
<>
{patientData.is_antenatal &&
isAntenatal(
patientData.last_menstruation_start_date,
) && (
{patientData.assigned_to_object && (
<div>
<p className="text-xs font-normal leading-tight text-gray-600">
{t("assigned_volunteer")}:
</p>
<p className="mt-1 text-sm font-semibold leading-tight text-gray-900">
{formatName(patientData.assigned_to_object)}
</p>
</div>
)}
</div>

<div>
<div className="ml-auto mt-4 flex flex-wrap gap-3">
{!patientData?.last_consultation && (
<Chip
Mahendar0701 marked this conversation as resolved.
Show resolved Hide resolved
size="small"
className="bg-blue-100 text-blue-800"
text={t("Initial visit")}
/>
)}
{patientData.is_vaccinated && (
<Chip
variant="custom"
size="small"
className="bg-blue-100 text-blue-800"
startIcon="l-syringe"
text={t("vaccinated")}
/>
)}

{patientData.gender === 2 && (
<>
{patientData.is_antenatal &&
isAntenatal(
patientData.last_menstruation_start_date,
) && (
<Chip
variant="custom"
size="small"
className="border-pink-300 bg-pink-100 text-pink-600"
startIcon="l-baby-carriage"
text={t("antenatal")}
/>
)}
{isPostPartum(patientData.date_of_delivery) && (
<Chip
variant="custom"
size="small"
className="border-pink-300 bg-pink-100 text-pink-600"
startIcon="l-baby-carriage"
text={t("antenatal")}
text={t("post_partum")}
/>
)}
{isPostPartum(patientData.date_of_delivery) && (
<Chip
variant="custom"
size="small"
className="border-pink-300 bg-pink-100 text-pink-600"
startIcon="l-baby-carriage"
text={t("post_partum")}
/>
)}
</>
)}
{patientData.last_consultation?.is_telemedicine && (
<Chip
variant="alert"
size="small"
startIcon="l-phone"
text={t("TELEMEDICINE")}
/>
)}
{patientData.allergies &&
patientData.allergies.trim().length > 0 && (
</>
)}
{patientData.last_consultation?.is_telemedicine && (
<Chip
variant="danger"
variant="alert"
size="small"
text={t("has_allergies")}
startIcon="l-phone"
text={t("TELEMEDICINE")}
/>
)}
</div>
</div>

<div className="mt-4 flex gap-4">
<div>
<p className="text-xs font-normal leading-tight text-gray-600">
{t("facility")}:
</p>
<p className="mt-1 flex text-sm font-semibold leading-tight text-gray-900">
{patientData.facility_object?.name || "-"}
</p>
</div>

{patientData?.last_consultation?.treating_physician_object && (
<div>
<h4 className="text-xs font-normal leading-tight text-gray-600">
{t("treating_doctor")}:
</h4>
<div className="mt-1 flex space-x-2">
<p className="flex text-sm font-semibold leading-tight text-gray-900">
{formatName(
patientData.last_consultation
.treating_physician_object,
)}
</p>
<span className="tooltip text-xs text-secondary-800 flex items-end font-normal leading-tight">
{!!skillsQuery.data?.results?.length &&
formatSkills(skillsQuery.data?.results)}
{(skillsQuery.data?.results?.length || 0) > 3 && (
<ul
className="tooltip-text tooltip-bottom flex flex-col text-xs font-medium"
role="tooltip"
>
{skillsQuery.data?.results.map((skill) => (
<li key={skill.skill_object.id}>
{skill.skill_object.name}
</li>
))}
</ul>
)}
</span>
</div>
</div>
)}
{patientData?.last_consultation?.assigned_to_object && (
<div>
<p className="text-xs font-normal leading-tight text-gray-600">
{t("assigned_doctor")}:
</p>
<div className="mt-1 flex space-x-2 text-sm font-semibold leading-tight text-gray-900">
<p>
{formatName(
patientData.last_consultation.assigned_to_object,
)}
</p>
{patientData?.last_consultation?.assigned_to_object
.alt_phone_number && (
<a
href={`https://wa.me/${patientData.last_consultation.assigned_to_object.alt_phone_number.replace(/\D+/g, "")}`}
target="_blank"
rel="noreferrer"
className="flex items-center space-x-1 text-xs text-green-500"
>
<CareIcon icon="l-whatsapp" />{" "}
<span>{t("video_call")}</span>
</a>
{patientData.allergies &&
patientData.allergies.trim().length > 0 && (
<Chip
variant="danger"
size="small"
text={t("has_allergies")}
/>
)}
{patientData.state_object &&
patientData.district_object && (
<Chip
variant="secondary"
size="small"
text={`${t("Location: ")} ${patientData?.district_object?.name}, ${patientData?.state_object?.name}`}
/>
)}
</div>
</div>
)}

{patientData.assigned_to_object && (
<div>
<p className="text-xs font-normal leading-tight text-gray-600">
{t("assigned_volunteer")}:
</p>
<p className="mt-1 text-sm font-semibold leading-tight text-gray-900">
{formatName(patientData.assigned_to_object)}
</p>
</div>
)}
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -584,7 +568,21 @@ export const PatientHome = (props: {
</div>
</div>
</section>
<hr />
<hr className="mb-2" />
{patientData.allow_transfer ? (
<Chip
size="small"
startIcon="l-unlock"
text={t("transfer_allowed")}
/>
) : (
<Chip
variant="warning"
startIcon="l-lock"
size="small"
text={t("transfer_blocked")}
/>
)}
<div
id="actions"
className="my-2 flex h-full flex-col justify-between space-y-2"
Expand Down
Loading