diff --git a/src/components/Auth/ResetPassword.tsx b/src/components/Auth/ResetPassword.tsx index 1f75e5a1ff6..5c15b8840af 100644 --- a/src/components/Auth/ResetPassword.tsx +++ b/src/components/Auth/ResetPassword.tsx @@ -1,5 +1,6 @@ +import { useMutation, useQuery } from "@tanstack/react-query"; import { navigate } from "raviger"; -import { useEffect, useState } from "react"; +import { useState } from "react"; import { useTranslation } from "react-i18next"; import { toast } from "sonner"; @@ -12,7 +13,8 @@ import { LocalStorageKeys } from "@/common/constants"; import { validatePassword } from "@/common/validation"; import routes from "@/Utils/request/api"; -import request from "@/Utils/request/request"; +import mutate from "@/Utils/request/mutate"; +import query from "@/Utils/request/query"; interface ResetPasswordProps { token: string; @@ -69,40 +71,36 @@ const ResetPassword = (props: ResetPasswordProps) => { } return form; }; + const { mutate: resetPassword } = useMutation({ + mutationFn: mutate(routes.resetPassword), + onSuccess: () => { + localStorage.removeItem(LocalStorageKeys.accessToken); + toast.success(t("password_reset_success")); + navigate("/login"); + }, + onError: (error) => { + if (error.cause) { + setErrors(error.cause); + } + }, + }); const handleSubmit = async (e: any) => { e.preventDefault(); const valid = validateData(); if (valid) { valid.token = props.token; - const { res, error } = await request(routes.resetPassword, { - body: { ...valid }, - }); - if (res?.ok) { - localStorage.removeItem(LocalStorageKeys.accessToken); - toast.success(t("password_reset_success")); - navigate("/login"); - } else if (res && error) { - setErrors(error); - } + resetPassword(valid); } }; - useEffect(() => { - const checkResetToken = async () => { - const { res } = await request(routes.checkResetToken, { - body: { token: props.token }, - }); - if (!res || !res.ok) { - navigate("/invalid-reset"); - } - }; - if (props.token) { - checkResetToken(); - } else { - navigate("/invalid-reset"); - } - }, []); + const { isError } = useQuery({ + queryKey: ["checkResetToken", { token: props.token }], + queryFn: query(routes.checkResetToken, { body: { token: props.token } }), + enabled: !!props.token, + }); + + if (isError) navigate("/invalid-reset"); return (
- {hintMessage} -
+ {hintMessage} +
- {dragProps.fileDropError !== "" - ? dragProps.fileDropError - : `${t("drag_drop_image_to_upload")}`} -
- {t("no_image_found")}. {hintMessage} -
+ {dragProps.fileDropError !== "" + ? dragProps.fileDropError + : `${t("drag_drop_image_to_upload")}`} +
+ {t("no_image_found")}. {hintMessage} +
+ {JSON.stringify(data, null, 2)} +
- {description} -
- {dragProps.fileDropError !== "" && dragProps.fileDropError} - {!selectedFile && "Drag & drop xlsx/csv file to upload"} -
- {selectedFile.name} - {(selectedFile.size / 1024).toFixed(2)} KB -
- {selectedFile.name} -
- Showing {currentPage * rowsPerPage - rowsPerPage + 1} to{" "} - {currentPage * rowsPerPage > fileData.length - ? fileData.length - : currentPage * rowsPerPage}{" "} - of {fileData.length} entries -
- {fileNameTooltip} -
- {fileName} + !open && handleClose()}> + + + + {t("file_preview")} + + + + {fileUrl ? ( + <> + + + + + + + {fileNameTooltip} + + + + + {fileName} + + + + + {uploadedFiles && + uploadedFiles[index] && + uploadedFiles[index].created_date && ( + + {t("created_on")}{" "} + {new Date( + uploadedFiles[index].created_date!, + ).toLocaleString("en-US", { + dateStyle: "long", + timeStyle: "short", + })} - - - - {uploadedFiles && - uploadedFiles[index] && - uploadedFiles[index].created_date && ( - - {t("created_on")}{" "} - {new Date( - uploadedFiles[index].created_date!, - ).toLocaleString("en-US", { - dateStyle: "long", - timeStyle: "short", - })} - + )} + + + {downloadURL && downloadURL.length > 0 && ( + + + + {t("download")} + + )} + + {t("close")} + + - - {downloadURL && downloadURL.length > 0 && ( - - - - {t("download")} - + + {uploadedFiles && uploadedFiles.length > 1 && ( + handleNext(index - 1)} + disabled={index <= 0} + aria-label="Previous file" + > + )} - - {t("close")} - - - - - {uploadedFiles && uploadedFiles.length > 1 && ( - handleNext(index - 1)} - disabled={index <= 0} - aria-label="Previous file" - > - - - )} - - {file_state.isImage ? ( - - ) : file_state.extension === "pdf" ? ( - }> - { - setPage(1); - setNumPages(numPages); - }} - pageNumber={page} + + {file_state.isImage ? ( + - - ) : previewExtensions.includes(file_state.extension) ? ( - - ) : ( - - }> + { + setPage(1); + setNumPages(numPages); + }} + pageNumber={page} + scale={scale} + /> + + ) : previewExtensions.includes(file_state.extension) ? ( + - {t("file_preview_not_supported")} - - )} - + ) : ( + + + {t("file_preview_not_supported")} + + )} + - {uploadedFiles && uploadedFiles.length > 1 && ( - handleNext(index + 1)} - disabled={index >= uploadedFiles.length - 1} - aria-label="Next file" - > - - - )} - - - - {file_state.isImage && ( - <> - {[ - [ - t("Zoom In"), - "l-search-plus", - handleZoomIn, - file_state.zoom === zoom_values.length, - ], - [ - `${25 * file_state.zoom}%`, - false, - () => { - setFileState({ ...file_state, zoom: 4 }); - }, - false, - ], - [ - t("Zoom Out"), - "l-search-minus", - handleZoomOut, - file_state.zoom === 1, - ], - [ - t("Rotate Left"), - "l-corner-up-left", - () => handleRotate(-90), - false, - ], - [ - t("Rotate Right"), - "l-corner-up-right", - () => handleRotate(90), - false, - ], - ].map((button, index) => ( - void} - className="z-50 rounded bg-white/60 px-4 py-2 text-black backdrop-blur transition hover:bg-white/70" - disabled={button[3] as boolean} - > - {button[1] && ( - - )} - {button[0] as string} - - ))} - - )} - {file_state.extension === "pdf" && ( - <> - {[ - [ - "Previous", - "l-arrow-left", - () => setPage((prev) => prev - 1), - page === 1, - ], - [`${page}/${numPages}`, false, () => ({}), false], - [ - "Next", - "l-arrow-right", - () => setPage((prev) => prev + 1), - page === numPages, - ], - ].map((button, index) => ( - void} - className="z-50 rounded bg-white/60 px-4 py-2 text-black backdrop-blur transition hover:bg-white/70" - disabled={button[3] as boolean} - > - {button[1] && ( - - )} - {button[0] as string} - - ))} - + {uploadedFiles && uploadedFiles.length > 1 && ( + handleNext(index + 1)} + disabled={index >= uploadedFiles.length - 1} + aria-label={t("next_file")} + > + + )} + + + {file_state.isImage && ( + <> + {[ + [ + t("zoom_in"), + "l-search-plus", + handleZoomIn, + file_state.zoom === zoom_values.length, + ], + [ + `${25 * file_state.zoom}%`, + false, + () => { + setFileState({ ...file_state, zoom: 4 }); + }, + false, + ], + [ + t("zoom_out"), + "l-search-minus", + handleZoomOut, + file_state.zoom === 1, + ], + [ + t("rotate_left"), + "l-corner-up-left", + () => handleRotate(-90), + false, + ], + [ + t("rotate_right"), + "l-corner-up-right", + () => handleRotate(90), + false, + ], + ].map((button, index) => ( + void} + className="z-50 rounded bg-white/60 px-4 py-2 text-black backdrop-blur transition hover:bg-white/70" + disabled={button[3] as boolean} + > + {button[1] && ( + + )} + {button[0] as string} + + ))} + + )} + {file_state.extension === "pdf" && ( + <> + {[ + [t("zoom_in"), "l-search-plus", handleZoomIn, scale >= 2], + [`${Math.round(scale * 100)}%`, false, () => {}, false], + [ + t("zoom_out"), + "l-search-minus", + handleZoomOut, + scale <= 0.5, + ], + [ + t("previous"), + "l-arrow-left", + () => setPage((prev) => prev - 1), + page === 1, + ], + [`${page}/${numPages}`, false, () => ({}), false], + [ + t("next"), + "l-arrow-right", + () => setPage((prev) => prev + 1), + page === numPages, + ], + ].map((button, index) => ( + void} + className="z-50 rounded bg-white/60 px-4 py-2 text-black backdrop-blur transition hover:bg-white/70" + disabled={button[3] as boolean} + > + {button[1] && ( + + )} + {button[0] as string} + + ))} + + )} + + + + ) : ( + + - - ) : ( - - - - )} - + )} + + ); }; diff --git a/src/components/Common/HelperComponents.tsx b/src/components/Common/HelperComponents.tsx deleted file mode 100644 index 5100476284e..00000000000 --- a/src/components/Common/HelperComponents.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { Transition, TransitionEvents } from "@headlessui/react"; -import { ReactNode } from "react"; - -type DropdownMenuTransitionProps = { - show?: boolean | undefined; - children: ReactNode; -} & TransitionEvents; - -export const DropdownTransition = ({ - show, - children, - ...transitionEvents -}: DropdownMenuTransitionProps) => ( - - {children} - -); diff --git a/src/components/Common/LanguageSelector.tsx b/src/components/Common/LanguageSelector.tsx index e1f3446eca0..a3b9d5c3d5d 100644 --- a/src/components/Common/LanguageSelector.tsx +++ b/src/components/Common/LanguageSelector.tsx @@ -2,7 +2,9 @@ import careConfig from "@careConfig"; import { useEffect } from "react"; import { useTranslation } from "react-i18next"; -import { classNames, keysOf } from "@/Utils/utils"; +import { cn } from "@/lib/utils"; + +import { keysOf } from "@/Utils/utils"; import { LANGUAGES } from "@/i18n"; export const LanguageSelector = (props: any) => { @@ -27,7 +29,7 @@ export const LanguageSelector = (props: any) => { return ( { @@ -32,7 +34,7 @@ export const LanguageSelectorLogin = () => { handleLanguage(e)} - className={classNames( + className={cn( "text-primary-400 hover:text-primary-600", (i18n.language === e || (i18n.language === "en-US" && e === "en")) && diff --git a/src/components/Common/LoginHeader.tsx b/src/components/Common/LoginHeader.tsx index 3daa043bd83..32ebc669799 100644 --- a/src/components/Common/LoginHeader.tsx +++ b/src/components/Common/LoginHeader.tsx @@ -74,7 +74,14 @@ export const LoginHeader = () => { navigate("/login?mode=patient")} + onClick={() => + navigate( + `/login?mode=${ + localStorage.getItem(LocalStorageKeys.loginPreference) ?? + "patient" + }`, + ) + } > {t("sign_in")} diff --git a/src/components/Common/PDFViewer.tsx b/src/components/Common/PDFViewer.tsx index 1a20fa9e133..6e135f7b673 100644 --- a/src/components/Common/PDFViewer.tsx +++ b/src/components/Common/PDFViewer.tsx @@ -7,6 +7,7 @@ export default function PDFViewer( url: string; pageNumber: number; onDocumentLoadSuccess: (numPages: number) => void; + scale: number; }>, ) { pdfjs.GlobalWorkerOptions.workerSrc = "/pdf.worker.min.mjs"; @@ -21,7 +22,11 @@ export default function PDFViewer( } className="w-full" > - + diff --git a/src/components/Common/Page.tsx b/src/components/Common/Page.tsx index 24b797d245f..0bb287d8637 100644 --- a/src/components/Common/Page.tsx +++ b/src/components/Common/Page.tsx @@ -9,7 +9,6 @@ interface PageProps extends PageTitleProps { options?: React.ReactNode | React.ReactNode[]; changePageMetadata?: boolean; className?: string; - noImplicitPadding?: boolean; ref?: RefObject; /** * If true, the sidebar will be collapsed when mounted, and restored to original state when unmounted. @@ -31,25 +30,14 @@ export default function Page(props: PageProps) { // }; // }, [props.collapseSidebar]); - let padding = ""; - if (!props.noImplicitPadding) { - if (!props.hideBack || props.componentRight) padding = "py-0 md:px-6"; - else padding = "px-6 py-0"; - } - return ( - + diff --git a/src/components/Common/PageTitle.tsx b/src/components/Common/PageTitle.tsx index cee87a8c5fb..c374124934d 100644 --- a/src/components/Common/PageTitle.tsx +++ b/src/components/Common/PageTitle.tsx @@ -1,46 +1,26 @@ import { ReactNode, useEffect, useRef } from "react"; -import Breadcrumbs from "@/components/Common/Breadcrumbs"; -import PageHeadTitle from "@/components/Common/PageHeadTitle"; +import { cn } from "@/lib/utils"; -import { classNames } from "@/Utils/utils"; +import PageHeadTitle from "@/components/Common/PageHeadTitle"; export interface PageTitleProps { title: string; className?: string; componentRight?: ReactNode; - breadcrumbs?: boolean; - crumbsReplacements?: { - [key: string]: { - name?: string; - uri?: string; - style?: string; - hide?: boolean; - }; - }; focusOnLoad?: boolean; isInsidePage?: boolean; changePageMetadata?: boolean; - // New props for Breadcrumbs - hideBack?: boolean; - backUrl?: string; hideTitleOnPage?: boolean; - onBackClick?: () => boolean | void; } export default function PageTitle({ title, className = "", componentRight = <>, - breadcrumbs = true, - crumbsReplacements = {}, focusOnLoad = false, isInsidePage = false, changePageMetadata = true, - // New props passed to Breadcrumbs - hideBack = false, - backUrl, - onBackClick, hideTitleOnPage, }: PageTitleProps) { const divRef = useRef(); @@ -54,23 +34,12 @@ export default function PageTitle({ return ( - - {breadcrumbs && ( - - )} - {changePageMetadata && } ; +interface GenericTableProps { + headers: HeaderRow[]; + rows: TableRowType[] | undefined; +} + +export default function PrintTable({ headers, rows }: GenericTableProps) { + return ( + + + + + {headers.map(({ key, width }, index) => ( + + {t(key)} + + ))} + + + + {!!rows && + rows.map((row, index) => ( + + {headers.map(({ key }) => ( + + {row[key] || "-"} + + ))} + + ))} + + + + ); +} diff --git a/src/components/Common/SearchByMultipleFields.tsx b/src/components/Common/SearchByMultipleFields.tsx index 242266ae23e..7cd3550b3ba 100644 --- a/src/components/Common/SearchByMultipleFields.tsx +++ b/src/components/Common/SearchByMultipleFields.tsx @@ -47,6 +47,7 @@ interface SearchByMultipleFieldsProps { clearSearch?: { value: boolean; params?: string[] }; enableOptionButtons?: boolean; onFieldChange?: (options: SearchOption) => void; + autoFocus?: boolean; } const KeyboardShortcutHint = ({ open }: { open: boolean }) => { @@ -90,6 +91,7 @@ const SearchByMultipleFields: React.FC = ({ clearSearch, onFieldChange, enableOptionButtons = true, + autoFocus = false, }) => { const { t } = useTranslation(); const [selectedOptionIndex, setSelectedOptionIndex] = @@ -175,12 +177,6 @@ const SearchByMultipleFields: React.FC = ({ return () => document.removeEventListener("keydown", handleKeyDown); }, [focusedIndex, open, handleOptionChange, options]); - useEffect(() => { - if (inputRef.current) { - inputRef.current.focus(); - } - }, [selectedOptionIndex]); - useEffect(() => { if (selectedOption.value !== searchValue) { onSearch(selectedOption.key, searchValue); @@ -224,6 +220,12 @@ const SearchByMultipleFields: React.FC = ({ } }, [selectedOption, searchValue, t, inputClassName, open]); + useEffect(() => { + if (autoFocus) { + inputRef.current?.focus(); + } + }, [autoFocus, open, selectedOptionIndex]); + return ( )); + +export const FormSkeleton = ({ rows }: { rows: number }) => ( + + {Array.from({ length: rows }).map((_, index) => ( + + ))} + +); diff --git a/src/components/Common/Tabs.tsx b/src/components/Common/Tabs.tsx deleted file mode 100644 index 9c375db618e..00000000000 --- a/src/components/Common/Tabs.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import { type ReactNode, useEffect, useRef } from "react"; - -import useWindowDimensions from "@/hooks/useWindowDimensions"; - -import { classNames } from "@/Utils/utils"; - -export default function Tabs(props: { - className?: string; - currentTab: string | number; - onTabChange: (value: string | number) => void; - tabs: { text: ReactNode; value: string | number; id?: string }[]; -}) { - const { className, currentTab, onTabChange, tabs } = props; - const ref = useRef(null); - const tabSwitcherRef = useRef(null); - - const dimensions = useWindowDimensions(); - - useEffect(() => { - const currentTabIndex = tabs.findIndex((t) => t.value === currentTab); - if ( - typeof currentTabIndex != "number" || - !ref.current || - !tabSwitcherRef.current - ) - return; - const tabButton = ref.current.querySelectorAll("button")[currentTabIndex]; - if (!tabButton) return; - tabSwitcherRef.current.style.width = tabButton.clientWidth + "px"; - tabSwitcherRef.current.style.left = - tabButton.getBoundingClientRect().left - - ref.current.getBoundingClientRect().left + - ref.current.scrollLeft + - "px"; - }, [currentTab, tabSwitcherRef.current, ref.current, dimensions]); - - return ( - - - {/* There has to be a better way of handling this... */} - {tabs.map((tab, i) => ( - - {tab.text} - - ))} - - {tabs.map((tab, i) => ( - onTabChange(tab.value)} - className={`${currentTab === tab.value ? "text-white" : "text-primary-500 hover:text-primary-600"} flex-1 whitespace-nowrap px-6 py-2 text-sm font-semibold transition-all`} - > - {tab.text} - - ))} - - - ); -} diff --git a/src/components/Common/UpdatableApp.tsx b/src/components/Common/UpdatableApp.tsx index 814779a99d3..3a383d73408 100644 --- a/src/components/Common/UpdatableApp.tsx +++ b/src/components/Common/UpdatableApp.tsx @@ -1,12 +1,12 @@ import { Popover, Transition } from "@headlessui/react"; import { ReactNode, useEffect, useState } from "react"; +import { cn } from "@/lib/utils"; + import CareIcon from "@/CAREUI/icons/CareIcon"; import { Button } from "@/components/ui/button"; -import { classNames } from "@/Utils/utils"; - const META_URL = "/build-meta.json"; const APP_VERSION_KEY = "app-version"; const APP_UPDATED_KEY = "app-updated"; @@ -120,10 +120,7 @@ const UpdateAppPopup = ({ onUpdate }: UpdateAppPopupProps) => { Software Update diff --git a/src/components/Common/UserAutocompleteFormField.tsx b/src/components/Common/UserAutocompleteFormField.tsx deleted file mode 100644 index 90addafb702..00000000000 --- a/src/components/Common/UserAutocompleteFormField.tsx +++ /dev/null @@ -1,111 +0,0 @@ -import { useEffect, useState } from "react"; - -import { Autocomplete } from "@/components/Form/FormFields/Autocomplete"; -import FormField from "@/components/Form/FormFields/FormField"; -import { - FormFieldBaseProps, - useFormFieldPropsResolver, -} from "@/components/Form/FormFields/Utils"; -import { UserType } from "@/components/Users/UserFormValidations"; -import { UserBareMinimum } from "@/components/Users/models"; - -import routes from "@/Utils/request/api"; -import useTanStackQueryInstead from "@/Utils/request/useQuery"; -import { - classNames, - formatName, - isUserOnline, - mergeQueryOptions, -} from "@/Utils/utils"; - -import { Avatar } from "./Avatar"; - -type BaseProps = FormFieldBaseProps & { - placeholder?: string; - userType?: UserType; - noResultsError?: string; -}; - -type UserSearchProps = BaseProps & { - facilityId?: undefined; - homeFacility?: string; -}; - -export default function UserAutocomplete(props: UserSearchProps) { - const field = useFormFieldPropsResolver(props); - const [query, setQuery] = useState(""); - const [disabled, setDisabled] = useState(false); - - const { data, loading } = useTanStackQueryInstead(routes.userList, { - query: { - home_facility: props.homeFacility, - user_type: props.userType, - search_text: query, - limit: 50, - offset: 0, - }, - }); - - useEffect(() => { - if ( - loading || - query || - !field.required || - !props.noResultsError || - !data?.results - ) { - return; - } - - if (data.results.length === 0) { - setDisabled(true); - field.handleChange(undefined as unknown as UserBareMinimum); - } - }, [loading, field.required, data?.results, props.noResultsError]); - - const getAvatar = (option: UserBareMinimum) => { - return ( - - ); - }; - - return ( - - obj.username, - )} - optionLabel={formatName} - optionIcon={userOnlineDot} - optionImage={getAvatar} - optionDescription={(option) => - `${option.user_type} - ${option.username}` - } - optionValue={(option) => option} - onQuery={setQuery} - isLoading={loading} - /> - - ); -} - -const userOnlineDot = (user: UserBareMinimum) => ( - -); diff --git a/src/components/Common/UserSelector.tsx b/src/components/Common/UserSelector.tsx index ff2221d5561..3d068034791 100644 --- a/src/components/Common/UserSelector.tsx +++ b/src/components/Common/UserSelector.tsx @@ -18,6 +18,7 @@ import { PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; +import { TooltipComponent } from "@/components/ui/tooltip"; import { Avatar } from "@/components/Common/Avatar"; @@ -69,7 +70,11 @@ export default function UserSelector({ name={formatName(selected)} className="size-6 rounded-full" /> - {formatName(selected)} + + + {formatName(selected)} + + ) : ( {placeholder || t("select_user")} diff --git a/src/components/Encounter/CreateEncounterForm.tsx b/src/components/Encounter/CreateEncounterForm.tsx index 488cbc585fd..a51de24038d 100644 --- a/src/components/Encounter/CreateEncounterForm.tsx +++ b/src/components/Encounter/CreateEncounterForm.tsx @@ -1,6 +1,7 @@ import careConfig from "@careConfig"; import { zodResolver } from "@hookform/resolvers/zod"; import { useMutation, useQueryClient } from "@tanstack/react-query"; +import { t } from "i18next"; import { Ambulance, BedDouble, @@ -12,6 +13,7 @@ import { import { navigate } from "raviger"; import { useState } from "react"; import { useForm } from "react-hook-form"; +import { useTranslation } from "react-i18next"; import { toast } from "sonner"; import * as z from "zod"; @@ -74,7 +76,9 @@ const encounterFormSchema = z.object({ "use_as_directed", "urgent", ] as const), - organizations: z.array(z.string()), + organizations: z.array(z.string()).min(1, { + message: t("at_least_one_department_is_required"), + }), }); const encounterClasses = [ @@ -135,6 +139,7 @@ export default function CreateEncounterForm({ }: Props) { const [isOpen, setIsOpen] = useState(false); const queryClient = useQueryClient(); + const { t } = useTranslation(); const form = useForm>({ resolver: zodResolver(encounterFormSchema), @@ -154,13 +159,9 @@ export default function CreateEncounterForm({ form.reset(); queryClient.invalidateQueries({ queryKey: ["encounters", patientId] }); onSuccess?.(); - navigate(`/facility/${facilityId}/encounter/${data.id}/updates`); - }, - onError: (error) => { - const errorData = error.cause as { errors: { msg: string[] } }; - errorData.errors.msg.forEach((er) => { - toast.error(er); - }); + navigate( + `/facility/${facilityId}/patient/${patientId}/encounter/${data.id}/updates`, + ); }, }); @@ -178,7 +179,15 @@ export default function CreateEncounterForm({ } return ( - + { + setIsOpen(open); + if (!open) { + form.reset(); + } + }} + > {trigger || ( - Create Encounter + {t("create_encounter")} )} - Initiate Patient Encounter + {t("initiate_encounter")} - Begin a new clinical encounter for {patientName}. Select the - appropriate encounter type, status, and priority to ensure proper - documentation and care delivery. + {t("begin_clinical_encounter", { patientName })} @@ -209,7 +216,9 @@ export default function CreateEncounterForm({ name="encounter_class" render={({ field }) => ( - Type of Encounter + + {t("type_of_encounter")} + {encounterClasses.map( ({ value, label, icon: Icon, description }) => ( @@ -226,7 +235,7 @@ export default function CreateEncounterForm({ {label} - + {description} @@ -245,7 +254,7 @@ export default function CreateEncounterForm({ name="status" render={({ field }) => ( - Status + {t("status")} - - { - form.setValue("organizations", [value]); - }} + ( + + { + form.setValue("organizations", [value]); + }} + /> + + + )} /> - {isPending ? "Creating..." : "Create Encounter"} + {isPending ? t("creating") : t("create_encounter")} diff --git a/src/components/Facility/ConsultationDetails/ObservationsList.tsx b/src/components/Facility/ConsultationDetails/ObservationsList.tsx index e25002bf7cd..e15278773bd 100644 --- a/src/components/Facility/ConsultationDetails/ObservationsList.tsx +++ b/src/components/Facility/ConsultationDetails/ObservationsList.tsx @@ -3,15 +3,14 @@ import { useEffect } from "react"; import { useTranslation } from "react-i18next"; import { useInView } from "react-intersection-observer"; -import CareIcon from "@/CAREUI/icons/CareIcon"; - import { Card } from "@/components/ui/card"; +import { formatValue } from "@/components/Facility/ConsultationDetails/QuestionnaireResponsesList"; + import routes from "@/Utils/request/api"; import query from "@/Utils/request/query"; import { HTTPError } from "@/Utils/request/types"; import { PaginatedResponse } from "@/Utils/request/types"; -import { formatDateTime } from "@/Utils/utils"; import { Encounter } from "@/types/emr/encounter"; import { Observation } from "@/types/emr/observation"; @@ -21,6 +20,59 @@ interface Props { encounter: Encounter; } +interface GroupedObservations { + [key: string]: Observation[]; +} + +function getDateKey(date: string) { + return new Date(date).toISOString().split("T")[0]; +} + +function formatDisplayDate(dateStr: string) { + const date = new Date(dateStr); + const today = new Date(); + const yesterday = new Date(today); + yesterday.setDate(yesterday.getDate() - 1); + + // Reset time parts for accurate date comparison + today.setHours(0, 0, 0, 0); + yesterday.setHours(0, 0, 0, 0); + date.setHours(0, 0, 0, 0); + + const formattedDate = date.toLocaleDateString("en-US", { + year: "numeric", + month: "long", + day: "numeric", + }); + + if (date.getTime() === today.getTime()) { + return `Today (${formattedDate})`; + } else if (date.getTime() === yesterday.getTime()) { + return `Yesterday (${formattedDate})`; + } + return formattedDate; +} + +function formatDisplayTime(dateStr: string) { + return new Date(dateStr).toLocaleTimeString("en-US", { + hour: "2-digit", + minute: "2-digit", + }); +} + +function groupObservationsByDate( + observations: Observation[], +): GroupedObservations { + return observations.reduce((groups: GroupedObservations, observation) => { + const dateKey = getDateKey(observation.effective_datetime); + if (!groups[dateKey]) { + groups[dateKey] = []; + } + groups[dateKey].push(observation); + return groups; + }, {}); +} + export default function ObservationsList(props: Props) { const { t } = useTranslation(); const patientId = props.encounter.patient.id; @@ -75,40 +127,68 @@ export default function ObservationsList(props: Props) { ); } + const groupedObservations = groupObservationsByDate(observations); + const dates = Object.keys(groupedObservations).sort().reverse(); + return ( - {observations.map((item: Observation) => ( - - - - - {formatDateTime(item.effective_datetime)} - - - {item.main_code.display || item.main_code.code} - - {item.value.value_quantity && ( - - {item.value.value_quantity.value}{" "} - {item.value.value_quantity.code.display} - - )} - {item.value.value && ( - - {item.value.value} - - )} - {item.note && ( - {item.note} - )} + {dates.map((date, index) => ( + + + {formatDisplayDate(date)} - + + {groupedObservations[date] + .sort( + (a, b) => + new Date(b.effective_datetime).getTime() - + new Date(a.effective_datetime).getTime(), + ) + .map((item: Observation) => ( + + + {formatDisplayTime(item.effective_datetime)}: + + + + + {item.value.value && ( + + {formatValue(item.value.value, item.value_type)} + + )} + {item.value.value_quantity && ( + + {item.value.value_quantity.value}{" "} + + {item.value.value_quantity.code.display} + + + )} + + {item.note && ( + + {item.note} + + )} + + {item.main_code.display || item.main_code.code} + + + + + ))} + + {index < dates.length - 1 && ( + + )} + ))} {hasNextPage && ( - {isFetchingNextPage ? t("loading_more") : t("load_more")} + {isFetchingNextPage ? t("loading") : t("load_more")} )} diff --git a/src/components/Facility/ConsultationDetails/OverviewSideBar.tsx b/src/components/Facility/ConsultationDetails/OverviewSideBar.tsx new file mode 100644 index 00000000000..f59ba6e3da1 --- /dev/null +++ b/src/components/Facility/ConsultationDetails/OverviewSideBar.tsx @@ -0,0 +1,40 @@ +import { t } from "i18next"; + +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; + +import { Encounter } from "@/types/emr/encounter"; + +import ObservationsList from "./ObservationsList"; +import QuickAccess from "./QuickAccess"; + +interface Props { + encounter: Encounter; +} + +export default function SideOverview(props: Props) { + return ( + + + + + + {t("quick_access")} + + + {t("observations")} + + + + + + + + + + + + + + + ); +} diff --git a/src/components/Facility/ConsultationDetails/QuestionnaireResponsesList.tsx b/src/components/Facility/ConsultationDetails/QuestionnaireResponsesList.tsx index 73a909330c6..c6fc5667222 100644 --- a/src/components/Facility/ConsultationDetails/QuestionnaireResponsesList.tsx +++ b/src/components/Facility/ConsultationDetails/QuestionnaireResponsesList.tsx @@ -1,59 +1,47 @@ +import { useQuery } from "@tanstack/react-query"; import { t } from "i18next"; -import { useTranslation } from "react-i18next"; +import { useQueryParams } from "raviger"; +import { Trans, useTranslation } from "react-i18next"; -import PaginatedList from "@/CAREUI/misc/PaginatedList"; +import { cn } from "@/lib/utils"; import { Badge } from "@/components/ui/badge"; import { Card } from "@/components/ui/card"; import { Separator } from "@/components/ui/separator"; +import PaginationComponent from "@/components/Common/Pagination"; import { CardListSkeleton } from "@/components/Common/SkeletonLoading"; +import { RESULTS_PER_PAGE_LIMIT } from "@/common/constants"; + import routes from "@/Utils/request/api"; +import query from "@/Utils/request/query"; import { formatDateTime, properCase } from "@/Utils/utils"; -import { AllergyIntoleranceRequest } from "@/types/emr/allergyIntolerance/allergyIntolerance"; -import { DiagnosisRequest } from "@/types/emr/diagnosis/diagnosis"; import { Encounter } from "@/types/emr/encounter"; -import { MedicationRequest } from "@/types/emr/medicationRequest"; -import { MedicationStatementRequest } from "@/types/emr/medicationStatement"; -import { SymptomRequest } from "@/types/emr/symptom/symptom"; +import { ResponseValue } from "@/types/questionnaire/form"; import { Question } from "@/types/questionnaire/question"; import { QuestionnaireResponse } from "@/types/questionnaire/questionnaireResponse"; -import { CreateAppointmentQuestion } from "@/types/scheduling/schedule"; interface Props { encounter?: Encounter; patientId: string; + isPrintPreview?: boolean; + onlyUnstructured?: boolean; } -type ResponseValueType = { - value?: - | string - | number - | boolean - | Date - | Encounter - | AllergyIntoleranceRequest[] - | MedicationRequest[] - | MedicationStatementRequest[] - | SymptomRequest[] - | DiagnosisRequest[] - | CreateAppointmentQuestion; - value_quantity?: { - value: number; - }; -}; - interface QuestionResponseProps { question: Question; response?: { - values: ResponseValueType[]; + values: ResponseValue[]; note?: string; question_id: string; }; } -function formatValue(value: ResponseValueType["value"], type: string): string { +export function formatValue( + value: ResponseValue["value"], + type: string, +): string { if (!value) return ""; // Handle complex objects @@ -83,22 +71,31 @@ function formatValue(value: ResponseValueType["value"], type: string): string { function QuestionResponseValue({ question, response }: QuestionResponseProps) { if (!response) return null; - const value = - response.values[0]?.value || response.values[0]?.value_quantity?.value; - - if (!value) return null; - return ( {question.text} - - {formatValue(value, question.type)} - {question.unit?.code && ( - {question.unit.code} - )} - {response.note && ( - ({response.note}) - )} + + {response.values.map((valueObj, index) => { + const value = valueObj.value || valueObj.value_quantity?.value; + if (!value) return null; + + return ( + + {formatValue(value, question.type)} + {question.unit?.code && ( + {question.unit.code} + )} + {index === response.values.length - 1 && response.note && ( + + ({response.note}) + + )} + + ); + })} ); @@ -111,7 +108,7 @@ function QuestionGroup({ }: { group: Question; responses: { - values: ResponseValueType[]; + values: ResponseValue[]; note?: string; question_id: string; }[]; @@ -200,12 +197,23 @@ function StructuredResponseBadge({ ); } -function ResponseCard({ item }: { item: QuestionnaireResponse }) { +function ResponseCard({ + item, + isPrintPreview, +}: { + item: QuestionnaireResponse; + isPrintPreview?: boolean; +}) { const isStructured = !item.questionnaire; const structuredType = Object.keys(item.structured_responses || {})[0]; return ( - + @@ -219,19 +227,33 @@ function ResponseCard({ item }: { item: QuestionnaireResponse }) { } /> ) : ( - - {item.questionnaire?.title} {t("filed")} - + }} + /> )} - {t("at")} - {formatDateTime(item.created_date)} - {t("by")} - - {item.created_by?.first_name || ""}{" "} - {item.created_by?.last_name || ""} - {item.created_by?.user_type && ` (${item.created_by?.user_type})`} - + + }} + /> + + + }} + /> + @@ -273,46 +295,89 @@ function ResponseCard({ item }: { item: QuestionnaireResponse }) { export default function QuestionnaireResponsesList({ encounter, patientId, + isPrintPreview = false, + onlyUnstructured, }: Props) { const { t } = useTranslation(); + const [qParams, setQueryParams] = useQueryParams<{ page?: number }>(); + + const { data: questionnarieResponses, isLoading } = useQuery({ + queryKey: ["questionnaireResponses", patientId, qParams], + queryFn: query.paginated(routes.getQuestionnaireResponses, { + pathParams: { patientId }, + queryParams: { + ...(!isPrintPreview && { + limit: RESULTS_PER_PAGE_LIMIT, + offset: ((qParams.page ?? 1) - 1) * RESULTS_PER_PAGE_LIMIT, + }), + encounter: encounter?.id, + only_unstructured: onlyUnstructured, + }, + maxPages: isPrintPreview ? undefined : 1, + pageSize: isPrintPreview ? 100 : RESULTS_PER_PAGE_LIMIT, + }), + }); return ( - - {() => ( - + + + {isLoading ? ( + + + + ) : ( - - + {questionnarieResponses?.results?.length === 0 ? ( + {t("no_questionnaire_responses")} - - - - - - - - - className="grid gap-4"> - {(item) => } - - - - - + ) : ( + + {questionnarieResponses?.results?.map( + (item: QuestionnaireResponse) => ( + + + + ), + )} + {!isPrintPreview && ( + + + RESULTS_PER_PAGE_LIMIT + ? "visible" + : "invisible", + )} + > + setQueryParams({ page })} + /> + + + )} + + )} - - )} - + )} + + ); } diff --git a/src/components/Facility/ConsultationDetails/QuickAccess.tsx b/src/components/Facility/ConsultationDetails/QuickAccess.tsx new file mode 100644 index 00000000000..649bfe6ef8b --- /dev/null +++ b/src/components/Facility/ConsultationDetails/QuickAccess.tsx @@ -0,0 +1,150 @@ +import { Link } from "raviger"; +import { useTranslation } from "react-i18next"; + +import CareIcon from "@/CAREUI/icons/CareIcon"; + +import { Badge } from "@/components/ui/badge"; +import { Button } from "@/components/ui/button"; + +import LinkDepartmentsSheet from "@/components/Patient/LinkDepartmentsSheet"; + +import useQuestionnaireOptions from "@/hooks/useQuestionnaireOptions"; + +import { stringifyNestedObject } from "@/Utils/utils"; +import { Encounter } from "@/types/emr/encounter"; + +interface QuickAccessProps { + encounter: Encounter; +} + +export default function QuickAccess({ encounter }: QuickAccessProps) { + const { t } = useTranslation(); + const questionnaireOptions = useQuestionnaireOptions("encounter_actions"); + + return ( + + {/* Questionnaire Section */} + {encounter.status !== "completed" && ( + + {t("questionnaire")} + + {questionnaireOptions.map((option) => ( + + + {t(option.title)} + + ))} + + + + )} + + {/* Departments and Teams */} + + + + {t("departments_and_teams")} + + + + {t("update_department")} + + + + } + /> + + + + {encounter.organizations.length > 0 + ? encounter.organizations.map((org) => ( + + {stringifyNestedObject(org)} + + )) + : t("no_organizations_added_yet")} + + } + /> + + + + {encounter.hospitalization?.admit_source && ( + <> + + + {/* Hospitalisation Details */} + + + {t("hospitalisation_details")} + + + + {t("admit_source")} + + {t( + `encounter_admit_sources__${encounter.hospitalization?.admit_source}`, + )} + + + + {t("diet_preference")} + + {t( + `encounter_diet_preference__${encounter.hospitalization?.diet_preference}`, + )} + + + + {t("re_admission")} + + {t( + `encounter_re_admission__${encounter.hospitalization?.re_admission}`, + )} + + + + + {t("update_hospitalisation_details")} + + + + + + )} + + ); +} diff --git a/src/components/Facility/DuplicatePatientDialog.tsx b/src/components/Facility/DuplicatePatientDialog.tsx index 2e795092042..beac625f852 100644 --- a/src/components/Facility/DuplicatePatientDialog.tsx +++ b/src/components/Facility/DuplicatePatientDialog.tsx @@ -4,6 +4,13 @@ import { useTranslation } from "react-i18next"; import CareIcon from "@/CAREUI/icons/CareIcon"; import { Button } from "@/components/ui/button"; +import { + Dialog, + DialogContent, + DialogFooter, + DialogHeader, + DialogTitle, +} from "@/components/ui/dialog"; import { Table, TableBody, @@ -13,120 +20,125 @@ import { TableRow, } from "@/components/ui/table"; -import DialogModal from "@/components/Common/Dialog"; - import { PartialPatientModel } from "@/types/emr/newPatient"; interface Props { + open: boolean; + onOpenChange: (open: boolean) => void; patientList: Array; handleOk: (action: string) => void; - handleCancel: () => void; } const DuplicatePatientDialog = (props: Props) => { const { t } = useTranslation(); - const { patientList, handleOk, handleCancel } = props; + const { open, onOpenChange, patientList, handleOk } = props; const [action, setAction] = useState(""); return ( - - - - - {t("patient_records_found_description")}( - {patientList[0].phone_number}) - - - - - - - - {[`${t("patient_name")} / ID`, t("gender")].map( - (heading, i) => ( - {heading} - ), - )} - - - - {patientList.map((patient, i) => { - return ( - - - - {patient.name} - - - ID : {patient.id} - - - {patient.gender} - - ); - })} - - + + + + {t("patient_records_found")} + + + + + {t("patient_records_found_description")}( + {patientList[0].phone_number}) + - - - - - setAction(e.target.value)} - /> - {t("duplicate_patient_record_confirmation")} - + + + + + + {[`${t("patient_name")} / ID`, t("gender")].map( + (heading, i) => ( + {heading} + ), + )} + + + + {patientList.map((patient, i) => { + return ( + + + + {patient.name} + + + ID : {patient.id} + + + {patient.gender} + + ); + })} + + + + + + + setAction(e.target.value)} + /> + {t("duplicate_patient_record_confirmation")} + + - - - setAction(e.target.value)} - /> - {t("duplicate_patient_record_rejection")} - - + + + setAction(e.target.value)} + /> + {t("duplicate_patient_record_rejection")} + + - {t("duplicate_patient_record_birth_unknown")} + {t("duplicate_patient_record_birth_unknown")} + - - - - - {t("close")} - - handleOk(action)} - disabled={!action} - variant={"primary"} - > - - {t("continue")} - - - + + + onOpenChange(false)} + className="gap-1" + variant={"secondary"} + > + + {t("close")} + + handleOk(action)} + disabled={!action} + variant={"primary"} + > + + {t("continue")} + + + + + ); }; diff --git a/src/components/Facility/EncounterCard.tsx b/src/components/Facility/EncounterCard.tsx index 10c408a7bee..a9fc72dff59 100644 --- a/src/components/Facility/EncounterCard.tsx +++ b/src/components/Facility/EncounterCard.tsx @@ -1,13 +1,15 @@ import { t } from "i18next"; -import { BedSingle, CircleCheck, CircleDashed, Clock } from "lucide-react"; +import { BadgeCheck, CircleDashed, Clock, Eye } from "lucide-react"; import { Link } from "raviger"; import { cn } from "@/lib/utils"; -import CareIcon from "@/CAREUI/icons/CareIcon"; - import { Badge } from "@/components/ui/badge"; -import { buttonVariants } from "@/components/ui/button"; +import { Button } from "@/components/ui/button"; +import { Card, CardContent } from "@/components/ui/card"; +import { Separator } from "@/components/ui/separator"; + +import { encounterIcons } from "@/common/constants"; import { formatDateTime } from "@/Utils/utils"; import { Encounter, completedEncounterStatus } from "@/types/emr/encounter"; @@ -18,90 +20,114 @@ interface EncounterCardProps { export const EncounterCard = (props: EncounterCardProps) => { const { encounter } = props; + + const Icon = encounterIcons[encounter.encounter_class]; + return ( <> - - + + {completedEncounterStatus.includes(encounter.status) ? ( - + + + ) : ( - + + + )} - {t(`encounter_status__${encounter.status}`)} - + + + + + + + + + {completedEncounterStatus.includes(encounter.status) ? ( + + ) : ( + + )} + {t(`encounter_status__${encounter.status}`)} + + + {Icon} + {t(`encounter_class__${encounter.encounter_class}`)} + + - - {[ - { - label: t("facility"), - value: ( - + + + {t("facility")} + {encounter.facility.name} - ), - }, - { - label: t("encounter_class"), - value: ( - - - {t(`encounter_class__${encounter.encounter_class}`)} + + + + {t("start_date")} + + {encounter.period.start + ? formatDateTime(encounter.period.start) + : t("not_started")} - ), - }, - { - label: t("priority"), - value: ( - + + + + {t("priority")} + {t(`encounter_priority__${encounter.priority.toLowerCase()}`)} - ), - }, - { - label: t("start_date"), - value: encounter.period.start - ? formatDateTime(encounter.period.start) - : t("not_started"), - }, - { - label: t("end_date"), - hide: !encounter.period.end, - value: formatDateTime(encounter.period.end), - }, - { - label: t("external_id"), - hide: !encounter.external_identifier, - value: encounter.external_identifier, - }, - ] - .filter((f) => !f.hide) - .map((field, i) => ( - - {field.label} - {field.value} - ))} - + {encounter.period.end && ( + + {t("end_date")} + + {formatDateTime(encounter.period.end)} + + + )} - - - {t("View Encounter")} - + {encounter.external_identifier && ( + + + {t("external_id")} + + + {encounter.external_identifier} + + + )} + + + + + + {t("view_encounter")} + + + + + ); diff --git a/src/components/Facility/FacilityForm.tsx b/src/components/Facility/FacilityForm.tsx index b0fed2348eb..c6cabe1de6a 100644 --- a/src/components/Facility/FacilityForm.tsx +++ b/src/components/Facility/FacilityForm.tsx @@ -66,9 +66,9 @@ export default function FacilityForm({ pincode: z.string().refine(validatePincode, t("invalid_pincode")), geo_organization: z.string().min(1, t("field_required")), address: z.string().min(1, t("address_is_required")), - phone_number: validators.phoneNumber.required, - latitude: validators.coordinates.latitude.optional(), - longitude: validators.coordinates.longitude.optional(), + phone_number: validators().phoneNumber.required, + latitude: validators().coordinates.latitude.optional(), + longitude: validators().coordinates.longitude.optional(), is_public: z.boolean().default(false), }); @@ -112,6 +112,9 @@ export default function FacilityForm({ queryClient.invalidateQueries({ queryKey: ["facility"], }); + queryClient.invalidateQueries({ + queryKey: ["currentUser"], + }); form.reset(); onSubmitSuccess?.(); }, diff --git a/src/components/Facility/FacilityHome.tsx b/src/components/Facility/FacilityHome.tsx index 4856911d5e7..edd84bdf56b 100644 --- a/src/components/Facility/FacilityHome.tsx +++ b/src/components/Facility/FacilityHome.tsx @@ -1,31 +1,20 @@ import careConfig from "@careConfig"; -import { - Tooltip, - TooltipContent, - TooltipProvider, - TooltipTrigger, -} from "@radix-ui/react-tooltip"; import { useQuery, useQueryClient } from "@tanstack/react-query"; -import { Hospital, MapPin, MoreVertical, Settings } from "lucide-react"; -import { navigate } from "raviger"; +import { useMutation } from "@tanstack/react-query"; +import { Hospital } from "lucide-react"; import { useState } from "react"; import { useTranslation } from "react-i18next"; import { toast } from "sonner"; +import CareIcon from "@/CAREUI/icons/CareIcon"; + import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuTrigger, -} from "@/components/ui/dropdown-menu"; import { Markdown } from "@/components/ui/markdown"; import { Avatar } from "@/components/Common/Avatar"; import AvatarEditModal from "@/components/Common/AvatarEditModal"; -import ConfirmDialog from "@/components/Common/ConfirmDialog"; import ContactLink from "@/components/Common/ContactLink"; import Loading from "@/components/Common/Loading"; @@ -33,8 +22,8 @@ import { FACILITY_FEATURE_TYPES } from "@/common/constants"; import { PLUGIN_Component } from "@/PluginEngine"; import routes from "@/Utils/request/api"; +import mutate from "@/Utils/request/mutate"; import query from "@/Utils/request/query"; -import request from "@/Utils/request/request"; import uploadFile from "@/Utils/request/uploadFile"; import { getAuthorizationHeader } from "@/Utils/request/utils"; import { sleep } from "@/Utils/utils"; @@ -72,30 +61,32 @@ const renderGeoOrganizations = (geoOrg: Organization) => { currentParent = currentParent.parent; } + const formatValue = (name: string, label: string) => { + return name.endsWith(label) + ? name.replace(new RegExp(`${label}$`), "").trim() + : name; + }; + const parentDetails = orgParents.map((org) => { + const label = getOrgLabel(org.org_type, org.metadata); return { - label: getOrgLabel(org.org_type, org.metadata), - value: org.name, + label, + value: formatValue(org.name, label), }; }); + const geoOrgLabel = getOrgLabel(geoOrg.org_type, geoOrg.metadata); + return [ { - label: getOrgLabel(geoOrg.org_type, geoOrg.metadata), - value: geoOrg.name, + label: geoOrgLabel, + value: formatValue(geoOrg.name, geoOrgLabel), }, - ] - .concat(parentDetails) - .map((org, index) => ( - - {org.value} - - )); + ].concat(parentDetails); }; export const FacilityHome = ({ facilityId }: Props) => { const { t } = useTranslation(); - const [openDeleteDialog, setOpenDeleteDialog] = useState(false); const [editCoverImage, setEditCoverImage] = useState(false); const queryClient = useQueryClient(); @@ -106,42 +97,42 @@ export const FacilityHome = ({ facilityId }: Props) => { }), }); - const handleDeleteClose = () => { - setOpenDeleteDialog(false); - }; - - const handleDeleteSubmit = async () => { - await request(routes.deleteFacility, { + const { mutateAsync: deleteAvatar } = useMutation({ + mutationFn: mutate(routes.deleteFacilityCoverImage, { pathParams: { id: facilityId }, - onResponse: ({ res }) => { - if (res?.ok) { - toast.success( - t("deleted_successfully", { name: facilityData?.name }), - ); - } - navigate("/facility"); - }, - }); - }; + }), + onSuccess: () => { + toast.success(t("cover_image_deleted")); + queryClient.invalidateQueries({ + queryKey: ["facility", facilityId], + }); + setEditCoverImage(false); + }, + }); - const handleCoverImageUpload = async (file: File, onError: () => void) => { + const handleCoverImageUpload = async ( + file: File, + onSuccess: () => void, + onError: () => void, + ) => { const formData = new FormData(); formData.append("cover_image", file); const url = `${careConfig.apiUrl}/api/v1/facility/${facilityId}/cover_image/`; - uploadFile( + await uploadFile( url, formData, "POST", { Authorization: getAuthorizationHeader() }, async (xhr: XMLHttpRequest) => { if (xhr.status === 200) { + setEditCoverImage(false); await sleep(1000); queryClient.invalidateQueries({ queryKey: ["facility", facilityId], }); toast.success(t("cover_image_updated")); - setEditCoverImage(false); + onSuccess(); } else { onError(); } @@ -152,18 +143,14 @@ export const FacilityHome = ({ facilityId }: Props) => { }, ); }; - - const handleCoverImageDelete = async (onError: () => void) => { - const { res } = await request(routes.deleteFacilityCoverImage, { - pathParams: { id: facilityId }, - }); - if (res?.ok) { - toast.success(t("cover_image_deleted")); - queryClient.invalidateQueries({ - queryKey: ["facility", facilityId], - }); - setEditCoverImage(false); - } else { + const handleCoverImageDelete = async ( + onSuccess: () => void, + onError: () => void, + ) => { + try { + await deleteAvatar(); + onSuccess(); + } catch { onError(); } }; @@ -174,6 +161,8 @@ export const FacilityHome = ({ facilityId }: Props) => { const hasPermissionToEditCoverImage = true; + // TODO: get permissions from backend to delete facility + const coverImageHint = ( <> {t("max_size_for_image_uploaded_should_be", { maxSize: "1MB" })} @@ -185,158 +174,181 @@ export const FacilityHome = ({ facilityId }: Props) => { return ( - - {t("are_you_sure_want_to_delete", { name: facilityData?.name })} - - } - action="Delete" - variant="destructive" - show={openDeleteDialog} - onClose={handleDeleteClose} - onConfirm={handleDeleteSubmit} - /> setEditCoverImage(false)} + onOpenChange={(open) => setEditCoverImage(open)} hint={coverImageHint} /> - - + + {facilityData?.read_cover_image_url ? ( <> - + ) : ( - + )} + + + + + - + - - - - - - - - {facilityData?.name} - - - - - {facilityData?.name} - - - - - + + + {facilityData?.name} + + + {facilityData?.facility_type} + - - - - - - - - {hasPermissionToEditCoverImage && ( - setEditCoverImage(true)} - > - - {t("edit_cover_photo")} - - )} - - { - e.preventDefault(); - }} - > - - {t("update_facility")} - - } - /> - {/* TODO: get permissions from backend */} - {/* {hasPermissionToDeleteFacility && ( - setOpenDeleteDialog(true)} - > - + + {/* + TODO: add delete facility + + + {t("delete_facility")} + + + + {t("delete_facility")} - - )} */} - - - + + + {t("delete_facility_confirmation", { + name: facilityData?.name, + })} + + + + {t("cancel")} + deleteFacility()} + className={cn( + buttonVariants({ variant: "destructive" }), + )} + // disabled={isDeleting} + > + {isDeleting ? t("deleting") : t("delete")} + + + + */} + + {hasPermissionToEditCoverImage && ( + setEditCoverImage(true)} + aria-label={t("edit_cover_photo")} + > + + + {t("edit_cover_photo")} + + + )} + - - - - - - - {facilityData?.geo_organization && ( - - {renderGeoOrganizations( - facilityData?.geo_organization, - )} - - )} + + + + {t("edit_facility_details")} + + } + /> + + + + + + + + {t("address")} + + + {facilityData.address} + - - - - + + + {t("mobile_number")} + + - + + + + + + {t("location_details")} + + + {/* Add Location Link Here */} + - - - + + + + + + {facilityData.geo_organization && + renderGeoOrganizations( + facilityData.geo_organization, + ).map((item, index) => ( + + + {item.label} + + + {item.value} + + + ))} + + + + {facilityData?.features?.some((feature: number) => FACILITY_FEATURE_TYPES.some((f) => f.id === feature), @@ -357,7 +369,7 @@ export const FacilityHome = ({ facilityId }: Props) => { {getFacilityFeatureIcon(feature)} diff --git a/src/components/Facility/FacilityUsers.tsx b/src/components/Facility/FacilityUsers.tsx index 76f1dfd008f..8fced137410 100644 --- a/src/components/Facility/FacilityUsers.tsx +++ b/src/components/Facility/FacilityUsers.tsx @@ -22,7 +22,7 @@ import { useView } from "@/Utils/useView"; export default function FacilityUsers(props: { facilityId: string }) { const { t } = useTranslation(); - const { qParams, updateQuery, Pagination } = useFilters({ + const { qParams, updateQuery, Pagination, resultsPerPage } = useFilters({ limit: 15, cacheBlacklist: ["username"], }); @@ -33,13 +33,13 @@ export default function FacilityUsers(props: { facilityId: string }) { let usersList: JSX.Element = <>; const { data: userListData, isFetching: userListFetching } = useQuery({ - queryKey: ["facilityUsers", facilityId, qParams], + queryKey: ["facilityUsers", facilityId, qParams, resultsPerPage], queryFn: query.debounced(routes.facility.getUsers, { pathParams: { facility_id: facilityId }, queryParams: { username: qParams.username, - limit: qParams.limit, - offset: (qParams.page - 1) * qParams.limit, + limit: resultsPerPage, + offset: (qParams.page - 1) * resultsPerPage, }, }), enabled: !!facilityId, diff --git a/src/components/Facility/models.tsx b/src/components/Facility/models.tsx index 478f7b170b7..00fcaa6cb51 100644 --- a/src/components/Facility/models.tsx +++ b/src/components/Facility/models.tsx @@ -23,24 +23,12 @@ export interface FacilityModel { is_public?: boolean; } -export type PatientCategory = - | "Comfort Care" // Discontinued - | "Mild" - | "Moderate" - | "Critical" - | "Actively Dying"; - -export type IUserFacilityRequest = { - facility: string; -}; - export type FacilityRequest = Omit; export interface CommentModel { id: string; - created_by_object: UserBareMinimum; created_date: string; modified_date: string; comment: string; - created_by: number; + created_by: UserBareMinimum; } diff --git a/src/components/Files/ArchivedFileDialog.tsx b/src/components/Files/ArchivedFileDialog.tsx new file mode 100644 index 00000000000..ac3eec81e3e --- /dev/null +++ b/src/components/Files/ArchivedFileDialog.tsx @@ -0,0 +1,77 @@ +import dayjs from "dayjs"; +import { t } from "i18next"; + +import { + Dialog, + DialogContent, + DialogHeader, + DialogTitle, +} from "@/components/ui/dialog"; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "@/components/ui/tooltip"; + +import { FileUploadModel } from "@/components/Patient/models"; + +export default function ArchivedFileDialog({ + open, + onOpenChange, + file, +}: { + open: boolean; + onOpenChange: (open: boolean) => void; + file: FileUploadModel | null; +}) { + if (!file) { + return <>; + } + const fileName = file?.name ? file.name + file.extension : ""; + return ( + + + + + {t("archived_file")}:{" "} + + + + {fileName} + + + {fileName} + + + + + + + + + {t("archived_reason")}: + + {file?.archive_reason} + + + + {t("archived_by")}: {file.archived_by?.username} + + + {t("archived_at")}:{" "} + {dayjs(file.archived_datetime).format("DD MMM YYYY, hh:mm A")} + + + + + + ); +} diff --git a/src/components/Files/AudioPlayerDialog.tsx b/src/components/Files/AudioPlayerDialog.tsx new file mode 100644 index 00000000000..81e3139ceb4 --- /dev/null +++ b/src/components/Files/AudioPlayerDialog.tsx @@ -0,0 +1,61 @@ +import { useQuery } from "@tanstack/react-query"; +import { t } from "i18next"; + +import { + Dialog, + DialogContent, + DialogHeader, + DialogTitle, +} from "@/components/ui/dialog"; + +import AudioPlayer from "@/components/Common/AudioPlayer"; +import { FileUploadModel } from "@/components/Patient/models"; + +import routes from "@/Utils/request/api"; +import query from "@/Utils/request/query"; + +export default function AudioPlayerDialog({ + open, + onOpenChange, + file, + type, + associatingId, +}: { + open: boolean; + onOpenChange: (open: boolean) => void; + file: FileUploadModel | null; + type: "encounter" | "patient"; + associatingId: string; +}) { + const { data: fileData } = useQuery({ + queryKey: [routes.retrieveUpload, type, file?.id], + queryFn: query(routes.retrieveUpload, { + queryParams: { file_type: type, associating_id: associatingId }, + pathParams: { id: file?.id || "" }, + }), + enabled: !!file?.id, + }); + const { Player, stopPlayback } = AudioPlayer({ + src: fileData?.read_signed_url || "", + }); + return ( + { + stopPlayback(); + onOpenChange(false); + }} + aria-labelledby="audio-player-dialog" + > + + + {t("play_audio")} + + + + + ); +} diff --git a/src/components/Files/CameraCaptureDialog.tsx b/src/components/Files/CameraCaptureDialog.tsx index 54b9debc21e..8ee66a313d6 100644 --- a/src/components/Files/CameraCaptureDialog.tsx +++ b/src/components/Files/CameraCaptureDialog.tsx @@ -6,21 +6,25 @@ import { toast } from "sonner"; import CareIcon from "@/CAREUI/icons/CareIcon"; import { Button } from "@/components/ui/button"; - -import DialogModal from "@/components/Common/Dialog"; +import { + Dialog, + DialogContent, + DialogHeader, + DialogTitle, +} from "@/components/ui/dialog"; import useBreakpoints from "@/hooks/useBreakpoints"; export interface CameraCaptureDialogProps { - show: boolean; - onHide: () => void; + open: boolean; + onOpenChange: (open: boolean) => void; onCapture: (file: File, fileName: string) => void; onResetCapture: () => void; setPreview?: (isPreview: boolean) => void; } export default function CameraCaptureDialog(props: CameraCaptureDialogProps) { - const { show, onHide, onCapture, onResetCapture, setPreview } = props; + const { open, onOpenChange, onCapture, onResetCapture, setPreview } = props; const isLaptopScreen = useBreakpoints({ lg: true, default: false }); const [cameraFacingMode, setCameraFacingMode] = useState( @@ -34,8 +38,9 @@ export default function CameraCaptureDialog(props: CameraCaptureDialogProps) { height: { ideal: 2160 }, facingMode: cameraFacingMode, }; + useEffect(() => { - if (!show) return; + if (!open) return; let stream: MediaStream | null = null; navigator.mediaDevices @@ -45,7 +50,7 @@ export default function CameraCaptureDialog(props: CameraCaptureDialogProps) { }) .catch(() => { toast.warning(t("camera_permission_denied")); - onHide(); + onOpenChange(false); }); return () => { @@ -55,7 +60,7 @@ export default function CameraCaptureDialog(props: CameraCaptureDialogProps) { }); } }; - }, [show, cameraFacingMode, onHide]); + }, [open, cameraFacingMode, onOpenChange]); const handleSwitchCamera = useCallback(async () => { const devices = await navigator.mediaDevices.enumerateDevices(); @@ -87,130 +92,62 @@ export default function CameraCaptureDialog(props: CameraCaptureDialogProps) { }; return ( - - - - - - {t("camera")} - - - } - className="max-w-2xl" - onClose={onHide} - > - - {!previewImage ? ( - - - - ) : ( - - - - )} - + + + + + + + + + + + {t("camera")} + + + + - {/* buttons for mobile screens */} - - - {!previewImage ? ( - - {t("switch")} - - ) : ( - <> - )} - {!previewImage ? ( - <> - - { - captureImage(); - setPreview?.(true); - }} - className="m-2" - > - {t("capture")} - - - + + + ) : ( - <> - - { - setPreviewImage(null); - onResetCapture(); - setPreview?.(false); - }} - className="m-2" - > - {t("retake")} - - { - setPreviewImage(null); - onHide(); - setPreview?.(false); - }} - className="m-2" - > - {t("submit")} - - - + + + )} - - { - setPreviewImage(null); - onResetCapture(); - onHide(); - }} - className="m-2" - > - {t("close")} - - - - {/* buttons for laptop screens */} - - - - - {`${t("switch")} ${t("camera")}`} - - - + {/* buttons for mobile and tablet screens */} + + + {!previewImage ? ( + + {t("switch")} + + ) : ( + <> + )} + {!previewImage ? ( <> @@ -221,8 +158,8 @@ export default function CameraCaptureDialog(props: CameraCaptureDialogProps) { captureImage(); setPreview?.(true); }} + className="m-2" > - {t("capture")} @@ -237,16 +174,18 @@ export default function CameraCaptureDialog(props: CameraCaptureDialogProps) { onResetCapture(); setPreview?.(false); }} + className="m-2" > {t("retake")} { - onHide(); setPreviewImage(null); + onOpenChange(false); setPreview?.(false); }} + className="m-2" > {t("submit")} @@ -254,20 +193,82 @@ export default function CameraCaptureDialog(props: CameraCaptureDialogProps) { )} - - { - setPreviewImage(null); - onResetCapture(); - onHide(); - setPreview?.(false); - }} - > - {`${t("close")} ${t("camera")}`} - + + { + setPreviewImage(null); + onResetCapture(); + onOpenChange(false); + }} + className="m-2" + > + {t("close")} + + + + + {/* buttons for laptop screens */} + + + + {!previewImage ? ( + <> + + { + captureImage(); + setPreview?.(true); + }} + > + + {t("capture")} + + + + ) : ( + <> + + { + setPreviewImage(null); + onResetCapture(); + setPreview?.(false); + }} + > + {t("retake")} + + { + onOpenChange(false); + setPreviewImage(null); + setPreview?.(false); + }} + > + {t("submit")} + + + + )} + + + { + setPreviewImage(null); + onResetCapture(); + onOpenChange(false); + setPreview?.(false); + }} + > + {`${t("close")} ${t("camera")}`} + + - - + + ); } diff --git a/src/components/Files/FileBlock.tsx b/src/components/Files/FileBlock.tsx deleted file mode 100644 index 46b6f680889..00000000000 --- a/src/components/Files/FileBlock.tsx +++ /dev/null @@ -1,139 +0,0 @@ -import dayjs from "dayjs"; -import { t } from "i18next"; - -import CareIcon, { IconName } from "@/CAREUI/icons/CareIcon"; - -import { Button } from "@/components/ui/button"; - -import { FileUploadModel } from "@/components/Patient/models"; - -import { FileManagerResult } from "@/hooks/useFileManager"; - -import { FILE_EXTENSIONS } from "@/common/constants"; - -import routes from "@/Utils/request/api"; -import useTanStackQueryInstead from "@/Utils/request/useQuery"; - -export interface FileBlockProps { - file: FileUploadModel; - fileManager: FileManagerResult; - associating_id: string; - editable: boolean; - archivable?: boolean; -} - -export default function FileBlock(props: FileBlockProps) { - const { - file, - fileManager, - associating_id, - editable = false, - archivable = false, - } = props; - - const filetype = fileManager.getFileType(file); - - const fileData = useTanStackQueryInstead(routes.retrieveUpload, { - query: { file_type: fileManager.type, associating_id }, - pathParams: { id: file.id || "" }, - prefetch: filetype === "AUDIO" && !file.is_archived, - }); - - const icons: Record = { - AUDIO: "l-volume", - IMAGE: "l-image", - PRESENTATION: "l-presentation-play", - VIDEO: "l-video", - UNKNOWN: "l-file-medical", - DOCUMENT: "l-file-medical", - }; - - const archived = file.is_archived; - - return ( - - - - - - - - {file.name} - {file.extension} {file.is_archived && "(Archived)"} - - - {dayjs( - file.is_archived ? file.archived_datetime : file.created_date, - ).format("DD MMM YYYY, hh:mm A")}{" "} - by{" "} - {file.is_archived - ? file.archived_by?.username - : file.uploaded_by?.username} - - - - - {filetype === "AUDIO" && !file.is_archived && ( - - - - )} - {!file.is_archived && - (fileManager.isPreviewable(file) ? ( - fileManager.viewFile(file, associating_id)} - className="w-full md:w-auto" - > - - {t("view")} - - ) : ( - fileManager.downloadFile(file, associating_id)} - className="w-full md:w-auto" - > - - {t("download")} - - ))} - - {!file.is_archived && editable && ( - fileManager.editFile(file, associating_id)} - className="flex-1 md:flex-auto" - > - - {t("rename")} - - )} - {(file.is_archived || editable) && archivable && ( - fileManager.archiveFile(file, associating_id)} - className="flex-1 md:flex-auto" - > - - {file.is_archived ? t("more_info") : t("archive")} - - )} - - - - ); -} diff --git a/src/components/Files/FileUpload.tsx b/src/components/Files/FileUpload.tsx deleted file mode 100644 index 3a63a601543..00000000000 --- a/src/components/Files/FileUpload.tsx +++ /dev/null @@ -1,387 +0,0 @@ -import { Loader2 } from "lucide-react"; -import { ReactNode, useState } from "react"; -import { useTranslation } from "react-i18next"; - -import CareIcon, { IconName } from "@/CAREUI/icons/CareIcon"; - -import { Button } from "@/components/ui/button"; -import { Input } from "@/components/ui/input"; -import { Label } from "@/components/ui/label"; - -import Pagination from "@/components/Common/Pagination"; -import Tabs from "@/components/Common/Tabs"; -import FileBlock from "@/components/Files/FileBlock"; -import { FileUploadModel } from "@/components/Patient/models"; - -import useAuthUser from "@/hooks/useAuthUser"; -import useFileManager from "@/hooks/useFileManager"; -import useFileUpload from "@/hooks/useFileUpload"; - -import { RESULTS_PER_PAGE_LIMIT } from "@/common/constants"; - -import routes from "@/Utils/request/api"; -import useTanStackQueryInstead from "@/Utils/request/useQuery"; - -export const LinearProgressWithLabel = (props: { value: number }) => { - return ( - - - - - - - - {`${Math.round(props.value)}%`} - - - ); -}; - -interface FileUploadProps { - type: string; - patientId?: string; - encounterId?: string; - consentId?: string; - allowAudio?: boolean; - sampleId?: string; - claimId?: string; - className?: string; - hideUpload?: boolean; -} - -export interface ModalDetails { - name?: string; - id?: string; - reason?: string; - userArchived?: string; - archiveTime?: string; - associatedId?: string; -} - -export interface StateInterface { - open: boolean; - isImage: boolean; - name: string; - extension: string; - zoom: number; - isZoomInDisabled: boolean; - isZoomOutDisabled: boolean; - rotation: number; - id?: string; - associating_id?: string; -} - -export const FileUpload = (props: FileUploadProps) => { - const { t } = useTranslation(); - const { - encounterId, - patientId, - consentId, - type, - sampleId, - claimId, - allowAudio, - hideUpload, - } = props; - const [currentPage, setCurrentPage] = useState(1); - const [offset, setOffset] = useState(0); - const [tab, setTab] = useState("UNARCHIVED"); - const authUser = useAuthUser(); - - const handlePagination = (page: number, limit: number) => { - const offset = (page - 1) * limit; - setCurrentPage(page); - setOffset(offset); - }; - - const UPLOAD_HEADING: { [index: string]: string } = { - PATIENT: t("upload_headings__patient"), - CONSULTATION: t("upload_headings__consultation"), - SAMPLE_MANAGEMENT: t("upload_headings__sample_report"), - CLAIM: t("upload_headings__supporting_info"), - }; - const VIEW_HEADING: { [index: string]: string } = { - PATIENT: t("file_list_headings__patient"), - CONSULTATION: t("file_list_headings__consultation"), - SAMPLE_MANAGEMENT: t("file_list_headings__sample_report"), - CLAIM: t("file_list_headings__supporting_info"), - }; - - const associatedId = - { - PATIENT: patientId, - CONSENT_RECORD: consentId, - ENCOUNTER: encounterId, - SAMPLE_MANAGEMENT: sampleId, - CLAIM: claimId, - }[type] || ""; - - const activeFilesQuery = useTanStackQueryInstead(routes.viewUpload, { - query: { - file_type: type, - associating_id: associatedId, - is_archived: false, - limit: RESULTS_PER_PAGE_LIMIT, - offset: offset, - }, - }); - - const archivedFilesQuery = useTanStackQueryInstead(routes.viewUpload, { - query: { - file_type: type, - associating_id: associatedId, - is_archived: true, - limit: RESULTS_PER_PAGE_LIMIT, - offset: offset, - }, - }); - - const dischargeSummaryQuery = useTanStackQueryInstead(routes.viewUpload, { - query: { - file_type: "discharge_summary", - associating_id: associatedId, - is_archived: false, - limit: RESULTS_PER_PAGE_LIMIT, - offset: offset, - }, - prefetch: type === "consultation", - silent: true, - }); - - const queries = { - UNARCHIVED: activeFilesQuery, - ARCHIVED: archivedFilesQuery, - DISCHARGE_SUMMARY: dischargeSummaryQuery, - }; - - const refetchAll = async () => - Promise.all(Object.values(queries).map((q) => q.refetch())); - const loading = Object.values(queries).some((q) => q.loading); - - const fileQuery = queries[tab as keyof typeof queries]; - - const tabs = [ - { text: "Active Files", value: "UNARCHIVED" }, - { text: "Archived Files", value: "ARCHIVED" }, - ...(dischargeSummaryQuery.data?.results?.length - ? [ - { - text: "Discharge Summary", - value: "DISCHARGE_SUMMARY", - }, - ] - : []), - ]; - - const fileUpload = useFileUpload({ - type, - allowedExtensions: [ - "jpg", - "jpeg", - "png", - "gif", - "bmp", - "tiff", - "mp4", - "mov", - "avi", - "wmv", - "mp3", - "wav", - "ogg", - "txt", - "csv", - "rtf", - "doc", - "odt", - "pdf", - "xls", - "xlsx", - "ods", - "pdf", - ], - allowNameFallback: false, - onUpload: refetchAll, - }); - - const fileManager = useFileManager({ - type, - onArchive: refetchAll, - onEdit: refetchAll, - uploadedFiles: - fileQuery?.data?.results - .slice() - .reverse() - .map((file) => ({ - ...file, - associating_id: associatedId, - })) || [], - }); - const dischargeSummaryFileManager = useFileManager({ - type: "DISCHARGE_SUMMARY", - onArchive: refetchAll, - onEdit: refetchAll, - }); - - const uploadButtons: { - name: string; - icon: IconName; - onClick?: () => void; - children?: ReactNode; - show?: boolean; - id: string; - }[] = [ - { - name: t("choose_file"), - icon: "l-file-upload-alt", - children: , - id: "upload-file", - }, - { - name: t("open_camera"), - icon: "l-camera", - onClick: fileUpload.handleCameraCapture, - id: "open-webcam", - }, - { - name: t("record"), - icon: "l-microphone", - onClick: fileUpload.handleAudioCapture, - show: allowAudio, - id: "record-audio", - }, - ]; - return ( - - {fileUpload.Dialogues} - {fileManager.Dialogues} - {dischargeSummaryFileManager.Dialogues} - {!hideUpload && ( - <> - {UPLOAD_HEADING[type]} - {fileUpload.files[0] ? ( - - - - - {fileUpload.files[0].name} - - - - - - {t("enter_file_name")} - fileUpload.setFileName(e.target.value)} - /> - {fileUpload.error && ( - {fileUpload.error} - )} - - fileUpload.handleFileUpload(associatedId)} - disabled={fileUpload.uploading} // Disable the button when loading - className={`w-full ${fileUpload.uploading ? "opacity-50" : ""}`} - id="upload_file_button" - > - {fileUpload.uploading ? ( - - ) : ( - - )} - {t("upload")} - - - - {t("discard")} - - - {!!fileUpload.progress && ( - - )} - - ) : ( - - {uploadButtons - .filter((b) => b.show !== false) - .map((button, i) => ( - - - {button.name} - {button.children} - - ))} - - )} - - )} - - {VIEW_HEADING[type]} - setTab(v.toString())} - currentTab={tab} - /> - - - {!(fileQuery?.data?.results || []).length && loading && ( - - )} - {fileQuery?.data?.results.map((item: FileUploadModel) => ( - - ))} - {!(fileQuery?.data?.results || []).length && ( - - - {t("no_files_found", { type: tab.toLowerCase() })} - - - )} - - {(fileQuery?.data?.count ?? 0) > RESULTS_PER_PAGE_LIMIT && ( - - - - )} - - ); -}; diff --git a/src/components/Files/FileUploadDialog.tsx b/src/components/Files/FileUploadDialog.tsx new file mode 100644 index 00000000000..331d9c7266a --- /dev/null +++ b/src/components/Files/FileUploadDialog.tsx @@ -0,0 +1,204 @@ +import { t } from "i18next"; +import { useState } from "react"; + +import CareIcon from "@/CAREUI/icons/CareIcon"; + +import { Button } from "@/components/ui/button"; +import { Checkbox } from "@/components/ui/checkbox"; +import { + Dialog, + DialogContent, + DialogHeader, + DialogTitle, +} from "@/components/ui/dialog"; +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; +import { Progress } from "@/components/ui/progress"; + +import { FileUploadReturn } from "@/hooks/useFileUpload"; + +export default function FileUploadDialog({ + open, + onOpenChange, + fileUpload, + associatingId, +}: { + open: boolean; + onOpenChange: (open: boolean) => void; + fileUpload: FileUploadReturn; + associatingId: string; +}) { + const handleDialogClose = (open: boolean) => { + if (!open) { + setIsPdf(false); + } + onOpenChange(open); + }; + const [isPdf, setIsPdf] = useState(false); + return ( + + + + + {fileUpload.files.length > 1 ? t("upload_files") : t("upload_file")} + + + + {isPdf ? ( + <> + {fileUpload.files.map((file, index) => ( + + + + + + {file.name.length > 40 + ? `${file.name.substring(0, 30)}...` + : file.name} + + + fileUpload.removeFile(index)} + disabled={fileUpload.uploading} + > + + + + + ))} + + + {t("enter_file_name")} + + { + fileUpload.setFileName(e.target.value); + fileUpload.setError(null); + }} + className="ml-0.5 mb-1" + /> + {fileUpload.error && ( + + {fileUpload.error} + + )} + + + ) : ( + fileUpload.files.map((file, index) => ( + + + + + + {file.name.length > 40 + ? `${file.name.substring(0, 30)}...` + : file.name} + + + fileUpload.removeFile(index)} + disabled={fileUpload.uploading} + > + + + + + + {t("enter_file_name")} + + + { + fileUpload.setFileName(e.target.value, index); + fileUpload.setError(null); + }} + className="ml-0.5 mb-0.5" + /> + {!fileUpload.fileNames[index] && fileUpload.error && ( + + {fileUpload.error} + + )} + + + )) + )} + + {fileUpload.files.length > 1 && ( + + setIsPdf(checked)} + disabled={fileUpload.uploading} + className="cursor-pointer" + /> + + {t("combine_files_pdf")} + + + )} + + + fileUpload.handleFileUpload(associatingId, isPdf)} + disabled={fileUpload.uploading} + className="w-full" + id="upload_file_button" + > + + {t("upload")} + + + + {t("discard")} + + + {!!fileUpload.progress && ( + + )} + + + ); +} diff --git a/src/components/Files/FilesTab.tsx b/src/components/Files/FilesTab.tsx index 8a3078ae2ec..50fb179cd36 100644 --- a/src/components/Files/FilesTab.tsx +++ b/src/components/Files/FilesTab.tsx @@ -1,27 +1,24 @@ -import { useQuery } from "@tanstack/react-query"; +import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import dayjs from "dayjs"; +import { t } from "i18next"; +import { Link } from "raviger"; import { useEffect, useState } from "react"; -import { useTranslation } from "react-i18next"; +import { toast } from "sonner"; + +import { cn } from "@/lib/utils"; import CareIcon, { IconName } from "@/CAREUI/icons/CareIcon"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; -import { - Dialog, - DialogContent, - DialogHeader, - DialogTitle, -} from "@/components/ui/dialog"; +import { Card, CardContent } from "@/components/ui/card"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; -import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; -import { Progress } from "@/components/ui/progress"; import { Table, TableBody, @@ -30,7 +27,7 @@ import { TableHeader, TableRow, } from "@/components/ui/table"; -import { Tabs, TabsContent } from "@/components/ui/tabs"; +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Tooltip, TooltipContent, @@ -38,64 +35,81 @@ import { TooltipTrigger, } from "@/components/ui/tooltip"; -import AudioPlayer from "@/components/Common/AudioPlayer"; import Loading from "@/components/Common/Loading"; +import ArchivedFileDialog from "@/components/Files/ArchivedFileDialog"; +import AudioPlayerDialog from "@/components/Files/AudioPlayerDialog"; +import FileUploadDialog from "@/components/Files/FileUploadDialog"; import { FileUploadModel } from "@/components/Patient/models"; import useFileManager from "@/hooks/useFileManager"; -import useFileUpload, { FileUploadReturn } from "@/hooks/useFileUpload"; +import useFileUpload from "@/hooks/useFileUpload"; import useFilters from "@/hooks/useFilters"; import { FILE_EXTENSIONS } from "@/common/constants"; import routes from "@/Utils/request/api"; +import mutate from "@/Utils/request/mutate"; import query from "@/Utils/request/query"; -import { classNames } from "@/Utils/utils"; +import { HTTPError } from "@/Utils/request/types"; import { usePermissions } from "@/context/PermissionContext"; +import { Encounter } from "@/types/emr/encounter"; +import { Patient } from "@/types/emr/newPatient"; export interface FilesTabProps { type: "encounter" | "patient"; - facilityId: string; - encounterId?: string; patientId?: string; + encounter?: Encounter; + patient?: Patient; + subPage?: string; } export const FilesTab = (props: FilesTabProps) => { - const { encounterId, patientId, type } = props; + const { patientId, type, encounter, subPage = "all" } = props; const { qParams, updateQuery, Pagination, resultsPerPage } = useFilters({ limit: 14, }); - const { t } = useTranslation(); const [openUploadDialog, setOpenUploadDialog] = useState(false); + const [openArchivedFileDialog, setOpenArchivedFileDialog] = useState(false); + const [selectedArchivedFile, setSelectedArchivedFile] = + useState(null); const [selectedAudioFile, setSelectedAudioFile] = useState(null); const [openAudioPlayerDialog, setOpenAudioPlayerDialog] = useState(false); const { hasPermission } = usePermissions(); + const queryClient = useQueryClient(); const associatingId = { patient: patientId, - encounter: encounterId, + encounter: encounter?.id, }[type] || ""; const fileCategories = [ { value: "all", label: "All" }, - { value: "imaging", label: "Imaging" }, - { value: "lab_reports", label: "Lab Reports" }, - { value: "documents", label: "Documents" }, { value: "audio", label: "Audio" }, + { value: "xray", label: "X-Ray" }, + { value: "identity_proof", label: "Identity Proof" }, + { value: "unspecified", label: "Unspecified" }, + { value: "discharge_summary", label: "Discharge Summary" }, ] as const; - const handleTabChange = (value: (typeof fileCategories)[number]["value"]) => { - updateQuery({ file_category: value === "all" ? undefined : value }); - }; + const { mutate: generateDischargeSummary, isPending: isGenerating } = + useMutation<{ detail: string }, HTTPError>({ + mutationFn: mutate(routes.encounter.generateDischargeSummary, { + pathParams: { encounterId: encounter?.id || "" }, + }), + onSuccess: (response) => { + toast.success(response.detail); + refetch(); + }, + }); const { data: files, isLoading: filesLoading, refetch, } = useQuery({ - queryKey: ["files", type, associatingId, qParams], + queryKey: ["files", type, associatingId, qParams, subPage], queryFn: query(routes.viewUpload, { queryParams: { file_type: type, @@ -105,7 +119,7 @@ export const FilesTab = (props: FilesTabProps) => { ...(qParams.is_archived !== undefined && { is_archived: qParams.is_archived, }), - //file_category: qParams.file_category, + ...(subPage !== "all" && { file_category: subPage }), }, }), }); @@ -116,6 +130,7 @@ export const FilesTab = (props: FilesTabProps) => { onEdit: refetch, uploadedFiles: files?.results + .filter((file) => !file.is_archived) .slice() .reverse() .map((file) => ({ @@ -153,7 +168,10 @@ export const FilesTab = (props: FilesTabProps) => { "pdf", ], allowNameFallback: false, - onUpload: () => refetch(), + onUpload: () => { + refetch(); + }, + compress: false, }); useEffect(() => { @@ -189,87 +207,128 @@ export const FilesTab = (props: FilesTabProps) => { DOCUMENT: "l-file-medical", }; - const getArchivedMessage = () => { + const getArchivedMessage = (file: FileUploadModel) => { return ( - + {t("archived")} + { + setSelectedArchivedFile(file); + setOpenArchivedFileDialog(true); + }} + > + + + {t("view")} + + ); }; + const editPermission = () => { + if (type === "encounter") { + return ( + encounter && + ![ + "completed", + "cancelled", + "entered_in_error", + "discontinued", + ].includes(encounter.status) && + hasPermission("can_write_encounter") + ); + } else if (type === "patient") { + return hasPermission("can_write_patient"); + } + return false; + }; + const DetailButtons = ({ file }: { file: FileUploadModel }) => { const filetype = getFileType(file); return ( - - {filetype === "AUDIO" && !file.is_archived && ( - { - setSelectedAudioFile(file); - setOpenAudioPlayerDialog(true); - }} - > - - - {t("play")} - - - )} - {fileManager.isPreviewable(file) && ( - fileManager.viewFile(file, associatingId)} - > - - - {t("view")} - - - )} - { - - - - + <> + {editPermission() && ( + + {filetype === "AUDIO" && !file.is_archived && ( + { + setSelectedAudioFile(file); + setOpenAudioPlayerDialog(true); + }} + > + + + {t("play")} + - - - - fileManager.downloadFile(file, associatingId)} - > - - {t("download")} - - - - fileManager.archiveFile(file, associatingId)} - > - - {t("archive")} - - - {hasPermission( - type === "encounter" - ? "can_write_encounter" - : "can_write_patient", - ) && ( - - fileManager.editFile(file, associatingId)} - > - - {t("rename")} - - - )} - - - } - + )} + {fileManager.isPreviewable(file) && ( + fileManager.viewFile(file, associatingId)} + > + + + {t("view")} + + + )} + { + + + + + + + + + + fileManager.downloadFile(file, associatingId) + } + variant="ghost" + className="w-full flex flex-row justify-stretch items-center" + > + + {t("download")} + + + + + fileManager.archiveFile(file, associatingId) + } + variant="ghost" + className="w-full flex flex-row justify-stretch items-center" + > + + {t("archive")} + + + + fileManager.editFile(file, associatingId)} + variant="ghost" + className="w-full flex flex-row justify-stretch items-center" + > + + {t("rename")} + + + + + } + + )} + ); }; @@ -328,12 +387,7 @@ export const FilesTab = (props: FilesTabProps) => { }; const FileUploadButtons = (): JSX.Element => { - if ( - !hasPermission( - type === "encounter" ? "can_write_encounter" : "can_write_patient", - ) - ) - return <>; + if (!editPermission()) return <>; return ( @@ -356,40 +410,106 @@ export const FilesTab = (props: FilesTabProps) => { e.preventDefault(); }} > - {t("choose_file")} - + {fileUpload.Input({ className: "hidden" })} - - + fileUpload.handleCameraCapture()} - className="flex flex-row items-center " + className="flex flex-row justify-stretch items-center w-full text-primary-900" > - + {t("open_camera")} - + - - + fileUpload.handleAudioCapture()} - className="flex flex-row items-center" + className="flex flex-row justify-stretch items-center w-full text-primary-900" > - + {t("record")} - + ); }; - const RenderTable = () => { - return ( + const RenderCard = () => ( + + {files?.results && files?.results?.length > 0 ? ( + files.results.map((file) => { + const filetype = getFileType(file); + const fileName = file.name ? file.name + file.extension : ""; + + return ( + + + + + + + + + {fileName} + + {filetype} + + + + + + {t("date")} + + {dayjs(file.created_date).format("DD MMM YYYY, hh:mm A")} + + + + {t("shared_by")} + + {file.uploaded_by?.username} + + + + + + {file.is_archived ? ( + getArchivedMessage(file) + ) : ( + + )} + + + + ); + }) + ) : ( + + {t("no_files_found")} + + )} + + ); + + const RenderTable = () => ( + @@ -417,12 +537,10 @@ export const FilesTab = (props: FilesTabProps) => { return ( { { {filetype} { {dayjs(file.created_date).format("DD MMM YYYY, hh:mm A")} { {file.uploaded_by?.username} {file.is_archived ? ( - getArchivedMessage() + getArchivedMessage(file) ) : ( )} @@ -499,8 +617,8 @@ export const FilesTab = (props: FilesTabProps) => { )} - ); - }; + + ); return ( @@ -520,40 +638,77 @@ export const FilesTab = (props: FilesTabProps) => { associatingId={associatingId} /> + - - handleTabChange(value as (typeof fileCategories)[number]["value"]) - } - > - - - {/* - {fileCategories.map((category) => ( - - {category.label} - - ))} - */} - - + + {type === "encounter" && ( + + + + {t("all")} + + + + + {t("discharge_summary")} + + + + )} + + + {type === "encounter" && subPage === "discharge_summary" && ( + <> + { + await queryClient.invalidateQueries({ + queryKey: ["files"], + }); + toast.success(t("refreshed")); + }} + > + + {t("refresh")} + + generateDischargeSummary()} + disabled={isGenerating} + > + + + {isGenerating + ? t("generating") + : t("generate_discharge_summary")} + + + + )} {fileCategories.map((category) => ( + ))} @@ -561,156 +716,3 @@ export const FilesTab = (props: FilesTabProps) => { ); }; - -const FileUploadDialog = ({ - open, - onOpenChange, - fileUpload, - associatingId, -}: { - open: boolean; - onOpenChange: (open: boolean) => void; - fileUpload: FileUploadReturn; - associatingId: string; -}) => { - const { t } = useTranslation(); - return ( - - - - - {fileUpload.files.length > 1 ? t("upload_files") : t("upload_file")} - - - - {fileUpload.files.map((file, index) => ( - - - - - - {file.name} - - - fileUpload.removeFile(index)} - disabled={fileUpload.uploading} - > - - - - - - {t("enter_file_name")} - - - fileUpload.setFileName(e.target.value, index) - } - /> - {index === 0 && fileUpload.error && ( - - {fileUpload.error} - - )} - - - ))} - - - fileUpload.handleFileUpload(associatingId)} - disabled={fileUpload.uploading} - className="w-full" - id="upload_file_button" - > - - {t("upload")} - - - - {t("discard")} - - - {!!fileUpload.progress && ( - - )} - - - ); -}; - -const AudioPlayerDialog = ({ - open, - onOpenChange, - file, - type, - associatingId, -}: { - open: boolean; - onOpenChange: (open: boolean) => void; - file: FileUploadModel | null; - type: "encounter" | "patient"; - associatingId: string; -}) => { - const { t } = useTranslation(); - const { data: fileData } = useQuery({ - queryKey: [routes.retrieveUpload, type, file?.id], - queryFn: query(routes.retrieveUpload, { - queryParams: { file_type: type, associating_id: associatingId }, - pathParams: { id: file?.id || "" }, - }), - enabled: !!file?.id, - }); - const { Player, stopPlayback } = AudioPlayer({ - src: fileData?.read_signed_url || "", - }); - return ( - { - stopPlayback(); - onOpenChange(false); - }} - aria-labelledby="audio-player-dialog" - > - - - {t("play_audio")} - - - - - ); -}; diff --git a/src/components/Form/AutoCompleteAsync.tsx b/src/components/Form/AutoCompleteAsync.tsx deleted file mode 100644 index b561b1f0648..00000000000 --- a/src/components/Form/AutoCompleteAsync.tsx +++ /dev/null @@ -1,224 +0,0 @@ -import { - Combobox, - ComboboxButton, - ComboboxInput, - ComboboxOption, - ComboboxOptions, -} from "@headlessui/react"; -import { useEffect, useState } from "react"; -import { useTranslation } from "react-i18next"; - -import CareIcon from "@/CAREUI/icons/CareIcon"; - -import { DropdownTransition } from "@/components/Common/HelperComponents"; -import { - MultiSelectOptionChip, - dropdownOptionClassNames, -} from "@/components/Form/MultiSelectMenuV2"; - -import useDebounce from "@/hooks/useDebounce"; - -import { classNames } from "@/Utils/utils"; - -interface Props { - id?: string; - name?: string; - selected: any | any[]; - fetchData: (search: string) => Promise | undefined; - onChange: (selected: any) => void; - optionLabel?: (option: any) => string; - optionLabelChip?: (option: any) => string; - showNOptions?: number | undefined; - multiple?: boolean; - compareBy?: string; - debounceTime?: number; - className?: string; - placeholder?: string; - disabled?: boolean; - error?: string; - required?: boolean; - onBlur?: () => void; - onFocus?: () => void; - filter?: (data: any) => boolean; -} - -const AutoCompleteAsync = (props: Props) => { - const { - id, - name, - selected, - fetchData, - onChange, - optionLabel = (option: any) => option.label, - optionLabelChip = (option: any) => option.label, - showNOptions, - multiple = false, - compareBy, - debounceTime = 300, - className = "", - placeholder, - disabled = false, - required = false, - error, - filter, - } = props; - const [data, setData] = useState([]); - const [query, setQuery] = useState(""); - const [loading, setLoading] = useState(false); - const { t } = useTranslation(); - - const hasSelection = - (!multiple && selected) || (multiple && selected?.length > 0); - - const fetchDataDebounced = useDebounce(async (searchQuery: string) => { - setLoading(true); - try { - const fetchedData = (await fetchData(searchQuery)) || []; - const filteredData = filter - ? fetchedData.filter((item: any) => filter(item)) - : fetchedData; - - setData( - showNOptions !== undefined - ? filteredData.slice(0, showNOptions) - : filteredData, - ); - } catch (error) { - console.error("Error fetching data:", error); - } finally { - setLoading(false); - } - }, debounceTime); - - useEffect(() => { - fetchDataDebounced(query); - }, [query]); - - return ( - - - - - - hasSelection && !multiple ? optionLabel?.(selected) : "" - } - onChange={({ target }) => setQuery(target.value)} - onFocus={props.onFocus} - onBlur={() => { - props.onBlur?.(); - }} - autoComplete="off" - /> - {!disabled && ( - - - {hasSelection && !loading && !required && ( - - { - e.preventDefault(); - onChange(null); - }} - /> - - {t("clear_selection")} - - - )} - {loading ? ( - - ) : ( - - )} - - - )} - - - - {data?.length === 0 ? ( - - {query !== "" - ? "Nothing found." - : "Start typing to search..."} - - ) : ( - data?.map((item: any) => ( - - {({ selected }) => ( - - - {optionLabel(item)} - {optionLabelChip(item) && ( - - {optionLabelChip(item)} - - )} - - {selected && ( - - )} - - )} - - )) - )} - - - {multiple && selected?.length > 0 && ( - - {selected?.map((option: any, index: number) => ( - - onChange( - selected.filter((item: any) => item.id !== option.id), - ) - } - /> - ))} - - )} - {error && ( - - {error} - - )} - - - - ); -}; - -export default AutoCompleteAsync; diff --git a/src/components/Form/FieldValidators.tsx b/src/components/Form/FieldValidators.tsx deleted file mode 100644 index 989a7aa6688..00000000000 --- a/src/components/Form/FieldValidators.tsx +++ /dev/null @@ -1 +0,0 @@ -export type FieldError = string | undefined; diff --git a/src/components/Form/FormFields/Autocomplete.tsx b/src/components/Form/FormFields/Autocomplete.tsx deleted file mode 100644 index 7e00c89fc7c..00000000000 --- a/src/components/Form/FormFields/Autocomplete.tsx +++ /dev/null @@ -1,225 +0,0 @@ -import { - Combobox, - ComboboxButton, - ComboboxInput, - ComboboxOption, - ComboboxOptions, -} from "@headlessui/react"; -import { ReactNode, useEffect, useState } from "react"; -import { useTranslation } from "react-i18next"; - -import CareIcon from "@/CAREUI/icons/CareIcon"; - -import { DropdownTransition } from "@/components/Common/HelperComponents"; -import { dropdownOptionClassNames } from "@/components/Form/MultiSelectMenuV2"; - -import { classNames } from "@/Utils/utils"; - -type OptionCallback = (option: T) => R; - -type AutocompleteProps = { - id?: string; - options: readonly T[]; - disabled?: boolean | undefined; - value: V | undefined; - placeholder?: string; - optionLabel: OptionCallback; - optionIcon?: OptionCallback; - optionImage?: OptionCallback; - optionValue?: OptionCallback; - optionDescription?: OptionCallback; - optionDisabled?: OptionCallback; - className?: string; - minQueryLength?: number; - onQuery?: (query: string) => void; - requiredError?: boolean; - isLoading?: boolean; - allowRawInput?: boolean; - error?: string; -} & ( - | { - required?: false; - onChange: OptionCallback; - } - | { - required: true; - onChange: OptionCallback; - } -); - -/** - * Avoid using this component directly. Use `AutocompleteFormField` instead as - * its API is easier to use and compliant with `FormField` based components. - * - * Use this only when you want to hack into the design and get more - * customizability. - */ -export const Autocomplete = (props: AutocompleteProps) => { - const { t } = useTranslation(); - const [query, setQuery] = useState(""); // Ensure lower case - - useEffect(() => { - props.onQuery?.(query); - }, [query]); - - const mappedOptions = props.options.map((option) => { - const label = props.optionLabel(option); - const description = props.optionDescription?.(option); - return { - label, - description, - search: label.toLowerCase(), - icon: props.optionIcon?.(option), - image: props.optionImage?.(option), - value: props.optionValue ? props.optionValue(option) : option, - disabled: props.optionDisabled?.(option), - }; - }); - - const getOptions = () => { - if (!query) return mappedOptions; - - const knownOption = mappedOptions.find( - (o) => o.value == props.value || o.label == props.value, - ); - - if (knownOption) return mappedOptions; - return [ - { - label: query, - description: undefined, - search: query.toLowerCase(), - icon: , - image: undefined, - value: query, - disabled: undefined, - }, - ...mappedOptions, - ]; - }; - - const options = props.allowRawInput ? getOptions() : mappedOptions; - - const value = options.find((o) => props.value == o.value); - - const filteredOptions = - props.onQuery === undefined - ? options.filter((o) => o.search.includes(query)) - : options; - - return ( - - props.onChange(selection?.value)} - > - - - value?.label || ""} - onChange={(event) => setQuery(event.target.value.toLowerCase())} - onBlur={() => value && setQuery("")} - autoComplete="off" - /> - {!props.disabled && ( - - - {value?.icon} - - {value && !props.isLoading && !props.required && ( - - { - e.preventDefault(); - props.onChange(undefined); - }} - /> - - {t("clear_selection")} - - - )} - - {props.isLoading ? ( - - ) : ( - - )} - - - )} - - - - - {props.minQueryLength && query.length < props.minQueryLength ? ( - - {`Please enter at least ${props.minQueryLength} characters to search`} - - ) : filteredOptions.length === 0 ? ( - - No options found - - ) : ( - filteredOptions.map((option, index) => ( - - {({ focus }) => ( - - {option?.image} - - - {option.label} - {option.icon} - - {option.description && ( - - {option.description} - - )} - - - )} - - )) - )} - - - - - - ); -}; diff --git a/src/components/Form/FormFields/FormField.tsx b/src/components/Form/FormFields/FormField.tsx deleted file mode 100644 index f3ad0559e44..00000000000 --- a/src/components/Form/FormFields/FormField.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import { FieldError } from "@/components/Form/FieldValidators"; -import { FormFieldBaseProps } from "@/components/Form/FormFields/Utils"; - -import { classNames } from "@/Utils/utils"; - -type LabelProps = { - id?: string | undefined; - required?: boolean; - htmlFor?: string; - children: React.ReactNode; - className?: string | undefined; - noPadding?: boolean; -}; - -export const FieldLabel = (props: LabelProps) => { - return ( - - {props.children} - {props.required && {" *"}} - - ); -}; - -type ErrorProps = { - error: FieldError; - className?: string | undefined; -}; - -export const FieldErrorText = (props: ErrorProps) => { - return ( - - {props.error} - - ); -}; - -/** - * @deprecated use shadcn/ui's solution for form fields instead along with react-hook-form - */ -const FormField = ({ - field, - ...props -}: { - field?: FormFieldBaseProps; - children: React.ReactNode; -}) => { - return ( - - - {field?.label && ( - - {field?.label} - - )} - {field?.labelSuffix && ( - {field?.labelSuffix} - )} - - {props.children} - - - ); -}; - -export default FormField; diff --git a/src/components/Form/FormFields/RadioFormField.tsx b/src/components/Form/FormFields/RadioFormField.tsx deleted file mode 100644 index ca205fcccad..00000000000 --- a/src/components/Form/FormFields/RadioFormField.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import { ChangeEventHandler, ReactNode } from "react"; - -import FormField from "@/components/Form/FormFields/FormField"; -import { - FormFieldBaseProps, - useFormFieldPropsResolver, -} from "@/components/Form/FormFields/Utils"; - -import { classNames } from "@/Utils/utils"; - -type Props = FormFieldBaseProps & { - options: readonly T[]; - optionLabel: (option: T) => React.ReactNode; - optionValue: (option: T) => V; - containerClassName?: string; - unselectLabel?: string; - layout?: "vertical" | "horizontal" | "grid" | "auto"; -}; - -/** - * @deprecated use shadcn/ui's radio-group instead - */ -const RadioFormField = (props: Props) => { - const field = useFormFieldPropsResolver(props); - return ( - - - {props.unselectLabel && ( - - field.handleChange(null)} - /> - {props.unselectLabel} - - )} - {props.options.map((option) => { - const value = props.optionValue(option); - return ( - field.handleChange(e.target.value as V)} - /> - ); - })} - - - ); -}; - -export default RadioFormField; - -export const RadioInput = (props: { - label?: ReactNode; - id?: string; - name?: string; - value?: string; - checked?: boolean; - onChange?: ChangeEventHandler; -}) => { - return ( - - props.onChange?.(e)} - /> - {props.label} - - ); -}; diff --git a/src/components/Form/FormFields/SelectFormField.tsx b/src/components/Form/FormFields/SelectFormField.tsx deleted file mode 100644 index 6b95550299f..00000000000 --- a/src/components/Form/FormFields/SelectFormField.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import FormField from "@/components/Form/FormFields/FormField"; -import { - FormFieldBaseProps, - useFormFieldPropsResolver, -} from "@/components/Form/FormFields/Utils"; -import SelectMenuV2 from "@/components/Form/SelectMenuV2"; - -type OptionCallback = (option: T) => R; - -type SelectFormFieldProps = FormFieldBaseProps & { - placeholder?: React.ReactNode; - options: readonly T[]; - position?: "above" | "below"; - optionLabel: OptionCallback; - optionSelectedLabel?: OptionCallback; - optionDescription?: OptionCallback; - optionIcon?: OptionCallback; - optionValue?: OptionCallback; - optionDisabled?: OptionCallback; - inputClassName?: string; -}; - -/** - * @deprecated use shadcn/ui's select instead - */ -export const SelectFormField = (props: SelectFormFieldProps) => { - const field = useFormFieldPropsResolver(props); - return ( - - field.handleChange(value)} - position={props.position} - placeholder={props.placeholder} - optionLabel={props.optionLabel} - inputClassName={props.inputClassName} - optionSelectedLabel={props.optionSelectedLabel} - optionDescription={props.optionDescription} - optionIcon={props.optionIcon} - optionValue={props.optionValue} - optionDisabled={props.optionDisabled} - requiredError={field.error ? props.required : false} - /> - - ); -}; diff --git a/src/components/Form/FormFields/TextFormField.tsx b/src/components/Form/FormFields/TextFormField.tsx deleted file mode 100644 index 18a4de18341..00000000000 --- a/src/components/Form/FormFields/TextFormField.tsx +++ /dev/null @@ -1,196 +0,0 @@ -import { - DetailedHTMLProps, - InputHTMLAttributes, - forwardRef, - useState, -} from "react"; - -import CareIcon from "@/CAREUI/icons/CareIcon"; - -import FormField from "@/components/Form/FormFields/FormField"; -import { - FormFieldBaseProps, - useFormFieldPropsResolver, -} from "@/components/Form/FormFields/Utils"; - -import { classNames } from "@/Utils/utils"; - -export type TextFormFieldProps = FormFieldBaseProps & - Omit< - DetailedHTMLProps, HTMLInputElement>, - "onChange" - > & { - inputClassName?: string | undefined; - removeDefaultClasses?: true | undefined; - leading?: React.ReactNode | undefined; - trailing?: React.ReactNode | undefined; - leadingFocused?: React.ReactNode | undefined; - trailingFocused?: React.ReactNode | undefined; - trailingPadding?: string | undefined; - leadingPadding?: string | undefined; - suggestions?: string[]; - clearable?: boolean | undefined; - }; - -/** - * @deprecated use shadcn/ui's Input instead - */ -const TextFormField = forwardRef((props: TextFormFieldProps, ref) => { - const field = useFormFieldPropsResolver(props); - const { leading, trailing } = props; - const leadingFocused = props.leadingFocused || props.leading; - const trailingFocused = props.trailingFocused || props.trailing; - const hasLeading = !!(leading || leadingFocused); - const hasTrailing = !!(trailing || trailingFocused); - const hasIcon = hasLeading || hasTrailing; - const [showPassword, setShowPassword] = useState(false); - - const getPasswordFieldType = () => { - return showPassword ? "text" : "password"; - }; - - const minError = - typeof props.min !== "undefined" && - typeof field.value !== "undefined" && - parseFloat(`${props.min}`) > parseFloat(`${field.value}`) - ? `Value can not be smaller than ${props.min}` - : undefined; - const maxError = - typeof props.max !== "undefined" && - typeof field.value !== "undefined" && - parseFloat(`${props.max}`) < parseFloat(`${field.value}`) - ? `Value can not be greater than ${props.max}` - : undefined; - - const labelSuffixWithThreshold = ( - - {field.labelSuffix} - - ); - - let child = ( - - } - id={field.id} - className={classNames( - "cui-input-base peer", - hasLeading && (props.leadingPadding || "pl-10"), - hasTrailing && (props.trailingPadding || "pr-10"), - field.error && "border-danger-500", - props.inputClassName, - )} - disabled={field.disabled} - type={props.type === "password" ? getPasswordFieldType() : props.type} - name={field.name} - value={field.value} - required={field.required} - onChange={(e) => field.handleChange(e.target.value)} - /> - {props.clearable && field.value && ( - field.handleChange("")} - aria-label="Clear input" - > - - - )} - - ); - - if (props.type === "password") { - child = ( - - {child} - setShowPassword(!showPassword)} - > - - - - ); - } - - if (hasIcon) { - const _leading = - leading === leadingFocused ? ( - - {leading} - - ) : ( - <> - - {leading} - - - {leadingFocused} - - - ); - const _trailing = - trailing === trailingFocused ? ( - - {trailing} - - ) : ( - <> - - {trailing} - - - {trailingFocused} - - - ); - - child = ( - - {(leading || leadingFocused) && _leading} - {child} - {(trailing || trailingFocused) && _trailing} - - ); - } - - if ( - props.suggestions?.length && - !props.suggestions.includes(`${field.value}`) - ) { - child = ( - - {child} - - {props.suggestions.map((suggestion) => ( - field.handleChange(suggestion)} - > - {suggestion} - - ))} - - - ); - } - - return ( - - {child} - - ); -}); -TextFormField.displayName = "TextFormField"; - -export default TextFormField; diff --git a/src/components/Form/FormFields/Utils.ts b/src/components/Form/FormFields/Utils.ts deleted file mode 100644 index 1e88bcbd6a0..00000000000 --- a/src/components/Form/FormFields/Utils.ts +++ /dev/null @@ -1,59 +0,0 @@ -import { FocusEvent } from "react"; - -import { FieldError } from "@/components/Form/FieldValidators"; - -export type FieldChangeEvent = { name: string; value: T }; -export type FieldChangeEventHandler = (event: FieldChangeEvent) => void; - -/** - * The base props for a form field. - * - * If a form context is provided, the field will be registered with the form - * and the onChange, value, and error props will be ignored. - * - * If a form context is not provided, the field will be treated as a standalone - * field. - * - * @template T The type of the field value. - * @template Form The type of the form details. - */ -export type FormFieldBaseProps = { - label?: React.ReactNode; - labelSuffix?: React.ReactNode; - disabled?: boolean; - className?: string; - required?: boolean; - labelClassName?: string; - errorClassName?: string; - name: string; - validate?: undefined; - id?: string; - onChange: FieldChangeEventHandler; - value?: T; - error?: FieldError; - onFocus?: (event: FocusEvent) => void; - onBlur?: (event: FocusEvent) => void; -}; - -/** - * Resolves the props for a form field. - * If a form context is provided, the field will be registered with the form. - * Otherwise, the field will be treated as a standalone field. - * - * @param props The props for the field. - * @returns The resolved props along with a handleChange function. - */ -export const useFormFieldPropsResolver = (props: FormFieldBaseProps) => { - const handleChange = (value: T) => - props.onChange({ name: props.name, value }); - - return { - ...props, - id: props.id ?? props.name, - name: props.name, - onChange: props.onChange, - value: props.value, - error: props.error, - handleChange, - }; -}; diff --git a/src/components/Form/MultiSelectMenuV2.tsx b/src/components/Form/MultiSelectMenuV2.tsx deleted file mode 100644 index b67da3656f4..00000000000 --- a/src/components/Form/MultiSelectMenuV2.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { ReactNode } from "react"; - -import CareIcon from "@/CAREUI/icons/CareIcon"; - -import { classNames } from "@/Utils/utils"; - -interface MultiSelectOptionChipProps { - label: ReactNode; - onRemove?: () => void; -} - -export const MultiSelectOptionChip = ({ - label, - onRemove, -}: MultiSelectOptionChipProps) => { - return ( - - {label} - {onRemove && ( - { - e.stopPropagation(); - onRemove(); - }} - > - - - )} - - ); -}; - -interface OptionRenderPropArg { - focus: boolean; - selected: boolean; - disabled: boolean; -} - -export const dropdownOptionClassNames = ({ - focus, - selected, - disabled, -}: OptionRenderPropArg) => { - return classNames( - "group/option relative w-full cursor-default select-none p-4 text-sm transition-colors duration-75 ease-in-out", - !disabled && focus && "bg-primary-500 text-white", - !disabled && !focus && selected && "text-primary-500", - !disabled && !focus && !selected && "text-secondary-900", - disabled && "cursor-not-allowed text-secondary-600", - selected ? "font-semibold" : "font-normal", - ); -}; diff --git a/src/components/Form/SelectMenuV2.tsx b/src/components/Form/SelectMenuV2.tsx deleted file mode 100644 index a13d03607c6..00000000000 --- a/src/components/Form/SelectMenuV2.tsx +++ /dev/null @@ -1,188 +0,0 @@ -import { - Label, - Listbox, - ListboxButton, - ListboxOption, - ListboxOptions, -} from "@headlessui/react"; -import { ReactNode } from "react"; - -import CareIcon from "@/CAREUI/icons/CareIcon"; - -import { dropdownOptionClassNames } from "@/components/Form/MultiSelectMenuV2"; - -import { classNames } from "@/Utils/utils"; - -type OptionCallback = (option: T) => R; - -type SelectMenuProps = { - id?: string; - options: readonly T[]; - disabled?: boolean | undefined; - value: V | undefined; - placeholder?: ReactNode; - position?: "above" | "below"; - optionLabel: OptionCallback; - optionSelectedLabel?: OptionCallback; - optionDescription?: OptionCallback; - optionIcon?: OptionCallback; - optionValue?: OptionCallback; - optionDisabled?: OptionCallback; - showIconWhenSelected?: boolean; - showChevronIcon?: boolean; - className?: string; - inputClassName?: string; - requiredError?: boolean; - onFocus?: () => void; - onBlur?: () => void; -} & ( - | { - required?: false; - onChange: OptionCallback; - } - | { - required: true; - onChange: OptionCallback; - } -); - -/** - * Avoid using this component directly. Use `SelectFormField` instead as its API - * is easier to use and compliant with `FormField` based components. - * - * Use this only when you want to hack into the design and get more - * customizability. - */ -const SelectMenuV2 = (props: SelectMenuProps) => { - const valueOptions = props.options.map((option) => { - const label = props.optionLabel(option); - return { - label, - selectedLabel: props.optionSelectedLabel - ? props.optionSelectedLabel(option) - : label, - description: props.optionDescription?.(option), - icon: props.optionIcon?.(option), - value: props.optionValue ? props.optionValue(option) : option, - disabled: props.optionDisabled?.(option), - }; - }); - - const showChevronIcon = props.showChevronIcon ?? true; - - const placeholder = - valueOptions?.length > 0 ? (props.placeholder ?? "Select") : "No options"; - const defaultOption = { - label: placeholder, - selectedLabel: ( - {placeholder} - ), - description: undefined, - icon: undefined, - value: undefined, - disabled: undefined, - }; - - const options = props.required - ? valueOptions - : [defaultOption, ...valueOptions]; - - const value = options.find((o) => props.value == o.value) ?? defaultOption; - - return ( - - props.onChange(selection.value)} - > - <> - {props.placeholder} - - - - - {props.showIconWhenSelected && value?.icon && ( - - {value.icon} - - )} - - {value.selectedLabel} - - - {showChevronIcon && ( - - )} - - - - - {options.map((option, index) => ( - - {({ focus, selected }) => ( - - - {option.label} - {props.optionIcon - ? option.icon - : selected && ( - - )} - - {option.description && ( - - {option.description} - - )} - - )} - - ))} - - - - - - - ); -}; - -export default SelectMenuV2; diff --git a/src/components/Location/LocationHistorySheet.tsx b/src/components/Location/LocationHistorySheet.tsx new file mode 100644 index 00000000000..de0ddb25abb --- /dev/null +++ b/src/components/Location/LocationHistorySheet.tsx @@ -0,0 +1,49 @@ +import { useTranslation } from "react-i18next"; + +import { ScrollArea } from "@/components/ui/scroll-area"; +import { + Sheet, + SheetContent, + SheetHeader, + SheetTitle, + SheetTrigger, +} from "@/components/ui/sheet"; + +import { LocationHistory } from "@/types/emr/encounter"; + +import { LocationTree } from "./LocationTree"; + +interface LocationHistorySheetProps { + trigger: React.ReactNode; + history: LocationHistory[]; +} + +export function LocationHistorySheet({ + trigger, + history, +}: LocationHistorySheetProps) { + const { t } = useTranslation(); + + return ( + + {trigger} + + + {t("location_history")} + + + {history.map((item, index) => ( + + + + ))} + + + + ); +} diff --git a/src/components/Location/LocationSearch.tsx b/src/components/Location/LocationSearch.tsx new file mode 100644 index 00000000000..288a283773e --- /dev/null +++ b/src/components/Location/LocationSearch.tsx @@ -0,0 +1,104 @@ +import { useQuery } from "@tanstack/react-query"; +import { useState } from "react"; +import { useTranslation } from "react-i18next"; + +import { + Command, + CommandEmpty, + CommandGroup, + CommandInput, + CommandItem, +} from "@/components/ui/command"; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/components/ui/popover"; + +import query from "@/Utils/request/query"; +import { LocationList } from "@/types/location/location"; +import locationApi from "@/types/location/locationApi"; + +interface LocationSearchProps { + facilityId: string; + mode?: "kind" | "instance"; + onSelect: (location: LocationList) => void; + disabled?: boolean; + value?: LocationList | null; +} + +export function LocationSearch({ + facilityId, + mode, + onSelect, + disabled, + value, +}: LocationSearchProps) { + const { t } = useTranslation(); + const [open, setOpen] = useState(false); + const [search, setSearch] = useState(""); + + const { data: locations } = useQuery({ + queryKey: ["locations", facilityId, mode, search], + queryFn: query(locationApi.list, { + pathParams: { facility_id: facilityId }, + queryParams: { mode, name: search }, + }), + enabled: facilityId !== "preview", + }); + return ( + + + + {value?.name || "Select location..."} + + + + + + No locations found. + + {locations?.results.map((location) => ( + { + onSelect(location); + setOpen(false); + }} + > + {location.name} + + {t(`location_form__${location.form}`)} + {" in "} + {formatLocationParent(location)} + + + {t(`location_status__${location.status}`)} + + + ))} + + + + + ); +} + +const formatLocationParent = (location: LocationList) => { + const parents: string[] = []; + while (location.parent?.name) { + parents.push(location.parent?.name); + location = location.parent; + } + return parents.reverse().join(" > "); +}; diff --git a/src/components/Location/LocationTree.tsx b/src/components/Location/LocationTree.tsx new file mode 100644 index 00000000000..dfc12a235a5 --- /dev/null +++ b/src/components/Location/LocationTree.tsx @@ -0,0 +1,105 @@ +import { format } from "date-fns"; +import React from "react"; + +import CareIcon from "@/CAREUI/icons/CareIcon"; + +import { LocationList } from "@/types/location/location"; + +interface LocationPathProps { + location: LocationList; + datetime?: string; + isLatest?: boolean; + showTimeline?: boolean; +} + +interface LocationNodeProps { + location: LocationList; + isLast: boolean; + datetime?: string; + children?: React.ReactNode; +} + +function LocationNode({ + location, + isLast, + datetime, + children, +}: LocationNodeProps) { + if (!location.parent?.id) { + return ( + + + + + {location.name} + + + {children} + {isLast && datetime && ( + + {format(new Date(datetime), "MMM d, yyyy h:mm a")} + + )} + + ); + } + + return ( + + + + + + {location.name} + + + {children} + {isLast && datetime && ( + + {format(new Date(datetime), "MMM d, yyyy h:mm a")} + + )} + + + ); +} + +export function LocationTree({ + location, + datetime, + isLatest, + showTimeline = false, +}: LocationPathProps) { + return ( + + {showTimeline && ( + + + + + + {!isLatest && } + + )} + + + + + ); +} diff --git a/src/components/Medicine/MedicationAdministration/AdministrationTab.tsx b/src/components/Medicine/MedicationAdministration/AdministrationTab.tsx new file mode 100644 index 00000000000..b70ec7e45e8 --- /dev/null +++ b/src/components/Medicine/MedicationAdministration/AdministrationTab.tsx @@ -0,0 +1,849 @@ +"use client"; + +import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; +import { format, formatDistanceToNow } from "date-fns"; +import { t } from "i18next"; +import React, { useCallback, useMemo, useState } from "react"; + +import CareIcon from "@/CAREUI/icons/CareIcon"; + +import { Button } from "@/components/ui/button"; +import { Card, CardContent } from "@/components/ui/card"; +import { Input } from "@/components/ui/input"; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/components/ui/popover"; +import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"; + +import Loading from "@/components/Common/Loading"; +import { EmptyState } from "@/components/Medicine/MedicationRequestTable"; +import { getFrequencyDisplay } from "@/components/Medicine/MedicationsTable"; +import { formatDosage } from "@/components/Medicine/utils"; + +import mutate from "@/Utils/request/mutate"; +import query from "@/Utils/request/query"; +import { formatName } from "@/Utils/utils"; +import { + MedicationAdministration, + MedicationAdministrationRequest, +} from "@/types/emr/medicationAdministration/medicationAdministration"; +import medicationAdministrationApi from "@/types/emr/medicationAdministration/medicationAdministrationApi"; +import { + ACTIVE_MEDICATION_STATUSES, + INACTIVE_MEDICATION_STATUSES, + MedicationRequestRead, +} from "@/types/emr/medicationRequest"; +import medicationRequestApi from "@/types/emr/medicationRequest/medicationRequestApi"; + +import { MedicineAdminDialog } from "./MedicineAdminDialog"; +import { MedicineAdminSheet } from "./MedicineAdminSheet"; +import { + STATUS_COLORS, + TIME_SLOTS, + createMedicationAdministrationRequest, +} from "./utils"; + +// Utility Functions +function isTimeInSlot( + date: Date, + slot: { date: Date; start: string; end: string }, +): boolean { + const slotStartDate = new Date(slot.date); + const [startHour] = slot.start.split(":").map(Number); + const [endHour] = slot.end.split(":").map(Number); + + slotStartDate.setHours(startHour, 0, 0, 0); + const slotEndDate = new Date(slotStartDate); + slotEndDate.setHours(endHour, 0, 0, 0); + + return date >= slotStartDate && date < slotEndDate; +} + +function getAdministrationsForTimeSlot( + administrations: MedicationAdministration[], + medicationId: string, + slotDate: Date, + start: string, + end: string, +): MedicationAdministration[] { + return administrations.filter((admin) => { + const adminDate = new Date(admin.occurrence_period_start); + const slotStartDate = new Date(slotDate); + const slotEndDate = new Date(slotDate); + + const [startHour] = start.split(":").map(Number); + const [endHour] = end.split(":").map(Number); + + slotStartDate.setHours(startHour, 0, 0, 0); + slotEndDate.setHours(endHour, 0, 0, 0); + + return ( + admin.request === medicationId && + adminDate >= slotStartDate && + adminDate < slotEndDate + ); + }); +} + +// Types and Interfaces +interface AdministrationTabProps { + patientId: string; + encounterId: string; +} + +interface TimeSlotHeaderProps { + slot: (typeof TIME_SLOTS)[number] & { date: Date }; + isCurrentSlot: boolean; + isEndSlot: boolean; +} + +interface MedicationStatusBadgeProps { + status: string; +} + +interface MedicationBadgesProps { + medication: MedicationRequestRead; +} + +interface MedicationRowProps { + medication: MedicationRequestRead; + visibleSlots: ((typeof TIME_SLOTS)[number] & { date: Date })[]; + currentDate: Date; + administrations?: MedicationAdministration[]; + onAdminister: (medication: MedicationRequestRead) => void; + onEditAdministration: ( + medication: MedicationRequestRead, + admin: MedicationAdministration, + ) => void; + onDiscontinue: (medication: MedicationRequestRead) => void; +} + +// Utility Components +const MedicationStatusBadge: React.FC = ({ + status, +}) => ( + + {t(status)} + +); + +const MedicationBadges: React.FC = ({ medication }) => ( + + + {medication.dosage_instruction[0]?.route?.display || "Oral"} + + {medication.dosage_instruction[0]?.as_needed_boolean && ( + + {t("as_needed_prn")} + + )} + + +); + +const TimeSlotHeader: React.FC = ({ + slot, + isCurrentSlot, + isEndSlot, +}) => { + const isFirstSlotOfDay = slot.start === "00:00"; + const isLastSlotOfDay = slot.start === "18:00"; + + return ( + + {isFirstSlotOfDay && ( + + + + {format(slot.date, "dd MMM").toUpperCase()} + + + {format(slot.date, "EEE")} + + + + + )} + {!isFirstSlotOfDay && !isLastSlotOfDay && ( + + + + )} + {isLastSlotOfDay && ( + + + + + {format(slot.date, "dd MMM").toUpperCase()} + + + {format(slot.date, "EEE")} + + + + )} + {isCurrentSlot && isEndSlot && ( + + + + )} + + ); +}; + +const MedicationRow: React.FC = ({ + medication, + visibleSlots, + currentDate, + administrations, + onAdminister, + onEditAdministration, + onDiscontinue, +}) => { + const isInactive = INACTIVE_MEDICATION_STATUSES.includes( + medication.status as (typeof INACTIVE_MEDICATION_STATUSES)[number], + ); + + return ( + + + + {medication.medication?.display} + + + + {formatDosage(medication.dosage_instruction[0])},{" "} + { + getFrequencyDisplay(medication.dosage_instruction[0]?.timing) + ?.meaning + } + + + {t("added_on")}:{" "} + {format( + new Date(medication.authored_on || medication.created_date), + "MMM dd, yyyy, hh:mm a", + )} + + + + {visibleSlots.map((slot) => { + const administrationRecords = getAdministrationsForTimeSlot( + administrations || [], + medication.id, + slot.date, + slot.start, + slot.end, + ); + const isCurrentSlot = isTimeInSlot(currentDate, slot); + + return ( + + {administrationRecords?.map((admin) => { + const colorClass = + STATUS_COLORS[admin.status as keyof typeof STATUS_COLORS] || + STATUS_COLORS.default; + + return ( + onEditAdministration(medication, admin)} + > + + + + + + {admin.note && ( + + + + )} + + + + + {new Date( + admin.occurrence_period_start, + ).toLocaleTimeString("en-US", { + hour: "numeric", + minute: "2-digit", + hour12: true, + })} + + {admin.occurrence_period_end && ( + <> + {"-"} + + {new Date( + admin.occurrence_period_end, + ).toLocaleTimeString("en-US", { + hour: "numeric", + minute: "2-digit", + hour12: true, + })} + + + )} + + + ); + })} + {isCurrentSlot && medication.status === "active" && ( + onAdminister(medication)} + > + {t("administer")} + + )} + + ); + })} + + + {ACTIVE_MEDICATION_STATUSES.includes( + medication.status as (typeof ACTIVE_MEDICATION_STATUSES)[number], + ) && ( + + + + + + + + { + onDiscontinue(medication); + // Close the popover after clicking + const button = document.activeElement as HTMLElement; + button?.blur(); + }} + > + + {t("discontinue")} + + + + )} + + + ); +}; + +export const AdministrationTab: React.FC = ({ + patientId, + encounterId, +}) => { + const currentDate = new Date(); + const [endSlotDate, setEndSlotDate] = useState(currentDate); + const [showStopped, setShowStopped] = useState(false); + const [searchQuery, setSearchQuery] = useState(""); + const [endSlotIndex, setEndSlotIndex] = useState( + Math.floor(currentDate.getHours() / 6), + ); + // Calculate visible slots based on end slot + const visibleSlots = useMemo(() => { + const slots = []; + let currentIndex = endSlotIndex; + let currentDate = new Date(endSlotDate); + + // Add slots from right to left + for (let i = 0; i < 4; i++) { + if (currentIndex < 0) { + currentIndex = 3; + currentDate = new Date(currentDate); + currentDate.setDate(currentDate.getDate() - 1); + } + slots.unshift({ + ...TIME_SLOTS[currentIndex], + date: new Date(currentDate), + }); + currentIndex--; + } + return slots; + }, [endSlotDate, endSlotIndex]); + + const queryClient = useQueryClient(); + + // Queries + const { data: activeMedications } = useQuery({ + queryKey: ["medication_requests_active", patientId], + queryFn: query(medicationRequestApi.list, { + pathParams: { patientId }, + queryParams: { + encounter: encounterId, + limit: 100, + status: ACTIVE_MEDICATION_STATUSES.join(","), + }, + }), + enabled: !!patientId, + }); + + const { data: stoppedMedications } = useQuery({ + queryKey: ["medication_requests_stopped", patientId], + queryFn: query(medicationRequestApi.list, { + pathParams: { patientId }, + queryParams: { + encounter: encounterId, + limit: 100, + status: INACTIVE_MEDICATION_STATUSES.join(","), + }, + }), + enabled: !!patientId, + }); + + const { data: administrations } = useQuery({ + queryKey: ["medication_administrations", patientId, visibleSlots], + queryFn: query(medicationAdministrationApi.list, { + pathParams: { patientId }, + queryParams: { + encounter: encounterId, + limit: 100, + ...(visibleSlots.length > 0 && { + occurrence_period_start_after: (() => { + const firstSlot = visibleSlots[0]; + const [startHour] = firstSlot.start.split(":").map(Number); + const date = new Date(firstSlot.date); + date.setHours(startHour, 0, 0, 0); + return format(date, "yyyy-MM-dd'T'HH:mm:ss"); + })(), + occurrence_period_start_before: (() => { + const lastSlot = visibleSlots[visibleSlots.length - 1]; + const [endHour] = lastSlot.end.split(":").map(Number); + const date = new Date(lastSlot.date); + date.setHours(endHour, 0, 0, 0); + return format(date, "yyyy-MM-dd'T'HH:mm:ss"); + })(), + }), + }, + }), + enabled: !!patientId && !!visibleSlots?.length, + }); + + // Get last administered date and last administered by for each medication + const lastAdministeredDetails = useMemo(() => { + return administrations?.results?.reduce<{ + dates: Record; + performers: Record; + }>( + (acc, admin) => { + const existingDate = acc.dates[admin.request]; + const adminDate = new Date(admin.occurrence_period_start); + + if (!existingDate || adminDate > new Date(existingDate)) { + acc.dates[admin.request] = admin.occurrence_period_start; + acc.performers[admin.request] = admin.created_by + ? formatName(admin.created_by) + : ""; + } + + return acc; + }, + { dates: {}, performers: {} }, + ); + }, [administrations?.results]); + + // Calculate earliest authored date from all medications + const getEarliestAuthoredDate = (medications: MedicationRequestRead[]) => { + if (!medications?.length) return null; + return new Date( + Math.min( + ...medications.map((med) => + new Date(med.authored_on || med.created_date).getTime(), + ), + ), + ); + }; + + // Calculate if we can go back further based on the earliest slot and authored date + const canGoBack = useMemo(() => { + const medications = showStopped + ? [ + ...(activeMedications?.results || []), + ...(stoppedMedications?.results || []), + ] + : activeMedications?.results || []; + + const earliestAuthoredDate = getEarliestAuthoredDate(medications); + if (!earliestAuthoredDate || !visibleSlots.length) return true; + + const firstSlotDate = new Date(visibleSlots[0].date); + const [startHour] = visibleSlots[0].start.split(":").map(Number); + firstSlotDate.setHours(startHour, 0, 0, 0); + + return firstSlotDate > earliestAuthoredDate; + }, [activeMedications, stoppedMedications, showStopped, visibleSlots]); + + // State for administration + const [selectedMedication, setSelectedMedication] = + useState(null); + const [dialogOpen, setDialogOpen] = useState(false); + const [isSheetOpen, setIsSheetOpen] = useState(false); + const [administrationRequest, setAdministrationRequest] = + useState(null); + + // Calculate last modified date + const lastModifiedDate = useMemo(() => { + if (!administrations?.results?.length) return null; + + const sortedAdmins = [...administrations.results].sort( + (a, b) => + new Date(b.occurrence_period_start).getTime() - + new Date(a.occurrence_period_start).getTime(), + ); + + return new Date(sortedAdmins[0].occurrence_period_start); + }, [administrations?.results]); + + // Mutations + const { mutate: discontinueMedication } = useMutation({ + mutationFn: mutate(medicationRequestApi.upsert, { + pathParams: { patientId }, + }), + onSuccess: () => { + queryClient.invalidateQueries({ + queryKey: ["medication_requests_active"], + }); + queryClient.invalidateQueries({ + queryKey: ["medication_requests_stopped"], + }); + }, + }); + + // Handlers + const handlePreviousSlot = useCallback(() => { + if (!canGoBack) return; + + const newEndSlotIndex = endSlotIndex - 1; + if (newEndSlotIndex < 0) { + setEndSlotIndex(3); + const newDate = new Date(endSlotDate); + newDate.setDate(newDate.getDate() - 1); + setEndSlotDate(newDate); + } else { + setEndSlotIndex(newEndSlotIndex); + } + }, [endSlotDate, endSlotIndex, canGoBack]); + + const handleNextSlot = useCallback(() => { + const newEndSlotIndex = endSlotIndex + 1; + if (newEndSlotIndex > 3) { + setEndSlotIndex(0); + const newDate = new Date(endSlotDate); + newDate.setDate(newDate.getDate() + 1); + setEndSlotDate(newDate); + } else { + setEndSlotIndex(newEndSlotIndex); + } + }, [endSlotDate, endSlotIndex]); + + const handleAdminister = useCallback( + (medication: MedicationRequestRead) => { + setAdministrationRequest( + createMedicationAdministrationRequest(medication, encounterId), + ); + setSelectedMedication(medication); + setDialogOpen(true); + }, + [encounterId], + ); + + const handleEditAdministration = useCallback( + (medication: MedicationRequestRead, admin: MedicationAdministration) => { + setAdministrationRequest({ + id: admin.id, + request: admin.request, + encounter: admin.encounter, + note: admin.note || "", + occurrence_period_start: admin.occurrence_period_start, + occurrence_period_end: admin.occurrence_period_end, + status: admin.status, + medication: admin.medication, + dosage: admin.dosage, + }); + setSelectedMedication(medication); + setDialogOpen(true); + }, + [], + ); + + const handleDiscontinue = useCallback( + (medication: MedicationRequestRead) => { + discontinueMedication({ + datapoints: [ + { + ...medication, + status: "ended", + encounter: encounterId, + }, + ], + }); + }, + [discontinueMedication, encounterId], + ); + + const medications = showStopped + ? [ + ...(activeMedications?.results || []), + ...(stoppedMedications?.results || []), + ] + : activeMedications?.results || []; + + const filteredMedications = !searchQuery.trim() + ? medications + : [ + ...(activeMedications?.results || []), + ...(stoppedMedications?.results || []), + ].filter((med: MedicationRequestRead) => + med.medication?.display + ?.toLowerCase() + .includes(searchQuery.toLowerCase().trim()), + ); + + let content; + if (!activeMedications || !stoppedMedications) { + content = ( + + + + ); + } else if ( + !activeMedications?.results?.length && + !stoppedMedications?.results?.length + ) { + content = ( + + ); + } else if (searchQuery && !filteredMedications.length) { + content = ; + } else { + content = ( + <> + {!filteredMedications.length && ( + + + {t("no_active_medication_recorded")} + + + )} + + + + {/* Top row without vertical borders */} + + + + {lastModifiedDate && ( + + {t("last_modified")}{" "} + {formatDistanceToNow(lastModifiedDate)} {t("ago")} + + )} + + + + + + + + {visibleSlots.map((slot) => ( + + ))} + + + + + + + + {/* Main content with borders */} + + {/* Headers */} + + {t("medicine")}: + + {visibleSlots.map((slot, i) => ( + + {i === endSlotIndex && + slot.date.getTime() === currentDate.getTime() && ( + + + + )} + {slot.label} + + ))} + + + {/* Medication rows */} + {filteredMedications?.map((medication) => ( + + ))} + + + + {stoppedMedications?.results?.length > 0 && !searchQuery.trim() && ( + setShowStopped(!showStopped)} + > + + + {showStopped ? t("hide") : t("show")}{" "} + {`${stoppedMedications?.results?.length} ${t("stopped")}`}{" "} + {t("prescriptions")} + + + )} + + + + + ); + } + + return ( + + + + + + setSearchQuery(e.target.value)} + className="flex-1 bg-transparent text-sm outline-none placeholder:text-gray-500" + /> + {searchQuery && ( + setSearchQuery("")} + > + + + )} + + + setIsSheetOpen(true)} + > + + {t("administer_medicine")} + + + + {content} + + {selectedMedication && administrationRequest && ( + { + setDialogOpen(open); + if (!open) { + setAdministrationRequest(null); + setSelectedMedication(null); + queryClient.invalidateQueries({ + queryKey: ["medication_administrations"], + }); + } + }} + medication={selectedMedication} + lastAdministeredDate={ + lastAdministeredDetails?.dates[selectedMedication.id] + } + lastAdministeredBy={ + lastAdministeredDetails?.performers[selectedMedication.id] + } + administrationRequest={administrationRequest} + patientId={patientId} + /> + )} + + { + setIsSheetOpen(open); + if (!open) { + queryClient.invalidateQueries({ + queryKey: ["medication_administrations"], + }); + } + }} + medications={medications} + lastAdministeredDates={lastAdministeredDetails?.dates} + patientId={patientId} + encounterId={encounterId} + /> + + ); +}; diff --git a/src/components/Medicine/MedicationAdministration/MedicineAdminDialog.tsx b/src/components/Medicine/MedicationAdministration/MedicineAdminDialog.tsx new file mode 100644 index 00000000000..d8e711e5f2d --- /dev/null +++ b/src/components/Medicine/MedicationAdministration/MedicineAdminDialog.tsx @@ -0,0 +1,108 @@ +"use client"; + +import { useMutation } from "@tanstack/react-query"; +import { t } from "i18next"; +import React from "react"; +import { toast } from "sonner"; + +import { Button } from "@/components/ui/button"; +import { + Dialog, + DialogContent, + DialogFooter, + DialogHeader, + DialogTitle, +} from "@/components/ui/dialog"; + +import mutate from "@/Utils/request/mutate"; +import { MedicationAdministrationRequest } from "@/types/emr/medicationAdministration/medicationAdministration"; +import medicationAdministrationApi from "@/types/emr/medicationAdministration/medicationAdministrationApi"; +import { MedicationRequestRead } from "@/types/emr/medicationRequest"; + +import { MedicineAdminForm } from "./MedicineAdminForm"; + +interface Props { + open: boolean; + onOpenChange: (open: boolean) => void; + medication: MedicationRequestRead; + lastAdministeredDate?: string; + lastAdministeredBy?: string; + administrationRequest: MedicationAdministrationRequest; + patientId: string; +} + +export const MedicineAdminDialog = ({ + open, + onOpenChange, + medication, + lastAdministeredDate, + lastAdministeredBy, + administrationRequest: initialRequest, + patientId, +}: Props) => { + const [administrationRequest, setAdministrationRequest] = + React.useState(initialRequest); + const [isFormValid, setIsFormValid] = React.useState(true); + + // Update state when initialRequest changes + React.useEffect(() => { + setAdministrationRequest(initialRequest); + }, [initialRequest]); + + const { mutate: upsertAdministration, isPending } = useMutation({ + mutationFn: mutate(medicationAdministrationApi.upsert, { + pathParams: { patientId: patientId }, + }), + onSuccess: () => { + onOpenChange(false); + toast.success(t("medication_administration_saved")); + }, + }); + + const handleSubmit = () => { + upsertAdministration({ + datapoints: [administrationRequest], + }); + }; + + return ( + + + + + + {administrationRequest.id + ? t("edit_administration") + : t("administer_medicine")} + + + + + + + + + + onOpenChange(false)}> + {t("cancel")} + + + {isPending + ? t("saving") + : administrationRequest.id + ? t("update") + : t("administer_medicine")} + + + + + ); +}; diff --git a/src/components/Medicine/MedicationAdministration/MedicineAdminForm.tsx b/src/components/Medicine/MedicationAdministration/MedicineAdminForm.tsx new file mode 100644 index 00000000000..3519619d08a --- /dev/null +++ b/src/components/Medicine/MedicationAdministration/MedicineAdminForm.tsx @@ -0,0 +1,453 @@ +"use client"; + +import { format, formatDistanceToNow } from "date-fns"; +import { t } from "i18next"; +import React, { useEffect, useState } from "react"; + +import { cn } from "@/lib/utils"; + +import CareIcon from "@/CAREUI/icons/CareIcon"; + +import { Button } from "@/components/ui/button"; +import { Calendar } from "@/components/ui/calendar"; +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/components/ui/popover"; +import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; + +import { getFrequencyDisplay } from "@/components/Medicine/MedicationsTable"; +import { formatDosage } from "@/components/Medicine/utils"; + +import { formatName } from "@/Utils/utils"; +import { + MEDICATION_ADMINISTRATION_STATUS, + MedicationAdministrationRequest, + MedicationAdministrationStatus, +} from "@/types/emr/medicationAdministration/medicationAdministration"; +import { MedicationRequestRead } from "@/types/emr/medicationRequest"; + +interface MedicineAdminFormProps { + medication: MedicationRequestRead; + lastAdministeredDate?: string; + lastAdministeredBy?: string; + administrationRequest: MedicationAdministrationRequest; + onChange: (request: MedicationAdministrationRequest) => void; + formId: string; + isValid?: (valid: boolean) => void; +} + +export const MedicineAdminForm: React.FC = ({ + medication, + lastAdministeredDate, + lastAdministeredBy, + administrationRequest, + onChange, + formId, + isValid, +}) => { + const [isPastTime, setIsPastTime] = useState( + administrationRequest.occurrence_period_start !== + administrationRequest.occurrence_period_end || !!administrationRequest.id, + ); + const [startTimeError, setStartTimeError] = useState(""); + const [endTimeError, setEndTimeError] = useState(""); + + const validateDateTime = (date: Date, isStartTime: boolean): string => { + const now = new Date(); + const authoredOn = new Date(medication.authored_on); + const startTime = new Date(administrationRequest.occurrence_period_start); + + if (date > now) { + return t( + isStartTime ? "start_time_future_error" : "end_time_future_error", + ); + } + + if (isStartTime) { + return date < authoredOn ? t("start_time_before_authored_error") : ""; + } + + return date < startTime ? t("end_time_before_start_error") : ""; + }; + + // Validate and notify parent whenever times change + useEffect(() => { + if (!administrationRequest.occurrence_period_start) { + isValid?.(false); + return; + } + + const startDate = new Date(administrationRequest.occurrence_period_start); + const startError = validateDateTime(startDate, true); + setStartTimeError(startError); + + // Only validate end time if status is completed or if end time is provided + if ( + administrationRequest.status === "completed" || + administrationRequest.occurrence_period_end + ) { + if (!administrationRequest.occurrence_period_end) { + isValid?.(false); + return; + } + const endDate = new Date(administrationRequest.occurrence_period_end); + const endError = validateDateTime(endDate, false); + setEndTimeError(endError); + isValid?.(!startError && !endError); + } else { + setEndTimeError(""); + isValid?.(!startError); + } + }, [ + administrationRequest.occurrence_period_start, + administrationRequest.occurrence_period_end, + administrationRequest.status, + isValid, + ]); + + const handleDateChange = (newTime: string, isStartTime: boolean) => { + const date = new Date(newTime); + + // Preserve existing time if available + const existingDateStr = isStartTime + ? administrationRequest.occurrence_period_start + : administrationRequest.occurrence_period_end; + + if (existingDateStr) { + const existingDate = new Date(existingDateStr); + date.setHours(existingDate.getHours()); + date.setMinutes(existingDate.getMinutes()); + } + + onChange({ + ...administrationRequest, + ...(isStartTime + ? { + occurrence_period_start: date.toISOString(), + occurrence_period_end: date.toISOString(), + } + : { + occurrence_period_end: date.toISOString(), + }), + }); + }; + + const formatTime = (date: string | undefined) => { + if (!date) return ""; + try { + const dateObj = new Date(date); + if (isNaN(dateObj.getTime())) return ""; + return `${dateObj.getHours().toString().padStart(2, "0")}:${dateObj + .getMinutes() + .toString() + .padStart(2, "0")}`; + } catch { + return ""; + } + }; + + const handleTimeChange = ( + event: React.ChangeEvent, + isStartTime: boolean, + ) => { + const [hours, minutes] = event.target.value.split(":").map(Number); + if (isNaN(hours) || isNaN(minutes)) return; + + const dateStr = isStartTime + ? administrationRequest.occurrence_period_start + : administrationRequest.occurrence_period_end; + + if (!dateStr) return; + + const currentDate = new Date(dateStr); + if (isNaN(currentDate.getTime())) return; + + currentDate.setHours(hours); + currentDate.setMinutes(minutes); + + onChange({ + ...administrationRequest, + ...(isStartTime + ? { + occurrence_period_start: currentDate.toISOString(), + occurrence_period_end: currentDate.toISOString(), + } + : { + occurrence_period_end: currentDate.toISOString(), + }), + }); + }; + + return ( + + + + {medication.medication?.display} + + {lastAdministeredDate && ( + + {t("last_administered")}{" "} + {formatDistanceToNow(new Date(lastAdministeredDate))} {t("ago")}{" "} + {t("by")} {formatName(medication.created_by)} + + )} + + {t("prescribed")}{" "} + {formatDistanceToNow( + new Date(medication.authored_on || medication.created_date), + )}{" "} + {t("ago")} {t("by")} {lastAdministeredBy} + + + + + + {t("dosage")} + + {formatDosage(medication.dosage_instruction[0])} + + + + {t("frequency")} + + {getFrequencyDisplay(medication.dosage_instruction[0]?.timing) + ?.meaning || "-"} + + + + {t("route")} + + {medication.dosage_instruction[0]?.route?.display || "Oral"} + + + + {t("duration")} + + {medication.dosage_instruction[0]?.timing?.repeat?.bounds_duration + ?.value || "-"}{" "} + {medication.dosage_instruction[0]?.timing?.repeat?.bounds_duration + ?.unit || ""} + + + + + + {t("status")} + { + const newRequest = { ...administrationRequest, status: value }; + + if (value === "in_progress" || value === "not_done") { + delete newRequest.occurrence_period_end; + } else if ( + value === "completed" && + !administrationRequest.occurrence_period_end + ) { + newRequest.occurrence_period_end = + administrationRequest.occurrence_period_start; + } + + onChange(newRequest); + }} + > + + + + + {MEDICATION_ADMINISTRATION_STATUS.map((status) => ( + + {t(status)} + + ))} + + + + + + {t("administration_notes")} + + onChange({ ...administrationRequest, note: e.target.value }) + } + /> + + + {!administrationRequest.id && ( + + {t("is_this_administration_for_a_past_time")}? + { + setIsPastTime(newValue === "yes"); + if (newValue === "no") { + const now = new Date().toISOString(); + const newRequest = { + ...administrationRequest, + occurrence_period_start: now, + }; + + if ( + !( + administrationRequest.status === "in_progress" || + administrationRequest.status === "not_done" + ) + ) { + newRequest.occurrence_period_end = now; + } + + onChange(newRequest); + } + }} + className="flex gap-4" + > + + + {t("yes")} + + + + {t("no")} + + + + )} + + + {t("start_time")} + + + + + + {administrationRequest.occurrence_period_start + ? format( + new Date(administrationRequest.occurrence_period_start), + "PPP", + ) + : t("pick_a_date")} + + + + { + if (!date) return; + handleDateChange(date.toISOString(), true); + }} + initialFocus + disabled={(date) => { + const now = new Date(); + const encounterStart = new Date(medication.authored_on); + return date < encounterStart || date > now; + }} + /> + + + handleTimeChange(e, true)} + disabled={!isPastTime || !!administrationRequest.id} + /> + + {startTimeError && ( + {startTimeError} + )} + + + + {t("end_time")} + + + + + + {administrationRequest.occurrence_period_end + ? format( + new Date(administrationRequest.occurrence_period_end), + "PPP", + ) + : t("pick_a_date")} + + + + { + if (!date) return; + handleDateChange(date.toISOString(), false); + }} + initialFocus + disabled={(date) => { + const now = new Date(); + const encounterStart = new Date(medication.authored_on); + return date < encounterStart || date > now; + }} + /> + + + handleTimeChange(e, false)} + disabled={ + !isPastTime || + (!!administrationRequest.id && + administrationRequest.status !== "in_progress") || + administrationRequest.status === "in_progress" + } + /> + + {endTimeError && {endTimeError}} + + + ); +}; diff --git a/src/components/Medicine/MedicationAdministration/MedicineAdminSheet.tsx b/src/components/Medicine/MedicationAdministration/MedicineAdminSheet.tsx new file mode 100644 index 00000000000..8b22e738b59 --- /dev/null +++ b/src/components/Medicine/MedicationAdministration/MedicineAdminSheet.tsx @@ -0,0 +1,284 @@ +"use client"; + +import { useMutation } from "@tanstack/react-query"; +import { t } from "i18next"; +import { Search } from "lucide-react"; +import React, { useCallback, useMemo, useRef, useState } from "react"; +import { toast } from "sonner"; + +import { Button } from "@/components/ui/button"; +import { Checkbox } from "@/components/ui/checkbox"; +import { Input } from "@/components/ui/input"; +import { + Sheet, + SheetContent, + SheetFooter, + SheetHeader, + SheetTitle, +} from "@/components/ui/sheet"; + +import mutate from "@/Utils/request/mutate"; +import { MedicationAdministrationRequest } from "@/types/emr/medicationAdministration/medicationAdministration"; +import medicationAdministrationApi from "@/types/emr/medicationAdministration/medicationAdministrationApi"; +import { MedicationRequestRead } from "@/types/emr/medicationRequest"; + +import { MedicineAdminForm } from "./MedicineAdminForm"; +import { createMedicationAdministrationRequest } from "./utils"; + +interface Props { + open: boolean; + onOpenChange: (open: boolean) => void; + medications: MedicationRequestRead[]; + lastAdministeredDates?: Record; + patientId: string; + encounterId: string; +} + +interface MedicineListItemProps { + medicine: MedicationRequestRead; + isSelected: boolean; + onSelect: (checked: boolean) => void; + administrationRequest?: MedicationAdministrationRequest; + lastAdministeredDate?: string; + lastAdministeredBy?: string; + onAdministrationChange: (request: MedicationAdministrationRequest) => void; + isValid: (valid: boolean) => void; +} + +const MedicineListItem = ({ + medicine, + isSelected, + onSelect, + administrationRequest, + lastAdministeredDate, + lastAdministeredBy, + onAdministrationChange, + isValid, +}: MedicineListItemProps) => { + const medicationDisplay = medicine.medication?.display; + + return ( + + + + + {medicationDisplay} + {medicine.dosage_instruction[0]?.as_needed_boolean && ( + + {t("as_needed_prn")} + + )} + + + + + + + + {isSelected && administrationRequest && ( + + )} + + + + ); +}; + +export function MedicineAdminSheet({ + open, + onOpenChange, + medications, + lastAdministeredDates, + patientId, + encounterId, +}: Props) { + const [selectedMedicines, setSelectedMedicines] = useState>( + new Set(), + ); + const [administrationRequests, setAdministrationRequests] = useState< + Record + >({}); + const [formValidation, setFormValidation] = useState>( + {}, + ); + const [search, setSearch] = useState(""); + const formRef = useRef(null); + + const { mutate: upsertAdministrations, isPending } = useMutation({ + mutationFn: mutate(medicationAdministrationApi.upsert, { + pathParams: { patientId }, + }), + onSuccess: () => { + toast.success(t("medication_administration_saved")); + handleClose(); + }, + }); + + const filteredMedicines = medications.filter((medicine) => { + const display = medicine.medication?.display; + return ( + typeof display === "string" && + display.toLowerCase().includes(search.toLowerCase()) + ); + }); + + const handleSelect = useCallback( + (id: string, checked: boolean) => { + setSelectedMedicines((prev) => { + const next = new Set(prev); + if (checked) { + next.add(id); + const medicine = medications.find((m) => m.id === id); + if (medicine?.medication?.display) { + setAdministrationRequests((prev) => ({ + ...prev, + [id]: createMedicationAdministrationRequest( + medicine, + encounterId, + ), + })); + } + } else { + next.delete(id); + setAdministrationRequests((prev) => { + const { [id]: _, ...rest } = prev; + return rest; + }); + } + return next; + }); + }, + [medications, encounterId], + ); + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + const administrations = Array.from(selectedMedicines).map( + (id) => administrationRequests[id], + ); + upsertAdministrations({ + datapoints: administrations, + }); + }; + + const handleClose = () => { + onOpenChange(false); + setSelectedMedicines(new Set()); + setAdministrationRequests({}); + }; + + const handleAdministrationChange = useCallback( + (medicineId: string, request: MedicationAdministrationRequest) => { + setAdministrationRequests((prev) => ({ + ...prev, + [medicineId]: request, + })); + }, + [], + ); + + const handleFormValidation = useCallback( + (medicineId: string, isValid: boolean) => { + setFormValidation((prev) => ({ + ...prev, + [medicineId]: isValid, + })); + }, + [], + ); + + const isAllFormsValid = useMemo( + () => + Array.from(selectedMedicines).every((id) => formValidation[id] !== false), + [selectedMedicines, formValidation], + ); + + return ( + + + + + + {t("administer_medicines")} + + + + setSearch(e.target.value)} + className="pl-8" + /> + + + + + + {filteredMedicines.map((medicine) => ( + handleSelect(medicine.id, checked)} + administrationRequest={administrationRequests[medicine.id]} + lastAdministeredDate={lastAdministeredDates?.[medicine.id]} + onAdministrationChange={(request) => + handleAdministrationChange(medicine.id, request) + } + isValid={(valid) => handleFormValidation(medicine.id, valid)} + /> + ))} + + + + + + + {t("cancel")} + + { + e.preventDefault(); + handleSubmit(e as any); + }} + > + {isPending + ? t("saving") + : `${t("administer_medicines")} (${selectedMedicines.size})`} + + + + + + + ); +} diff --git a/src/components/Medicine/MedicationAdministration/utils.ts b/src/components/Medicine/MedicationAdministration/utils.ts new file mode 100644 index 00000000000..377f2febb1d --- /dev/null +++ b/src/components/Medicine/MedicationAdministration/utils.ts @@ -0,0 +1,116 @@ +import { format } from "date-fns"; + +import { MedicationAdministrationRequest } from "@/types/emr/medicationAdministration/medicationAdministration"; +import { MedicationRequestRead } from "@/types/emr/medicationRequest"; + +// Constants +export const TIME_SLOTS = [ + { label: "12:00 AM - 06:00 AM", start: "00:00", end: "06:00" }, + { label: "06:00 AM - 12:00 PM", start: "06:00", end: "12:00" }, + { label: "12:00 PM - 06:00 PM", start: "12:00", end: "18:00" }, + { label: "06:00 PM - 12:00 AM", start: "18:00", end: "24:00" }, +] as const; + +export const STATUS_COLORS = { + completed: "bg-emerald-50 text-emerald-700 border-emerald-200", + in_progress: "bg-yellow-50 text-yellow-700 border-yellow-200", + default: "bg-red-50 text-red-700 border-red-200", +} as const; + +// Utility Functions +export function createMedicationAdministrationRequest( + medication: MedicationRequestRead, + encounterId: string, +): MedicationAdministrationRequest { + return { + request: medication.id, + encounter: encounterId, + medication: { + code: medication.medication?.code, + display: medication.medication?.display, + system: medication.medication?.system, + }, + occurrence_period_start: format(new Date(), "yyyy-MM-dd'T'HH:mm"), + occurrence_period_end: format(new Date(), "yyyy-MM-dd'T'HH:mm"), + note: "", + status: "completed", + dosage: { + site: medication.dosage_instruction[0]?.site, + route: medication.dosage_instruction[0]?.route, + method: medication.dosage_instruction[0]?.method, + dose: medication.dosage_instruction[0]?.dose_and_rate?.dose_quantity && { + value: + medication.dosage_instruction[0]?.dose_and_rate?.dose_quantity?.value, + unit: medication.dosage_instruction[0]?.dose_and_rate?.dose_quantity + ?.unit, + }, + }, + }; +} + +export function isTimeInSlot( + date: Date, + slot: { date: Date; start: string; end: string }, +): boolean { + const slotStartDate = new Date(slot.date); + const [startHour] = slot.start.split(":").map(Number); + const [endHour] = slot.end.split(":").map(Number); + + slotStartDate.setHours(startHour, 0, 0, 0); + const slotEndDate = new Date(slotStartDate); + slotEndDate.setHours(endHour, 0, 0, 0); + + return date >= slotStartDate && date < slotEndDate; +} + +export function getAdministrationsForTimeSlot< + T extends { + occurrence_period_start: string; + request: string; + }, +>( + administrations: T[], + medicationId: string, + slotDate: Date, + start: string, + end: string, +): T[] { + return administrations.filter((admin) => { + const adminDate = new Date(admin.occurrence_period_start); + const slotStartDate = new Date(slotDate); + const slotEndDate = new Date(slotDate); + + const [startHour] = start.split(":").map(Number); + const [endHour] = end.split(":").map(Number); + + slotStartDate.setHours(startHour, 0, 0, 0); + slotEndDate.setHours(endHour, 0, 0, 0); + + return ( + admin.request === medicationId && + adminDate >= slotStartDate && + adminDate < slotEndDate + ); + }); +} + +export function getCurrentTimeSlotIndex(): number { + const hour = new Date().getHours(); + if (hour < 6) return 0; + if (hour < 12) return 1; + if (hour < 18) return 2; + return 3; +} + +export function getEarliestAuthoredDate( + medications: MedicationRequestRead[], +): Date | null { + if (!medications?.length) return null; + return new Date( + Math.min( + ...medications.map((med) => + new Date(med.authored_on || med.created_date).getTime(), + ), + ), + ); +} diff --git a/src/components/Medicine/MedicationRequestTable/index.tsx b/src/components/Medicine/MedicationRequestTable/index.tsx index 92210bf98b9..cbf81bafe8b 100644 --- a/src/components/Medicine/MedicationRequestTable/index.tsx +++ b/src/components/Medicine/MedicationRequestTable/index.tsx @@ -1,23 +1,55 @@ import { useQuery } from "@tanstack/react-query"; +import { t } from "i18next"; import { PencilIcon } from "lucide-react"; import { Link } from "raviger"; import { useState } from "react"; -import SubHeading from "@/CAREUI/display/SubHeading"; import CareIcon from "@/CAREUI/icons/CareIcon"; -import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; +import { Input } from "@/components/ui/input"; import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import Loading from "@/components/Common/Loading"; +import { AdministrationTab } from "@/components/Medicine/MedicationAdministration/AdministrationTab"; import { MedicationsTable } from "@/components/Medicine/MedicationsTable"; import query from "@/Utils/request/query"; import { MedicationRequestRead } from "@/types/emr/medicationRequest"; import medicationRequestApi from "@/types/emr/medicationRequest/medicationRequestApi"; +interface EmptyStateProps { + searching?: boolean; + searchQuery?: string; + message?: string; + description?: string; +} + +export const EmptyState = ({ + searching, + searchQuery, + message, + description, +}: EmptyStateProps) => ( + + + + + + + {message || (searching ? "No matches found" : "No Prescriptions")} + + + {description || + (searching + ? `No medications match "${searchQuery}"` + : "No medications have been prescribed yet")} + + + +); + interface Props { readonly?: boolean; facilityId: string; @@ -26,147 +58,178 @@ interface Props { } export default function MedicationRequestTable({ - facilityId, patientId, encounterId, + facilityId, }: Props) { const [searchQuery, setSearchQuery] = useState(""); + const [showStopped, setShowStopped] = useState(false); - const { data: medications, isLoading: loading } = useQuery({ - queryKey: ["medication_requests", patientId], + const { data: activeMedications, isLoading: loadingActive } = useQuery({ + queryKey: ["medication_requests_active", patientId], queryFn: query(medicationRequestApi.list, { pathParams: { patientId: patientId }, - queryParams: { encounter: encounterId }, + queryParams: { + encounter: encounterId, + limit: 100, + status: ["active", "on-hold", "draft", "unknown"].join(","), + }, }), enabled: !!patientId, }); - const filteredMedications = medications?.results?.filter( - (med: MedicationRequestRead) => { - if (!searchQuery.trim()) return true; - const searchTerm = searchQuery.toLowerCase().trim(); - const medicationName = med.medication?.display?.toLowerCase() || ""; - return medicationName.includes(searchTerm); - }, - ); + const { data: stoppedMedications, isLoading: loadingStopped } = useQuery({ + queryKey: ["medication_requests_stopped", patientId], + queryFn: query(medicationRequestApi.list, { + pathParams: { patientId: patientId }, + queryParams: { + encounter: encounterId, + limit: 100, + status: ["ended", "completed", "cancelled", "entered_in_error"].join( + ",", + ), + }, + }), + enabled: !!patientId, + }); - const activeMedications = filteredMedications?.filter( - (med: MedicationRequestRead) => - ["active", "on_hold"].includes(med.status || ""), - ); - const discontinuedMedications = filteredMedications?.filter( - (med: MedicationRequestRead) => - !["active", "on_hold"].includes(med.status || ""), - ); + const medications = showStopped + ? [ + ...(activeMedications?.results || []), + ...(stoppedMedications?.results || []), + ] + : activeMedications?.results || []; - const EmptyState = ({ searching }: { searching?: boolean }) => ( - - - - - - - {searching ? "No matches found" : "No Prescriptions"} - - - {searching - ? `No medications match "${searchQuery}"` - : "No medications have been prescribed yet"} - - - - ); + const displayedMedications = !searchQuery.trim() + ? medications + : [ + ...(activeMedications?.results || []), + ...(stoppedMedications?.results || []), + ].filter((med: MedicationRequestRead) => + med.medication?.display + ?.toLowerCase() + .includes(searchQuery.toLowerCase().trim()), + ); + + const isLoading = loadingActive || loadingStopped; return ( - - - - - Edit - - - - - - Print - - - - } - /> - - - - - setSearchQuery(e.target.value)} - className="flex-1 bg-transparent text-sm outline-none placeholder:text-gray-500" - /> - {searchQuery && ( - setSearchQuery("")} + + + + - - - )} - - - {loading ? ( - - - - ) : !medications?.results?.length ? ( - - ) : !filteredMedications?.length ? ( - - ) : ( - - - - - - Active{" "} - - {activeMedications?.length || 0} - - - - Discontinued{" "} - - {discontinuedMedications?.length || 0} - - - - + {t("prescriptions")} + + + {t("medicine_administration")} + + - - - - - - + + + + + setSearchQuery(e.target.value)} + className="flex-1 bg-transparent text-sm outline-none placeholder:text-gray-500" /> - + {searchQuery && ( + setSearchQuery("")} + > + + + )} + + + + + + {t("edit")} + + + + + + {t("print")} + + + - - - - )} + + {isLoading ? ( + + + + ) : !activeMedications?.results?.length && + !stoppedMedications?.results?.length ? ( + + ) : searchQuery && !displayedMedications.length ? ( + + ) : ( + + + + + + {!!stoppedMedications?.results?.length && + !searchQuery.trim() && ( + setShowStopped(!showStopped)} + > + + + {showStopped ? t("hide") : t("show")}{" "} + {`${stoppedMedications?.results?.length} ${t("stopped")}`}{" "} + {t("prescriptions")} + + + )} + + + + )} + + + + + + + ); diff --git a/src/components/Medicine/MedicationRequestTable/utils.ts b/src/components/Medicine/MedicationRequestTable/utils.ts deleted file mode 100644 index b32427c3a80..00000000000 --- a/src/components/Medicine/MedicationRequestTable/utils.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { MedicationRequest } from "@/types/emr/medicationRequest"; - -export function isMedicationDiscontinued(medicationRequest: MedicationRequest) { - return ["completed", "ended", "stopped", "cancelled"].includes( - medicationRequest.status!, - ); -} diff --git a/src/components/Medicine/MedicationsTable.tsx b/src/components/Medicine/MedicationsTable.tsx index 059e35bd4d4..d78c736fd28 100644 --- a/src/components/Medicine/MedicationsTable.tsx +++ b/src/components/Medicine/MedicationsTable.tsx @@ -1,5 +1,6 @@ import { useTranslation } from "react-i18next"; +import { CardContent } from "@/components/ui/card"; import { Table, TableBody, @@ -12,6 +13,7 @@ import { import { reverseFrequencyOption } from "@/components/Questionnaire/QuestionTypes/MedicationRequestQuestion"; import { + INACTIVE_MEDICATION_STATUSES, MEDICATION_REQUEST_TIMING_OPTIONS, MedicationRequestDosageInstruction, MedicationRequestRead, @@ -19,7 +21,7 @@ import { import { formatDosage, formatSig } from "./utils"; -function getFrequencyDisplay( +export function getFrequencyDisplay( timing?: MedicationRequestDosageInstruction["timing"], ) { if (!timing) return undefined; @@ -38,11 +40,13 @@ interface MedicationsTableProps { export const MedicationsTable = ({ medications }: MedicationsTableProps) => { const { t } = useTranslation(); - if (!medications?.length) { + if (!medications.length) { return ( - - {t("no_medications_found_for_this_encounter")} - + + + {t("no_active_medication_recorded")} + + ); } @@ -66,8 +70,15 @@ export const MedicationsTable = ({ medications }: MedicationsTableProps) => { const duration = instruction?.timing?.repeat?.bounds_duration; const remarks = formatSig(instruction); const notes = medication.note; + const isInactive = INACTIVE_MEDICATION_STATUSES.includes( + medication.status as (typeof INACTIVE_MEDICATION_STATUSES)[number], + ); + return ( - + {medication.medication?.display} diff --git a/src/components/Medicine/MultiValueSetSelect.tsx b/src/components/Medicine/MultiValueSetSelect.tsx index f80415b8254..c3da4742235 100644 --- a/src/components/Medicine/MultiValueSetSelect.tsx +++ b/src/components/Medicine/MultiValueSetSelect.tsx @@ -55,6 +55,7 @@ export function MultiValueSetSelect({ + { if (encounterId) { navigate( - `/facility/${facilityId}/encounter/${encounterId}/updates`, + `/facility/${facilityId}/patient/${patientId}/encounter/${encounterId}/updates`, ); } else { navigate(`/patient/${patientId}/updates`); diff --git a/src/components/Patient/FileUploadPage.tsx b/src/components/Patient/FileUploadPage.tsx deleted file mode 100644 index 06c5e2987e6..00000000000 --- a/src/components/Patient/FileUploadPage.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import Page from "@/components/Common/Page"; -import { FileUpload } from "@/components/Files/FileUpload"; - -import routes from "@/Utils/request/api"; -import useTanStackQueryInstead from "@/Utils/request/useQuery"; - -export default function FileUploadPage(props: { - facilityId: string; - patientId: string; - encounterId?: string; - type: "encounter" | "patient"; -}) { - const { facilityId, patientId, encounterId, type } = props; - const { data: patient } = useTanStackQueryInstead(routes.getPatient, { - pathParams: { id: patientId }, - prefetch: !!patientId, - }); - return ( - - - - ); -} diff --git a/src/components/Patient/MedicationStatementList.tsx b/src/components/Patient/MedicationStatementList.tsx index 39c8e334cda..606c00962d7 100644 --- a/src/components/Patient/MedicationStatementList.tsx +++ b/src/components/Patient/MedicationStatementList.tsx @@ -1,10 +1,18 @@ import { useQuery } from "@tanstack/react-query"; +import { t } from "i18next"; import { useState } from "react"; import { useTranslation } from "react-i18next"; +import { cn } from "@/lib/utils"; + import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/components/ui/popover"; import { Skeleton } from "@/components/ui/skeleton"; import { Table, @@ -14,88 +22,89 @@ import { TableHeader, TableRow, } from "@/components/ui/table"; -import { - Tooltip, - TooltipContent, - TooltipTrigger, -} from "@/components/ui/tooltip"; -import routes from "@/Utils/request/api"; +import { Avatar } from "@/components/Common/Avatar"; + import query from "@/Utils/request/query"; -import { formatDateTime } from "@/Utils/utils"; +import { formatDateTime, formatName } from "@/Utils/utils"; +import { + MEDICATION_STATEMENT_STATUS_STYLES, + MedicationStatementRead, +} from "@/types/emr/medicationStatement"; +import medicationStatementApi from "@/types/emr/medicationStatement/medicationStatementApi"; interface MedicationStatementListProps { patientId: string; + className?: string; } interface MedicationRowProps { - statement: any; + statement: MedicationStatementRead; isEnteredInError?: boolean; - index: number; } -function MedicationRow({ - statement, - isEnteredInError, - index, -}: MedicationRowProps) { +function MedicationRow({ statement, isEnteredInError }: MedicationRowProps) { + const { t } = useTranslation(); + return ( - - - - {statement.medication.display ?? statement.medication.code} - - - {statement.medication.display ?? statement.medication.code} - - - - - - - {statement.dosage_text} - - - {statement.dosage_text} - - + + {statement.medication.display ?? statement.medication.code} + {statement.dosage_text} {statement.status} - + {[statement.effective_period?.start, statement.effective_period?.end] .map((date) => formatDateTime(date)) .join(" - ")} - - - - {statement.reason} - - - {statement.reason} - - + {statement.reason} + + {statement.note ? ( + + + + + {t("see_note")} + + + + + {statement.note} + + + + + ) : ( + "-" + )} - - - - {statement.note} - - - {statement.note} - - + + + + {formatName(statement.created_by)} + ); @@ -103,27 +112,23 @@ function MedicationRow({ export function MedicationStatementList({ patientId, + className = "", }: MedicationStatementListProps) { const { t } = useTranslation(); const [showEnteredInError, setShowEnteredInError] = useState(false); const { data: medications, isLoading } = useQuery({ queryKey: ["medication_statements", patientId], - queryFn: query(routes.medicationStatement.list, { + queryFn: query(medicationStatementApi.list, { pathParams: { patientId }, }), }); if (isLoading) { return ( - - - {t("ongoing_medications")} - - - - - + + + ); } @@ -138,66 +143,101 @@ export function MedicationStatementList({ if (!filteredMedications?.length) { return ( - - - {t("ongoing_medications")} - - - {t("no_ongoing_medications")} - - + + {t("no_ongoing_medications")} + ); } return ( - - - - {t("ongoing_medications")} ({filteredMedications.length}) - - - - + + <> + - - {t("medication")} - {t("dosage")} - {t("status")} - {t("medication_taken_between")} - {t("reason")} - {t("note")} + + + {t("medication")} + + + {t("dosage")} + + + {t("status")} + + + {t("medication_taken_between")} + + + {t("reason")} + + + {t("notes")} + + + {t("logged_by")} + - {filteredMedications.map((statement, index) => { - const isEnteredInError = statement.status === "entered_in_error"; - - return ( - <> - - - ); - })} + {[ + ...filteredMedications.filter( + (medication) => medication.status !== "entered_in_error", + ), + ...(showEnteredInError + ? filteredMedications.filter( + (medication) => medication.status === "entered_in_error", + ) + : []), + ].map((statement) => ( + + ))} {hasEnteredInErrorRecords && !showEnteredInError && ( - - setShowEnteredInError(true)} - className="text-xs underline text-gray-500" - > - {t("view_all")} - - + <> + + + setShowEnteredInError(true)} + className="text-xs underline text-gray-500" + > + {t("view_all")} + + + )} - - + + ); } + +const MedicationStatementListLayout = ({ + children, + className, + medicationsCount, +}: { + children: React.ReactNode; + className?: string; + medicationsCount?: number | undefined; +}) => { + return ( + + + + {t("ongoing_medications")}{" "} + {medicationsCount ? `(${medicationsCount})` : ""} + + + {children} + + ); +}; diff --git a/src/components/Patient/PatientDetailsTab/Appointments.tsx b/src/components/Patient/PatientDetailsTab/Appointments.tsx index 603b5aead0a..62d4e138be9 100644 --- a/src/components/Patient/PatientDetailsTab/Appointments.tsx +++ b/src/components/Patient/PatientDetailsTab/Appointments.tsx @@ -20,7 +20,7 @@ import { PatientProps } from "@/components/Patient/PatientDetailsTab"; import query from "@/Utils/request/query"; import { formatDateTime, formatName } from "@/Utils/utils"; -import scheduleApis from "@/types/scheduling/scheduleApis"; +import scheduleApis from "@/types/scheduling/scheduleApi"; export const Appointments = (props: PatientProps) => { const { patientData, facilityId, patientId } = props; @@ -29,9 +29,10 @@ export const Appointments = (props: PatientProps) => { const { data } = useQuery({ queryKey: ["patient-appointments", patientId], queryFn: query(scheduleApis.appointments.list, { - pathParams: { facility_id: facilityId }, + pathParams: { facility_id: facilityId ?? "" }, queryParams: { patient: patientId, limit: 100 }, }), + enabled: !!facilityId, }); const appointments = data?.results; diff --git a/src/components/Patient/PatientDetailsTab/Demography.tsx b/src/components/Patient/PatientDetailsTab/Demography.tsx index 956c55b1d87..19b60471dab 100644 --- a/src/components/Patient/PatientDetailsTab/Demography.tsx +++ b/src/components/Patient/PatientDetailsTab/Demography.tsx @@ -12,6 +12,7 @@ import { PatientProps } from "@/components/Patient/PatientDetailsTab"; import { GENDER_TYPES } from "@/common/constants"; +import { PLUGIN_Component } from "@/PluginEngine"; import { formatPatientAge } from "@/Utils/utils"; import { Organization, @@ -139,6 +140,12 @@ export const Demography = (props: PatientProps) => { id: "general-info", allowEdit: true, details: [ + , { label: t("full_name"), value: patientData.name }, { label: t("phone_number"), diff --git a/src/components/Patient/PatientDetailsTab/EncounterHistory.tsx b/src/components/Patient/PatientDetailsTab/EncounterHistory.tsx index 218fceccb62..9fc0119582b 100644 --- a/src/components/Patient/PatientDetailsTab/EncounterHistory.tsx +++ b/src/components/Patient/PatientDetailsTab/EncounterHistory.tsx @@ -1,62 +1,133 @@ -import { Link } from "raviger"; +import { useQuery } from "@tanstack/react-query"; +import { useQueryParams } from "raviger"; import { useTranslation } from "react-i18next"; +import { cn } from "@/lib/utils"; + import CareIcon from "@/CAREUI/icons/CareIcon"; -import PaginatedList from "@/CAREUI/misc/PaginatedList"; import { Button } from "@/components/ui/button"; -import CircularProgress from "@/components/Common/CircularProgress"; +import PaginationComponent from "@/components/Common/Pagination"; +import { CardListSkeleton } from "@/components/Common/SkeletonLoading"; +import CreateEncounterForm from "@/components/Encounter/CreateEncounterForm"; import { EncounterCard } from "@/components/Facility/EncounterCard"; import { PatientProps } from "@/components/Patient/PatientDetailsTab"; import routes from "@/Utils/request/api"; -import { Encounter } from "@/types/emr/encounter"; +import query from "@/Utils/request/query"; const EncounterHistory = (props: PatientProps) => { - const { patientId, facilityId } = props; + const { patientId, facilityId, patientData } = props; const { t } = useTranslation(); + const [qParams, setQueryParams] = useQueryParams<{ page?: number }>(); + + const { data: encounterData, isLoading } = useQuery({ + queryKey: ["encounterHistory", patientId, qParams], + queryFn: query(routes.encounter.list, { + queryParams: { + patient: patientId, + limit: 5, + offset: ((qParams.page ?? 1) - 1) * 5, + }, + }), + }); + return ( - - {() => ( - - - - - - - - {t("no_consultation_history")} - - - - - - - {t("add_consultation")} - - - - + + + {isLoading ? ( + + + - - > - {(encounter) => } - - - - - )} - + ) : ( + + {encounterData?.results?.length === 0 ? ( + facilityId ? ( + + + + + + + + + + + {t("create_encounter")} + + + {t("start_a_new_clinical_encounter")} + + + + + + + } + /> + + + ) : ( + + + + + + {t("no_encounters_found")} + + + + + + ) + ) : ( + + {encounterData?.results?.map((encounter) => ( + + + + ))} + + 5 ? "visible" : "invisible", + )} + > + setQueryParams({ page })} + /> + + + + )} + + )} + + ); }; diff --git a/src/components/Patient/PatientDetailsTab/PatientFiles.tsx b/src/components/Patient/PatientDetailsTab/PatientFiles.tsx index 7f65fd8c00c..ed0adae2d30 100644 --- a/src/components/Patient/PatientDetailsTab/PatientFiles.tsx +++ b/src/components/Patient/PatientDetailsTab/PatientFiles.tsx @@ -6,8 +6,8 @@ export const PatientFilesTab = (props: PatientProps) => { return ( ); }; diff --git a/src/components/Patient/PatientDetailsTab/PatientUsers.tsx b/src/components/Patient/PatientDetailsTab/PatientUsers.tsx index 5e6f00494ab..4e781735327 100644 --- a/src/components/Patient/PatientDetailsTab/PatientUsers.tsx +++ b/src/components/Patient/PatientDetailsTab/PatientUsers.tsx @@ -1,8 +1,11 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import { t } from "i18next"; import { useState } from "react"; +import { Trans } from "react-i18next"; import { toast } from "sonner"; +import { cn } from "@/lib/utils"; + import CareIcon from "@/CAREUI/icons/CareIcon"; import { @@ -16,7 +19,7 @@ import { AlertDialogTitle, AlertDialogTrigger, } from "@/components/ui/alert-dialog"; -import { Button } from "@/components/ui/button"; +import { Button, buttonVariants } from "@/components/ui/button"; import { Select, SelectContent, @@ -32,6 +35,7 @@ import { SheetTitle, SheetTrigger, } from "@/components/ui/sheet"; +import { TooltipComponent } from "@/components/ui/tooltip"; import { Avatar } from "@/components/Common/Avatar"; import UserSelector from "@/components/Common/UserSelector"; @@ -103,7 +107,7 @@ function AddUserSheet({ patientId }: AddUserSheetProps) { return ( - + {t("assign_user")} @@ -114,7 +118,7 @@ function AddUserSheet({ patientId }: AddUserSheetProps) { {t("search_user_description")} - + {t("search_user")} - - {formatDisplayName(selectedUser)} - + + + {formatDisplayName(selectedUser)} + + {selectedUser.email} @@ -167,7 +173,7 @@ function AddUserSheet({ patientId }: AddUserSheetProps) { {t("select_role")} - + @@ -188,6 +194,7 @@ function AddUserSheet({ patientId }: AddUserSheetProps) { { const ManageUsers = () => { if (!users?.results?.length) { return ( - + {t("no_user_assigned")} ); @@ -246,7 +253,7 @@ export const PatientUsers = (props: PatientProps) => { {users?.results.map((user) => ( @@ -256,32 +263,54 @@ export const PatientUsers = (props: PatientProps) => { imageUrl={user.profile_picture_url} /> - - {formatDisplayName(user)} + + + + {formatDisplayName(user)} + + - {user.username} + + + + {user.username} + + + - - + + {t("remove_user")} - {t("are_you_sure_want_to_remove", { - name: formatDisplayName(user), - })} + + ), + }} + /> {t("cancel")} removeUser(user.id)} - className="bg-destructive text-destructive-foreground hover:bg-destructive/90" + className={cn(buttonVariants({ variant: "destructive" }))} > {t("remove")} @@ -306,7 +335,7 @@ export const PatientUsers = (props: PatientProps) => { }; return ( - + diff --git a/src/components/Patient/PatientDetailsTab/ResourceRequests.tsx b/src/components/Patient/PatientDetailsTab/ResourceRequests.tsx index b36db9a729a..e0f1b6bcd52 100644 --- a/src/components/Patient/PatientDetailsTab/ResourceRequests.tsx +++ b/src/components/Patient/PatientDetailsTab/ResourceRequests.tsx @@ -1,5 +1,5 @@ import { useQuery } from "@tanstack/react-query"; -import { navigate } from "raviger"; +import { Link } from "raviger"; import { useTranslation } from "react-i18next"; import CareIcon from "@/CAREUI/icons/CareIcon"; @@ -64,17 +64,16 @@ export const ResourceRequests = (props: PatientProps) => { {t("resource_requests")} - - navigate( - `/facility/${facilityId}/resource/new?related_patient=${patientData.id}`, - ) - } - > - - {t("create_resource_request")} - + {facilityId && ( + + + + {t("create_resource_request")} + + + )} @@ -109,17 +108,13 @@ export const ResourceRequests = (props: PatientProps) => { {formatDateTime(request.created_date)} {formatDateTime(request.modified_date)} - - navigate( - `/facility/${request.origin_facility.id}/resource/${request.id}`, - ) - } - > - - {t("view")} + + + + {t("view")} + diff --git a/src/components/Patient/PatientDetailsTab/index.tsx b/src/components/Patient/PatientDetailsTab/index.tsx index 8e7de28b091..975b54158cb 100644 --- a/src/components/Patient/PatientDetailsTab/index.tsx +++ b/src/components/Patient/PatientDetailsTab/index.tsx @@ -12,7 +12,7 @@ import { PatientUsers } from "./PatientUsers"; import { ResourceRequests } from "./ResourceRequests"; export interface PatientProps { - facilityId: string; + facilityId?: string; patientId: string; patientData: Patient; } diff --git a/src/components/Patient/PatientDetailsTab/patientUpdates.tsx b/src/components/Patient/PatientDetailsTab/patientUpdates.tsx index f82f1489fb5..5ca27e7d507 100644 --- a/src/components/Patient/PatientDetailsTab/patientUpdates.tsx +++ b/src/components/Patient/PatientDetailsTab/patientUpdates.tsx @@ -1,109 +1,120 @@ -import { Link, navigate } from "raviger"; +import { useQuery } from "@tanstack/react-query"; +import { useQueryParams } from "raviger"; import { useTranslation } from "react-i18next"; +import { cn } from "@/lib/utils"; + import CareIcon from "@/CAREUI/icons/CareIcon"; -import PaginatedList from "@/CAREUI/misc/PaginatedList"; -import { Button } from "@/components/ui/button"; import { Card } from "@/components/ui/card"; +import PaginationComponent from "@/components/Common/Pagination"; import { CardListSkeleton } from "@/components/Common/SkeletonLoading"; +import { RESULTS_PER_PAGE_LIMIT } from "@/common/constants"; + import routes from "@/Utils/request/api"; +import query from "@/Utils/request/query"; import { formatDateTime, properCase } from "@/Utils/utils"; import { QuestionnaireResponse } from "@/types/questionnaire/questionnaireResponse"; import { PatientProps } from "."; export const Updates = (props: PatientProps) => { - const { facilityId, patientId } = props; + const { patientId } = props; const { t } = useTranslation(); + const [qParams, setQueryParams] = useQueryParams<{ page?: number }>(); + + const { data: patientUpdatesData, isLoading } = useQuery({ + queryKey: ["patientUpdates", patientId, qParams], + queryFn: query(routes.getQuestionnaireResponses, { + queryParams: { + limit: RESULTS_PER_PAGE_LIMIT, + offset: ((qParams.page ?? 1) - 1) * RESULTS_PER_PAGE_LIMIT, + }, + pathParams: { patientId }, + }), + }); + return ( {t("updates")} - - - - {t("add_patient_updates")} - - - - - {() => ( - - - + + + {isLoading ? ( + + + + ) : ( + + {patientUpdatesData?.results?.length === 0 ? ( {t("no_update_available")} - - - - - - - - - className="grid gap-4"> - {(item) => ( - - - - - - {item.questionnaire?.title || - structuredResponsesPreview( - item.structured_responses, - )} - - - - {formatDateTime(item.created_date)} - - - by {item.created_by?.first_name || ""}{" "} - {item.created_by?.last_name || ""} - {` (${item.created_by?.user_type})`} + ) : ( + + {patientUpdatesData?.results?.map((update) => ( + + + + + + + {update.questionnaire?.title || + structuredResponsesPreview( + update.structured_responses, + )} + + + + {formatDateTime(update.created_date)} + + + by {update.created_by?.first_name || ""}{" "} + {update.created_by?.last_name || ""} + {update.created_by?.user_type && + ` (${update.created_by?.user_type})`} + + - - - { - navigate( - `/facility/${facilityId}/patient/${patientId}/encounter/${item.encounter}/questionnaire_response/${item.id}`, - ); - }} + + + ))} + + + RESULTS_PER_PAGE_LIMIT + ? "visible" + : "invisible", + )} > - {t("view")} - - - )} - - - - - + setQueryParams({ page })} + /> + + + + )} - - )} - + )} + + ); }; diff --git a/src/components/Patient/PatientHome.tsx b/src/components/Patient/PatientHome.tsx index e3b8e0b28d8..69df69c4143 100644 --- a/src/components/Patient/PatientHome.tsx +++ b/src/components/Patient/PatientHome.tsx @@ -5,6 +5,12 @@ import { useTranslation } from "react-i18next"; import CareIcon from "@/CAREUI/icons/CareIcon"; import { Button } from "@/components/ui/button"; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "@/components/ui/tooltip"; import { Avatar } from "@/components/Common/Avatar"; import Loading from "@/components/Common/Loading"; @@ -17,7 +23,7 @@ import { import { PLUGIN_Component } from "@/PluginEngine"; import routes from "@/Utils/request/api"; import query from "@/Utils/request/query"; -import { formatDateTime, formatPatientAge, relativeDate } from "@/Utils/utils"; +import { formatDateTime, formatPatientAge, relativeTime } from "@/Utils/utils"; import { Patient } from "@/types/emr/newPatient"; export const PatientHome = (props: { @@ -109,6 +115,7 @@ export const PatientHome = (props: { {tabs.map((tab) => ( )} - + @@ -148,21 +155,6 @@ export const PatientHome = (props: { - - navigate( - `/facility/${facilityId}/patient/${id}/files`, - ) - } - > - - - {t("view_update_patient_files")} - - - - + - - {t("last_updated_by")}{" "} - + + {t("last_updated_by")} + {patientData.updated_by?.first_name}{" "} {patientData.updated_by?.last_name} - - - - - - {patientData.modified_date - ? formatDateTime(patientData.modified_date) - : "--:--"} - - {patientData.modified_date - ? relativeDate(patientData.modified_date) - : "--:--"} + + + {patientData.modified_date ? ( + + + + + {relativeTime(patientData.modified_date)} + + + + {formatDateTime(patientData.modified_date)} + + + + ) : ( + "--:--" + )} + - {t("patient_profile_created_by")}{" "} - + {t("patient_profile_created_by")} + {patientData.created_by?.first_name}{" "} {patientData.created_by?.last_name} - - - - - - {patientData.created_date - ? formatDateTime(patientData.created_date) - : "--:--"} - - {patientData.created_date - ? relativeDate(patientData.created_date) - : "--:--"} + + {patientData.created_date ? ( + + + + + {relativeTime(patientData.created_date)} + + + + {formatDateTime(patientData.created_date)} + + + + ) : ( + "--:--" + )} + @@ -242,30 +247,6 @@ export const PatientHome = (props: { - - {/* setOpenAssignVolunteerDialog(false)} - description={ - - setAssignedVolunteer(user.value)} - userType={"Volunteer"} - name={"assign_volunteer"} - error={errors.assignedVolunteer} - /> - - } - action={ - assignedVolunteer || !patientData.assigned_to - ? t("assign") - : t("unassign") - } - onConfirm={handleAssignedVolunteer} - /> */} ); }; diff --git a/src/components/Patient/PatientIndex.tsx b/src/components/Patient/PatientIndex.tsx index e2c753e96df..c3901f64abd 100644 --- a/src/components/Patient/PatientIndex.tsx +++ b/src/components/Patient/PatientIndex.tsx @@ -236,6 +236,11 @@ export default function PatientIndex({ facilityId }: { facilityId: string }) { setYearOfBirth(value); } }} + onKeyDown={(e) => { + if (e.key === "Enter") { + handleVerify(); + } + }} /> diff --git a/src/components/Patient/PatientInfoCard.tsx b/src/components/Patient/PatientInfoCard.tsx index 84e3336a15e..1212a95300d 100644 --- a/src/components/Patient/PatientInfoCard.tsx +++ b/src/components/Patient/PatientInfoCard.tsx @@ -12,14 +12,28 @@ import { Link } from "raviger"; import { useTranslation } from "react-i18next"; import { toast } from "sonner"; +import { cn } from "@/lib/utils"; + +import CareIcon from "@/CAREUI/icons/CareIcon"; + +import { + AlertDialog, + AlertDialogAction, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogTitle, + AlertDialogTrigger, +} from "@/components/ui/alert-dialog"; import { Badge } from "@/components/ui/badge"; -import { Button } from "@/components/ui/button"; +import { Button, buttonVariants } from "@/components/ui/button"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, - DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { @@ -29,8 +43,8 @@ import { } from "@/components/ui/popover"; import { Avatar } from "@/components/Common/Avatar"; - -import useQuestionnaireOptions from "@/hooks/useQuestionnaireOptions"; +import { LocationHistorySheet } from "@/components/Location/LocationHistorySheet"; +import { LocationTree } from "@/components/Location/LocationTree"; import { PLUGIN_Component } from "@/PluginEngine"; import routes from "@/Utils/request/api"; @@ -51,7 +65,6 @@ export default function PatientInfoCard(props: PatientInfoCardProps) { const { patient, encounter } = props; const { t } = useTranslation(); const queryClient = useQueryClient(); - const questionnaireOptions = useQuestionnaireOptions("encounter_actions"); const { mutate: updateEncounter } = useMutation({ mutationFn: mutate(routes.encounter.update, { @@ -99,9 +112,21 @@ export default function PatientInfoCard(props: PatientInfoCardProps) { className="mb-2 flex flex-col text-xl font-semibold capitalize lg:hidden" id="patient-name-consultation" > - {patient.name} + + {patient.name} + + - {formatPatientAge(patient, true)} • {patient.gender} + {formatPatientAge(patient, true)} •{" "} + {t(`GENDER__${patient.gender}`)} @@ -112,36 +137,48 @@ export default function PatientInfoCard(props: PatientInfoCardProps) { className="hidden flex-row text-xl font-semibold capitalize lg:flex" id="patient-name-consultation" > - {patient.name} + + {patient.name} + + - {formatPatientAge(patient, true)} • {patient.gender} + {formatPatientAge(patient, true)} •{" "} + {t(`GENDER__${patient.gender}`)} - Start Date + {t("start_date")} {props.encounter.period.start ? formatDateTime(props.encounter.period.start) - : "Not started"} + : t("not_started")} - End Date + {t("end_date")} {props.encounter.period.end ? formatDateTime(props.encounter.period.end) - : "Ongoing"} + : t("ongoing")} {props.encounter.external_identifier && ( - Hospital Identifier + {t("hospital_identifier")} {props.encounter.external_identifier} @@ -179,7 +216,9 @@ export default function PatientInfoCard(props: PatientInfoCardProps) { - Status History + + {t("status_history")} + {encounter.status_history.history.map( (history, index) => ( - Class History + + {t(`class_history`)} + {encounter.encounter_class_history.history.map( (history, index) => ( )} - {encounter.hospitalization?.discharge_disposition && ( - - {encounter.hospitalization.discharge_disposition} - - )} + { + // (encounter.status === "discharged" || + // encounter.status === "completed") && + encounter.hospitalization?.discharge_disposition && ( + + + {t( + `encounter_discharge_disposition__${encounter.hospitalization.discharge_disposition}`, + )} + + ) + } } /> + {props.encounter.current_location ? ( + + + + + + {props.encounter.current_location.name} + + + + + + + + + {t("location")} + + + + + + {t("history")} + + + } + /> + + + + + + + {t("update_location")} + + + + + + ) : ( + + + + {t("add_location")} + + + )} @@ -313,36 +444,69 @@ export default function PatientInfoCard(props: PatientInfoCardProps) { className="flex w-full flex-col gap-3 lg:w-auto 2xl:flex-row" data-cy="update-encounter-button" > - - - - {t("update")} - - - - - {questionnaireOptions.map((option) => ( - + + + + + {t("update")} + + + + + {t("actions")} + - {t(option.title)} + {t("treatment_summary")} - ))} - - {t("actions")} - - {t("mark_as_complete")} - + + + {t("discharge_summary")} + + + + e.preventDefault()}> + {t("mark_as_complete")} + + + + + + + + {t("mark_as_complete")} + + {t("mark_encounter_as_complete_confirmation")} + + + - - + + + {t("cancel")} + + + {t("mark_as_complete")} + + + + )} diff --git a/src/components/Patient/PatientRegistration.tsx b/src/components/Patient/PatientRegistration.tsx index 155ecbb85b5..6f46b141468 100644 --- a/src/components/Patient/PatientRegistration.tsx +++ b/src/components/Patient/PatientRegistration.tsx @@ -42,11 +42,7 @@ import DuplicatePatientDialog from "@/components/Facility/DuplicatePatientDialog import useAppHistory from "@/hooks/useAppHistory"; -import { - BLOOD_GROUP_CHOICES, // DOMESTIC_HEALTHCARE_SUPPORT_CHOICES, - GENDER_TYPES, // OCCUPATION_TYPES, - //RATION_CARD_CATEGORY, // SOCIOECONOMIC_STATUS_CHOICES , -} from "@/common/constants"; +import { BLOOD_GROUP_CHOICES, GENDER_TYPES } from "@/common/constants"; import { GENDERS } from "@/common/constants"; import countryList from "@/common/static/countries.json"; @@ -87,9 +83,9 @@ export default function PatientRegistration( z .object({ name: z.string().nonempty(t("name_is_required")), - phone_number: validators.phoneNumber.required, + phone_number: validators().phoneNumber.required, same_phone_number: z.boolean(), - emergency_phone_number: validators.phoneNumber.required, + emergency_phone_number: validators().phoneNumber.required, gender: z.enum(GENDERS, { required_error: t("gender_is_required") }), blood_group: z.enum(BLOOD_GROUPS, { required_error: t("blood_group_is_required"), @@ -120,7 +116,10 @@ export default function PatientRegistration( .min(100000, t("pincode_must_be_6_digits")) .max(999999, t("pincode_must_be_6_digits")), nationality: z.string().nonempty(t("nationality_is_required")), - geo_organization: z.string().uuid().optional(), + geo_organization: z + .string() + .uuid({ message: t("geo_organization_is_required") }) + .optional(), }) .refine( (data) => (data.age_or_dob === "dob" ? !!data.date_of_birth : true), @@ -175,7 +174,11 @@ export default function PatientRegistration( }, }); - const { mutate: updatePatient, isPending: isUpdatingPatient } = useMutation({ + const { + mutate: updatePatient, + isPending: isUpdatingPatient, + isSuccess: isUpdateSuccess, + } = useMutation({ mutationFn: mutate(routes.updatePatient, { pathParams: { id: patientId || "" }, }), @@ -291,7 +294,7 @@ export default function PatientRegistration( useNavigationPrompt( form.formState.isDirty && !isCreatingPatient && - !isUpdatingPatient && + !(isUpdatingPatient || isUpdateSuccess) && !showDuplicate, t("unsaved_changes"), ); @@ -548,13 +551,27 @@ export default function PatientRegistration( "age", e.target.value ? Number(e.target.value) - : (undefined as unknown as number), // intentionally setting to undefined, when the value is empty to avoid 0 in the input field + : (null as unknown as number), ) } data-cy="age-input" /> + + {form.getValues("age") && ( + + {Number(form.getValues("age")) <= 0 ? ( + Invalid age + ) : ( + + {t("year_of_birth")}:{" "} + {new Date().getFullYear() - + Number(form.getValues("age"))} + + )} + + )} )} /> @@ -679,7 +696,7 @@ export default function PatientRegistration( /> - + {form.watch("nationality") === "India" && ( goBack()} + onClick={() => goBack(`/facility/${facilityId}/patients`)} > {t("cancel")} @@ -726,10 +743,13 @@ export default function PatientRegistration( {showDuplicate && ( { - handleDialogClose("close"); + onOpenChange={(open) => { + if (!open) { + handleDialogClose("close"); + } }} /> )} diff --git a/src/components/Patient/TreatmentSummary.tsx b/src/components/Patient/TreatmentSummary.tsx new file mode 100644 index 00000000000..862d7dca5b8 --- /dev/null +++ b/src/components/Patient/TreatmentSummary.tsx @@ -0,0 +1,503 @@ +import careConfig from "@careConfig"; +import { useQuery } from "@tanstack/react-query"; +import { format } from "date-fns"; +import { t } from "i18next"; +import { Loader } from "lucide-react"; + +import PrintPreview from "@/CAREUI/misc/PrintPreview"; + +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; + +import Loading from "@/components/Common/Loading"; +import PrintTable from "@/components/Common/PrintTable"; +import QuestionnaireResponsesList from "@/components/Facility/ConsultationDetails/QuestionnaireResponsesList"; +import { getFrequencyDisplay } from "@/components/Medicine/MedicationsTable"; +import { formatDosage, formatSig } from "@/components/Medicine/utils"; + +import api from "@/Utils/request/api"; +import query from "@/Utils/request/query"; +import { formatDateTime, formatName, formatPatientAge } from "@/Utils/utils"; +import allergyIntoleranceApi from "@/types/emr/allergyIntolerance/allergyIntoleranceApi"; +import diagnosisApi from "@/types/emr/diagnosis/diagnosisApi"; +import { completedEncounterStatus } from "@/types/emr/encounter"; +import medicationRequestApi from "@/types/emr/medicationRequest/medicationRequestApi"; +import medicationStatementApi from "@/types/emr/medicationStatement/medicationStatementApi"; +import symptomApi from "@/types/emr/symptom/symptomApi"; + +interface TreatmentSummaryProps { + facilityId: string; + encounterId: string; + + patientId: string; +} + +const SectionLayout = ({ + children, + title, +}: { + title: string; + children: React.ReactNode; +}) => { + return ( + + + {title} + + {children} + + ); +}; + +const EmptyState = ({ message }: { message: string }) => { + return ( + + {message} + + ); +}; +export default function TreatmentSummary({ + facilityId, + encounterId, + patientId, +}: TreatmentSummaryProps) { + const { data: encounter, isLoading: encounterLoading } = useQuery({ + queryKey: ["encounter", encounterId], + queryFn: query(api.encounter.get, { + pathParams: { id: encounterId }, + queryParams: { facility: facilityId }, + }), + enabled: !!encounterId && !!facilityId, + }); + + const { data: allergies, isLoading: allergiesLoading } = useQuery({ + queryKey: ["allergies", patientId, encounterId], + queryFn: query.paginated(allergyIntoleranceApi.getAllergy, { + pathParams: { patientId }, + queryParams: { + encounter: ( + encounter?.status + ? completedEncounterStatus.includes(encounter.status) + : false + ) + ? encounterId + : undefined, + }, + pageSize: 100, + }), + }); + + const { data: symptoms, isLoading: symptomsLoading } = useQuery({ + queryKey: ["symptoms", patientId, encounterId], + queryFn: query.paginated(symptomApi.listSymptoms, { + pathParams: { patientId }, + queryParams: { encounter: encounterId }, + pageSize: 100, + }), + enabled: !!patientId && !!encounterId, + }); + + const { data: diagnoses, isLoading: diagnosesLoading } = useQuery({ + queryKey: ["diagnosis", patientId, encounterId], + queryFn: query.paginated(diagnosisApi.listDiagnosis, { + pathParams: { patientId }, + queryParams: { encounter: encounterId }, + pageSize: 100, + }), + enabled: !!patientId && !!encounterId, + }); + + const { data: medications, isLoading: medicationsLoading } = useQuery({ + queryKey: ["medication_requests", patientId, encounterId], + queryFn: query.paginated(medicationRequestApi.list, { + pathParams: { patientId }, + queryParams: { encounter: encounterId }, + pageSize: 100, + }), + enabled: !!encounterId, + }); + const { data: medicationStatement, isLoading: medicationStatementLoading } = + useQuery({ + queryKey: ["medication_statements", patientId], + queryFn: query.paginated(medicationStatementApi.list, { + pathParams: { patientId }, + pageSize: 100, + }), + enabled: !!patientId, + }); + + if (encounterLoading) { + return ; + } + + if (!encounter) { + return ( + + {t("no_patient_record_found")} + + ); + } + + const isLoading = + encounterLoading || + allergiesLoading || + diagnosesLoading || + symptomsLoading || + medicationsLoading || + medicationStatementLoading; + + if (isLoading) { + return ( + + + + + + ); + } + + return ( + + + + {/* Header */} + + + + + {encounter.facility?.name} + + + {t("treatment_summary")} + + + + + + + {/* Patient Details */} + + + + {t("patient")} + : + + {encounter.patient.name} + + + + {`${t("age")} / ${t("sex")}`} + : + + {`${formatPatientAge(encounter.patient, true)}, ${t(`GENDER__${encounter.patient.gender}`)}`} + + + + {t("encounter_class")} + : + + {t(`encounter_class__${encounter.encounter_class}`)} + + + + {t("priority")} + : + + {t(`encounter_priority__${encounter.priority}`)} + + + + {encounter.hospitalization?.admit_source && ( + + {t("admission_source")} + : + + {t( + `encounter_admit_sources__${encounter.hospitalization.admit_source}`, + )} + + + )} + {encounter.hospitalization?.re_admission && ( + + {t("readmission")} + : + {t("yes")} + + )} + {encounter.hospitalization?.diet_preference && ( + + {t("diet_preference")} + : + + {t( + `encounter_diet_preference__${encounter.hospitalization.diet_preference}`, + )} + + + )} + + + {/* Right Column */} + + + {t("mobile_number")} + : + + {encounter.patient.phone_number} + + + + {encounter.period?.start && ( + + {t("encounter_date")} + : + + {format( + new Date(encounter.period.start), + "dd MMM yyyy, EEEE", + )} + + + )} + + + {t("status")} + : + + {t(`encounter_status__${encounter.status}`)} + + + + + {t("consulting_doctor")} + : + + {formatName(encounter.created_by)} + + + + {encounter.external_identifier && ( + + {t("external_id")} + : + + {encounter.external_identifier} + + + )} + + {encounter.hospitalization?.discharge_disposition && ( + + + {t("discharge_disposition")} + + : + + {t( + `encounter_discharge_disposition__${encounter.hospitalization.discharge_disposition}`, + )} + + + )} + + + {/* Medical Information */} + + {/* Allergies */} + + {allergies?.count ? ( + ({ + allergen: allergy.code.display, + status: t(allergy.clinical_status), + criticality: t(allergy.criticality), + verification: t(allergy.verification_status), + notes: allergy.note, + logged_by: formatName(allergy.created_by), + }))} + /> + ) : ( + + )} + + + {/* Symptoms */} + + + {symptoms?.count ? ( + ({ + symptom: symptom.code.display, + severity: t(symptom.severity), + status: t(symptom.clinical_status), + verification: t(symptom.verification_status), + onset: symptom.onset?.onset_datetime + ? new Date( + symptom.onset.onset_datetime, + ).toLocaleDateString() + : "-", + notes: symptom.note, + logged_by: formatName(symptom.created_by), + }))} + /> + ) : ( + + )} + + + {/* Diagnoses */} + + {diagnoses?.count ? ( + ({ + diagnosis: diagnosis.code.display, + status: t(diagnosis.clinical_status), + verification: t(diagnosis.verification_status), + onset: diagnosis.onset?.onset_datetime + ? new Date( + diagnosis.onset.onset_datetime, + ).toLocaleDateString() + : undefined, + notes: diagnosis.note, + logged_by: formatName(diagnosis.created_by), + }))} + /> + ) : ( + + )} + + + {/* Medications */} + + {medications?.results.length ? ( + { + const instruction = medication.dosage_instruction[0]; + const frequency = getFrequencyDisplay(instruction?.timing); + const dosage = formatDosage(instruction); + const duration = + instruction?.timing?.repeat?.bounds_duration; + const remarks = formatSig(instruction); + const notes = medication.note; + return { + medicine: medication.medication?.display, + status: t(medication.status), + dosage: dosage, + frequency: instruction?.as_needed_boolean + ? `${t("as_needed_prn")} (${instruction?.as_needed_for?.display ?? "-"})` + : (frequency?.meaning ?? "-") + + (instruction?.additional_instruction?.[0]?.display + ? `, ${instruction.additional_instruction[0].display}` + : ""), + duration: duration + ? `${duration.value} ${duration.unit}` + : "-", + instructions: `${remarks || "-"}${notes ? ` (${t("note")}: ${notes})` : ""}`, + }; + })} + /> + ) : ( + + )} + + + {/* Medication Statements */} + + {medicationStatement?.results.length ? ( + ({ + medication: + medication.medication.display ?? + medication.medication.code, + dosage: medication.dosage_text, + status: medication.status, + medication_taken_between: [ + medication.effective_period?.start, + medication.effective_period?.end, + ] + .map((date) => formatDateTime(date)) + .join(" - "), + reason: medication.reason, + notes: medication.note, + logged_by: formatName(medication.created_by), + }))} + /> + ) : ( + + )} + + + + {/* Questionnaire Responses Section */} + + + + + + {/* Footer */} + + + {t("generated_on")} {format(new Date(), "PPP 'at' p")} + + + + + ); +} diff --git a/src/components/Patient/allergy/AllergyTable.tsx b/src/components/Patient/allergy/AllergyTable.tsx deleted file mode 100644 index 8aaf982a91c..00000000000 --- a/src/components/Patient/allergy/AllergyTable.tsx +++ /dev/null @@ -1,108 +0,0 @@ -import { - BeakerIcon, - CookingPotIcon, - HeartPulseIcon, - LeafIcon, -} from "lucide-react"; - -import { Badge } from "@/components/ui/badge"; -import { - Table, - TableBody, - TableCell, - TableHead, - TableHeader, - TableRow, -} from "@/components/ui/table"; - -import { Avatar } from "@/components/Common/Avatar"; - -import { AllergyIntolerance } from "@/types/emr/allergyIntolerance/allergyIntolerance"; - -type AllergyCategory = "food" | "medication" | "environment" | "biologic"; - -const CATEGORY_ICONS: Record = { - food: , - medication: , - environment: , - biologic: , -}; - -interface AllergyTableProps { - allergies: AllergyIntolerance[]; - showHeader?: boolean; -} - -export function AllergyTable({ - allergies, - showHeader = true, -}: AllergyTableProps) { - return ( - - {showHeader && ( - - - - Substance - Status - Critical - Verification - Last Occurrence - By - - - )} - - {allergies.map((allergy, index) => ( - - - {allergy.category && - CATEGORY_ICONS[allergy.category as AllergyCategory]} - - - {allergy.code.display} - - - - {allergy.clinical_status} - - - - - {allergy.criticality} - - - - - {allergy.verification_status} - - - - {allergy.last_occurrence - ? new Date(allergy.last_occurrence).toLocaleDateString() - : "-"} - - - - - {allergy.created_by?.first_name} {allergy.created_by?.last_name} - - - {allergy.note && ( - - - Notes - {allergy.note} - - - )} - - ))} - - - ); -} diff --git a/src/components/Patient/allergy/list.tsx b/src/components/Patient/allergy/list.tsx index a4a91bae6a1..4e4fe877a90 100644 --- a/src/components/Patient/allergy/list.tsx +++ b/src/components/Patient/allergy/list.tsx @@ -1,12 +1,26 @@ import { useQuery } from "@tanstack/react-query"; import { t } from "i18next"; -import { PencilIcon } from "lucide-react"; +import { + BeakerIcon, + CookingPotIcon, + HeartPulseIcon, + LeafIcon, +} from "lucide-react"; import { Link } from "raviger"; import { ReactNode, useState } from "react"; +import { cn } from "@/lib/utils"; + +import CareIcon from "@/CAREUI/icons/CareIcon"; + import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/components/ui/popover"; import { Skeleton } from "@/components/ui/skeleton"; import { Table, @@ -20,26 +34,57 @@ import { import { Avatar } from "@/components/Common/Avatar"; import query from "@/Utils/request/query"; -import { AllergyIntolerance } from "@/types/emr/allergyIntolerance/allergyIntolerance"; +import { formatName } from "@/Utils/utils"; +import { + ALLERGY_CLINICAL_STATUS_STYLES, + ALLERGY_CRITICALITY_STYLES, + ALLERGY_VERIFICATION_STATUS_STYLES, + AllergyCategory, + AllergyIntolerance, +} from "@/types/emr/allergyIntolerance/allergyIntolerance"; import allergyIntoleranceApi from "@/types/emr/allergyIntolerance/allergyIntoleranceApi"; +import { Encounter, completedEncounterStatus } from "@/types/emr/encounter"; interface AllergyListProps { facilityId?: string; patientId: string; encounterId?: string; + className?: string; + + encounterStatus?: Encounter["status"]; } +export const CATEGORY_ICONS: Record = { + food: , + medication: ( + + ), + environment: ( + + ), + biologic: ( + + ), +}; + export function AllergyList({ facilityId, patientId, encounterId, + className, + encounterStatus, }: AllergyListProps) { const [showEnteredInError, setShowEnteredInError] = useState(false); const { data: allergies, isLoading } = useQuery({ - queryKey: ["allergies", patientId, encounterId], + queryKey: ["allergies", patientId, encounterId, encounterStatus], queryFn: query(allergyIntoleranceApi.getAllergy, { pathParams: { patientId }, + queryParams: { + encounter: completedEncounterStatus.includes(encounterStatus as string) + ? encounterId + : undefined, + }, }), }); @@ -80,81 +125,86 @@ export function AllergyList({ ); } - const getStatusBadgeStyle = (status: string | undefined) => { - switch (status?.toLowerCase()) { - case "active": - return "bg-green-100 text-green-800 border-green-200"; - case "inactive": - return "bg-gray-100 text-gray-800 border-gray-200"; - default: - return "bg-gray-100 text-gray-800 border-gray-200"; - } - }; - - const getCategoryBadgeStyle = (category: string) => { - switch (category?.toLowerCase()) { - case "food": - return "bg-orange-100 text-orange-800 border-orange-200"; - case "medication": - return "bg-blue-100 text-blue-800 border-blue-200"; - case "environment": - return "bg-green-100 text-green-800 border-green-200"; - default: - return "bg-gray-100 text-gray-800 border-gray-200"; - } - }; - interface AllergyRowProps { allergy: AllergyIntolerance; - isEnteredInError?: boolean; } - function AllergyRow({ allergy, isEnteredInError }: AllergyRowProps) { + function AllergyRow({ allergy }: AllergyRowProps) { return ( - {allergy.code.display} + + + {CATEGORY_ICONS[allergy.category ?? ""]} + + + + {allergy.code.display} + - {t(allergy.category)} + {t(allergy.clinical_status)} - {t(allergy.clinical_status)} - - - - {t(allergy.criticality)} {t(allergy.verification_status)} - - - {allergy.created_by.username} + + {allergy.note && ( + + + + + {t("see_note")} + + + + + {allergy.note} + + + + + )} + + + + + {formatName(allergy.created_by)} + ); @@ -165,16 +215,30 @@ export function AllergyList({ facilityId={facilityId} patientId={patientId} encounterId={encounterId} + className={className} > - + - - {t("allergen")} - {t("category")} - {t("status")} - {t("criticality")} - {t("verification")} - {t("created_by")} + + + + {t("allergen")} + + + {t("status")} + + + {t("criticality")} + + + {t("verification")} + + + {t("notes")} + + + {t("logged_by")} + @@ -194,25 +258,24 @@ export function AllergyList({ (allergy) => allergy.verification_status === "entered_in_error", ) .map((allergy) => ( - + ))} {hasEnteredInErrorRecords && !showEnteredInError && ( - - setShowEnteredInError(true)} - className="text-xs underline text-gray-500" - > - {t("view_all")} - - + <> + + + setShowEnteredInError(true)} + className="text-xs underline text-gray-950" + > + {t("view_all")} + + + )} ); @@ -223,22 +286,24 @@ const AllergyListLayout = ({ patientId, encounterId, children, + className, }: { facilityId?: string; patientId: string; encounterId?: string; children: ReactNode; + className?: string; }) => { return ( - - + + {t("allergies")} {facilityId && encounterId && ( - + {t("edit")} )} diff --git a/src/components/Patient/diagnosis/DiagnosisTable.tsx b/src/components/Patient/diagnosis/DiagnosisTable.tsx index d9134f6d0c8..b80e0b6062a 100644 --- a/src/components/Patient/diagnosis/DiagnosisTable.tsx +++ b/src/components/Patient/diagnosis/DiagnosisTable.tsx @@ -1,6 +1,12 @@ import { t } from "i18next"; import { Badge } from "@/components/ui/badge"; +import { Button } from "@/components/ui/button"; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/components/ui/popover"; import { Table, TableBody, @@ -12,103 +18,118 @@ import { import { Avatar } from "@/components/Common/Avatar"; -import { formatName } from "@/Utils/utils"; -import { Diagnosis } from "@/types/emr/diagnosis/diagnosis"; - -export const getStatusBadgeStyle = (status: string) => { - switch (status?.toLowerCase()) { - case "active": - return "bg-green-100 text-green-800 border-green-200"; - case "inactive": - return "bg-gray-100 text-gray-800 border-gray-200"; - case "resolved": - return "bg-blue-100 text-blue-800 border-blue-200"; - case "recurrence": - return "bg-orange-100 text-orange-800 border-orange-200"; - default: - return "bg-gray-100 text-gray-800 border-gray-200"; - } -}; +import { + DIAGNOSIS_CLINICAL_STATUS_STYLES, + DIAGNOSIS_VERIFICATION_STATUS_STYLES, + Diagnosis, +} from "@/types/emr/diagnosis/diagnosis"; interface DiagnosisTableProps { diagnoses: Diagnosis[]; - showHeader?: boolean; } -export function DiagnosisTable({ - diagnoses, - showHeader = true, -}: DiagnosisTableProps) { +export function DiagnosisTable({ diagnoses }: DiagnosisTableProps) { return ( - - {showHeader && ( - - - {t("diagnosis")} - {t("status")} - {t("verification")} - {t("onset")} - {t("notes")} - {t("created_by")} - - - )} + + + + + {t("diagnosis")} + + + {t("status")} + + + {t("verification")} + + + {t("onset")} + + + {t("notes")} + + + {t("logged_by")} + + + - {diagnoses.map((diagnosis: Diagnosis, index) => { - const isEnteredInError = - diagnosis.verification_status === "entered_in_error"; - - return ( - <> - ( + + + {diagnosis.code.display} + + + + {t(diagnosis.clinical_status)} + + + + - - {diagnosis.code.display} - - - - {t(diagnosis.clinical_status)} - - - - - {t(diagnosis.verification_status)} - - - - {diagnosis.onset?.onset_datetime - ? new Date( - diagnosis.onset.onset_datetime, - ).toLocaleDateString() - : "-"} - - - {diagnosis.note || "-"} - - - - - {formatName(diagnosis.created_by)} - - - - - ); - })} + {t(diagnosis.verification_status)} + + + + {diagnosis.onset?.onset_datetime + ? new Date(diagnosis.onset.onset_datetime).toLocaleDateString() + : "-"} + + + {diagnosis.note ? ( + + + + + {t("see_note")} + + + + + {diagnosis.note} + + + + + ) : ( + "-" + )} + + + + + + {diagnosis.created_by.username} + + + + ))} ); diff --git a/src/components/Patient/diagnosis/list.tsx b/src/components/Patient/diagnosis/list.tsx index 40ae25b3faf..cb682456b02 100644 --- a/src/components/Patient/diagnosis/list.tsx +++ b/src/components/Patient/diagnosis/list.tsx @@ -1,9 +1,12 @@ import { useQuery } from "@tanstack/react-query"; import { t } from "i18next"; -import { PencilIcon } from "lucide-react"; import { Link } from "raviger"; import { ReactNode, useState } from "react"; +import { cn } from "@/lib/utils"; + +import CareIcon from "@/CAREUI/icons/CareIcon"; + import { Button } from "@/components/ui/button"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Skeleton } from "@/components/ui/skeleton"; @@ -17,12 +20,14 @@ interface DiagnosisListProps { patientId: string; encounterId?: string; facilityId?: string; + className?: string; } export function DiagnosisList({ patientId, encounterId, facilityId, + className, }: DiagnosisListProps) { const [showEnteredInError, setShowEnteredInError] = useState(false); @@ -40,8 +45,11 @@ export function DiagnosisList({ facilityId={facilityId} patientId={patientId} encounterId={encounterId} + className={className} > - + + + ); } @@ -62,6 +70,7 @@ export function DiagnosisList({ facilityId={facilityId} patientId={patientId} encounterId={encounterId} + className={className} > {t("no_diagnoses_recorded")} @@ -75,33 +84,40 @@ export function DiagnosisList({ facilityId={facilityId} patientId={patientId} encounterId={encounterId} + className={className} > - diagnosis.verification_status !== "entered_in_error", - ), - ...(showEnteredInError - ? filteredDiagnoses.filter( - (diagnosis) => - diagnosis.verification_status === "entered_in_error", - ) - : []), - ]} - /> + <> + + diagnosis.verification_status !== "entered_in_error", + ), + ...(showEnteredInError + ? filteredDiagnoses.filter( + (diagnosis) => + diagnosis.verification_status === "entered_in_error", + ) + : []), + ]} + /> - {hasEnteredInErrorRecords && !showEnteredInError && ( - - setShowEnteredInError(true)} - className="text-xs underline text-gray-500" - > - {t("view_all")} - - - )} + {hasEnteredInErrorRecords && !showEnteredInError && ( + <> + + + setShowEnteredInError(true)} + className="text-xs underline text-gray-950" + > + {t("view_all")} + + + + )} + ); } @@ -111,22 +127,26 @@ const DiagnosisListLayout = ({ patientId, encounterId, children, + className, }: { facilityId?: string; patientId: string; encounterId?: string; children: ReactNode; + className?: string; }) => { return ( - - + + {t("diagnoses")} {facilityId && encounterId && ( - + {t("edit")} )} diff --git a/src/components/Patient/models.tsx b/src/components/Patient/models.tsx index 14f048191b0..abc717e6120 100644 --- a/src/components/Patient/models.tsx +++ b/src/components/Patient/models.tsx @@ -1,46 +1,11 @@ -import { PatientCategory } from "@/components/Facility/models"; import { UserBareMinimum } from "@/components/Users/models"; import { - APPETITE_CHOICES, - BLADDER_DRAINAGE_CHOICES, - BLADDER_ISSUE_CHOICES, - BOWEL_ISSUE_CHOICES, - CONSCIOUSNESS_LEVEL, DOMESTIC_HEALTHCARE_SUPPORT_CHOICES, - HEARTBEAT_RHYTHM_CHOICES, - HumanBodyRegion, - INSULIN_INTAKE_FREQUENCY_OPTIONS, - LIMB_RESPONSE_OPTIONS, - NURSING_CARE_PROCEDURES, - NUTRITION_ROUTE_CHOICES, OCCUPATION_TYPES, - ORAL_ISSUE_CHOICES, - OXYGEN_MODALITY_OPTIONS, - PressureSoreExudateAmountOptions, - PressureSoreTissueTypeOptions, - RESPIRATORY_SUPPORT, - SLEEP_CHOICES, SOCIOECONOMIC_STATUS_CHOICES, - URINATION_FREQUENCY_CHOICES, - VENTILATOR_MODE_OPTIONS, } from "@/common/constants"; -export interface FlowModel { - id?: number; - status?: string; - created_date?: string; - modified_date?: string; - deleted?: boolean; - notes?: string; - patient_sample?: number; - created_by?: number; -} - -export interface DischargeSummaryModel { - email?: string; -} - export interface AssignedToObjectModel { first_name: string; last_name: string; @@ -56,138 +21,6 @@ export interface PatientMeta { domestic_healthcare_support?: (typeof DOMESTIC_HEALTHCARE_SUPPORT_CHOICES)[number]; } -export const DailyRoundTypes = [ - "NORMAL", - "COMMUNITY_NURSES_LOG", - "DOCTORS_LOG", - "VENTILATOR", - "AUTOMATED", - "TELEMEDICINE", -] as const; - -export type BloodPressure = { - systolic?: number; - diastolic?: number; -}; - -export interface IPainScale { - description: string; - region: HumanBodyRegion; - scale: number; -} - -export type NameQuantity = { name: string; quantity: number }; - -export type IPressureSore = { - region: HumanBodyRegion; - width: number; - length: number; - description: string; - scale: number; - exudate_amount: (typeof PressureSoreExudateAmountOptions)[number]; - tissue_type: (typeof PressureSoreTissueTypeOptions)[number]; -}; -export interface DailyRoundsModel { - spo2?: number; - rhythm?: (typeof HEARTBEAT_RHYTHM_CHOICES)[number]; - rhythm_detail?: string; - bp?: BloodPressure; - pulse?: number; - resp?: number; - temperature?: number; - physical_examination_info?: string; - other_details?: string; - consultation?: number; - action?: string; - review_interval?: number; - id?: string; - admitted_to?: string; - patient_category?: PatientCategory; - recommend_discharge?: boolean; - created_date?: string; - modified_date?: string; - taken_at?: string; - consciousness_level?: (typeof CONSCIOUSNESS_LEVEL)[number]["value"]; - rounds_type?: (typeof DailyRoundTypes)[number]; - last_updated_by_telemedicine?: boolean; - created_by_telemedicine?: boolean; - created_by?: UserBareMinimum; - last_edited_by?: UserBareMinimum; - bed?: string; - pain_scale_enhanced?: IPainScale[]; - in_prone_position?: boolean; - left_pupil_size?: number; - left_pupil_size_detail?: string; - left_pupil_light_reaction?: string; - left_pupil_light_reaction_detail?: string; - right_pupil_size?: number; - right_pupil_size_detail?: string; - right_pupil_light_reaction?: string; - right_pupil_light_reaction_detail?: string; - glasgow_eye_open?: number; - glasgow_motor_response?: number; - glasgow_verbal_response?: number; - limb_response_upper_extremity_right?: (typeof LIMB_RESPONSE_OPTIONS)[number]["value"]; - limb_response_upper_extremity_left?: (typeof LIMB_RESPONSE_OPTIONS)[number]["value"]; - limb_response_lower_extremity_left?: (typeof LIMB_RESPONSE_OPTIONS)[number]["value"]; - limb_response_lower_extremity_right?: (typeof LIMB_RESPONSE_OPTIONS)[number]["value"]; - glasgow_total_calculated?: number; - bilateral_air_entry?: boolean; - etco2?: number; - po2?: number; - pco2?: number; - ph?: number; - hco3?: number; - base_excess?: number; - lactate?: number; - sodium?: number; - potassium?: number; - blood_sugar_level?: number; - insulin_intake_dose?: number; - insulin_intake_frequency?: (typeof INSULIN_INTAKE_FREQUENCY_OPTIONS)[number]; - dialysis_fluid_balance?: number; - dialysis_net_balance?: number; - nursing?: { - procedure: (typeof NURSING_CARE_PROCEDURES)[number]; - description: string; - }[]; - feeds?: NameQuantity[]; - infusions?: NameQuantity[]; - iv_fluids?: NameQuantity[]; - output?: NameQuantity[]; - total_intake_calculated?: number; - total_output_calculated?: number; - ventilator_spo2?: number; - ventilator_interface?: (typeof RESPIRATORY_SUPPORT)[number]["value"]; - ventilator_oxygen_modality?: (typeof OXYGEN_MODALITY_OPTIONS)[number]["value"]; - ventilator_oxygen_modality_flow_rate?: number; - ventilator_oxygen_modality_oxygen_rate?: number; - ventilator_fio2?: number; - ventilator_mode?: (typeof VENTILATOR_MODE_OPTIONS)[number]; - ventilator_peep?: number; - ventilator_pip?: number; - ventilator_mean_airway_pressure?: number; - ventilator_resp_rate?: number; - ventilator_pressure_support?: number; - - ventilator_tidal_volume?: number; - pressure_sore?: IPressureSore[]; - bowel_issue?: (typeof BOWEL_ISSUE_CHOICES)[number]; - bladder_drainage?: (typeof BLADDER_DRAINAGE_CHOICES)[number]; - bladder_issue?: (typeof BLADDER_ISSUE_CHOICES)[number]; - is_experiencing_dysuria?: boolean; - urination_frequency?: (typeof URINATION_FREQUENCY_CHOICES)[number]; - sleep?: (typeof SLEEP_CHOICES)[number]; - nutrition_route?: (typeof NUTRITION_ROUTE_CHOICES)[number]; - oral_issue?: (typeof ORAL_ISSUE_CHOICES)[number]; - appetite?: (typeof APPETITE_CHOICES)[number]; -} - -export interface FacilityNameModel { - id?: string; - name?: string; -} - // File Upload Models export type FileCategory = "unspecified" | "xray" | "audio" | "identity_proof"; diff --git a/src/components/Patient/symptoms/SymptomTable.tsx b/src/components/Patient/symptoms/SymptomTable.tsx index b95e518d99d..e3b3ec76cbc 100644 --- a/src/components/Patient/symptoms/SymptomTable.tsx +++ b/src/components/Patient/symptoms/SymptomTable.tsx @@ -1,6 +1,12 @@ import { t } from "i18next"; import { Badge } from "@/components/ui/badge"; +import { Button } from "@/components/ui/button"; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/components/ui/popover"; import { Table, TableBody, @@ -12,109 +18,136 @@ import { import { Avatar } from "@/components/Common/Avatar"; -import { formatName } from "@/Utils/utils"; -import { Symptom } from "@/types/emr/symptom/symptom"; - -export const getStatusBadgeStyle = (status: string) => { - switch (status?.toLowerCase()) { - case "active": - return "bg-green-100 text-green-800 border-green-200"; - case "inactive": - return "bg-gray-100 text-gray-800 border-gray-200"; - case "resolved": - return "bg-blue-100 text-blue-800 border-blue-200"; - case "recurrence": - return "bg-orange-100 text-orange-800 border-orange-200"; - default: - return "bg-gray-100 text-gray-800 border-gray-200"; - } -}; +import { + SYMPTOM_CLINICAL_STATUS_STYLES, + SYMPTOM_SEVERITY_STYLES, + SYMPTOM_VERIFICATION_STATUS_STYLES, + Symptom, +} from "@/types/emr/symptom/symptom"; interface SymptomTableProps { symptoms: Symptom[]; - showHeader?: boolean; } -export function SymptomTable({ - symptoms, - showHeader = true, -}: SymptomTableProps) { +export function SymptomTable({ symptoms }: SymptomTableProps) { return ( - - {showHeader && ( - - - {t("symptom")} - {t("status")} - {t("severity")} - {t("onset")} - {t("verification")} - {t("notes")} - {t("created_by")} - - - )} + + + + + {t("symptom")} + + + {t("severity")} + + + {t("status")} + + + {t("verification")} + + + {t("onset")} + + + {t("notes")} + + + {t("logged_by")} + + + - {symptoms.map((symptom: Symptom, index: number) => { - const isEnteredInError = - symptom.verification_status === "entered_in_error"; - - return ( - <> - ( + + + {symptom.code.display} + + + {symptom.severity ? ( +
+ {fileNameTooltip} +
+ {fileName} +
+ {t("created_on")}{" "} + {new Date( + uploadedFiles[index].created_date!, + ).toLocaleString("en-US", { + dateStyle: "long", + timeStyle: "short", + })}
- {t("created_on")}{" "} - {new Date( - uploadedFiles[index].created_date!, - ).toLocaleString("en-US", { - dateStyle: "long", - timeStyle: "short", - })} -
Software Update
+ {formatName(selected)} +
- {t("patient_records_found_description")}( - {patientList[0].phone_number}) -
+ {t("patient_records_found_description")}( + {patientList[0].phone_number}) +
{t("duplicate_patient_record_confirmation")}
{t("duplicate_patient_record_rejection")}
{t("duplicate_patient_record_birth_unknown")}
- {facilityData?.name} -
{fileName}
{`${Math.round(props.value)}%`}
{fileUpload.error}
+ {fileUpload.error} +
- {fileUpload.error} -
{label}
{ - e.stopPropagation(); - onRemove(); - }} - > - -
- {value.selectedLabel} -
+ {t("no_active_medication_recorded")} +
+ {t("last_administered")}{" "} + {formatDistanceToNow(new Date(lastAdministeredDate))} {t("ago")}{" "} + {t("by")} {formatName(medication.created_by)} +
+ {t("prescribed")}{" "} + {formatDistanceToNow( + new Date(medication.authored_on || medication.created_date), + )}{" "} + {t("ago")} {t("by")} {lastAdministeredBy} +
+ {formatDosage(medication.dosage_instruction[0])} +
+ {getFrequencyDisplay(medication.dosage_instruction[0]?.timing) + ?.meaning || "-"} +
+ {medication.dosage_instruction[0]?.route?.display || "Oral"} +
+ {medication.dosage_instruction[0]?.timing?.repeat?.bounds_duration + ?.value || "-"}{" "} + {medication.dosage_instruction[0]?.timing?.repeat?.bounds_duration + ?.unit || ""} +
{startTimeError}
{endTimeError}
+ {description || + (searching + ? `No medications match "${searchQuery}"` + : "No medications have been prescribed yet")} +
- {searching - ? `No medications match "${searchQuery}"` - : "No medications have been prescribed yet"} -
{statement.medication.display ?? statement.medication.code}
{statement.dosage_text}
{statement.reason}
+ {statement.note} +
{statement.note}
{t("no_ongoing_medications")}
+ {formatDisplayName(selectedUser)} +
+ {formatDisplayName(user)} +
{user.username}
+ + + {user.username} + + +
+ {user.username} +
{message}
+ {t("generated_on")} {format(new Date(), "PPP 'at' p")} +
+ {allergy.note} +
+ {diagnosis.note} +
{t("no_diagnoses_recorded")}