- {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} -
- {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} - scale={scale} + + {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" && ( - <> - {[ - ["Zoom In", "l-search-plus", handleZoomIn, scale >= 2], - [`${Math.round(scale * 100)}%`, false, () => {}, false], - ["Zoom Out", "l-search-minus", handleZoomOut, scale <= 0.5], - [ - "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/Page.tsx b/src/components/Common/Page.tsx index 24b797d245f..b9079c5089e 100644 --- a/src/components/Common/Page.tsx +++ b/src/components/Common/Page.tsx @@ -33,7 +33,7 @@ export default function Page(props: PageProps) { let padding = ""; if (!props.noImplicitPadding) { - if (!props.hideBack || props.componentRight) padding = "py-0 md:px-6"; + if (props.componentRight) padding = "py-0 md:px-6"; else padding = "px-6 py-0"; } @@ -43,13 +43,8 @@ export default function Page(props: PageProps) { 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 && } 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..5c898e336da 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/Facility/ConsultationDetails/QuestionnaireResponsesList.tsx b/src/components/Facility/ConsultationDetails/QuestionnaireResponsesList.tsx index ea8ccfed412..2514c7bbdfe 100644 --- a/src/components/Facility/ConsultationDetails/QuestionnaireResponsesList.tsx +++ b/src/components/Facility/ConsultationDetails/QuestionnaireResponsesList.tsx @@ -1,7 +1,7 @@ import { useQuery } from "@tanstack/react-query"; import { t } from "i18next"; import { useQueryParams } from "raviger"; -import { useTranslation } from "react-i18next"; +import { Trans, useTranslation } from "react-i18next"; import { cn } from "@/lib/utils"; @@ -25,6 +25,8 @@ import { QuestionnaireResponse } from "@/types/questionnaire/questionnaireRespon interface Props { encounter?: Encounter; patientId: string; + isPrintPreview?: boolean; + onlyUnstructured?: boolean; } interface QuestionResponseProps { @@ -214,19 +216,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})`} - + + }} + /> + + + }} + /> + @@ -268,19 +284,26 @@ 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(routes.getQuestionnaireResponses, { + 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, - limit: RESULTS_PER_PAGE_LIMIT, - offset: ((qParams.page ?? 1) - 1) * RESULTS_PER_PAGE_LIMIT, + only_unstructured: onlyUnstructured, }, + maxPages: isPrintPreview ? undefined : 1, + pageSize: isPrintPreview ? 100 : RESULTS_PER_PAGE_LIMIT, }), }); @@ -308,24 +331,28 @@ export default function QuestionnaireResponsesList({ ), )} - - - RESULTS_PER_PAGE_LIMIT - ? "visible" - : "invisible", - )} - > - setQueryParams({ page })} - /> + {!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 index b9aa70c903d..649bfe6ef8b 100644 --- a/src/components/Facility/ConsultationDetails/QuickAccess.tsx +++ b/src/components/Facility/ConsultationDetails/QuickAccess.tsx @@ -1,4 +1,3 @@ -import { useQuery } from "@tanstack/react-query"; import { Link } from "raviger"; import { useTranslation } from "react-i18next"; @@ -9,9 +8,10 @@ import { Button } from "@/components/ui/button"; import LinkDepartmentsSheet from "@/components/Patient/LinkDepartmentsSheet"; -import query from "@/Utils/request/query"; +import useQuestionnaireOptions from "@/hooks/useQuestionnaireOptions"; + +import { stringifyNestedObject } from "@/Utils/utils"; import { Encounter } from "@/types/emr/encounter"; -import questionnaireApi from "@/types/questionnaire/questionnaireApi"; interface QuickAccessProps { encounter: Encounter; @@ -19,65 +19,35 @@ interface QuickAccessProps { export default function QuickAccess({ encounter }: QuickAccessProps) { const { t } = useTranslation(); - - const { data: response } = useQuery({ - queryKey: ["questionnaires"], - queryFn: query(questionnaireApi.list), - }); - - const questionnaireList = response?.results || []; - - const encounterSettings = [ - { id: "encounter_settings", label: t("encounter_settings") }, - ]; + const questionnaireOptions = useQuestionnaireOptions("encounter_actions"); return ( {/* Questionnaire Section */} - - {t("questionnaire")} - - {questionnaireList.map((item) => ( - - - {item.title} - - ))} - - - - - - {/* Update Encounter Details */} - - - {t("update_encounter_details")} - - - {encounterSettings.map((item) => ( - + {encounter.status !== "completed" && ( + + {t("questionnaire")} + + {questionnaireOptions.map((option) => ( - {item.label} + + {t(option.title)} - - ))} - - - - + ))} + + + + )} {/* Departments and Teams */} - - + + {t("departments_and_teams")} - {org.name} + {stringifyNestedObject(org)} )) : t("no_organizations_added_yet")} 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/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 547d1b209d6..195e4d700bf 100644 --- a/src/components/Facility/FacilityHome.tsx +++ b/src/components/Facility/FacilityHome.tsx @@ -7,14 +7,26 @@ import { } from "@radix-ui/react-tooltip"; import { useQuery, useQueryClient } from "@tanstack/react-query"; import { useMutation } from "@tanstack/react-query"; -import { Hospital, MapPin, MoreVertical, Settings } from "lucide-react"; +import { Edit2, Hospital, MapPin, MoreVertical, Settings } from "lucide-react"; import { navigate } from "raviger"; import { useState } from "react"; import { useTranslation } from "react-i18next"; import { toast } from "sonner"; +import { cn } from "@/lib/utils"; + +import { + AlertDialog, + AlertDialogAction, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogTitle, +} 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 { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { DropdownMenu, @@ -26,7 +38,6 @@ 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"; @@ -96,7 +107,6 @@ const renderGeoOrganizations = (geoOrg: Organization) => { export const FacilityHome = ({ facilityId }: Props) => { const { t } = useTranslation(); - const [openDeleteDialog, setOpenDeleteDialog] = useState(false); const [editCoverImage, setEditCoverImage] = useState(false); const queryClient = useQueryClient(); @@ -106,13 +116,14 @@ export const FacilityHome = ({ facilityId }: Props) => { pathParams: { id: facilityId }, }), }); - const { mutate: deleteFacility } = useMutation({ + + const { mutate: deleteFacility, isPending: isDeleting } = useMutation({ mutationFn: mutate(routes.deleteFacility, { pathParams: { id: facilityId }, }), onSuccess: () => { toast.success( - t("entity_deleted_successfully", { name: facilityData?.name }), + t("facility_deleted_successfully", { name: facilityData?.name }), ); navigate("/facility"); }, @@ -184,26 +195,13 @@ export const FacilityHome = ({ facilityId }: Props) => { return ( - - {t("are_you_sure_want_to_delete", { name: facilityData?.name })} - - } - action="Delete" - variant="destructive" - show={openDeleteDialog} - onClose={() => setOpenDeleteDialog(false)} - onConfirm={() => deleteFacility()} - /> setEditCoverImage(false)} + onOpenChange={(open) => setEditCoverImage(open)} hint={coverImageHint} /> @@ -267,7 +265,7 @@ export const FacilityHome = ({ facilityId }: Props) => { className="cursor-pointer" onClick={() => setEditCoverImage(true)} > - + {t("edit_cover_photo")} )} @@ -276,7 +274,7 @@ export const FacilityHome = ({ facilityId }: Props) => { facilityId={facilityId} trigger={ { e.preventDefault(); }} @@ -286,16 +284,45 @@ export const FacilityHome = ({ facilityId }: Props) => { } /> - {/* TODO: get permissions from backend */} - {/* {hasPermissionToDeleteFacility && ( - setOpenDeleteDialog(true)} - > - - {t("delete_facility")} - - )} */} + + {/* TODO: add delete facility */} + {/* + e.preventDefault()} + > + + {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")} + + + + + ; export interface CommentModel { 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 1b9cb9f8959..00000000000 --- a/src/components/Files/FileBlock.tsx +++ /dev/null @@ -1,143 +0,0 @@ -import { useQuery } from "@tanstack/react-query"; -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 query from "@/Utils/request/query"; - -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 { data: fileData } = useQuery({ - queryKey: ["file", { id: file.id, type: fileManager.type, associating_id }], - queryFn: query(routes.retrieveUpload, { - queryParams: { file_type: fileManager.type, associating_id }, - pathParams: { id: file.id || "" }, - }), - enabled: 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 54881c80c0a..00000000000 --- a/src/components/Files/FileUpload.tsx +++ /dev/null @@ -1,413 +0,0 @@ -import { useQuery, useQueryClient } from "@tanstack/react-query"; -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 query from "@/Utils/request/query"; - -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 queryClient = useQueryClient(); - - 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 refetchAll = () => { - queryClient.invalidateQueries({ - queryKey: ["viewUpload", "active", type, associatedId], - }); - queryClient.invalidateQueries({ - queryKey: ["viewUpload", "archived", type, associatedId], - }); - if (type === "consultation") { - queryClient.invalidateQueries({ - queryKey: ["viewUpload", "discharge_summary", associatedId], - }); - } - }; - - const { data: activeFiles, isLoading: activeFilesLoading } = useQuery({ - queryKey: ["viewUpload", "active", type, associatedId, offset], - queryFn: query(routes.viewUpload, { - queryParams: { - file_type: type, - associating_id: associatedId, - is_archived: false, - limit: RESULTS_PER_PAGE_LIMIT, - offset: offset, - }, - }), - }); - - const { data: archivedFiles, isLoading: archivedFilesLoading } = useQuery({ - queryKey: ["viewUpload", "archived", type, associatedId, offset], - queryFn: query(routes.viewUpload, { - queryParams: { - file_type: type, - associating_id: associatedId, - is_archived: true, - limit: RESULTS_PER_PAGE_LIMIT, - offset: offset, - }, - }), - }); - - const { data: dischargeSummary, isLoading: dischargeSummaryLoading } = - useQuery({ - queryKey: ["viewUpload", "discharge_summary", associatedId, offset], - queryFn: query(routes.viewUpload, { - queryParams: { - file_type: "discharge_summary", - associating_id: associatedId, - is_archived: false, - limit: RESULTS_PER_PAGE_LIMIT, - offset: offset, - silent: true, - }, - }), - enabled: type === "consultation", - }); - - const queries = { - UNARCHIVED: { data: activeFiles, isLoading: activeFilesLoading }, - ARCHIVED: { data: archivedFiles, isLoading: archivedFilesLoading }, - DISCHARGE_SUMMARY: { - data: dischargeSummary, - isLoading: dischargeSummaryLoading, - }, - }; - - const loading = Object.values(queries).some((q) => q.isLoading); - const fileQuery = queries[tab as keyof typeof queries]; - - const tabs = [ - { text: "Active Files", value: "UNARCHIVED" }, - { text: "Archived Files", value: "ARCHIVED" }, - ...(dischargeSummary?.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 0d11046948a..e092adfcae7 100644 --- a/src/components/Files/FilesTab.tsx +++ b/src/components/Files/FilesTab.tsx @@ -1,28 +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 { Checkbox } from "@/components/ui/checkbox"; -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, @@ -31,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, @@ -39,64 +35,82 @@ 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, @@ -106,7 +120,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 }), }, }), }); @@ -117,6 +131,7 @@ export const FilesTab = (props: FilesTabProps) => { onEdit: refetch, uploadedFiles: files?.results + .filter((file) => !file.is_archived) .slice() .reverse() .map((file) => ({ @@ -193,87 +208,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")} + + + + + } + + )} + ); }; @@ -332,12 +388,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 ( @@ -362,38 +413,104 @@ export const FilesTab = (props: FilesTabProps) => { > {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 = () => ( + @@ -421,12 +538,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) ) : ( )} @@ -503,8 +618,8 @@ export const FilesTab = (props: FilesTabProps) => { )} - ); - }; + + ); return ( @@ -524,40 +639,79 @@ export const FilesTab = (props: FilesTabProps) => { associatingId={associatingId} /> + - - handleTabChange(value as (typeof fileCategories)[number]["value"]) - } - > - - - {/* - {fileCategories.map((category) => ( - - {category.label} - - ))} - */} - - + + + + + {t("all")} + + + + + {t("discharge_summary")} + + + + + + {subPage === "discharge_summary" && ( + <> + { + await queryClient.invalidateQueries({ + queryKey: ["files"], + }); + toast.success(t("refreshed")); + }} + > + + {t("refresh")} + + + )} + {subPage === "discharge_summary" && ( + <> + generateDischargeSummary()} + disabled={isGenerating} + > + + + {isGenerating + ? t("generating") + : t("generate_discharge_summary")} + + + + )} {fileCategories.map((category) => ( + ))} @@ -565,237 +719,3 @@ export const FilesTab = (props: FilesTabProps) => { ); }; - -const 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 { t } = useTranslation(); - 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 && ( - - )} - - - ); -}; - -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 index bd21bb26273..a27d8e8d1ec 100644 --- a/src/components/Location/LocationSearch.tsx +++ b/src/components/Location/LocationSearch.tsx @@ -20,7 +20,7 @@ import locationApi from "@/types/location/locationApi"; interface LocationSearchProps { facilityId: string; - mode?: "kind" | "location"; + mode?: "kind" | "instance"; onSelect: (location: LocationList) => void; disabled?: boolean; value?: LocationList | null; @@ -44,7 +44,6 @@ export function LocationSearch({ }), enabled: facilityId !== "preview", }); - return ( @@ -57,7 +56,7 @@ export function LocationSearch({ - + + + + + {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 index 39f477f6d65..4a0bc9d63ac 100644 --- a/src/components/Medicine/MedicationAdministration/AdministrationTab.tsx +++ b/src/components/Medicine/MedicationAdministration/AdministrationTab.tsx @@ -21,7 +21,6 @@ import { EmptyState } from "@/components/Medicine/MedicationRequestTable"; import { getFrequencyDisplay } from "@/components/Medicine/MedicationsTable"; import { formatDosage } from "@/components/Medicine/utils"; -import routes from "@/Utils/request/api"; import mutate from "@/Utils/request/mutate"; import query from "@/Utils/request/query"; import { formatName } from "@/Utils/utils"; @@ -29,7 +28,12 @@ import { MedicationAdministration, MedicationAdministrationRequest, } from "@/types/emr/medicationAdministration/medicationAdministration"; -import { MedicationRequestRead } from "@/types/emr/medicationRequest"; +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"; @@ -40,14 +44,6 @@ import { createMedicationAdministrationRequest, } from "./utils"; -const ACTIVE_STATUSES = ["active", "on-hold", "draft", "unknown"] as const; -const INACTIVE_STATUSES = [ - "ended", - "completed", - "cancelled", - "entered_in_error", -] as const; - // Utility Functions function isTimeInSlot( date: Date, @@ -211,9 +207,13 @@ const MedicationRow: React.FC = ({ onEditAdministration, onDiscontinue, }) => { + const isInactive = INACTIVE_MEDICATION_STATUSES.includes( + medication.status as (typeof INACTIVE_MEDICATION_STATUSES)[number], + ); + return ( - + {medication.medication?.display} @@ -247,7 +247,7 @@ const MedicationRow: React.FC = ({ return ( {administrationRecords?.map((admin) => { const colorClass = @@ -260,16 +260,34 @@ const MedicationRow: React.FC = ({ className={`flex font-medium items-center gap-2 rounded-md p-2 mb-2 cursor-pointer justify-between border ${colorClass}`} onClick={() => onEditAdministration(medication, admin)} > - - - {new Date(admin.occurrence_period_start).toLocaleTimeString( - "en-US", - { + + + + {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, + })} + + )} + {admin.note && ( = ({ ); })} - - {ACTIVE_STATUSES.includes( - medication.status as (typeof ACTIVE_STATUSES)[number], + + {ACTIVE_MEDICATION_STATUSES.includes( + medication.status as (typeof ACTIVE_MEDICATION_STATUSES)[number], ) && ( @@ -336,6 +356,7 @@ export const AdministrationTab: React.FC = ({ 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), ); @@ -369,7 +390,7 @@ export const AdministrationTab: React.FC = ({ queryParams: { encounter: encounterId, limit: 100, - status: ACTIVE_STATUSES.join(","), + status: ACTIVE_MEDICATION_STATUSES.join(","), }, }), enabled: !!patientId, @@ -382,7 +403,7 @@ export const AdministrationTab: React.FC = ({ queryParams: { encounter: encounterId, limit: 100, - status: INACTIVE_STATUSES.join(","), + status: INACTIVE_MEDICATION_STATUSES.join(","), }, }), enabled: !!patientId, @@ -390,7 +411,7 @@ export const AdministrationTab: React.FC = ({ const { data: administrations, refetch: refetchAdministrations } = useQuery({ queryKey: ["medication_administrations", patientId, visibleSlots], - queryFn: query(routes.medicationAdministration.list, { + queryFn: query(medicationAdministrationApi.list, { pathParams: { patientId }, queryParams: { encounter: encounterId, @@ -581,36 +602,33 @@ export const AdministrationTab: React.FC = ({ ] : activeMedications?.results || []; + const filteredMedications = medications.filter( + (med: MedicationRequestRead) => { + if (!searchQuery.trim()) return true; + const searchTerm = searchQuery.toLowerCase().trim(); + const medicationName = med.medication?.display?.toLowerCase() || ""; + return medicationName.includes(searchTerm); + }, + ); + + let content; if (!activeMedications || !stoppedMedications) { - return ( + content = ( ); - } - - if (!medications?.length) { - return ( + } else if (!medications?.length) { + content = ( ); - } - - return ( - - - setIsSheetOpen(true)} - > - - {t("administer_medicine")} - - - + } else if (searchQuery && !filteredMedications.length) { + content = ; + } else { + content = ( @@ -684,7 +702,7 @@ export const AdministrationTab: React.FC = ({ {/* Medication rows */} - {medications?.map((medication) => ( + {filteredMedications?.map((medication) => ( = ({ + ); + } + + 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 && ( { onOpenChange(false); toast.success(t("medication_administration_saved")); diff --git a/src/components/Medicine/MedicationAdministration/MedicineAdminForm.tsx b/src/components/Medicine/MedicationAdministration/MedicineAdminForm.tsx index 62b48d65b65..3519619d08a 100644 --- a/src/components/Medicine/MedicationAdministration/MedicineAdminForm.tsx +++ b/src/components/Medicine/MedicationAdministration/MedicineAdminForm.tsx @@ -83,29 +83,37 @@ export const MedicineAdminForm: React.FC = ({ // Validate and notify parent whenever times change useEffect(() => { - if ( - !administrationRequest.occurrence_period_start || - !administrationRequest.occurrence_period_end - ) { + if (!administrationRequest.occurrence_period_start) { isValid?.(false); return; } const startDate = new Date(administrationRequest.occurrence_period_start); - const endDate = new Date(administrationRequest.occurrence_period_end); - const startError = validateDateTime(startDate, true); - const endError = validateDateTime(endDate, false); - setStartTimeError(startError); - setEndTimeError(endError); - isValid?.(!startError && !endError); + // 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, - validateDateTime, ]); const handleDateChange = (newTime: string, isStartTime: boolean) => { @@ -238,9 +246,21 @@ export const MedicineAdminForm: React.FC = ({ {t("status")} - onChange({ ...administrationRequest, status: value }) - } + onValueChange={(value: MedicationAdministrationStatus) => { + 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); + }} > @@ -275,13 +295,22 @@ export const MedicineAdminForm: React.FC = ({ onValueChange={(newValue) => { setIsPastTime(newValue === "yes"); if (newValue === "no") { - // Set both times to current time const now = new Date().toISOString(); - onChange({ + const newRequest = { ...administrationRequest, occurrence_period_start: now, - occurrence_period_end: now, - }); + }; + + if ( + !( + administrationRequest.status === "in_progress" || + administrationRequest.status === "not_done" + ) + ) { + newRequest.occurrence_period_end = now; + } + + onChange(newRequest); } }} className="flex gap-4" @@ -370,7 +399,8 @@ export const MedicineAdminForm: React.FC = ({ disabled={ !isPastTime || (!!administrationRequest.id && - administrationRequest.status !== "in_progress") + administrationRequest.status !== "in_progress") || + administrationRequest.status === "in_progress" } > @@ -411,7 +441,8 @@ export const MedicineAdminForm: React.FC = ({ disabled={ !isPastTime || (!!administrationRequest.id && - administrationRequest.status !== "in_progress") + administrationRequest.status !== "in_progress") || + administrationRequest.status === "in_progress" } /> diff --git a/src/components/Medicine/MedicationAdministration/MedicineAdminSheet.tsx b/src/components/Medicine/MedicationAdministration/MedicineAdminSheet.tsx index 80b212081c4..8b22e738b59 100644 --- a/src/components/Medicine/MedicationAdministration/MedicineAdminSheet.tsx +++ b/src/components/Medicine/MedicationAdministration/MedicineAdminSheet.tsx @@ -73,7 +73,7 @@ const MedicineListItem = ({ @@ -122,12 +122,9 @@ export function MedicineAdminSheet({ const formRef = useRef(null); const { mutate: upsertAdministrations, isPending } = useMutation({ - mutationFn: mutate( - medicationAdministrationApi.upsertMedicationAdministration, - { - pathParams: { patientId }, - }, - ), + mutationFn: mutate(medicationAdministrationApi.upsert, { + pathParams: { patientId }, + }), onSuccess: () => { toast.success(t("medication_administration_saved")); handleClose(); diff --git a/src/components/Medicine/MedicationRequestTable/index.tsx b/src/components/Medicine/MedicationRequestTable/index.tsx index 389093ae429..2e811025048 100644 --- a/src/components/Medicine/MedicationRequestTable/index.tsx +++ b/src/components/Medicine/MedicationRequestTable/index.tsx @@ -114,7 +114,7 @@ export default function MedicationRequestTable({ - + - + - + @@ -161,9 +166,14 @@ export default function MedicationRequestTable({ {t("edit")} - + {t("print")} @@ -184,7 +194,10 @@ export default function MedicationRequestTable({ - + {!!stoppedMedications?.results?.length && ( { +export const MedicationsTable = ({ + patientId, + encounterId, +}: MedicationsTableProps) => { const { t } = useTranslation(); - if (!medications?.length) { + const { data: medications, isLoading } = useQuery({ + queryKey: ["medication_requests", patientId, encounterId], + queryFn: query(medicationRequestApi.list, { + pathParams: { patientId }, + queryParams: { encounter: encounterId, limit: 50, offset: 0 }, + }), + }); + if (isLoading) { return ( - {t("no_medications_found_for_this_encounter")} + ); } - return ( @@ -59,15 +73,22 @@ export const MedicationsTable = ({ medications }: MedicationsTableProps) => { - {medications.map((medication) => { + {medications?.results.map((medication) => { 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; + const isInactive = INACTIVE_MEDICATION_STATUSES.includes( + medication.status as (typeof INACTIVE_MEDICATION_STATUSES)[number], + ); + return ( - + {medication.medication?.display} diff --git a/src/components/Patient/EncounterQuestionnaire.tsx b/src/components/Patient/EncounterQuestionnaire.tsx index f31aeb0839a..43eb6bca2bd 100644 --- a/src/components/Patient/EncounterQuestionnaire.tsx +++ b/src/components/Patient/EncounterQuestionnaire.tsx @@ -25,10 +25,7 @@ export default function EncounterQuestionnaire({ }: Props) { const { goBack } = useAppHistory(); return ( - + - - - ); -} diff --git a/src/components/Patient/MedicationStatementList.tsx b/src/components/Patient/MedicationStatementList.tsx index 39c8e334cda..112c42414a4 100644 --- a/src/components/Patient/MedicationStatementList.tsx +++ b/src/components/Patient/MedicationStatementList.tsx @@ -2,9 +2,16 @@ import { useQuery } from "@tanstack/react-query"; 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 +21,99 @@ 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; + isPrintPreview?: boolean; } interface MedicationRowProps { - statement: any; + statement: MedicationStatementRead; isEnteredInError?: boolean; - index: number; + isPrintPreview?: boolean; } function MedicationRow({ statement, isEnteredInError, - index, + isPrintPreview = false, }: 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 ? ( + + {isPrintPreview ? ( + {statement.note} + ) : ( + + + + {t("see_note")} + + + + + {statement.note} + + + + )} + + ) : ( + "-" + )} - - - - {statement.note} - - - {statement.note} - - + + + + {formatName(statement.created_by)} + ); @@ -103,24 +121,28 @@ function MedicationRow({ export function MedicationStatementList({ patientId, + className, + isPrintPreview = false, }: MedicationStatementListProps) { const { t } = useTranslation(); - const [showEnteredInError, setShowEnteredInError] = useState(false); + const [showEnteredInError, setShowEnteredInError] = useState(isPrintPreview); 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,11 +160,15 @@ export function MedicationStatementList({ if (!filteredMedications?.length) { return ( - - + + {t("ongoing_medications")} - + {t("no_ongoing_medications")} @@ -150,52 +176,75 @@ export function MedicationStatementList({ } 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")} + + + )} diff --git a/src/components/Patient/PatientDetailsTab/Appointments.tsx b/src/components/Patient/PatientDetailsTab/Appointments.tsx index 603b5aead0a..d0ec294fb48 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; diff --git a/src/components/Patient/PatientDetailsTab/PatientFiles.tsx b/src/components/Patient/PatientDetailsTab/PatientFiles.tsx index 7f65fd8c00c..df9789b35d7 100644 --- a/src/components/Patient/PatientDetailsTab/PatientFiles.tsx +++ b/src/components/Patient/PatientDetailsTab/PatientFiles.tsx @@ -8,6 +8,7 @@ export const PatientFilesTab = (props: PatientProps) => { type="patient" facilityId={props.facilityId} patientId={props.patientData.id} + patient={props.patientData} /> ); }; diff --git a/src/components/Patient/PatientDetailsTab/PatientUsers.tsx b/src/components/Patient/PatientDetailsTab/PatientUsers.tsx index 0cb118704ad..bbbafddec5b 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"; @@ -127,9 +131,11 @@ function AddUserSheet({ patientId }: AddUserSheetProps) { className="h-12 w-12" /> - - {formatDisplayName(selectedUser)} - + + + {formatDisplayName(selectedUser)} + + {selectedUser.email} @@ -225,7 +231,7 @@ export const PatientUsers = (props: PatientProps) => { const ManageUsers = () => { if (!users?.results?.length) { return ( - + {t("no_user_assigned")} ); @@ -235,7 +241,7 @@ export const PatientUsers = (props: PatientProps) => { {users?.results.map((user) => ( @@ -245,10 +251,20 @@ export const PatientUsers = (props: PatientProps) => { imageUrl={user.profile_picture_url} /> - - {formatDisplayName(user)} + + + + {formatDisplayName(user)} + + - {user.username} + + + + {user.username} + + + @@ -257,17 +273,24 @@ export const PatientUsers = (props: PatientProps) => { variant="ghost" size="icon" data-cy="patient-user-remove-button" + className="absolute top-0 right-0" > - + {t("remove_user")} - {t("are_you_sure_want_to_remove", { - name: formatDisplayName(user), - })} + + ), + }} + /> @@ -275,7 +298,7 @@ export const PatientUsers = (props: PatientProps) => { removeUser(user.id)} - className="bg-destructive text-destructive-foreground hover:bg-destructive/90" + className={cn(buttonVariants({ variant: "destructive" }))} > {t("remove")} diff --git a/src/components/Patient/PatientHome.tsx b/src/components/Patient/PatientHome.tsx index 0807023978a..69df69c4143 100644 --- a/src/components/Patient/PatientHome.tsx +++ b/src/components/Patient/PatientHome.tsx @@ -247,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/PatientInfoCard.tsx b/src/components/Patient/PatientInfoCard.tsx index 3f2a2234a6f..18e52410b4b 100644 --- a/src/components/Patient/PatientInfoCard.tsx +++ b/src/components/Patient/PatientInfoCard.tsx @@ -12,16 +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 { @@ -31,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"; @@ -53,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, { @@ -101,7 +112,18 @@ 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)} •{" "} {t(`GENDER__${patient.gender}`)} @@ -115,7 +137,18 @@ 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)} •{" "} {t(`GENDER__${patient.gender}`)} @@ -124,28 +157,28 @@ export default function PatientInfoCard(props: PatientInfoCardProps) { - 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} @@ -183,7 +216,9 @@ export default function PatientInfoCard(props: PatientInfoCardProps) { - Status History + + {t("status_history")} + {encounter.status_history.history.map( (history, index) => ( - {props.encounter.current_location && ( - - - - - - {props.encounter.current_location.name} - - - - - - - - Current Location - - - {props.encounter.current_location.name} - - - {props.encounter.current_location.description} - - - - - Move Patient - - - - - )} @@ -261,7 +259,9 @@ export default function PatientInfoCard(props: PatientInfoCardProps) { - Class History + + {t(`class_history`)} + {encounter.encounter_class_history.history.map( (history, index) => ( } /> + {props.encounter.current_location ? ( + + + + + + {props.encounter.current_location.name} + + + + + + + + + {t("location")} + + + + + + {t("history")} + + + } + /> + + + + + + + {t("update_location")} + + + + + + ) : ( + + + + {t("add_location")} + + + )} @@ -368,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 9acf238d3de..1c1113081ef 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,7 +551,7 @@ 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" @@ -557,10 +560,16 @@ export default function PatientRegistration( {form.getValues("age") && ( - - {t("year_of_birth")}:{" "} - {new Date().getFullYear() - - Number(form.getValues("age"))} + + {Number(form.getValues("age")) <= 0 ? ( + Invalid age + ) : ( + + {t("year_of_birth")}:{" "} + {new Date().getFullYear() - + Number(form.getValues("age"))} + + )} )} @@ -734,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..ad87eee91a6 --- /dev/null +++ b/src/components/Patient/TreatmentSummary.tsx @@ -0,0 +1,253 @@ +import careConfig from "@careConfig"; +import { useQuery } from "@tanstack/react-query"; +import { format } from "date-fns"; +import { t } from "i18next"; + +import PrintPreview from "@/CAREUI/misc/PrintPreview"; + +import QuestionnaireResponsesList from "@/components/Facility/ConsultationDetails/QuestionnaireResponsesList"; +import { MedicationsTable } from "@/components/Medicine/MedicationsTable"; +import { AllergyList } from "@/components/Patient/allergy/list"; +import { DiagnosisList } from "@/components/Patient/diagnosis/list"; +import { SymptomsList } from "@/components/Patient/symptoms/list"; + +import api from "@/Utils/request/api"; +import query from "@/Utils/request/query"; +import { formatName, formatPatientAge } from "@/Utils/utils"; + +import { MedicationStatementList } from "./MedicationStatementList"; + +interface TreatmentSummaryProps { + facilityId: string; + encounterId: string; +} + +export default function TreatmentSummary({ + facilityId, + encounterId, +}: TreatmentSummaryProps) { + const { data: encounter } = useQuery({ + queryKey: ["encounter", encounterId], + queryFn: query(api.encounter.get, { + pathParams: { id: encounterId }, + queryParams: { facility: facilityId }, + }), + }); + + if (!encounter) { + return ( + + {t("no_patient_record_found")} + + ); + } + + 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}`, + )} + + + )} + + + + {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 */} + + + {/* Symptoms */} + + + {/* Diagnoses */} + + + {/* Medications */} + + + {t("medications")} + + + + + + {/* Medication Statements */} + + + {/* Questionnaire Responses Section */} + + + + + + {/* Footer */} + + + {t("generated_on")} {format(new Date(), "PPP 'at' p")} + + + + + ); +} diff --git a/src/components/Patient/allergy/list.tsx b/src/components/Patient/allergy/list.tsx index ddbcaaab127..62695fe02e8 100644 --- a/src/components/Patient/allergy/list.tsx +++ b/src/components/Patient/allergy/list.tsx @@ -9,6 +9,8 @@ import { 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"; @@ -47,6 +49,8 @@ interface AllergyListProps { facilityId?: string; patientId: string; encounterId?: string; + className?: string; + isPrintPreview?: boolean; encounterStatus?: Encounter["status"]; } @@ -67,9 +71,11 @@ export function AllergyList({ facilityId, patientId, encounterId, + className, + isPrintPreview = false, encounterStatus, }: AllergyListProps) { - const [showEnteredInError, setShowEnteredInError] = useState(false); + const [showEnteredInError, setShowEnteredInError] = useState(isPrintPreview); const { data: allergies, isLoading } = useQuery({ queryKey: ["allergies", patientId, encounterId, encounterStatus], @@ -125,13 +131,6 @@ export function AllergyList({ } function AllergyRow({ allergy }: AllergyRowProps) { - const MAX_NOTE_LENGTH = 15; - const note = allergy.note || ""; - const isLongNote = note.length > MAX_NOTE_LENGTH; - const displayNote = isLongNote - ? `${note.slice(0, MAX_NOTE_LENGTH)}..` - : note; - return ( - {note && ( + {allergy.note && ( - {displayNote} - {isLongNote && ( + {isPrintPreview ? ( + + {allergy.note} + + ) : ( - {note} + {allergy.note} @@ -220,6 +222,8 @@ export function AllergyList({ facilityId={facilityId} patientId={patientId} encounterId={encounterId} + className={className} + isPrintPreview={isPrintPreview} > @@ -290,15 +294,25 @@ const AllergyListLayout = ({ patientId, encounterId, children, + className, + isPrintPreview = false, }: { facilityId?: string; patientId: string; encounterId?: string; children: ReactNode; + className?: string; + isPrintPreview?: boolean; }) => { return ( - - + + {t("allergies")} {facilityId && encounterId && ( )} - {children} + + {children} + ); }; diff --git a/src/components/Patient/diagnosis/DiagnosisTable.tsx b/src/components/Patient/diagnosis/DiagnosisTable.tsx index 3f821d5d110..ac9d93cc878 100644 --- a/src/components/Patient/diagnosis/DiagnosisTable.tsx +++ b/src/components/Patient/diagnosis/DiagnosisTable.tsx @@ -26,9 +26,13 @@ import { interface DiagnosisTableProps { diagnoses: Diagnosis[]; + isPrintPreview?: boolean; } -export function DiagnosisTable({ diagnoses }: DiagnosisTableProps) { +export function DiagnosisTable({ + diagnoses, + isPrintPreview = false, +}: DiagnosisTableProps) { return ( @@ -54,99 +58,85 @@ export function DiagnosisTable({ diagnoses }: DiagnosisTableProps) { - {diagnoses.map((diagnosis) => { - const note = diagnosis.note || ""; - const MAX_NOTE_LENGTH = 15; - const isLongNote = note.length > MAX_NOTE_LENGTH; - const displayNote = isLongNote - ? `${note.slice(0, MAX_NOTE_LENGTH)}..` - : note; - - return ( - - - {diagnosis.code.display} - - - - {t(diagnosis.clinical_status)} - - - - - {t(diagnosis.verification_status)} - - - - {diagnosis.onset?.onset_datetime - ? new Date( - diagnosis.onset.onset_datetime, - ).toLocaleDateString() - : "-"} - - - {note ? ( - - - {displayNote} - - {isLongNote && ( - - - - {t("see_note")} - - - - - {note} - - - - )} - - ) : ( - "-" - )} - - + {diagnoses.map((diagnosis) => ( + + + {diagnosis.code.display} + + + + {t(diagnosis.clinical_status)} + + + + + {t(diagnosis.verification_status)} + + + + {diagnosis.onset?.onset_datetime + ? new Date(diagnosis.onset.onset_datetime).toLocaleDateString() + : "-"} + + + {diagnosis.note ? ( - - - {diagnosis.created_by.username} - + {isPrintPreview ? ( + {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 8e7fe9f1c07..4695f5900f9 100644 --- a/src/components/Patient/diagnosis/list.tsx +++ b/src/components/Patient/diagnosis/list.tsx @@ -3,6 +3,8 @@ import { t } from "i18next"; 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"; @@ -18,14 +20,18 @@ interface DiagnosisListProps { patientId: string; encounterId?: string; facilityId?: string; + className?: string; + isPrintPreview?: boolean; } export function DiagnosisList({ patientId, encounterId, facilityId, + className, + isPrintPreview = false, }: DiagnosisListProps) { - const [showEnteredInError, setShowEnteredInError] = useState(false); + const [showEnteredInError, setShowEnteredInError] = useState(isPrintPreview); const { data: diagnoses, isLoading } = useQuery({ queryKey: ["diagnosis", patientId, encounterId], @@ -78,6 +84,8 @@ export function DiagnosisList({ facilityId={facilityId} patientId={patientId} encounterId={encounterId} + className={className} + isPrintPreview={isPrintPreview} > {hasEnteredInErrorRecords && !showEnteredInError && ( @@ -117,15 +126,24 @@ const DiagnosisListLayout = ({ patientId, encounterId, children, + className, + isPrintPreview = false, }: { facilityId?: string; patientId: string; encounterId?: string; children: ReactNode; + className?: string; + isPrintPreview?: boolean; }) => { return ( - - + + {t("diagnoses")} {facilityId && encounterId && ( )} - {children} + + {children} + ); }; 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 8fc626918e9..8b9dd9cb973 100644 --- a/src/components/Patient/symptoms/SymptomTable.tsx +++ b/src/components/Patient/symptoms/SymptomTable.tsx @@ -27,9 +27,13 @@ import { interface SymptomTableProps { symptoms: Symptom[]; + isPrintPreview?: boolean; } -export function SymptomTable({ symptoms }: SymptomTableProps) { +export function SymptomTable({ + symptoms, + isPrintPreview = false, +}: SymptomTableProps) { return ( @@ -55,27 +59,20 @@ export function SymptomTable({ symptoms }: SymptomTableProps) { - {symptoms.map((symptom) => { - const note = symptom.note || ""; - const MAX_NOTE_LENGTH = 15; - const isLongNote = note.length > MAX_NOTE_LENGTH; - const displayNote = isLongNote - ? `${note.slice(0, MAX_NOTE_LENGTH)}..` - : note; - - return ( - - - {symptom.code.display} - - + {symptoms.map((symptom) => ( + + + {symptom.code.display} + + + {symptom.severity ? ( {t(symptom.severity)} - - - - {t(symptom.clinical_status)} - - - - - {t(symptom.verification_status)} - - - - {note ? ( - - - {displayNote} - - {isLongNote && ( - - - - {t("see_note")} - - - - - {note} - - - - )} - - ) : ( - "-" - )} - - + ) : ( + "-" + )} + + + + {t(symptom.clinical_status)} + + + + + {t(symptom.verification_status)} + + + + {symptom.note ? ( - - {symptom.created_by.username} + {isPrintPreview ? ( + {symptom.note} + ) : ( + + + + {t("see_note")} + + + + + {symptom.note} + + + + )} - - - ); - })} + ) : ( + "-" + )} + + + + + {symptom.created_by.username} + + + + ))} ); diff --git a/src/components/Patient/symptoms/list.tsx b/src/components/Patient/symptoms/list.tsx index e815a229e0d..0f4b558d6a9 100644 --- a/src/components/Patient/symptoms/list.tsx +++ b/src/components/Patient/symptoms/list.tsx @@ -3,6 +3,8 @@ import { t } from "i18next"; 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"; @@ -18,14 +20,18 @@ interface SymptomsListProps { patientId: string; encounterId?: string; facilityId?: string; + className?: string; + isPrintPreview?: boolean; } export function SymptomsList({ patientId, encounterId, facilityId, + className, + isPrintPreview = false, }: SymptomsListProps) { - const [showEnteredInError, setShowEnteredInError] = useState(false); + const [showEnteredInError, setShowEnteredInError] = useState(isPrintPreview); const { data: symptoms, isLoading } = useQuery({ queryKey: ["symptoms", patientId, encounterId], @@ -77,6 +83,8 @@ export function SymptomsList({ facilityId={facilityId} patientId={patientId} encounterId={encounterId} + className={className} + isPrintPreview={isPrintPreview} > {hasEnteredInErrorRecords && !showEnteredInError && ( @@ -115,15 +124,25 @@ const SymptomListLayout = ({ patientId, encounterId, children, + className, + isPrintPreview = false, }: { facilityId?: string; patientId: string; encounterId?: string; children: ReactNode; + className?: string; + isPrintPreview?: boolean; }) => { return ( - - + + {t("symptoms")} {facilityId && encounterId && ( )} - {children} + + {children} + ); }; diff --git a/src/components/Questionnaire/CloneQuestionnaireSheet.tsx b/src/components/Questionnaire/CloneQuestionnaireSheet.tsx index c8b41842161..834517a98a3 100644 --- a/src/components/Questionnaire/CloneQuestionnaireSheet.tsx +++ b/src/components/Questionnaire/CloneQuestionnaireSheet.tsx @@ -66,7 +66,7 @@ export default function CloneQuestionnaireSheet({ silent: true, }), onSuccess: async (data: QuestionnaireDetail) => { - navigate(`/questionnaire/${data.slug}`); + navigate(`/admin/questionnaire/${data.slug}`); setOpen(false); }, onError: (error) => { diff --git a/src/components/Questionnaire/CodingEditor.tsx b/src/components/Questionnaire/CodingEditor.tsx new file mode 100644 index 00000000000..6e3fe0aba2c --- /dev/null +++ b/src/components/Questionnaire/CodingEditor.tsx @@ -0,0 +1,165 @@ +import { UpdateIcon } from "@radix-ui/react-icons"; +import { useMutation } from "@tanstack/react-query"; +import { toast } from "sonner"; + +import CareIcon from "@/CAREUI/icons/CareIcon"; + +import { Button } from "@/components/ui/button"; +import { Card, CardContent, CardHeader } from "@/components/ui/card"; +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; + +import mutate from "@/Utils/request/mutate"; +import { Code } from "@/types/questionnaire/code"; +import { + TERMINOLOGY_SYSTEMS, + ValuesetLookupResponse, +} from "@/types/valueset/valueset"; +import valuesetApi from "@/types/valueset/valuesetApi"; + +interface CodingEditorProps { + code?: Code; + onChange: (code: Code | undefined) => void; +} + +export function CodingEditor({ code, onChange }: CodingEditorProps) { + const { mutate: verifyCode, isPending } = useMutation({ + mutationFn: mutate(valuesetApi.lookup), + onSuccess: (response: ValuesetLookupResponse) => { + if (response.metadata && code) { + onChange({ + ...code, + display: response.metadata.display, + }); + toast.success("Code verified successfully"); + } + }, + onError: (error) => { + console.error(error); + toast.error("Failed to verify code"); + }, + }); + + if (!code) { + return ( + + { + onChange({ + system: Object.values(TERMINOLOGY_SYSTEMS)[0], + code: "", + display: "", + }); + }} + > + + Add Coding + + + ); + } + + return ( + + + + Coding Details + { + onChange(undefined); + }} + > + + Remove Coding + + + + + + + System + { + onChange({ + ...code, + system: value, + code: "", + display: "", + }); + }} + > + + + + + {Object.entries(TERMINOLOGY_SYSTEMS).map(([key, value]) => ( + + {key} + + ))} + + + + + + + Code + { + onChange({ + ...code, + code: e.target.value, + display: "", + }); + }} + placeholder="Enter code" + /> + + + Display + + + + { + if (!code.system || !code.code) { + toast.error("Please select a system and enter a code first"); + return; + } + + verifyCode({ + system: code.system, + code: code.code, + }); + }} + > + + + + + + + ); +} diff --git a/src/components/Questionnaire/QuestionTypes/AppointmentQuestion.tsx b/src/components/Questionnaire/QuestionTypes/AppointmentQuestion.tsx index dec289eedf4..4ec261ca4a4 100644 --- a/src/components/Questionnaire/QuestionTypes/AppointmentQuestion.tsx +++ b/src/components/Questionnaire/QuestionTypes/AppointmentQuestion.tsx @@ -27,7 +27,7 @@ import { } from "@/types/questionnaire/form"; import { Question } from "@/types/questionnaire/question"; import { CreateAppointmentQuestion } from "@/types/scheduling/schedule"; -import scheduleApis from "@/types/scheduling/scheduleApis"; +import scheduleApis from "@/types/scheduling/scheduleApi"; import { UserBase } from "@/types/user/user"; interface FollowUpVisitQuestionProps { diff --git a/src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx b/src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx index f40485d97c0..00379ae671a 100644 --- a/src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx +++ b/src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx @@ -309,7 +309,13 @@ const DiagnosisItem: React.FC = ({ disabled={disabled} > - + + {t("diagnosis_status_placeholder")} + + } + /> {DIAGNOSIS_CLINICAL_STATUS.map((status) => ( @@ -339,7 +345,13 @@ const DiagnosisItem: React.FC = ({ disabled={disabled} > - + + {t("diagnosis_verification_placeholder")} + + } + /> {DIAGNOSIS_VERIFICATION_STATUS.map((status) => ( diff --git a/src/components/Questionnaire/QuestionTypes/LocationQuestion.tsx b/src/components/Questionnaire/QuestionTypes/LocationQuestion.tsx index ed60dbe4b7e..5d2e1391d6c 100644 --- a/src/components/Questionnaire/QuestionTypes/LocationQuestion.tsx +++ b/src/components/Questionnaire/QuestionTypes/LocationQuestion.tsx @@ -79,7 +79,7 @@ export function LocationQuestion({ Select Location {t("cancel")} {t("remove")} @@ -363,7 +363,7 @@ export function MedicationRequestQuestion({ {t("cancel")} {t("remove")} @@ -356,7 +356,7 @@ export function MedicationStatementQuestion({ ); } - return null; + return ( + + Medication requests cannot be recorded without an active + encounter + + ); case "medication_statement": if (encounterId) { return ( @@ -134,7 +139,12 @@ export function QuestionInput({ /> ); } - return null; + return ( + + Medication statement cannot be recorded without an active + encounter + + ); case "allergy_intolerance": return ; case "symptom": @@ -147,14 +157,20 @@ export function QuestionInput({ /> ); } - return null; + return ( + Symptoms cannot be recorded without an encounter + ); case "diagnosis": if (encounterId) { return ( ); } - return null; + return ( + + Diagnosis cannot be recorded without an active encounter + + ); case "appointment": return ; case "encounter": @@ -167,7 +183,9 @@ export function QuestionInput({ /> ); } - return null; + return ( + Create an encounter first in order to update it + ); case "location_association": if (encounterId) { return ( @@ -179,7 +197,11 @@ export function QuestionInput({ /> ); } - return null; + return ( + + Location cannot be recorded without an active encounter + + ); } return null; diff --git a/src/components/Questionnaire/QuestionnaireEditor.tsx b/src/components/Questionnaire/QuestionnaireEditor.tsx index 2637d5c9880..436dbdbb18a 100644 --- a/src/components/Questionnaire/QuestionnaireEditor.tsx +++ b/src/components/Questionnaire/QuestionnaireEditor.tsx @@ -1,4 +1,5 @@ import { useMutation, useQuery } from "@tanstack/react-query"; +import { t } from "i18next"; import { ChevronDown, ChevronUp } from "lucide-react"; import { Building, Check, Loader2, X } from "lucide-react"; import { useNavigate } from "raviger"; @@ -44,16 +45,17 @@ import { Switch } from "@/components/ui/switch"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Textarea } from "@/components/ui/textarea"; +import { DebugPreview } from "@/components/Common/DebugPreview"; import Loading from "@/components/Common/Loading"; import mutate from "@/Utils/request/mutate"; import query from "@/Utils/request/query"; import organizationApi from "@/types/organization/organizationApi"; import { - AnswerOption, EnableWhen, Question, QuestionType, + SUPPORTED_QUESTION_TYPES, StructuredQuestionType, } from "@/types/questionnaire/question"; import { @@ -62,7 +64,9 @@ import { SubjectType, } from "@/types/questionnaire/questionnaire"; import questionnaireApi from "@/types/questionnaire/questionnaireApi"; +import valuesetApi from "@/types/valueset/valuesetApi"; +import { CodingEditor } from "./CodingEditor"; import ManageQuestionnaireOrganizationsSheet from "./ManageQuestionnaireOrganizationsSheet"; import { QuestionnaireForm } from "./QuestionnaireForm"; @@ -117,7 +121,7 @@ export default function QuestionnaireEditor({ id }: QuestionnaireEditorProps) { mutationFn: mutate(questionnaireApi.create), onSuccess: (data: QuestionnaireDetail) => { toast.success("Questionnaire created successfully"); - navigate(`/questionnaire/${data.slug}`); + navigate(`/admin/questionnaire/${data.slug}`); }, onError: (_error) => { toast.error("Failed to create questionnaire"); @@ -203,7 +207,7 @@ export default function QuestionnaireEditor({ id }: QuestionnaireEditorProps) { }; const handleCancel = () => { - navigate(id ? `/questionnaire/${id}` : "/questionnaire"); + navigate(id ? `/admin/questionnaire/${id}` : "/admin/questionnaire"); }; const toggleQuestionExpanded = (questionId: string) => { @@ -632,6 +636,11 @@ export default function QuestionnaireEditor({ id }: QuestionnaireEditorProps) { + @@ -690,12 +699,20 @@ function QuestionEditor({ repeats, answer_option, questions, + code, } = question; const [expandedSubQuestions, setExpandedSubQuestions] = useState>( new Set(), ); + const { data: valuesetResponse } = useQuery({ + queryKey: ["valuesets"], + queryFn: query(valuesetApi.list), + }); + + const valuesets = valuesetResponse?.results || []; + const updateField = ( field: K, value: Question[K], @@ -824,136 +841,173 @@ function QuestionEditor({ /> - - - Type - { - if (val !== "group") { - updateField("type", val, { questions: [] }); - } else { - updateField("type", val); - } - }} - > - - - - - Group - Boolean - Decimal - Integer - Date - DateTime - Time - String - Text - URL - Choice - Quantity - Structured - - - - - {type === "structured" && ( + + - Structured Type + Type - updateField("structured_type", val) - } + value={type} + onValueChange={(val: QuestionType) => { + if (val !== "group") { + updateField("type", val, { questions: [] }); + } else { + updateField("type", val); + } + }} > - + - {STRUCTURED_QUESTION_TYPES.map((type) => ( + {SUPPORTED_QUESTION_TYPES.map((type) => ( - {type.label} + {type.name} ))} - )} - - - - updateField("required", val)} - id={`required-${getQuestionPath()}`} - /> - Required + {type === "structured" && ( + + Structured Type + + updateField("structured_type", val) + } + > + + + + + {STRUCTURED_QUESTION_TYPES.map((type) => ( + + {type.label} + + ))} + + + + )} - - updateField("repeats", val)} - id={`repeats-${getQuestionPath()}`} + {type !== "structured" && type !== "group" && ( + updateField("code", newCode)} /> - Repeatable - + )} + - - updateField("collect_time", val)} - id={`collect_time-${getQuestionPath()}`} - /> - - Collect Time - - + + + Question Settings + + Configure the basic behavior: mark as required, allow multiple + entries, or set as read only. + + + + + updateField("required", val)} + id={`required-${getQuestionPath()}`} + /> + + Required + + - - updateField("collect_performer", val)} - id={`collect_performer-${getQuestionPath()}`} - /> - - Collect Performer - - + + updateField("repeats", val)} + id={`repeats-${getQuestionPath()}`} + /> + + Repeatable + + - - updateField("collect_body_site", val)} - id={`collect_body_site-${getQuestionPath()}`} - /> - - Collect Body Site - + + updateField("read_only", val)} + id={`read_only-${getQuestionPath()}`} + /> + + Read Only + + + + - - updateField("collect_method", val)} - id={`collect_method-${getQuestionPath()}`} - /> - - Collect Method - - + + + Data Collection Details + + + Specify key collection info: time, performer, body site, and + method. + + + + + + updateField("collect_time", val) + } + id={`collect_time-${getQuestionPath()}`} + /> + + Collect Time + + - - updateField("read_only", val)} - id={`read_only-${getQuestionPath()}`} - /> - - Read Only - + + + updateField("collect_performer", val) + } + id={`collect_performer-${getQuestionPath()}`} + /> + + Collect Performer + + + + + + updateField("collect_body_site", val) + } + id={`collect_body_site-${getQuestionPath()}`} + /> + + Collect Body Site + + + + + + updateField("collect_method", val) + } + id={`collect_method-${getQuestionPath()}`} + /> + + Collect Method + + + + @@ -988,329 +1042,139 @@ function QuestionEditor({ {type === "choice" && ( - - Answer Options - + + + + + Answer Options + + + Define possible answers for this question + + updateField( "answer_value_set", - val === "custom" ? undefined : val, + val === "custom" ? undefined : "valueset", ) } > - - + + - Custom Options - Yes/No - - Severity Levels + + {t("custom_options")} - - Frequency - - Duration + {t("value_set")} - - {(!question.answer_value_set || - question.answer_value_set === "custom") && ( - + + + {!question.answer_value_set ? ( + {(answer_option || []).map((opt, idx) => ( - - { - const newOptions = [...(answer_option || [])]; - newOptions[idx] = { ...opt, value: e.target.value }; - updateField("answer_option", newOptions); - }} - placeholder="Option value" - /> - - { - const newOptions = [...(answer_option || [])]; - newOptions[idx] = { - ...opt, - display: e.target.value, - }; - updateField("answer_option", newOptions); - }} - placeholder="Display text (optional)" - /> - { - const newOptions = answer_option?.filter( - (_, i) => i !== idx, - ); - updateField("answer_option", newOptions); - }} - > - - + + + + Value + { + const newOptions = answer_option + ? [...answer_option] + : []; + newOptions[idx] = { + ...opt, + value: e.target.value, + }; + updateField("answer_option", newOptions); + }} + placeholder="Option value" + /> + + + + Display Text + { + const newOptions = answer_option + ? [...answer_option] + : []; + newOptions[idx] = { + ...opt, + display: e.target.value, + }; + updateField("answer_option", newOptions); + }} + placeholder="Display text (optional)" + /> + + { + const newOptions = answer_option?.filter( + (_, i) => i !== idx, + ); + updateField("answer_option", newOptions); + }} + > + + + ))} + { - const newOption: AnswerOption = { value: "" }; - updateField("answer_option", [ - ...(answer_option || []), - newOption, - ]); + const newOption = { value: "" }; + const newOptions = answer_option + ? [...answer_option, newOption] + : [newOption]; + updateField("answer_option", newOptions); }} > Add Option - - )} - - - - Enable When Conditions - - {(question.enable_when || []).length > 0 && ( - - Enable Behavior - - updateField("enable_behavior", val) - } - > - - - - - - All conditions must be met - - - Any condition must be met - - - - - )} - {(question.enable_when || []).map((condition, idx) => ( - + ) : ( + + + updateField("answer_value_set", val) + } > - - Question - { - const newConditions = [ - ...(question.enable_when || []), - ]; - newConditions[idx] = { - ...condition, - question: e.target.value, - }; - updateField("enable_when", newConditions); - }} - placeholder="Question Link ID" - /> - - - Operator - { - const newConditions = [ - ...(question.enable_when || []), - ]; - - switch (val) { - case "greater": - case "less": - case "greater_or_equals": - case "less_or_equals": - newConditions[idx] = { - question: condition.question, - operator: val, - answer: 0, - }; - break; - case "exists": - newConditions[idx] = { - question: condition.question, - operator: val, - answer: true, - }; - break; - case "equals": - case "not_equals": - newConditions[idx] = { - question: condition.question, - operator: val, - answer: "", - }; - break; - } - - updateField("enable_when", newConditions); - }} - > - - - - - Equals - - Not Equals - - - Greater Than - - Less Than - - Greater Than or Equal - - - Less Than or Equal - - Exists - - - - - - Answer - {condition.operator === "exists" ? ( - { - const newConditions = [ - ...(question.enable_when || []), - ]; - newConditions[idx] = { - question: condition.question, - operator: "exists" as const, - answer: val === "true", - }; - updateField("enable_when", newConditions); - }} - > - - - - - True - False - - - ) : ( - { - const newConditions = [ - ...(question.enable_when || []), - ]; - const value = e.target.value; - let newCondition; - - if ( - [ - "greater", - "less", - "greater_or_equals", - "less_or_equals", - ].includes(condition.operator) - ) { - newCondition = { - question: condition.question, - operator: condition.operator as - | "greater" - | "less" - | "greater_or_equals" - | "less_or_equals", - answer: Number(value), - }; - } else { - newCondition = { - question: condition.question, - operator: condition.operator as - | "equals" - | "not_equals", - answer: value, - }; - } - - newConditions[idx] = newCondition; - updateField("enable_when", newConditions); - }} - placeholder="Answer value" - /> - )} - - { - const newConditions = question.enable_when?.filter( - (_, i) => i !== idx, - ); - updateField("enable_when", newConditions); - }} - > - - - - - ))} - { - const newCondition: EnableWhen = { - question: "", - operator: "equals", - answer: "", - }; - updateField("enable_when", [ - ...(question.enable_when || []), - newCondition, - ]); - }} - > - - Add Condition - - - + + + + + {valuesets.map((valueset) => ( + + {valueset.name} + + ))} + + + + )} + )} @@ -1391,6 +1255,234 @@ function QuestionEditor({ )} + + + Enable When Conditions + + {(question.enable_when || []).length > 0 && ( + + Enable Behavior + + updateField("enable_behavior", val) + } + > + + + + + + All conditions must be met + + + Any condition must be met + + + + + )} + {(question.enable_when || []).map((condition, idx) => ( + + + Question + { + const newConditions = [...(question.enable_when || [])]; + newConditions[idx] = { + ...condition, + question: e.target.value, + }; + updateField("enable_when", newConditions); + }} + placeholder="Question Link ID" + /> + + + Operator + { + const newConditions = [...(question.enable_when || [])]; + + switch (val) { + case "greater": + case "less": + case "greater_or_equals": + case "less_or_equals": + newConditions[idx] = { + question: condition.question, + operator: val, + answer: 0, + }; + break; + case "exists": + newConditions[idx] = { + question: condition.question, + operator: val, + answer: true, + }; + break; + case "equals": + case "not_equals": + newConditions[idx] = { + question: condition.question, + operator: val, + answer: "", + }; + break; + } + + updateField("enable_when", newConditions); + }} + > + + + + + Equals + Not Equals + Greater Than + Less Than + + Greater Than or Equal + + + Less Than or Equal + + Exists + + + + + + Answer + {condition.operator === "exists" ? ( + { + const newConditions = [ + ...(question.enable_when || []), + ]; + newConditions[idx] = { + question: condition.question, + operator: "exists" as const, + answer: val === "true", + }; + updateField("enable_when", newConditions); + }} + > + + + + + True + False + + + ) : ( + { + const newConditions = [ + ...(question.enable_when || []), + ]; + const value = e.target.value; + let newCondition; + + if ( + [ + "greater", + "less", + "greater_or_equals", + "less_or_equals", + ].includes(condition.operator) + ) { + newCondition = { + question: condition.question, + operator: condition.operator as + | "greater" + | "less" + | "greater_or_equals" + | "less_or_equals", + answer: Number(value), + }; + } else { + newCondition = { + question: condition.question, + operator: condition.operator as + | "equals" + | "not_equals", + answer: value, + }; + } + + newConditions[idx] = newCondition; + updateField("enable_when", newConditions); + }} + placeholder="Answer value" + /> + )} + + { + const newConditions = question.enable_when?.filter( + (_, i) => i !== idx, + ); + updateField("enable_when", newConditions); + }} + > + + + + + ))} + { + const newCondition: EnableWhen = { + question: "", + operator: "equals", + answer: "", + }; + updateField("enable_when", [ + ...(question.enable_when || []), + newCondition, + ]); + }} + > + + Add Condition + + + diff --git a/src/components/Questionnaire/QuestionnaireForm.tsx b/src/components/Questionnaire/QuestionnaireForm.tsx index 7357dd5298d..1b1de03ebc9 100644 --- a/src/components/Questionnaire/QuestionnaireForm.tsx +++ b/src/components/Questionnaire/QuestionnaireForm.tsx @@ -11,6 +11,7 @@ import CareIcon from "@/CAREUI/icons/CareIcon"; import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; import { Button } from "@/components/ui/button"; +import { DebugPreview } from "@/components/Common/DebugPreview"; import Loading from "@/components/Common/Loading"; import { PLUGIN_Component } from "@/PluginEngine"; @@ -525,15 +526,11 @@ export function QuestionnaireForm({ setFormState={setQuestionnaireForms} /> - {/* Add a Preview of the QuestionnaireForm */} - {import.meta.env.DEV && ( - - QuestionnaireForm - - {JSON.stringify(questionnaireForms, null, 2)} - - - )} + ); diff --git a/src/components/Questionnaire/index.tsx b/src/components/Questionnaire/QuestionnaireList.tsx similarity index 76% rename from src/components/Questionnaire/index.tsx rename to src/components/Questionnaire/QuestionnaireList.tsx index 54353743df9..cb6c29040eb 100644 --- a/src/components/Questionnaire/index.tsx +++ b/src/components/Questionnaire/QuestionnaireList.tsx @@ -1,4 +1,5 @@ import { useQuery } from "@tanstack/react-query"; +import { t } from "i18next"; import { useNavigate } from "raviger"; import { Badge } from "@/components/ui/badge"; @@ -6,15 +7,25 @@ import { Button } from "@/components/ui/button"; import Loading from "@/components/Common/Loading"; +import useFilters from "@/hooks/useFilters"; + import query from "@/Utils/request/query"; import { QuestionnaireDetail } from "@/types/questionnaire/questionnaire"; import questionnaireApi from "@/types/questionnaire/questionnaireApi"; export function QuestionnaireList() { + const { qParams, Pagination, resultsPerPage } = useFilters({ + limit: 15, + }); const navigate = useNavigate(); const { data: response, isLoading } = useQuery({ - queryKey: ["questionnaires"], - queryFn: query(questionnaireApi.list), + queryKey: ["questionnaires", qParams], + queryFn: query(questionnaireApi.list, { + queryParams: { + limit: resultsPerPage, + offset: ((qParams.page ?? 1) - 1) * resultsPerPage, + }, + }), }); if (isLoading) { @@ -27,11 +38,11 @@ export function QuestionnaireList() { - Questionnaires - Manage and view questionnaires + {t("questionnaires")} + {t("manage_and_view_questionnaires")} - navigate("/questionnaire/create")}> - Create New + navigate("/admin/questionnaire/create")}> + {t("create_new")} @@ -40,16 +51,16 @@ export function QuestionnaireList() { - Title + {t("title")} - Description + {t("description")} - Status + {t("status")} - Slug + {t("slug")} @@ -57,7 +68,9 @@ export function QuestionnaireList() { {questionnaireList.map((questionnaire: QuestionnaireDetail) => ( navigate(`/questionnaire/${questionnaire.slug}`)} + onClick={() => + navigate(`/admin/questionnaire/${questionnaire.slug}`) + } className="cursor-pointer hover:bg-gray-50" > @@ -89,6 +102,7 @@ export function QuestionnaireList() { + ); } diff --git a/src/components/Questionnaire/show.tsx b/src/components/Questionnaire/show.tsx index 4534ce5734b..f18ca66f1e0 100644 --- a/src/components/Questionnaire/show.tsx +++ b/src/components/Questionnaire/show.tsx @@ -2,6 +2,8 @@ import { useMutation, useQuery } from "@tanstack/react-query"; import { useNavigate } from "raviger"; import { useState } from "react"; +import { cn } from "@/lib/utils"; + import CareIcon from "@/CAREUI/icons/CareIcon"; import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; @@ -16,7 +18,7 @@ import { AlertDialogTitle, } 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 { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { DropdownMenu, @@ -103,7 +105,7 @@ export function QuestionnaireShow({ id }: QuestionnaireShowProps) { pathParams: { id }, }), onSuccess: () => { - navigate("/questionnaire"); + navigate("/admin/questionnaire"); }, }); @@ -147,11 +149,14 @@ export function QuestionnaireShow({ id }: QuestionnaireShowProps) { {questionnaire.description} - navigate("/questionnaire")}> + navigate("/admin/questionnaire")} + > Back to List - navigate(`/questionnaire/${id}/edit`)}> + navigate(`/admin/questionnaire/${id}/edit`)}> Edit @@ -218,7 +223,7 @@ export function QuestionnaireShow({ id }: QuestionnaireShowProps) { Cancel {isPending ? "Deleting..." : "Delete"} diff --git a/src/components/Resource/PrintResourceLetter.tsx b/src/components/Resource/PrintResourceLetter.tsx index bc1a80f72a8..5fd6f82e209 100644 --- a/src/components/Resource/PrintResourceLetter.tsx +++ b/src/components/Resource/PrintResourceLetter.tsx @@ -45,7 +45,7 @@ export default function PrintResourceLetter({ id }: { id: string }) { {/* From Address */} - {t("From")}: + {t("from")}: {data.origin_facility.name} diff --git a/src/components/Resource/ResourceCommentSection.tsx b/src/components/Resource/ResourceCommentSection.tsx index 62f94d5d6fa..ddda59be9f1 100644 --- a/src/components/Resource/ResourceCommentSection.tsx +++ b/src/components/Resource/ResourceCommentSection.tsx @@ -7,7 +7,9 @@ import { toast } from "sonner"; import { cn } from "@/lib/utils"; import { Button } from "@/components/ui/button"; +import { Markdown } from "@/components/ui/markdown"; import { Textarea } from "@/components/ui/textarea"; +import { TooltipComponent } from "@/components/ui/tooltip"; import { Avatar } from "@/components/Common/Avatar"; import PaginationComponent from "@/components/Common/Pagination"; @@ -18,7 +20,7 @@ import { RESULTS_PER_PAGE_LIMIT } from "@/common/constants"; import routes from "@/Utils/request/api"; import mutate from "@/Utils/request/mutate"; import query from "@/Utils/request/query"; -import { formatName, relativeTime } from "@/Utils/utils"; +import { formatDateTime, formatName, relativeTime } from "@/Utils/utils"; import { CommentModel } from "@/types/resourceRequest/resourceRequest"; const CommentSection = (props: { id: string }) => { @@ -91,11 +93,13 @@ const CommentSection = (props: { id: string }) => { ) : ( - {resourceComments?.results?.map((comment) => ( - - - - ))} + {resourceComments?.results + ? [...resourceComments.results].reverse().map((comment) => ( + + + + )) + : null} ( - - - - {comment.replace(/\n+/g, "\n")} - - - - - - - {formatName(created_by)} - + + + + + + + + + + + {formatName(created_by)} + + + {relativeTime(created_date)} + + + + + - {relativeTime(created_date)} ); diff --git a/src/components/Resource/ResourceCreate.tsx b/src/components/Resource/ResourceCreate.tsx deleted file mode 100644 index b21a74d0c96..00000000000 --- a/src/components/Resource/ResourceCreate.tsx +++ /dev/null @@ -1,420 +0,0 @@ -import { zodResolver } from "@hookform/resolvers/zod"; -import { useMutation, useQuery } from "@tanstack/react-query"; -import { navigate, useQueryParams } from "raviger"; -import { useForm } from "react-hook-form"; -import { useTranslation } from "react-i18next"; -import { toast } from "sonner"; -import * as z from "zod"; - -import Card from "@/CAREUI/display/Card"; -import CareIcon from "@/CAREUI/icons/CareIcon"; - -import { Alert, AlertDescription } from "@/components/ui/alert"; -import { Button } from "@/components/ui/button"; -import { - Form, - FormControl, - FormDescription, - FormField, - FormItem, - FormLabel, - FormMessage, -} from "@/components/ui/form"; -import { Input } from "@/components/ui/input"; -import { PhoneInput } from "@/components/ui/phone-input"; -import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from "@/components/ui/select"; -import { Separator } from "@/components/ui/separator"; -import { Textarea } from "@/components/ui/textarea"; - -import { FacilitySelect } from "@/components/Common/FacilitySelect"; -import Loading from "@/components/Common/Loading"; -import Page from "@/components/Common/Page"; - -import useAppHistory from "@/hooks/useAppHistory"; -import useAuthUser from "@/hooks/useAuthUser"; - -import { RESOURCE_CATEGORY_CHOICES } from "@/common/constants"; - -import routes from "@/Utils/request/api"; -import mutate from "@/Utils/request/mutate"; -import query from "@/Utils/request/query"; -import validators from "@/Utils/validators"; -import { ResourceRequest } from "@/types/resourceRequest/resourceRequest"; - -interface ResourceProps { - facilityId: number; -} - -export default function ResourceCreate(props: ResourceProps) { - const { goBack } = useAppHistory(); - const { facilityId } = props; - const { t } = useTranslation(); - const [{ related_patient }] = useQueryParams(); - const authUser = useAuthUser(); - - const resourceFormSchema = z.object({ - category: z.string().min(1, { message: t("field_required") }), - assigned_facility: z - .object({ - id: z.string(), - name: z.string(), - }) - .nullable(), - emergency: z.enum(["true", "false"]), - title: z.string().min(1, { message: t("field_required") }), - reason: z.string().min(1, { message: t("field_required") }), - referring_facility_contact_name: z - .string() - .min(1, { message: t("field_required") }), - referring_facility_contact_number: validators.phoneNumber.required, - priority: z.number().default(1), - }); - - type ResourceFormValues = z.infer; - - const { data: facilityData } = useQuery({ - queryKey: ["facility", facilityId], - queryFn: () => - query(routes.getAnyFacility, { - pathParams: { id: String(facilityId) }, - }), - enabled: !!facilityId, - }); - - const form = useForm({ - resolver: zodResolver(resourceFormSchema), - defaultValues: { - category: "", - assigned_facility: null, - emergency: "false" as const, - title: "", - reason: "", - referring_facility_contact_name: "", - referring_facility_contact_number: "", - priority: 1, - }, - }); - - const { mutate: createResource, isPending } = useMutation({ - mutationFn: mutate(routes.createResource), - onSuccess: (data: ResourceRequest) => { - toast.success(t("resource_created_successfully")); - navigate(`/facility/${facilityId}/resource/${data.id}`); - }, - }); - - const onSubmit = (data: ResourceFormValues) => { - createResource({ - status: "PENDING", - category: data.category, - origin_facility: String(props.facilityId), - assigned_facility: data.assigned_facility?.id || null, - approving_facility: null, - emergency: data.emergency === "true", - title: data.title, - reason: data.reason, - referring_facility_contact_name: data.referring_facility_contact_name, - referring_facility_contact_number: data.referring_facility_contact_number, - related_patient: related_patient, - priority: data.priority, - }); - }; - - const fillMyDetails = () => { - form.setValue( - "referring_facility_contact_name", - `${authUser.first_name} ${authUser.last_name}`.trim(), - ); - if (authUser.phone_number) { - form.setValue("referring_facility_contact_number", authUser.phone_number); - } - }; - - if (isPending) { - return ; - } - - return ( - - - - - - {related_patient && ( - - - - - {t("linked_patient")}:{" "} - {related_patient} - - - - )} - - - - - {t("basic_information")} - - - {t("resource_request_basic_info_description")} - - - - - ( - - - {t("facility_for_care_support")} - - - - - - {t("select_facility_description")} - - - - )} - /> - - ( - - {t("is_this_an_emergency")} - - - - - - - - {t("yes")} - - - - - - - - {t("no")} - - - - - - {t("emergency_description")} - - - - )} - /> - - - ( - - {t("category")} - - - - - - - - {RESOURCE_CATEGORY_CHOICES.map((category) => ( - - {category.text} - - ))} - - - - {t("category_description")} - - - - )} - /> - - - - - - - - {t("request_details")} - - - {t("resource_request_details_description")} - - - - ( - - {t("request_title")} - - field.onChange(value)} - /> - - - {t("request_title_description")} - - - - )} - /> - - ( - - {t("request_reason")} - - field.onChange(value)} - /> - </FormControl> - <FormDescription> - {t("request_reason_description")} - </FormDescription> - <FormMessage /> - </FormItem> - )} - /> - </div> - - <Separator /> - - <div className="space-y-6"> - <div className="flex flex-col lg:flex-row gap-2 lg:items-center justify-between"> - <div> - <h3 className="text-lg font-medium"> - {t("contact_information")} - </h3> - <p className="text-sm text-gray-500"> - {t("contact_information_description")} - </p> - </div> - <Button - type="button" - variant="outline" - onClick={fillMyDetails} - className="shrink-0" - > - <CareIcon icon="l-user" className="mr-2 h-4 w-4" /> - {t("fill_my_details")} - </Button> - </div> - - <div className="grid grid-cols-1 gap-6 md:grid-cols-2"> - <FormField - control={form.control} - name="referring_facility_contact_name" - render={({ field }) => ( - <FormItem> - <FormLabel required>{t("contact_person")}</FormLabel> - <FormControl> - <Input - {...field} - onChange={(value) => field.onChange(value)} - /> - </FormControl> - <FormDescription> - {t("contact_person_description")} - </FormDescription> - <FormMessage /> - </FormItem> - )} - /> - - <FormField - control={form.control} - name="referring_facility_contact_number" - render={({ field }) => ( - <FormItem> - <FormLabel required>{t("contact_phone")}</FormLabel> - <FormControl> - <PhoneInput - {...field} - onChange={(value) => field.onChange(value)} - /> - </FormControl> - <FormDescription> - {t("contact_phone_description")} - </FormDescription> - <FormMessage /> - </FormItem> - )} - /> - </div> - </div> - - <div className="sticky bottom-0 flex justify-end gap-4 border-t bg-background pt-4"> - <Button - type="button" - variant="outline" - onClick={() => goBack()} - > - {t("cancel")} - </Button> - <Button type="submit" variant="default" disabled={isPending}> - {isPending && ( - <CareIcon - icon="l-spinner" - className="mr-2 h-4 w-4 animate-spin" - /> - )} - {isPending ? t("submitting") : t("submit")} - </Button> - </div> - </form> - </Form> - </Card> - </div> - </Page> - ); -} diff --git a/src/components/Resource/ResourceDetails.tsx b/src/components/Resource/ResourceDetails.tsx index f684596c13a..182cd9ab514 100644 --- a/src/components/Resource/ResourceDetails.tsx +++ b/src/components/Resource/ResourceDetails.tsx @@ -123,11 +123,7 @@ export default function ResourceDetails({ } return ( - <Page - title="Request Details" - crumbsReplacements={{ [id]: { name: data.title } }} - backUrl={`/facility/${facilityId}/resource`} - > + <Page title={t("request_details")}> <div className="mx-auto max-w-7xl space-y-6 p-4 md:p-6"> {/* Action Buttons */} <div className="flex items-center justify-between"> diff --git a/src/components/Resource/ResourceDetailsUpdate.tsx b/src/components/Resource/ResourceDetailsUpdate.tsx deleted file mode 100644 index f3e48df7af8..00000000000 --- a/src/components/Resource/ResourceDetailsUpdate.tsx +++ /dev/null @@ -1,299 +0,0 @@ -import { useQuery } from "@tanstack/react-query"; -import { useMutation } from "@tanstack/react-query"; -import { t } from "i18next"; -import { navigate, useQueryParams } from "raviger"; -import { useEffect, useReducer, useState } from "react"; -import { toast } from "sonner"; - -import Card from "@/CAREUI/display/Card"; - -import { Button } from "@/components/ui/button"; -import { Label } from "@/components/ui/label"; -import { Textarea } from "@/components/ui/textarea"; - -import CircularProgress from "@/components/Common/CircularProgress"; -import { FacilitySelect } from "@/components/Common/FacilitySelect"; -import Loading from "@/components/Common/Loading"; -import Page from "@/components/Common/Page"; -import UserAutocomplete from "@/components/Common/UserAutocompleteFormField"; -import { FieldLabel } from "@/components/Form/FormFields/FormField"; -import RadioFormField from "@/components/Form/FormFields/RadioFormField"; -import { SelectFormField } from "@/components/Form/FormFields/SelectFormField"; -import TextFormField from "@/components/Form/FormFields/TextFormField"; -import { FieldChangeEvent } from "@/components/Form/FormFields/Utils"; -import { UserModel } from "@/components/Users/models"; - -import useAppHistory from "@/hooks/useAppHistory"; - -import { RESOURCE_STATUS_CHOICES } from "@/common/constants"; - -import routes from "@/Utils/request/api"; -import mutate from "@/Utils/request/mutate"; -import query from "@/Utils/request/query"; -import { UpdateResourceRequest } from "@/types/resourceRequest/resourceRequest"; - -interface resourceProps { - id: string; - facilityId: string; -} - -const initForm: Partial<UpdateResourceRequest> = { - assigned_facility: null, - emergency: false, - title: "", - reason: "", - assigned_to: null, -}; - -const requiredFields: any = { - assigned_facility_type: { - errorText: "Please Select Facility Type", - }, -}; - -const initError = Object.assign( - {}, - ...Object.keys(initForm).map((k) => ({ [k]: "" })), -); - -const initialState = { - form: { ...initForm }, - errors: { ...initError }, -}; - -export const ResourceDetailsUpdate = (props: resourceProps) => { - const { goBack } = useAppHistory(); - const [qParams, _] = useQueryParams(); - const [assignedUser, SetAssignedUser] = useState<UserModel>(); - const resourceFormReducer = (state = initialState, action: any) => { - switch (action.type) { - case "set_form": { - return { - ...state, - form: action.form, - }; - } - case "set_error": { - return { - ...state, - errors: action.errors, - }; - } - default: - return state; - } - }; - - const [state, dispatch] = useReducer(resourceFormReducer, initialState); - const { data, isLoading: assignedUserLoading } = useQuery({ - queryKey: ["user", props.facilityId], - queryFn: query(routes.userList), - }); - - useEffect(() => { - if (data) { - SetAssignedUser(data.results[0]); - } - }, [data]); - - const validateForm = () => { - const errors = { ...initError }; - let isInvalidForm = false; - Object.keys(requiredFields).forEach((field) => { - if (!state.form[field] || !state.form[field].length) { - errors[field] = requiredFields[field].errorText; - isInvalidForm = true; - } - }); - - dispatch({ type: "set_error", errors }); - return isInvalidForm; - }; - - const handleChange = (e: FieldChangeEvent<unknown>) => { - dispatch({ - type: "set_form", - form: { ...state.form, [e.name]: e.value }, - }); - }; - - const handleOnSelect = (user: any) => { - const form = { ...state.form }; - form["assigned_to"] = user?.value?.id; - SetAssignedUser(user.value); - dispatch({ type: "set_form", form }); - }; - - const setFacility = (selected: any, name: string) => { - const form = { ...state.form }; - form[name] = selected; - dispatch({ type: "set_form", form }); - }; - const { data: resourceDetails } = useQuery({ - queryKey: ["resource", props.facilityId, props.id], - queryFn: query(routes.getResourceDetails, { - pathParams: { id: props.id }, - }), - }); - useEffect(() => { - if (resourceDetails) { - dispatch({ - type: "set_form", - form: { - ...resourceDetails, - status: qParams.status || resourceDetails.status.toLowerCase(), - }, - }); - } - }, [resourceDetails]); - - const { mutate: updateResource, isPending: updateResourceLoading } = - useMutation({ - mutationFn: mutate(routes.updateResource, { - pathParams: { id: props.id }, - }), - onSuccess: (data) => { - dispatch({ type: "set_form", form: data }); - toast.success(t("request_updated_successfully")); - navigate(`/facility/${props.facilityId}/resource/${props.id}`); - }, - }); - - const handleSubmit = async () => { - const validForm = validateForm(); - - if (validForm) { - const resourceData: UpdateResourceRequest = { - id: props.id, - status: state.form.status, - origin_facility: state.form.origin_facility?.id, - assigned_facility: state.form?.assigned_facility?.id, - emergency: [true, "true"].includes(state.form.emergency), - title: state.form.title, - reason: state.form.reason, - assigned_to: state.form.assigned_to, - category: state.form.category, - priority: state.form.priority, - referring_facility_contact_number: - state.form.referring_facility_contact_number, - referring_facility_contact_name: - state.form.referring_facility_contact_name, - approving_facility: state.form.approving_facility?.id, - related_patient: state.form.related_patient?.id, - }; - updateResource(resourceData); - } - }; - - if (updateResourceLoading || !resourceDetails) { - return <Loading />; - } - - return ( - <Page - title="Update Request" - backUrl={`/facility/${props.facilityId}/resource/${props.id}`} - crumbsReplacements={{ [props.id]: { name: resourceDetails?.title } }} - > - <div className="mt-4"> - <Card className="flex w-full flex-col"> - <div className="grid grid-cols-1 gap-4 md:grid-cols-2"> - <div className="md:col-span-1"> - <SelectFormField - label="Status" - name="status" - value={state.form.status} - options={RESOURCE_STATUS_CHOICES} - optionValue={(option) => option.text} - onChange={handleChange} - optionLabel={(option) => t(`resource_status__${option.text}`)} - /> - </div> - <div className="md:col-span-1"> - <div className=""> - {assignedUserLoading ? ( - <CircularProgress /> - ) : ( - <UserAutocomplete - label="Assigned To" - value={assignedUser === null ? undefined : assignedUser} - onChange={handleOnSelect} - error="" - name="assigned_to" - /> - )} - </div> - </div> - - <div> - <FieldLabel> - What facility would you like to assign the request to - </FieldLabel> - <FacilitySelect - multiple={false} - name="assigned_facility" - selected={state.form.assigned_facility} - setSelected={(obj) => setFacility(obj, "assigned_facility")} - errors={state.errors.assigned_facility} - /> - </div> - - <div className="md:col-span-2"> - <TextFormField - name="title" - type="text" - label="Request Title*" - placeholder="Type your title here" - value={state.form.title} - onChange={handleChange} - error={state.errors.title} - /> - </div> - - <div className="md:col-span-2"> - <Label className="text-gray-700 mb-3 mt-1"> - {t("request_reason")} - </Label> - <Textarea - rows={5} - name="reason" - placeholder={t("request_reason_placeholder")} - value={state.form.reason} - onChange={(e) => - handleChange({ name: e.target.name, value: e.target.value }) - } - /> - {state.errors.reason && ( - <p className="text-red-500 text-sm mt-2"> - {state.errors.emergency} - </p> - )} - </div> - - <div> - <RadioFormField - name="emergency" - onChange={handleChange} - label={"Is this an emergency?"} - options={[true, false]} - optionLabel={(o) => (o ? "Yes" : "No")} - optionValue={(o) => String(o)} - value={String(state.form.emergency)} - error={state.errors.emergency} - /> - </div> - - <div className="mt-4 flex flex-col justify-between gap-2 md:col-span-2 md:flex-row"> - <Button type="button" variant="outline" onClick={() => goBack()}> - {t("cancel")} - </Button> - <Button type="submit" variant="primary" onClick={handleSubmit}> - {t("submit")} - </Button> - </div> - </div> - </Card> - </div> - </Page> - ); -}; diff --git a/src/components/Resource/ResourceForm.tsx b/src/components/Resource/ResourceForm.tsx new file mode 100644 index 00000000000..fb93e88e316 --- /dev/null +++ b/src/components/Resource/ResourceForm.tsx @@ -0,0 +1,571 @@ +import { zodResolver } from "@hookform/resolvers/zod"; +import { useMutation, useQuery } from "@tanstack/react-query"; +import { Link, navigate, useQueryParams } from "raviger"; +import { useEffect, useState } from "react"; +import { useForm } from "react-hook-form"; +import { useTranslation } from "react-i18next"; +import { toast } from "sonner"; +import * as z from "zod"; + +import CareIcon from "@/CAREUI/icons/CareIcon"; + +import { Alert, AlertDescription } from "@/components/ui/alert"; +import Autocomplete from "@/components/ui/autocomplete"; +import { Button } from "@/components/ui/button"; +import { Card, CardContent } from "@/components/ui/card"; +import { + Form, + FormControl, + FormDescription, + FormField, + FormItem, + FormLabel, + FormMessage, +} from "@/components/ui/form"; +import { Input } from "@/components/ui/input"; +import { PhoneInput } from "@/components/ui/phone-input"; +import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; +import { Separator } from "@/components/ui/separator"; +import { Textarea } from "@/components/ui/textarea"; + +import Loading from "@/components/Common/Loading"; +import Page from "@/components/Common/Page"; +import UserSelector from "@/components/Common/UserSelector"; + +import useAppHistory from "@/hooks/useAppHistory"; +import useAuthUser from "@/hooks/useAuthUser"; + +import { RESOURCE_STATUS_CHOICES } from "@/common/constants"; +import { RESOURCE_CATEGORY_CHOICES } from "@/common/constants"; + +import routes from "@/Utils/request/api"; +import mutate from "@/Utils/request/mutate"; +import query from "@/Utils/request/query"; +import { mergeAutocompleteOptions } from "@/Utils/utils"; +import validators from "@/Utils/validators"; +import facilityApi from "@/types/facility/facilityApi"; +import { ResourceRequest } from "@/types/resourceRequest/resourceRequest"; +import { UserBase } from "@/types/user/user"; + +interface ResourceProps { + facilityId: number; + id?: string; +} + +export default function ResourceForm({ facilityId, id }: ResourceProps) { + const [facilitySearch, setFacilitySearch] = useState(""); + const { goBack } = useAppHistory(); + const { t } = useTranslation(); + const [{ related_patient }] = useQueryParams(); + const [assignedToUser, setAssignedToUser] = useState<UserBase>(); + const authUser = useAuthUser(); + + const resourceFormSchema = z.object({ + status: z.string().min(1, { message: t("field_required") }), + category: z.string().min(1, { message: t("field_required") }), + assigned_facility: z + .object({ + id: z.string(), + name: z.string(), + }) + .nullable(), + assigned_to: z.string().min(1, { message: t("field_required") }), + emergency: z.enum(["true", "false"]), + title: z.string().min(1, { message: t("field_required") }), + reason: z.string().min(1, { message: t("field_required") }), + referring_facility_contact_name: z + .string() + .min(1, { message: t("field_required") }), + referring_facility_contact_number: validators().phoneNumber.required, + priority: z.number().default(1), + }); + + type ResourceFormValues = z.infer<typeof resourceFormSchema>; + + const { data: patientData } = useQuery({ + queryKey: ["patient", related_patient], + queryFn: query(routes.patient.getPatient, { + pathParams: { id: String(related_patient) }, + }), + enabled: !!related_patient, + }); + + const { data: resourceData } = useQuery({ + queryKey: ["resource_request", id], + queryFn: query(routes.getResourceDetails, { + pathParams: { id: String(id) }, + }), + enabled: !!id, + }); + + const form = useForm<ResourceFormValues>({ + resolver: zodResolver(resourceFormSchema), + defaultValues: { + status: "pending", + category: "", + assigned_facility: null, + assigned_to: "", + emergency: "false" as const, + title: "", + reason: "", + referring_facility_contact_name: "", + referring_facility_contact_number: "", + priority: 1, + }, + }); + + useEffect(() => { + if (resourceData) { + form.reset({ + status: resourceData.status, + category: resourceData.category, + assigned_facility: resourceData.assigned_facility, + assigned_to: resourceData.assigned_to?.id, + emergency: resourceData.emergency ? "true" : "false", + title: resourceData.title, + reason: resourceData.reason, + referring_facility_contact_name: + resourceData.referring_facility_contact_name, + referring_facility_contact_number: + resourceData.referring_facility_contact_number, + priority: resourceData.priority, + }); + if (resourceData.assigned_to) { + setAssignedToUser(resourceData.assigned_to); + } else { + setAssignedToUser(undefined); + } + } + }, [resourceData, form]); + + const { mutate: createResource, isPending } = useMutation({ + mutationFn: mutate(routes.createResource), + onSuccess: (data: ResourceRequest) => { + toast.success(t("resource_created_successfully")); + navigate(`/facility/${facilityId}/resource/${data.id}`); + }, + }); + + const { mutate: updateResource, isPending: isUpdatePending } = useMutation({ + mutationFn: mutate(routes.updateResource, { + pathParams: { id: String(id) }, + }), + onSuccess: (data: ResourceRequest) => { + toast.success(t("resource_updated_successfully")); + navigate(`/facility/${facilityId}/resource/${data.id}`); + }, + }); + + const onSubmit = (data: ResourceFormValues) => { + const resourcePayload = { + status: data.status, + category: data.category, + origin_facility: String(facilityId), + assigned_facility: data.assigned_facility?.id || null, + assigned_to: assignedToUser?.id || null, + approving_facility: null, + emergency: data.emergency === "true", + title: data.title, + reason: data.reason, + referring_facility_contact_name: data.referring_facility_contact_name, + referring_facility_contact_number: data.referring_facility_contact_number, + related_patient: related_patient, + priority: data.priority, + }; + + if (id) { + updateResource({ ...resourcePayload, id }); + } else { + createResource(resourcePayload); + } + }; + const { data: facilities } = useQuery({ + queryKey: ["facilities", facilitySearch], + queryFn: query.debounced(facilityApi.getAllFacilities, { + queryParams: { + search_text: facilitySearch, + limit: 50, + }, + }), + }); + + const facilityOptions = facilities?.results.map((facility) => ({ + label: facility.name, + value: facility.id, + })); + + const handleUserChange = (user: UserBase) => { + form.setValue("assigned_to", user.id); + setAssignedToUser(user); + }; + + const fillMyDetails = () => { + form.setValue( + "referring_facility_contact_name", + `${authUser.first_name} ${authUser.last_name}`.trim(), + ); + if (authUser.phone_number) { + form.setValue("referring_facility_contact_number", authUser.phone_number); + } + }; + + if (isPending || isUpdatePending) { + return <Loading />; + } + + return ( + <Page + title={id ? t("update_resource_request") : t("create_resource_request")} + > + <div className="container mx-auto max-w-4xl"> + <Card> + <CardContent className="mt-4"> + <Form {...form}> + <form + onSubmit={form.handleSubmit(onSubmit)} + className="space-y-6" + > + {patientData && ( + <Alert> + <div className="flex items-center gap-2"> + <Link + href={`/facility/${facilityId}/patient/${related_patient}/resource_requests`} + className="flex items-center gap-2" + > + <CareIcon + icon="l-user" + className="h-5 w-5 text-blue-700" + /> + <AlertDescription className="text-sm text-blue-700"> + {t("linked_patient")}:{" "} + <span className="font-medium"> + {patientData.name} + </span> + </AlertDescription> + </Link> + </div> + </Alert> + )} + + <div className="space-y-6"> + <div> + <h3 className="text-lg font-medium"> + {t("basic_information")} + </h3> + <p className="text-sm text-gray-500"> + {t("resource_request_basic_info_description")} + </p> + </div> + + <div className="grid grid-cols-1 gap-6 md:grid-cols-2"> + <FormField + control={form.control} + name="assigned_facility" + render={({ field }) => ( + <FormItem> + <FormLabel> + {t("facility_for_care_support")} + </FormLabel> + <FormControl> + <Autocomplete + options={mergeAutocompleteOptions( + facilityOptions ?? [], + field.value + ? { + label: field.value.name, + value: field.value.id, + } + : undefined, + )} + value={field.value?.id ?? ""} + placeholder={t("start_typing_to_search")} + onSearch={setFacilitySearch} + onChange={(value) => { + const facility = + facilities?.results.find( + (f) => f.id === value, + ) ?? null; + form.setValue("assigned_facility", facility); + }} + /> + </FormControl> + <FormDescription> + {t("select_facility_description")} + </FormDescription> + <FormMessage /> + </FormItem> + )} + /> + + <FormField + control={form.control} + name="emergency" + render={({ field }) => ( + <FormItem className="space-y-3"> + <FormLabel>{t("is_this_an_emergency")}</FormLabel> + <FormControl> + <RadioGroup + onValueChange={field.onChange} + value={field.value} + className="flex gap-4" + > + <FormItem className="flex items-center space-x-3 space-y-0"> + <FormControl> + <RadioGroupItem value="true" /> + </FormControl> + <FormLabel className="font-normal"> + {t("yes")} + </FormLabel> + </FormItem> + <FormItem className="flex items-center space-x-3 space-y-0"> + <FormControl> + <RadioGroupItem value="false" /> + </FormControl> + <FormLabel className="font-normal"> + {t("no")} + </FormLabel> + </FormItem> + </RadioGroup> + </FormControl> + <FormDescription> + {t("emergency_description")} + </FormDescription> + <FormMessage /> + </FormItem> + )} + /> + + <FormField + control={form.control} + name="status" + render={({ field }) => ( + <FormItem> + <FormLabel required>{t("status")}</FormLabel> + <Select + onValueChange={field.onChange} + value={field.value} + > + <FormControl> + <SelectTrigger> + <SelectValue placeholder={t("select_status")} /> + </SelectTrigger> + </FormControl> + <SelectContent> + {RESOURCE_STATUS_CHOICES.map((option, index) => ( + <SelectItem key={index} value={option.text}> + {t(`resource_status__${option.text}`)} + </SelectItem> + ))} + </SelectContent> + </Select> + + <FormMessage /> + </FormItem> + )} + /> + <FormField + control={form.control} + name="category" + render={({ field }) => ( + <FormItem> + <FormLabel required>{t("category")}</FormLabel> + <Select + onValueChange={field.onChange} + value={field.value} + > + <FormControl> + <SelectTrigger> + <SelectValue + placeholder={t("category_description")} + /> + </SelectTrigger> + </FormControl> + <SelectContent> + {RESOURCE_CATEGORY_CHOICES.map((category) => ( + <SelectItem + key={category.id} + value={category.id} + > + {category.text} + </SelectItem> + ))} + </SelectContent> + </Select> + <FormMessage /> + </FormItem> + )} + /> + <FormField + control={form.control} + name="assigned_to" + render={() => ( + <FormItem> + <FormLabel required>{t("assigned_to")}</FormLabel> + <FormControl> + <UserSelector + selected={assignedToUser} + onChange={handleUserChange} + placeholder={t("search_users")} + noOptionsMessage={t("no_users_found")} + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + </div> + </div> + <Separator /> + + <div className="space-y-6"> + <div> + <h3 className="text-lg font-medium"> + {t("request_details")} + </h3> + <p className="text-sm text-gray-500"> + {t("resource_request_details_description")} + </p> + </div> + + <FormField + control={form.control} + name="title" + render={({ field }) => ( + <FormItem> + <FormLabel required>{t("request_title")}</FormLabel> + <FormControl> + <Input + {...field} + placeholder={t("request_title_placeholder")} + onChange={(value) => field.onChange(value)} + /> + </FormControl> + <FormDescription> + {t("request_title_description")} + </FormDescription> + <FormMessage /> + </FormItem> + )} + /> + + <FormField + control={form.control} + name="reason" + render={({ field }) => ( + <FormItem> + <FormLabel required>{t("request_reason")}</FormLabel> + <FormControl> + <Textarea + {...field} + placeholder={t("request_reason_placeholder")} + onChange={(value) => field.onChange(value)} + /> + </FormControl> + <FormDescription> + {t("request_reason_description")} + </FormDescription> + <FormMessage /> + </FormItem> + )} + /> + </div> + + <Separator /> + + <div className="space-y-6"> + <div className="flex flex-col lg:flex-row gap-2 lg:items-center justify-between"> + <div> + <h3 className="text-lg font-medium"> + {t("contact_information")} + </h3> + <p className="text-sm text-gray-500"> + {t("contact_information_description")} + </p> + </div> + <Button + type="button" + variant="outline" + onClick={fillMyDetails} + className="shrink-0" + > + <CareIcon icon="l-user" className="mr-2 h-4 w-4" /> + {t("fill_my_details")} + </Button> + </div> + + <div className="grid grid-cols-1 gap-6 md:grid-cols-2"> + <FormField + control={form.control} + name="referring_facility_contact_name" + render={({ field }) => ( + <FormItem> + <FormLabel required>{t("contact_person")}</FormLabel> + <FormControl> + <Input + {...field} + onChange={(value) => field.onChange(value)} + /> + </FormControl> + <FormDescription> + {t("contact_person_description")} + </FormDescription> + <FormMessage /> + </FormItem> + )} + /> + + <FormField + control={form.control} + name="referring_facility_contact_number" + render={({ field }) => ( + <FormItem> + <FormLabel required>{t("contact_phone")}</FormLabel> + <FormControl> + <PhoneInput + {...field} + onChange={(value) => field.onChange(value)} + /> + </FormControl> + <FormDescription> + {t("contact_phone_description")} + </FormDescription> + <FormMessage /> + </FormItem> + )} + /> + </div> + </div> + + <div className="sticky bottom-0 flex justify-end gap-4 border-t bg-background pt-4"> + <Button + type="button" + variant="outline" + onClick={() => goBack()} + > + {t("cancel")} + </Button> + <Button type="submit" variant="default" disabled={isPending}> + {isPending && ( + <CareIcon + icon="l-spinner" + className="mr-2 h-4 w-4 animate-spin" + /> + )} + {isPending ? t("submitting") : t("submit")} + </Button> + </div> + </form> + </Form> + </CardContent> + </Card> + </div> + </Page> + ); +} diff --git a/src/components/Resource/ResourceList.tsx b/src/components/Resource/ResourceList.tsx index 1ba35b0effe..566a19dedde 100644 --- a/src/components/Resource/ResourceList.tsx +++ b/src/components/Resource/ResourceList.tsx @@ -103,7 +103,7 @@ export default function ResourceList({ facilityId }: { facilityId: string }) { const resources = queryResources?.results || []; return ( - <Page title={t("resource")} hideBack={true}> + <Page title={t("resource")}> <div className="space-y-4 mt-2"> <div className="rounded-lg border bg-card shadow-sm"> <div className="flex flex-col"> @@ -154,11 +154,12 @@ export default function ResourceList({ facilityId }: { facilityId: string }) { }) } className="w-full border-none shadow-none" + autoFocus /> </div> </PopoverContent> </Popover> - <div className="hidden md:flex items-center"> + <div className="items-center"> <Tabs value={outgoing ? "outgoing" : "incoming"} className="w-full" @@ -193,7 +194,7 @@ export default function ResourceList({ facilityId }: { facilityId: string }) { </div> </div> - <div className="hidden md:flex items-center"> + <div className="items-center"> <Tabs value={isActive ? "active" : "completed"} className="w-full" @@ -228,11 +229,11 @@ export default function ResourceList({ facilityId }: { facilityId: string }) { </div> </div> - <Separator className="hidden md:block" /> + <Separator /> - <div className="hidden md:block p-4"> + <div className="p-4 h-auto overflow-hidden"> <Tabs value={currentStatus} className="w-full"> - <TabsList className="bg-transparent p-0 h-8"> + <TabsList className="bg-transparent p-0 h-auto flex-wrap justify-start gap-y-2 overflow-auto"> {currentStatuses.map((statusOption) => ( <TabsTrigger key={statusOption} diff --git a/src/components/Users/UserAvailabilityTab.tsx b/src/components/Users/UserAvailabilityTab.tsx index 5ed92fd25e8..07840422d00 100644 --- a/src/components/Users/UserAvailabilityTab.tsx +++ b/src/components/Users/UserAvailabilityTab.tsx @@ -46,7 +46,7 @@ import { ScheduleException, ScheduleTemplate, } from "@/types/scheduling/schedule"; -import scheduleApis from "@/types/scheduling/scheduleApis"; +import scheduleApis from "@/types/scheduling/scheduleApi"; import { UserBase } from "@/types/user/user"; type Props = { diff --git a/src/components/Users/UserAvatar.tsx b/src/components/Users/UserAvatar.tsx index 1d16f4ba8bd..2d81119e30c 100644 --- a/src/components/Users/UserAvatar.tsx +++ b/src/components/Users/UserAvatar.tsx @@ -97,14 +97,14 @@ export default function UserAvatar({ username }: { username: string }) { imageUrl={userData?.profile_picture_url} handleUpload={handleAvatarUpload} handleDelete={handleAvatarDelete} - onClose={() => setEditAvatar(false)} + onOpenChange={(open) => setEditAvatar(open)} /> <div> <div className="my-4 overflow-visible rounded-lg bg-white px-4 py-5 shadow sm:rounded-lg sm:px-6 flex justify-between"> <div className="flex items-center"> <Avatar - imageUrl={userData?.profile_picture_url} name={formatDisplayName(userData)} + imageUrl={userData?.profile_picture_url} className="h-20 w-20" /> <div className="my-4 ml-4 flex flex-col gap-2"> diff --git a/src/components/Users/UserDeleteDialog.tsx b/src/components/Users/UserDeleteDialog.tsx index 5a2becefe3d..a088c9f2512 100644 --- a/src/components/Users/UserDeleteDialog.tsx +++ b/src/components/Users/UserDeleteDialog.tsx @@ -1,26 +1,51 @@ -import ConfirmDialog from "@/components/Common/ConfirmDialog"; +import { useTranslation } from "react-i18next"; + +import { cn } from "@/lib/utils"; + +import { + AlertDialog, + AlertDialogAction, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogTitle, +} from "@/components/ui/alert-dialog"; +import { buttonVariants } from "@/components/ui/button"; interface ConfirmDialogProps { name: string; handleCancel: () => void; handleOk: () => void; + show: boolean; } const UserDeleteDialog = (props: ConfirmDialogProps) => { + const { t } = useTranslation(); return ( - <ConfirmDialog - title="Delete User" - description={ - <span> - Are you sure you want to delete user <strong>{props.name}</strong> ? - </span> - } - action="Delete" - variant="destructive" - show - onConfirm={props.handleOk} - onClose={props.handleCancel} - /> + <AlertDialog open={props.show} onOpenChange={props.handleCancel}> + <AlertDialogContent> + <AlertDialogHeader> + <AlertDialogTitle>{t("delete_user")}</AlertDialogTitle> + <AlertDialogDescription> + {t("are_you_sure_you_want_to_delete_user")} + <strong>{props.name}</strong>? + </AlertDialogDescription> + </AlertDialogHeader> + <AlertDialogFooter> + <AlertDialogCancel onClick={props.handleCancel}> + {t("cancel")} + </AlertDialogCancel> + <AlertDialogAction + onClick={props.handleOk} + className={cn(buttonVariants({ variant: "destructive" }))} + > + {t("delete")} + </AlertDialogAction> + </AlertDialogFooter> + </AlertDialogContent> + </AlertDialog> ); }; diff --git a/src/components/Users/UserForm.tsx b/src/components/Users/UserForm.tsx index ce92df7533b..ee78d887d9f 100644 --- a/src/components/Users/UserForm.tsx +++ b/src/components/Users/UserForm.tsx @@ -90,8 +90,8 @@ export default function UserForm({ first_name: z.string().min(1, t("field_required")), last_name: z.string().min(1, t("field_required")), email: z.string().email(t("invalid_email_address")), - phone_number: validators.phoneNumber.required, - gender: z.enum(GENDERS), + phone_number: validators().phoneNumber.required, + gender: z.enum(GENDERS, { required_error: t("gender_is_required") }), /* TODO: Userbase doesn't currently support these, neither does BE but we will probably need these */ /* qualification: z.string().optional(), @@ -145,7 +145,7 @@ export default function UserForm({ last_name: userData.last_name, email: userData.email, phone_number: userData.phone_number || "", - gender: userData.gender, + gender: userData.gender || undefined, }; form.reset(formData); } @@ -155,7 +155,7 @@ export default function UserForm({ const [isUsernameFieldFocused, setIsUsernameFieldFocused] = useState(false); //const userType = form.watch("user_type"); - const usernameInput = form.watch("username"); + const usernameInput = form.watch("username") || ""; const phoneNumber = form.watch("phone_number"); useEffect(() => { @@ -271,7 +271,7 @@ export default function UserForm({ useEffect(() => { const levels: Organization[] = []; - if (org) levels.push(org); + if (org && org.org_type === "govt") levels.push(org); setSelectedLevels(levels); }, [org, organizationId]); diff --git a/src/components/Users/UserFormValidations.tsx b/src/components/Users/UserFormValidations.tsx index f07e08a9718..f87017fa479 100644 --- a/src/components/Users/UserFormValidations.tsx +++ b/src/components/Users/UserFormValidations.tsx @@ -1,8 +1,8 @@ import { Trans } from "react-i18next"; -import CareIcon from "@/CAREUI/icons/CareIcon"; +import { cn } from "@/lib/utils"; -import { classNames } from "@/Utils/utils"; +import CareIcon from "@/CAREUI/icons/CareIcon"; export type UserType = "doctor" | "nurse" | "staff" | "volunteer"; @@ -72,7 +72,7 @@ export const validateRule = ( <CareIcon icon="l-times-circle" className="text-sm text-red-500" /> )}{" "} <span - className={classNames( + className={cn( isInitialRender ? "text-black text-sm" : isConditionMet diff --git a/src/components/Users/UserHome.tsx b/src/components/Users/UserHome.tsx index c53aa40200a..3a78ed253ec 100644 --- a/src/components/Users/UserHome.tsx +++ b/src/components/Users/UserHome.tsx @@ -38,7 +38,6 @@ export default function UserHome(props: UserHomeProps) { if (!username) { username = authUser.username; } - const loggedInUser = username === authUser.username; const { data: userData, @@ -86,24 +85,11 @@ export default function UserHome(props: UserHomeProps) { ? `/facility/${props.facilityId}/users/${username}` : `/users/${username}`; - const usernameCrumb = { - [username]: { name: loggedInUser ? "Profile" : username }, - }; - - const hideUsersCrumb = { users: { hide: true } }; - - const crumbsReplacements = { - ...usernameCrumb, - ...(!props.facilityId && hideUsersCrumb), - }; - return ( <> <Page title={formatName(userData) || userData.username || t("manage_user")} - crumbsReplacements={crumbsReplacements} focusOnLoad={true} - backUrl={props.facilityId ? `/users` : "/"} hideTitleOnPage > { diff --git a/src/components/Users/UserListAndCard.tsx b/src/components/Users/UserListAndCard.tsx index ee6753c1472..bf8b2b3e96d 100644 --- a/src/components/Users/UserListAndCard.tsx +++ b/src/components/Users/UserListAndCard.tsx @@ -133,9 +133,7 @@ const UserListHeader = () => { return ( <thead> <tr className="bg-gray-50 text-sm font-medium text-gray-500"> - <th className="sticky left-0 z-10 bg-gray-50 px-4 py-3 text-left"> - {t("name")} - </th> + <th className="px-4 py-3 text-left">{t("name")}</th> <th className="w-32 px-10 py-3 text-left">{t("status")}</th> <th className="px-10 py-3 text-left">{t("role")}</th> <th className="px-4 py-3 text-left">{t("contact_number")}</th> @@ -151,7 +149,7 @@ const UserListRow = ({ user }: { user: UserBase }) => { id={`usr_${user.id}`} className="hover:bg-gray-50" > - <td className="sticky left-0 z-10 bg-white px-4 py-4 lg:pr-20"> + <td className="px-4 py-4 lg:pr-20"> <div className="flex items-center gap-3"> <Avatar // TO do: adjust for facility users diff --git a/src/components/Users/UserSummary.tsx b/src/components/Users/UserSummary.tsx index 10c6dca9d42..a28425e6eef 100644 --- a/src/components/Users/UserSummary.tsx +++ b/src/components/Users/UserSummary.tsx @@ -89,6 +89,7 @@ export default function UserSummaryTab({ userData }: { userData?: UserBase }) { <> {showDeleteDialog && ( <UserDeleteDialog + show={showDeleteDialog} name={userData.username} handleOk={handleSubmit} handleCancel={() => { @@ -96,6 +97,7 @@ export default function UserSummaryTab({ userData }: { userData?: UserBase }) { }} /> )} + <EditUserSheet existingUsername={userData.username} open={showEditUserSheet} diff --git a/src/components/ValueSet/ValueSetEditor.tsx b/src/components/ValueSet/ValueSetEditor.tsx new file mode 100644 index 00000000000..a7a941deaff --- /dev/null +++ b/src/components/ValueSet/ValueSetEditor.tsx @@ -0,0 +1,85 @@ +import { useMutation, useQuery } from "@tanstack/react-query"; +import { useNavigate } from "raviger"; +import { toast } from "sonner"; + +import { FormSkeleton } from "@/components/Common/SkeletonLoading"; + +import mutate from "@/Utils/request/mutate"; +import query from "@/Utils/request/query"; +import { + CreateValuesetModel, + UpdateValuesetModel, + ValuesetBase, + ValuesetFormType, +} from "@/types/valueset/valueset"; +import valuesetApi from "@/types/valueset/valuesetApi"; + +import { ValueSetForm } from "./ValueSetForm"; + +interface ValueSetEditorProps { + slug?: string; // If provided, we're editing an existing valueset +} + +export function ValueSetEditor({ slug }: ValueSetEditorProps) { + const navigate = useNavigate(); + + // Fetch existing valueset if we're editing + const { data: existingValueset, isLoading } = useQuery({ + queryKey: ["valueset", slug], + queryFn: query(valuesetApi.get, { + pathParams: { slug: slug! }, + }), + enabled: !!slug, + }); + + // Create mutation + const createMutation = useMutation({ + mutationFn: mutate(valuesetApi.create), + onSuccess: (data: ValuesetBase) => { + toast.success("ValueSet created successfully"); + navigate(`/valuesets/${data.slug}`); + }, + }); + + // Update mutation + const updateMutation = useMutation({ + mutationFn: mutate(valuesetApi.update, { + pathParams: { slug: slug! }, + }), + onSuccess: () => { + toast.success("ValueSet updated successfully"); + navigate(`/admin/valuesets`); + }, + }); + + const handleSubmit = (data: ValuesetFormType) => { + if (slug && existingValueset) { + const updateData: UpdateValuesetModel = { + ...data, + id: existingValueset.id, + }; + updateMutation.mutate(updateData); + } else { + const createData: CreateValuesetModel = data; + createMutation.mutate(createData); + } + }; + + return ( + <div className="max-w-2xl mx-auto p-6"> + <h1 className="text-2xl font-bold mb-6"> + {slug ? "Edit ValueSet" : "Create New ValueSet"} + </h1> + + {slug && isLoading ? ( + <FormSkeleton rows={10} /> + ) : ( + <ValueSetForm + initialData={existingValueset} + onSubmit={handleSubmit} + isSubmitting={createMutation.isPending || updateMutation.isPending} + /> + )} + </div> + ); +} diff --git a/src/components/ValueSet/ValueSetForm.tsx b/src/components/ValueSet/ValueSetForm.tsx new file mode 100644 index 00000000000..b3e76eaaa23 --- /dev/null +++ b/src/components/ValueSet/ValueSetForm.tsx @@ -0,0 +1,492 @@ +import { zodResolver } from "@hookform/resolvers/zod"; +import { PlusIcon, TrashIcon, UpdateIcon } from "@radix-ui/react-icons"; +import { useMutation } from "@tanstack/react-query"; +import { useFieldArray, useForm } from "react-hook-form"; +import { toast } from "sonner"; +import * as z from "zod"; + +import { Button } from "@/components/ui/button"; +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; +import { + Form, + FormControl, + FormField, + FormItem, + FormLabel, + FormMessage, +} from "@/components/ui/form"; +import { Input } from "@/components/ui/input"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; +import { Textarea } from "@/components/ui/textarea"; + +import mutate from "@/Utils/request/mutate"; +import { + TERMINOLOGY_SYSTEMS, + ValuesetFormType, + ValuesetLookupResponse, +} from "@/types/valueset/valueset"; +import valuesetApi from "@/types/valueset/valuesetApi"; + +// Create a schema for form validation +const valuesetFormSchema = z.object({ + name: z.string().min(1, "Name is required"), + slug: z.string().min(1, "Slug is required"), + description: z.string(), + status: z.enum(["active", "inactive"]), + is_system_defined: z.boolean(), + compose: z.object({ + include: z.array( + z.object({ + system: z.string(), + concept: z + .array( + z.object({ + code: z.string(), + display: z.string(), + }), + ) + .optional(), + filter: z + .array( + z.object({ + property: z.string(), + op: z.string(), + value: z.string(), + }), + ) + .optional(), + }), + ), + exclude: z.array( + z.object({ + system: z.string(), + concept: z + .array( + z.object({ + code: z.string(), + display: z.string(), + }), + ) + .optional(), + filter: z + .array( + z.object({ + property: z.string(), + op: z.string(), + value: z.string(), + }), + ) + .optional(), + }), + ), + }), +}); + +interface ValueSetFormProps { + initialData?: ValuesetFormType; + onSubmit: (data: ValuesetFormType) => void; + isSubmitting?: boolean; +} + +function ConceptFields({ + nestIndex, + type, + parentForm, +}: { + nestIndex: number; + type: "include" | "exclude"; + parentForm: ReturnType<typeof useForm<ValuesetFormType>>; +}) { + const { fields, append, remove } = useFieldArray({ + control: parentForm.control, + name: `compose.${type}.${nestIndex}.concept`, + }); + + const lookupMutation = useMutation({ + mutationFn: mutate(valuesetApi.lookup, { + silent: true, // Suppress default error handling since we have custom handling + }), + onSuccess: (response: ValuesetLookupResponse) => { + if (response.metadata) { + const concepts = parentForm.getValues( + `compose.${type}.${nestIndex}.concept`, + ); + + const conceptIndex = concepts?.findIndex( + (concept) => concept.code === response.metadata.code, + ); + + if (conceptIndex && conceptIndex !== -1) { + parentForm.setValue( + `compose.${type}.${nestIndex}.concept.${conceptIndex}.display`, + response.metadata.display, + { shouldValidate: true }, + ); + } + toast.success("Code verified successfully"); + } + }, + onError: () => { + toast.error("Failed to verify code"); + }, + }); + + const handleVerify = async (index: number) => { + const system = parentForm.getValues(`compose.${type}.${nestIndex}.system`); + const code = parentForm.getValues( + `compose.${type}.${nestIndex}.concept.${index}.code`, + ); + + if (!system || !code) { + toast.error("Please select a system and enter a code first"); + return; + } + + lookupMutation.mutate({ system, code }); + }; + + return ( + <div className="space-y-4"> + <div className="flex items-center justify-between"> + <h4 className="text-sm font-medium">Concepts</h4> + <Button + type="button" + variant="outline" + size="sm" + onClick={() => append({ code: "", display: "" })} + > + <PlusIcon className="h-4 w-4 mr-2" /> + Add Concept + </Button> + </div> + {fields.map((field, index) => ( + <div key={field.id} className="flex gap-4 items-start"> + <FormField + control={parentForm.control} + name={`compose.${type}.${nestIndex}.concept.${index}.code`} + render={({ field }) => ( + <FormItem className="flex-1"> + <FormControl> + <Input + {...field} + placeholder="Code" + onChange={(e) => { + field.onChange(e); + // Clear display and set isVerified to false when code changes + parentForm.setValue( + `compose.${type}.${nestIndex}.concept.${index}.display`, + "", + { shouldValidate: true }, + ); + }} + /> + </FormControl> + </FormItem> + )} + /> + <FormField + control={parentForm.control} + name={`compose.${type}.${nestIndex}.concept.${index}.display`} + render={({ field }) => ( + <FormItem className="flex-1"> + <FormControl> + <Input + {...field} + placeholder="Unverified" + className={ + !field.value ? "text-muted-foreground" : undefined + } + readOnly + /> + </FormControl> + </FormItem> + )} + /> + <Button + type="button" + variant="outline" + size="icon" + onClick={() => handleVerify(index)} + disabled={lookupMutation.isPending} + > + <UpdateIcon className="h-4 w-4" /> + </Button> + <Button + type="button" + variant="ghost" + size="icon" + onClick={() => remove(index)} + > + <TrashIcon className="h-4 w-4" /> + </Button> + </div> + ))} + </div> + ); +} + +function FilterFields({ + nestIndex, + type, +}: { + nestIndex: number; + type: "include" | "exclude"; +}) { + const form = useForm(); + const { fields, append, remove } = useFieldArray({ + control: form.control, + name: `compose.${type}.${nestIndex}.filter`, + }); + + return ( + <div className="space-y-4"> + <div className="flex items-center justify-between"> + <h4 className="text-sm font-medium">Filters</h4> + <Button + type="button" + variant="outline" + size="sm" + onClick={() => append({ property: "", op: "", value: "" })} + > + <PlusIcon className="h-4 w-4 mr-2" /> + Add Filter + </Button> + </div> + {fields.map((field, index) => ( + <div key={field.id} className="flex gap-4 items-start"> + <FormField + control={form.control} + name={`compose.${type}.${nestIndex}.filter.${index}.property`} + render={({ field }) => ( + <FormItem className="flex-1"> + <FormControl> + <Input {...field} placeholder="Property" /> + </FormControl> + </FormItem> + )} + /> + <FormField + control={form.control} + name={`compose.${type}.${nestIndex}.filter.${index}.op`} + render={({ field }) => ( + <FormItem className="flex-1"> + <FormControl> + <Input {...field} placeholder="Operator" /> + </FormControl> + </FormItem> + )} + /> + <FormField + control={form.control} + name={`compose.${type}.${nestIndex}.filter.${index}.value`} + render={({ field }) => ( + <FormItem className="flex-1"> + <FormControl> + <Input {...field} placeholder="Value" /> + </FormControl> + </FormItem> + )} + /> + <Button + type="button" + variant="ghost" + size="icon" + onClick={() => remove(index)} + > + <TrashIcon className="h-4 w-4" /> + </Button> + </div> + ))} + </div> + ); +} + +function RuleFields({ + type, + form, +}: { + type: "include" | "exclude"; + form: ReturnType<typeof useForm<ValuesetFormType>>; +}) { + const { fields, append, remove } = useFieldArray({ + control: form.control, + name: `compose.${type}`, + }); + + return ( + <Card> + <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> + <CardTitle className="text-lg font-medium"> + {type === "include" ? "Include Rules" : "Exclude Rules"} + </CardTitle> + <Button + type="button" + variant="outline" + size="sm" + onClick={() => + append({ + system: Object.values(TERMINOLOGY_SYSTEMS)[0], + concept: [], + filter: [], + }) + } + > + <PlusIcon className="h-4 w-4 mr-2" /> + Add Rule + </Button> + </CardHeader> + <CardContent className="space-y-6"> + {fields.map((field, index) => ( + <div key={field.id} className="space-y-4"> + <div className="flex items-center justify-between"> + <FormField + control={form.control} + name={`compose.${type}.${index}.system`} + render={({ field }) => ( + <FormItem className="flex-1"> + <FormLabel>System</FormLabel> + <Select + onValueChange={field.onChange} + defaultValue={field.value} + > + <FormControl> + <SelectTrigger> + <SelectValue placeholder="Select system" /> + </SelectTrigger> + </FormControl> + <SelectContent> + {Object.entries(TERMINOLOGY_SYSTEMS).map( + ([key, value]) => ( + <SelectItem key={key} value={value}> + {key} + </SelectItem> + ), + )} + </SelectContent> + </Select> + </FormItem> + )} + /> + <Button + type="button" + variant="ghost" + size="icon" + onClick={() => remove(index)} + > + <TrashIcon className="h-4 w-4" /> + </Button> + </div> + <ConceptFields nestIndex={index} type={type} parentForm={form} /> + <FilterFields nestIndex={index} type={type} /> + </div> + ))} + </CardContent> + </Card> + ); +} + +export function ValueSetForm({ + initialData, + onSubmit, + isSubmitting, +}: ValueSetFormProps) { + const form = useForm<ValuesetFormType>({ + resolver: zodResolver(valuesetFormSchema), + defaultValues: { + name: initialData?.name || "", + slug: initialData?.slug || "", + description: initialData?.description || "", + status: initialData?.status || "active", + is_system_defined: initialData?.is_system_defined || false, + compose: { + include: initialData?.compose?.include || [], + exclude: initialData?.compose?.exclude || [], + }, + }, + }); + + return ( + <Form {...form}> + <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6"> + <FormField + control={form.control} + name="name" + render={({ field }) => ( + <FormItem> + <FormLabel>Name</FormLabel> + <FormControl> + <Input {...field} /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + + <FormField + control={form.control} + name="slug" + render={({ field }) => ( + <FormItem> + <FormLabel>Slug</FormLabel> + <FormControl> + <Input {...field} /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + + <FormField + control={form.control} + name="description" + render={({ field }) => ( + <FormItem> + <FormLabel>Description</FormLabel> + <FormControl> + <Textarea {...field} /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + + <FormField + control={form.control} + name="status" + render={({ field }) => ( + <FormItem> + <FormLabel>Status</FormLabel> + <Select onValueChange={field.onChange} defaultValue={field.value}> + <FormControl> + <SelectTrigger> + <SelectValue placeholder="Select status" /> + </SelectTrigger> + </FormControl> + <SelectContent> + <SelectItem value="active">Active</SelectItem> + <SelectItem value="inactive">Inactive</SelectItem> + </SelectContent> + </Select> + <FormMessage /> + </FormItem> + )} + /> + + <div className="space-y-6"> + <RuleFields type="include" form={form} /> + <RuleFields type="exclude" form={form} /> + </div> + + <Button type="submit" disabled={isSubmitting}> + {isSubmitting ? "Saving..." : "Save ValueSet"} + </Button> + </form> + </Form> + ); +} diff --git a/src/components/ValueSet/ValueSetList.tsx b/src/components/ValueSet/ValueSetList.tsx new file mode 100644 index 00000000000..f2168758e5a --- /dev/null +++ b/src/components/ValueSet/ValueSetList.tsx @@ -0,0 +1,118 @@ +import { useQuery } from "@tanstack/react-query"; +import { PlusIcon } from "lucide-react"; +import { Link, useNavigate } from "raviger"; +import { useTranslation } from "react-i18next"; + +import { Badge } from "@/components/ui/badge"; +import { Button } from "@/components/ui/button"; + +import Loading from "@/components/Common/Loading"; + +import query from "@/Utils/request/query"; +import valuesetApi from "@/types/valueset/valuesetApi"; + +export function ValueSetList() { + const { t } = useTranslation(); + const navigate = useNavigate(); + const { data: response, isLoading } = useQuery({ + queryKey: ["valuesets"], + queryFn: query(valuesetApi.list), + }); + + if (isLoading) { + return <Loading />; + } + + const valuesets = response?.results || []; + + return ( + <div className="container mx-auto px-4 py-6"> + <div className="mb-6 flex items-center justify-between"> + <div> + <h1 className="text-2xl font-bold">{t("valuesets")}</h1> + <p className="text-gray-600">{t("manage_valuesets")}</p> + </div> + <Button asChild> + <Link href="/admin/valuesets/create"> + <PlusIcon className="mr-2 size-4" /> + {t("create_new")} + </Link> + </Button> + </div> + + <div className="overflow-hidden rounded-lg bg-white shadow"> + <table className="min-w-full divide-y divide-gray-200"> + <thead className="bg-gray-50"> + <tr> + <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"> + {t("name")} + </th> + <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"> + {t("slug")} + </th> + <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"> + {t("status")} + </th> + <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"> + {t("description")} + </th> + <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"> + {t("system")} + </th> + <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"> + {t("actions")} + </th> + </tr> + </thead> + <tbody className="divide-y divide-gray-200 bg-white"> + {valuesets.map((valueset) => ( + <tr key={valueset.id} className="hover:bg-gray-50"> + <td className="whitespace-nowrap px-6 py-4"> + <div className="text-sm font-medium text-gray-900"> + {valueset.name} + </div> + </td> + <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-500"> + {valueset.slug} + </td> + <td className="whitespace-nowrap px-6 py-4"> + <Badge + className={ + valueset.status === "active" + ? "bg-green-100 text-green-800 hover:bg-green-200" + : "bg-red-100 text-red-800 hover:bg-red-200" + } + > + {valueset.status} + </Badge> + </td> + <td className="px-6 py-4"> + <div className="max-w-md truncate text-sm text-gray-900"> + {valueset.description} + </div> + </td> + <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-500"> + {valueset.is_system_defined ? t("yes") : t("no")} + </td> + <td className="whitespace-nowrap px-6 py-4 text-sm"> + {!valueset.is_system_defined && ( + <Button + variant="ghost" + size="sm" + onClick={() => + navigate(`/admin/valuesets/${valueset.slug}/edit`) + } + className="hover:bg-primary/5" + > + {t("edit")} + </Button> + )} + </td> + </tr> + ))} + </tbody> + </table> + </div> + </div> + ); +} diff --git a/src/components/ui/autocomplete.tsx b/src/components/ui/autocomplete.tsx index 8e960e0db6c..e3ecf950e5a 100644 --- a/src/components/ui/autocomplete.tsx +++ b/src/components/ui/autocomplete.tsx @@ -69,13 +69,12 @@ export default function Autocomplete({ {options.map((option) => ( <CommandItem key={option.value} - value={option.label} + value={`${option.label} - ${option.value}`} onSelect={(v) => { const currentValue = - options.find( - (option) => option.label.toLowerCase() === v.toLowerCase(), - )?.value || ""; - onChange(currentValue === value ? "" : currentValue); + options.find((o) => `${o.label} - ${o.value}` === v)?.value || + ""; + onChange(currentValue); setOpen(false); }} > diff --git a/src/components/ui/date-field.tsx b/src/components/ui/date-field.tsx index daeff36be5f..b82ad00c9fc 100644 --- a/src/components/ui/date-field.tsx +++ b/src/components/ui/date-field.tsx @@ -45,20 +45,25 @@ export default function DateField({ const newDay = e.target.value; setDay(newDay); + // Check if change is from spinner (stepUp/stepDown) vs keyboard input + const isFromSpinner = + e.nativeEvent instanceof InputEvent && + (e.nativeEvent as InputEvent).inputType === "insertReplacementText"; + if ( - newDay.length === 2 && + (isFromSpinner || newDay.length === 2) && parseInt(newDay) >= 1 && parseInt(newDay) <= 31 ) { - if (isValidDate(year, month, newDay) && onChange) { + const modifiedDay = isFromSpinner ? newDay.padStart(2, "0") : newDay; + if (isValidDate(year, month, modifiedDay) && onChange) { const updatedDate = new Date( parseInt(year), parseInt(month) - 1, - parseInt(newDay), + parseInt(modifiedDay), ); onChange(updatedDate); } - document.getElementById(`${id}-month-input`)?.focus(); } }; @@ -66,21 +71,27 @@ export default function DateField({ const newMonth = e.target.value; setMonth(newMonth); + // Check if change is from spinner (stepUp/stepDown) vs keyboard input + const isFromSpinner = + e.nativeEvent instanceof InputEvent && + (e.nativeEvent as InputEvent).inputType === "insertReplacementText"; + if ( - newMonth.length === 2 && + (isFromSpinner || newMonth.length === 2) && parseInt(newMonth) >= 1 && parseInt(newMonth) <= 12 ) { - if (isValidDate(year, newMonth, day) && onChange) { + const modifiedMonth = isFromSpinner + ? newMonth.padStart(2, "0") + : newMonth; + if (isValidDate(year, modifiedMonth, day) && onChange) { const updatedDate = new Date( parseInt(year), - parseInt(newMonth) - 1, + parseInt(modifiedMonth) - 1, parseInt(day), ); onChange(updatedDate); } - - document.getElementById(`${id}-year-input`)?.focus(); } }; @@ -100,6 +111,38 @@ export default function DateField({ } }; + // Handle day blur to pad single digit values + const handleDayBlur = () => { + if (day.length === 1 && parseInt(day) >= 1 && parseInt(day) <= 9) { + const paddedDay = day.padStart(2, "0"); + setDay(paddedDay); + if (isValidDate(year, month, paddedDay) && onChange) { + const updatedDate = new Date( + parseInt(year), + parseInt(month) - 1, + parseInt(paddedDay), + ); + onChange(updatedDate); + } + } + }; + + // Handle month blur to pad single digit values + const handleMonthBlur = () => { + if (month.length === 1 && parseInt(month) >= 1) { + const paddedMonth = month.padStart(2, "0"); + setMonth(paddedMonth); + if (isValidDate(year, paddedMonth, day) && onChange) { + const updatedDate = new Date( + parseInt(year), + parseInt(paddedMonth) - 1, + parseInt(day), + ); + onChange(updatedDate); + } + } + }; + return ( <div className="flex items-center gap-2"> <div className="flex-1"> @@ -109,6 +152,7 @@ export default function DateField({ placeholder="DD" value={day} onChange={handleDayChange} + onBlur={handleDayBlur} min={1} max={31} id={`${id}-day-input`} @@ -124,6 +168,7 @@ export default function DateField({ placeholder="MM" value={month} onChange={handleMonthChange} + onBlur={handleMonthBlur} min={1} max={12} id={`${id}-month-input`} @@ -140,6 +185,7 @@ export default function DateField({ value={year} onChange={handleYearChange} min={1900} + max={new Date().getFullYear()} id={`${id}-year-input`} data-cy={`${id}-year-input`} disabled={disabled} diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx index b76d7c5b131..e2514538690 100644 --- a/src/components/ui/input.tsx +++ b/src/components/ui/input.tsx @@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>( <input type={type} className={cn( - "flex w-full rounded-md border border-gray-200 bg-white px-3 py-2 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-gray-950 placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:border-gray-800 dark:file:text-gray-50 dark:placeholder:text-gray-400 dark:focus-visible:ring-gray-300", + "flex w-full rounded-md border border-gray-200 bg-white px-3 py-2 text-base shadow-sm transition-colors file:border-0 file:bg-transparent focus:ring-primary-500 focus:border-primary-500 file:text-sm file:font-medium file:text-gray-950 placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:border-gray-800 dark:file:text-gray-50 dark:placeholder:text-gray-400 dark:focus-visible:ring-gray-300 duration-300", className, )} ref={ref} diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx index a115d28af1e..e4012edd5fc 100644 --- a/src/components/ui/label.tsx +++ b/src/components/ui/label.tsx @@ -5,7 +5,7 @@ import * as React from "react"; import { cn } from "@/lib/utils"; const labelVariants = cva( - "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", + "block text-gray-700 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", ); const Label = React.forwardRef< diff --git a/src/components/ui/markdown.tsx b/src/components/ui/markdown.tsx index 99ec3626db5..828f304ce9c 100644 --- a/src/components/ui/markdown.tsx +++ b/src/components/ui/markdown.tsx @@ -1,3 +1,4 @@ +import DOMPurify from "dompurify"; import MarkdownIt from "markdown-it"; import * as React from "react"; @@ -22,7 +23,10 @@ export interface MarkdownProps extends React.HTMLAttributes<HTMLDivElement> { const Markdown = React.forwardRef<HTMLDivElement, MarkdownProps>( ({ className, content, prose = true, ...props }, ref) => { - const html = React.useMemo(() => md.render(content), [content]); + const html = React.useMemo(() => { + const renderedHtml = md.render(content); + return DOMPurify.sanitize(renderedHtml); + }, [content]); if (prose) { return ( diff --git a/src/components/ui/sidebar/admin-nav.tsx b/src/components/ui/sidebar/admin-nav.tsx new file mode 100644 index 00000000000..e0544ad919b --- /dev/null +++ b/src/components/ui/sidebar/admin-nav.tsx @@ -0,0 +1,33 @@ +import { TFunction } from "i18next"; +import { useTranslation } from "react-i18next"; + +import { NavMain } from "@/components/ui/sidebar/nav-main"; + +interface NavigationLink { + name: string; + url: string; + icon?: string; +} + +function generateAdminLinks(t: TFunction) { + const baseUrl = "/admin"; + const links: NavigationLink[] = [ + { + name: t("questionnaire"), + url: `${baseUrl}/questionnaire`, + icon: "d-book-open", + }, + { + name: "Valuesets", + url: `${baseUrl}/valuesets`, + icon: "l-list-ol-alt", + }, + ]; + + return links; +} + +export function AdminNav() { + const { t } = useTranslation(); + return <NavMain links={generateAdminLinks(t)} />; +} diff --git a/src/components/ui/sidebar/app-sidebar.tsx b/src/components/ui/sidebar/app-sidebar.tsx index b22136ff928..bc2a66153fc 100644 --- a/src/components/ui/sidebar/app-sidebar.tsx +++ b/src/components/ui/sidebar/app-sidebar.tsx @@ -1,6 +1,7 @@ import { DashboardIcon } from "@radix-ui/react-icons"; import { Link, usePathParams } from "raviger"; import * as React from "react"; +import { useTranslation } from "react-i18next"; import { Sidebar, @@ -12,6 +13,7 @@ import { SidebarMenuItem, SidebarRail, } from "@/components/ui/sidebar"; +import { AdminNav } from "@/components/ui/sidebar/admin-nav"; import { FacilityNav } from "@/components/ui/sidebar/facility-nav"; import { FacilitySwitcher } from "@/components/ui/sidebar/facility-switcher"; import { @@ -33,6 +35,7 @@ interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> { export enum SidebarFor { FACILITY = "facility", PATIENT = "patient", + ADMIN = "admin", } export function AppSidebar({ @@ -40,6 +43,7 @@ export function AppSidebar({ sidebarFor = SidebarFor.FACILITY, ...props }: AppSidebarProps) { + const { t } = useTranslation(); const exactMatch = usePathParams("/facility/:facilityId"); const subpathMatch = usePathParams("/facility/:facilityId/*"); const facilityId = exactMatch?.facilityId || subpathMatch?.facilityId; @@ -50,6 +54,7 @@ export function AppSidebar({ const facilitySidebar = sidebarFor === SidebarFor.FACILITY; const patientSidebar = sidebarFor === SidebarFor.PATIENT; + const adminSidebar = sidebarFor === SidebarFor.ADMIN; const [selectedFacility, setSelectedFacility] = React.useState<UserFacilityModel | null>(null); @@ -60,12 +65,13 @@ export function AppSidebar({ }, [user?.organizations, organizationId]); React.useEffect(() => { - if (!user?.facilities || !facilityId || !facilitySidebar) return; - - const facility = user.facilities.find((f) => f.id === facilityId); - if (facility) { - setSelectedFacility(facility); + if (!user?.facilities || !facilityId || !facilitySidebar) { + setSelectedFacility(null); + return; } + + const facility = user.facilities.find((f) => f.id === facilityId) || null; + setSelectedFacility(facility); }, [facilityId, user?.facilities, facilitySidebar]); const hasFacilities = user?.facilities && user.facilities.length > 0; @@ -85,7 +91,7 @@ export function AppSidebar({ selectedOrganization={selectedOrganization} /> )} - {selectedFacility && hasFacilities && ( + {facilityId && selectedFacility && hasFacilities && ( <FacilitySwitcher facilities={user?.facilities || []} selectedFacility={selectedFacility} @@ -105,7 +111,7 @@ export function AppSidebar({ </div> <div className="grid flex-1 text-left text-sm leading-tight text-gray-900"> <span className="truncate font-semibold"> - View Dashboard + {t("view_dashboard")} </span> </div> </Link> @@ -123,6 +129,7 @@ export function AppSidebar({ <OrgNav organizations={user?.organizations || []} /> )} {patientSidebar && <PatientNav />} + {adminSidebar && <AdminNav />} </SidebarContent> <SidebarFooter> diff --git a/src/components/ui/sidebar/patient-switcher.tsx b/src/components/ui/sidebar/patient-switcher.tsx index 6718146ba71..97810946b03 100644 --- a/src/components/ui/sidebar/patient-switcher.tsx +++ b/src/components/ui/sidebar/patient-switcher.tsx @@ -1,5 +1,7 @@ import { useTranslation } from "react-i18next"; +import { cn } from "@/lib/utils"; + import { Select, SelectContent, @@ -13,8 +15,6 @@ import { Avatar } from "@/components/Common/Avatar"; import { usePatientContext } from "@/hooks/usePatientUser"; -import { classNames } from "@/Utils/utils"; - interface PatientSwitcherProps { className?: string; } @@ -30,12 +30,7 @@ export function PatientSwitcher({ className }: PatientSwitcherProps) { } return ( - <div - className={classNames( - "mx-2 mt-4 mb-2 flex flex-wrap flex-row", - className, - )} - > + <div className={cn("mx-2 mt-4 mb-2 flex flex-wrap flex-row", className)}> <Select disabled={patientUserContext.patients?.length === 0} value={ diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx index 536392830da..3bf12b3407f 100644 --- a/src/components/ui/tooltip.tsx +++ b/src/components/ui/tooltip.tsx @@ -30,7 +30,7 @@ TooltipContent.displayName = TooltipPrimitive.Content.displayName; const TooltipComponent = React.forwardRef< React.ElementRef<typeof TooltipContent>, React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> ->(({ children, content, sideOffset = 4, className }, ref) => { +>(({ children, content, sideOffset = 4, className, side }, ref) => { const [open, setOpen] = React.useState(false); return ( <TooltipProvider> @@ -45,6 +45,7 @@ const TooltipComponent = React.forwardRef< "z-50 overflow-hidden rounded-md bg-gray-900 px-3 py-1.5 text-xs text-gray-50 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:bg-gray-50 dark:text-gray-900", className, )} + side={side} > {content} </TooltipContent> diff --git a/src/hooks/useDebounce.ts b/src/hooks/useDebounce.ts deleted file mode 100644 index 66ee398f962..00000000000 --- a/src/hooks/useDebounce.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { useEffect, useRef } from "react"; - -export default function useDebounce<T extends any[]>( - callback: (...args: T) => void, - delay: number, -) { - const callbackRef = useRef(callback); - const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null); - - useEffect(() => { - callbackRef.current = callback; - }, [callback]); - - useEffect(() => { - return () => { - if (timeoutRef.current) clearTimeout(timeoutRef.current); - }; - }, []); - - const debouncedCallback = (...args: T) => { - if (timeoutRef.current) { - clearTimeout(timeoutRef.current); - } - timeoutRef.current = setTimeout(() => { - callbackRef.current(...args); - }, delay); - }; - return debouncedCallback; -} diff --git a/src/hooks/useFileManager.tsx b/src/hooks/useFileManager.tsx index 6a704b02c77..83e999b97d0 100644 --- a/src/hooks/useFileManager.tsx +++ b/src/hooks/useFileManager.tsx @@ -9,13 +9,18 @@ import { cn } from "@/lib/utils"; import CareIcon from "@/CAREUI/icons/CareIcon"; import { Button } from "@/components/ui/button"; +import { + Dialog, + DialogContent, + DialogHeader, + DialogTitle, +} from "@/components/ui/dialog"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Textarea } from "@/components/ui/textarea"; -import DialogModal from "@/components/Common/Dialog"; import FilePreviewDialog from "@/components/Common/FilePreviewDialog"; -import { StateInterface } from "@/components/Files/FileUpload"; +import { StateInterface } from "@/components/Common/FilePreviewDialog"; import { FileUploadModel } from "@/components/Patient/models"; import { @@ -257,67 +262,156 @@ export default function useFileManager( downloadURL={downloadURL} uploadedFiles={uploadedFiles} onClose={handleFilePreviewClose} - fixedWidth={false} className="h-[80vh] w-full md:h-screen" loadFile={viewFile} currentIndex={currentIndex} /> - <DialogModal - show={ + <Dialog + open={ archiveDialogueOpen !== null && archiveDialogueOpen.archived_datetime === null } - title={ - <div className="flex flex-row"> - <div className="my-1 mr-3 rounded-full bg-red-100 px-5 py-4 text-center"> - <CareIcon - icon="l-exclamation-triangle" - className="text-lg text-danger-500" + onOpenChange={() => setArchiveDialogueOpen(null)} + > + <DialogContent> + <DialogHeader> + <DialogTitle> + <div className="flex flex-row"> + <div className="my-1 mr-3 rounded-full bg-red-100 px-5 py-4 text-center"> + <CareIcon + icon="l-exclamation-triangle" + className="text-lg text-danger-500" + /> + </div> + <div className="text-sm"> + <h1 className="text-xl text-black">{t("archive_file")}</h1> + <span className="text-sm text-secondary-600"> + {t("this_action_is_irreversible")} + </span> + </div> + </div> + </DialogTitle> + </DialogHeader> + + <form + onSubmit={(event: any) => { + event.preventDefault(); + handleFileArchive(archiveDialogueOpen); + }} + className="mx-2 my-4 flex w-full flex-col" + > + <div> + <Label className="text-gray-800 mb-2"> + <Trans + i18nKey="state_reason_for_archiving" + values={{ name: archiveDialogueOpen?.name }} + components={{ strong: <strong /> }} + /> + </Label> + <Textarea + name="editFileName" + id="archive-file-reason" + rows={6} + required + placeholder="Type the reason..." + value={archiveReason} + onChange={(e) => setArchiveReason(e.target.value)} + className={cn( + archiveReasonError && + "border-red-500 focus-visible:ring-red-500", + )} /> + {archiveReasonError && ( + <p className="text-sm text-red-500">{archiveReasonError}</p> + )} </div> - <div className="text-sm"> - <h1 className="text-xl text-black">Archive File</h1> - <span className="text-sm text-secondary-600"> - {t("this_action_is_irreversible")} - </span> + <div className="mt-4 flex flex-col-reverse justify-end gap-2 md:flex-row"> + <Button + type="button" + variant="outline" + onClick={() => setArchiveDialogueOpen(null)} + > + {t("cancel")} + </Button> + <Button type="submit" variant="primary" disabled={archiving}> + {t("proceed")} + </Button> </div> - </div> + </form> + </DialogContent> + </Dialog> + <Dialog + open={ + archiveDialogueOpen !== null && + archiveDialogueOpen.archived_datetime !== null } - onClose={() => setArchiveDialogueOpen(null)} + onOpenChange={() => setArchiveDialogueOpen(null)} > - <form - onSubmit={(event: any) => { - event.preventDefault(); - handleFileArchive(archiveDialogueOpen); - }} - className="mx-2 my-4 flex w-full flex-col" - > - <div> - <Label className="text-gray-800 mb-2"> - <Trans - i18nKey="state_reason_for_archiving" - values={{ name: archiveDialogueOpen?.name }} - components={{ strong: <strong /> }} - /> - </Label> - <Textarea - name="editFileName" - id="archive-file-reason" - rows={6} - required - placeholder="Type the reason..." - value={archiveReason} - onChange={(e) => setArchiveReason(e.target.value)} - className={cn( - archiveReasonError && - "border-red-500 focus-visible:ring-red-500", - )} - /> - {archiveReasonError && ( - <p className="text-sm text-red-500">{archiveReasonError}</p> - )} + <DialogContent className="md:w-[700px]"> + <DialogHeader> + <DialogTitle className="text-xl text-black"> + {archiveDialogueOpen?.name} {t("archived")} + </DialogTitle> + </DialogHeader> + <div className="mb-8 text-xs text-secondary-700"> + <CareIcon icon="l-archive" className="mr-2" /> + {t("this_file_has_been_archived")} + </div> + <div className="flex flex-col gap-4 md:grid md:grid-cols-2"> + {[ + { + label: "File Name", + content: archiveDialogueOpen?.name, + icon: "l-file", + }, + { + label: "Uploaded By", + content: archiveDialogueOpen?.uploaded_by?.username, + icon: "l-user", + }, + { + label: "Uploaded On", + content: formatDateTime(archiveDialogueOpen?.created_date), + icon: "l-clock", + }, + { + label: "Archive Reason", + content: archiveDialogueOpen?.archive_reason, + icon: "l-archive", + }, + { + label: "Archived By", + content: archiveDialogueOpen?.archived_by?.username, + icon: "l-user", + }, + { + label: "Archived On", + content: formatDateTime(archiveDialogueOpen?.archived_datetime), + icon: "l-clock", + }, + ].map((item, index) => ( + <div key={index} className="flex gap-2"> + <div className="flex aspect-square h-10 items-center justify-center rounded-full bg-primary-100"> + <CareIcon + icon={item.icon as any} + className="text-lg text-primary-500" + /> + </div> + <div> + <div className="text-xs uppercase text-secondary-700"> + {item.label} + </div> + <div + className="break-words text-base" + data-archive-info={item.label} + > + {item.content} + </div> + </div> + </div> + ))} </div> - <div className="mt-4 flex flex-col-reverse justify-end gap-2 md:flex-row"> + <div className="mt-10 flex justify-end"> <Button type="button" variant="outline" @@ -325,156 +419,75 @@ export default function useFileManager( > {t("cancel")} </Button> - <Button type="submit" variant="primary" disabled={archiving}> - {t("proceed")} - </Button> </div> - </form> - </DialogModal> - <DialogModal - show={ - archiveDialogueOpen !== null && - archiveDialogueOpen.archived_datetime !== null - } - title={ - <h1 className="text-xl text-black"> - {archiveDialogueOpen?.name} (Archived) - </h1> - } - fixedWidth={false} - className="md:w-[700px]" - onClose={() => setArchiveDialogueOpen(null)} + </DialogContent> + </Dialog> + <Dialog + open={editDialogueOpen !== null} + onOpenChange={() => setEditDialogueOpen(null)} > - <div className="mb-8 text-xs text-secondary-700"> - <CareIcon icon="l-archive" className="mr-2" /> - {t("this_file_has_been_archived")} - </div> - <div className="flex flex-col gap-4 md:grid md:grid-cols-2"> - {[ - { - label: "File Name", - content: archiveDialogueOpen?.name, - icon: "l-file", - }, - { - label: "Uploaded By", - content: archiveDialogueOpen?.uploaded_by?.username, - icon: "l-user", - }, - { - label: "Uploaded On", - content: formatDateTime(archiveDialogueOpen?.created_date), - icon: "l-clock", - }, - { - label: "Archive Reason", - content: archiveDialogueOpen?.archive_reason, - icon: "l-archive", - }, - { - label: "Archived By", - content: archiveDialogueOpen?.archived_by?.username, - icon: "l-user", - }, - { - label: "Archived On", - content: formatDateTime(archiveDialogueOpen?.archived_datetime), - icon: "l-clock", - }, - ].map((item, index) => ( - <div key={index} className="flex gap-2"> - <div className="flex aspect-square h-10 items-center justify-center rounded-full bg-primary-100"> - <CareIcon - icon={item.icon as any} - className="text-lg text-primary-500" - /> - </div> - <div> - <div className="text-xs uppercase text-secondary-700"> - {item.label} + <DialogContent> + <DialogHeader> + <DialogTitle> + <div className="flex flex-row"> + <div className="rounded-full bg-primary-100 px-5 py-4"> + <CareIcon + icon="l-edit-alt" + className="text-lg text-primary-500" + /> </div> - <div - className="break-words text-base" - data-archive-info={item.label} - > - {item.content} + <div className="m-4"> + <h1 className="text-xl text-black">{t("rename_file")}</h1> </div> </div> - </div> - ))} - </div> - <div className="mt-10 flex justify-end"> - <Button - type="button" - variant="outline" - onClick={() => setArchiveDialogueOpen(null)} + </DialogTitle> + </DialogHeader> + <form + onSubmit={(event: any) => { + event.preventDefault(); + setEditing(true); + if (editDialogueOpen) partialupdateFileName(editDialogueOpen); + }} + className="flex w-full flex-col" > - {t("cancel")} - </Button> - </div> - </DialogModal> - <DialogModal - show={editDialogueOpen !== null} - title={ - <div className="flex flex-row"> - <div className="rounded-full bg-primary-100 px-5 py-4"> - <CareIcon - icon="l-edit-alt" - className="text-lg text-primary-500" + <div> + <Label>{t("enter_the_file_name")}</Label> + <Input + name="editFileName" + id="edit-file-name" + value={editDialogueOpen?.name} + onChange={(e) => { + setEditDialogueOpen({ + ...editDialogueOpen, + name: e.target.value, + }); + }} /> + {editError && <p className="text-sm text-red-500">{editError}</p>} </div> - <div className="m-4"> - <h1 className="text-xl text-black">{t("rename_file")}</h1> + <div className="mt-4 flex flex-col-reverse justify-end gap-2 md:flex-row"> + <Button + type="button" + variant="outline" + onClick={() => setEditDialogueOpen(null)} + > + {t("cancel")} + </Button> + <Button + type="submit" + variant="primary" + disabled={ + editing === true || + editDialogueOpen?.name === "" || + editDialogueOpen?.name?.length === 0 + } + > + {t("proceed")} + </Button> </div> - </div> - } - onClose={() => setEditDialogueOpen(null)} - > - <form - onSubmit={(event: any) => { - event.preventDefault(); - setEditing(true); - if (editDialogueOpen) partialupdateFileName(editDialogueOpen); - }} - className="flex w-full flex-col" - > - <div> - <Label>{t("enter_the_file_name")}</Label> - <Input - name="editFileName" - id="edit-file-name" - value={editDialogueOpen?.name} - onChange={(e) => { - setEditDialogueOpen({ - ...editDialogueOpen, - name: e.target.value, - }); - }} - /> - {editError && <p className="text-sm text-red-500">{editError}</p>} - </div> - <div className="mt-4 flex flex-col-reverse justify-end gap-2 md:flex-row"> - <Button - type="button" - variant="outline" - onClick={() => setEditDialogueOpen(null)} - > - {t("cancel")} - </Button> - <Button - type="submit" - variant="primary" - disabled={ - editing === true || - editDialogueOpen?.name === "" || - editDialogueOpen?.name?.length === 0 - } - > - {t("proceed")} - </Button> - </div> - </form> - </DialogModal> + </form> + </DialogContent> + </Dialog> </> ); diff --git a/src/hooks/useFileUpload.tsx b/src/hooks/useFileUpload.tsx index d53b9497e08..d1b556fbb22 100644 --- a/src/hooks/useFileUpload.tsx +++ b/src/hooks/useFileUpload.tsx @@ -363,8 +363,8 @@ export default function useFileUpload( const Dialogues = ( <> <CameraCaptureDialog - show={cameraModalOpen} - onHide={() => setCameraModalOpen(false)} + open={cameraModalOpen} + onOpenChange={(open) => setCameraModalOpen(open)} onCapture={(file) => { setFiles((prev) => [...prev, file]); }} diff --git a/src/hooks/useFilters.tsx b/src/hooks/useFilters.tsx index b6e9022a675..a0c10a7a24e 100644 --- a/src/hooks/useFilters.tsx +++ b/src/hooks/useFilters.tsx @@ -2,12 +2,14 @@ import { QueryParam, setQueryParamsOptions, useQueryParams } from "raviger"; import { useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; +import { cn } from "@/lib/utils"; + import GenericFilterBadge from "@/CAREUI/display/FilterBadge"; import PaginationComponent from "@/components/Common/Pagination"; import FiltersCache from "@/Utils/FiltersCache"; -import { classNames, humanizeStrings } from "@/Utils/utils"; +import { humanizeStrings } from "@/Utils/utils"; export type FilterState = Record<string, unknown>; @@ -222,7 +224,7 @@ export default function useFilters({ } return ( <div - className={classNames( + className={cn( "flex w-full justify-center", totalCount > limit ? "visible" : "invisible", !noMargin && "mt-4", diff --git a/src/index.tsx b/src/index.tsx index 9154b832187..4f8ac291d51 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,5 +1,6 @@ import careConfig from "@careConfig"; import * as Sentry from "@sentry/browser"; +import React from "react"; import { createRoot } from "react-dom/client"; import { registerSW } from "virtual:pwa-register"; @@ -31,4 +32,8 @@ if (import.meta.env.PROD) { } const root = createRoot(document.getElementById("root") as HTMLElement); -root.render(<App />); +root.render( + <React.StrictMode> + <App /> + </React.StrictMode>, +); diff --git a/src/pages/Appointments/AppointmentDetail.tsx b/src/pages/Appointments/AppointmentDetail.tsx index c29454bfaf0..624647e5987 100644 --- a/src/pages/Appointments/AppointmentDetail.tsx +++ b/src/pages/Appointments/AppointmentDetail.tsx @@ -54,17 +54,16 @@ import { formatName, getReadableDuration, saveElementAsImage, - stringifyGeoOrganization, + stringifyNestedObject, } from "@/Utils/utils"; import { AppointmentTokenCard } from "@/pages/Appointments/components/AppointmentTokenCard"; -import { formatAppointmentSlotTime } from "@/pages/Appointments/utils"; import { FacilityData } from "@/types/facility/facility"; import { Appointment, AppointmentFinalStatuses, AppointmentUpdateRequest, } from "@/types/scheduling/schedule"; -import scheduleApis from "@/types/scheduling/scheduleApis"; +import scheduleApis from "@/types/scheduling/scheduleApi"; import { AppointmentSlotPicker } from "./components/AppointmentSlotPicker"; @@ -135,17 +134,9 @@ export default function AppointmentDetail(props: Props) { } const { patient } = appointment; - const appointmentDate = formatAppointmentSlotTime(appointment); return ( - <Page - title={t("appointment_details")} - crumbsReplacements={{ - [facility.id!]: { name: facility.name }, - [patient.id]: { name: patient.name }, - [appointment.id]: { name: `Appointment on ${appointmentDate}` }, - }} - > + <Page title={t("appointment_details")}> <div className="container mx-auto p-6 max-w-7xl"> <div className={cn( @@ -330,7 +321,7 @@ const AppointmentDetails = ({ {appointment.patient.address || t("no_address_provided")} </p> <p className="text-gray-600"> - {stringifyGeoOrganization(appointment.patient.geo_organization)} + {stringifyNestedObject(appointment.patient.geo_organization)} </p> <p className="text-gray-600"> {t("pincode")}: {appointment.patient.pincode} diff --git a/src/pages/Appointments/AppointmentsPage.tsx b/src/pages/Appointments/AppointmentsPage.tsx index 27102edcc59..dfb7c5e1401 100644 --- a/src/pages/Appointments/AppointmentsPage.tsx +++ b/src/pages/Appointments/AppointmentsPage.tsx @@ -82,7 +82,7 @@ import { AppointmentStatuses, TokenSlot, } from "@/types/scheduling/schedule"; -import scheduleApis from "@/types/scheduling/scheduleApis"; +import scheduleApis from "@/types/scheduling/scheduleApi"; interface QueryParams { practitioner: string | null; @@ -337,8 +337,6 @@ export default function AppointmentsPage(props: { facilityId?: string }) { return ( <Page title={t("appointments")} - hideBack={true} - breadcrumbs={false} options={ <Tabs value={activeTab} @@ -401,53 +399,52 @@ export default function AppointmentsPage(props: { facilityId?: string }) { : t("no_results")} </CommandEmpty> <CommandGroup> - <PopoverClose className="w-full"> + <CommandItem + value="all" + onSelect={() => + setQParams({ + ...qParams, + practitioner: null, + slot: null, + }) + } + className="cursor-pointer w-full" + > + <PopoverClose className="w-full flex items-start"> + <span>{t("show_all")}</span> + {!qParams.practitioner && ( + <CheckIcon className="ml-auto" /> + )} + </PopoverClose> + </CommandItem> + {schedulableUsersQuery.data?.users.map((user) => ( <CommandItem - value="all" + key={user.id} + value={formatName(user)} onSelect={() => setQParams({ ...qParams, - practitioner: null, + practitioner: user.username, slot: null, }) } - className="cursor-pointer" + className="cursor-pointer w-full" > - <span>{t("show_all")}</span> - {!qParams.practitioner && ( + <PopoverClose className="flex items-center gap-2 w-full"> + <Avatar + imageUrl={user.profile_picture_url} + name={formatName(user)} + className="size-6 rounded-full" + /> + <span>{formatName(user)}</span> + <span className="text-xs text-gray-500 font-medium"> + {user.user_type} + </span> + </PopoverClose> + {qParams.practitioner === user.username && ( <CheckIcon className="ml-auto" /> )} </CommandItem> - </PopoverClose> - {schedulableUsersQuery.data?.users.map((user) => ( - <PopoverClose className="w-full" key={user.id}> - <CommandItem - value={formatName(user)} - onSelect={() => - setQParams({ - ...qParams, - practitioner: user.username, - slot: null, - }) - } - className="cursor-pointer" - > - <div className="flex items-center gap-2"> - <Avatar - imageUrl={user.profile_picture_url} - name={formatName(user)} - className="size-6 rounded-full" - /> - <span>{formatName(user)}</span> - <span className="text-xs text-gray-500 font-medium"> - {user.user_type} - </span> - </div> - {qParams.practitioner === user.username && ( - <CheckIcon className="ml-auto" /> - )} - </CommandItem> - </PopoverClose> ))} </CommandGroup> </CommandList> diff --git a/src/pages/Appointments/BookAppointment.tsx b/src/pages/Appointments/BookAppointment.tsx index 5a670f81e16..fb61ed487f4 100644 --- a/src/pages/Appointments/BookAppointment.tsx +++ b/src/pages/Appointments/BookAppointment.tsx @@ -25,7 +25,7 @@ import useAppHistory from "@/hooks/useAppHistory"; import mutate from "@/Utils/request/mutate"; import query from "@/Utils/request/query"; import { formatDisplayName, formatName } from "@/Utils/utils"; -import scheduleApis from "@/types/scheduling/scheduleApis"; +import scheduleApis from "@/types/scheduling/scheduleApi"; import { AppointmentSlotPicker } from "./components/AppointmentSlotPicker"; diff --git a/src/pages/Appointments/components/AppointmentSlotPicker.tsx b/src/pages/Appointments/components/AppointmentSlotPicker.tsx index 1830c9b423f..0220b47678a 100644 --- a/src/pages/Appointments/components/AppointmentSlotPicker.tsx +++ b/src/pages/Appointments/components/AppointmentSlotPicker.tsx @@ -18,7 +18,7 @@ import { useAvailabilityHeatmap, } from "@/pages/Appointments/utils"; import { TokenSlot } from "@/types/scheduling/schedule"; -import scheduleApis from "@/types/scheduling/scheduleApis"; +import scheduleApis from "@/types/scheduling/scheduleApi"; interface AppointmentSlotPickerProps { facilityId: string; diff --git a/src/pages/Appointments/utils.ts b/src/pages/Appointments/utils.ts index 50ab30c5b6f..2144524f130 100644 --- a/src/pages/Appointments/utils.ts +++ b/src/pages/Appointments/utils.ts @@ -15,7 +15,7 @@ import { AvailabilityHeatmapResponse, TokenSlot, } from "@/types/scheduling/schedule"; -import scheduleApis from "@/types/scheduling/scheduleApis"; +import scheduleApis from "@/types/scheduling/scheduleApi"; export const groupSlotsByAvailability = (slots: TokenSlot[]) => { const result: { diff --git a/src/pages/Apps/PlugConfigEdit.tsx b/src/pages/Apps/PlugConfigEdit.tsx index 353a1796b88..f6230b71f15 100644 --- a/src/pages/Apps/PlugConfigEdit.tsx +++ b/src/pages/Apps/PlugConfigEdit.tsx @@ -2,6 +2,8 @@ import { useMutation, useQuery } from "@tanstack/react-query"; import { useNavigate } from "raviger"; import { useEffect, useState } from "react"; +import { cn } from "@/lib/utils"; + import CareIcon from "@/CAREUI/icons/CareIcon"; import { @@ -15,7 +17,7 @@ import { AlertDialogTitle, AlertDialogTrigger, } from "@/components/ui/alert-dialog"; -import { Button } from "@/components/ui/button"; +import { Button, buttonVariants } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Textarea } from "@/components/ui/textarea"; @@ -108,7 +110,7 @@ export function PlugConfigEdit({ slug }: Props) { <AlertDialogCancel>Cancel</AlertDialogCancel> <AlertDialogAction onClick={handleDelete} - className="bg-red-600 hover:bg-red-700" + className={cn(buttonVariants({ variant: "destructive" }))} > Delete </AlertDialogAction> diff --git a/src/pages/Encounters/EncounterList.tsx b/src/pages/Encounters/EncounterList.tsx index f6eaf605c80..9af50a0ebca 100644 --- a/src/pages/Encounters/EncounterList.tsx +++ b/src/pages/Encounters/EncounterList.tsx @@ -213,7 +213,7 @@ export function EncounterList({ const { t } = useTranslation(); return ( - <Page title={t("encounters")} hideBack={true}> + <Page title={t("encounters")}> <div className="space-y-4 mt-2 flex flex-col"> <div className="rounded-lg border bg-card shadow-sm flex flex-col"> <div className="flex flex-col"> @@ -261,6 +261,7 @@ export function EncounterList({ onFieldChange={handleFieldChange} onSearch={handleSearch} className="w-full border-none shadow-none" + autoFocus /> </div> </PopoverContent> diff --git a/src/pages/Encounters/EncounterShow.tsx b/src/pages/Encounters/EncounterShow.tsx index 1f065b6e50c..020bd8f636d 100644 --- a/src/pages/Encounters/EncounterShow.tsx +++ b/src/pages/Encounters/EncounterShow.tsx @@ -26,6 +26,7 @@ export interface EncounterTabProps { facilityId: string; encounter: Encounter; patient: Patient; + subPage?: string; } const defaultTabs = { @@ -44,10 +45,11 @@ interface Props { encounterId: string; facilityId: string; tab?: string; + subPage?: string; } export const EncounterShow = (props: Props) => { - const { facilityId, encounterId } = props; + const { facilityId, encounterId, subPage } = props; const { t } = useTranslation(); const pluginTabs = useCareAppConsultationTabs(); @@ -74,6 +76,7 @@ export const EncounterShow = (props: Props) => { const encounterTabProps: EncounterTabProps = { encounter: encounterData, patient: encounterData.patient, + subPage: subPage, facilityId, }; @@ -97,21 +100,7 @@ export const EncounterShow = (props: Props) => { return ( <div> <nav className="relative flex flex-wrap items-start justify-between"> - <PageTitle - title={t("encounter")} - crumbsReplacements={{ - [encounterId]: { name: encounterData.patient.name }, - consultation: { - name: "Consultation", - uri: `/facility/${facilityId}/patient/${encounterData.patient.id}/consultation/${encounterId}/update`, - }, - [encounterId]: { - name: encounterData.status, - }, - }} - breadcrumbs={true} - backUrl="/patients" - /> + <PageTitle title={t("encounter")} /> <div className="flex w-full flex-col min-[1150px]:w-min min-[1150px]:flex-row min-[1150px]:items-center" id="consultationpage-header" @@ -145,14 +134,6 @@ export const EncounterShow = (props: Props) => { )} </> )} */} - <Link - href={`/facility/${facilityId}/patient/${encounterData.patient.id}`} - className="btn btn-primary m-1 w-full hover:text-white" - id="patient-details" - data-cy="patient-details-button" - > - {t("patient_details")} - </Link> </div> </nav> <div className="mt-4 xl:mt-0 w-full border-b-2 border-secondary-200"> diff --git a/src/pages/Encounters/PrintPrescription.tsx b/src/pages/Encounters/PrintPrescription.tsx index 607a42eee91..6c4b0f4d332 100644 --- a/src/pages/Encounters/PrintPrescription.tsx +++ b/src/pages/Encounters/PrintPrescription.tsx @@ -17,8 +17,9 @@ import medicationRequestApi from "@/types/emr/medicationRequest/medicationReques export const PrintPrescription = (props: { facilityId: string; encounterId: string; + patientId: string; }) => { - const { facilityId, encounterId } = props; + const { facilityId, encounterId, patientId } = props; const { t } = useTranslation(); const { data: encounter } = useQuery<Encounter>({ @@ -30,12 +31,12 @@ export const PrintPrescription = (props: { }); const { data: medications } = useQuery({ - queryKey: ["medication_requests", encounter?.patient?.id], + queryKey: ["medication_requests", patientId], queryFn: query(medicationRequestApi.list, { - pathParams: { patientId: encounter?.patient?.id || "" }, + pathParams: { patientId }, queryParams: { encounter: encounterId, limit: 50, offset: 0 }, }), - enabled: !!encounter?.patient?.id, + enabled: !!patientId, }); if (!medications?.results?.length) { @@ -60,12 +61,8 @@ export const PrintPrescription = (props: { return ( <PrintPreview - title={ - encounter?.patient - ? `${t("prescriptions")} - ${encounter.patient.name}` - : t("print_prescriptions") - } - disabled={!(encounter?.patient && medications)} + title={`${t("prescriptions")} - ${encounter?.patient.name}`} + disabled={!medications} > <div className="min-h-screen bg-white p-2 max-w-4xl mx-auto"> <div> @@ -91,7 +88,7 @@ export const PrintPrescription = (props: { <div className="space-y-3"> <DetailRow label={t("patient")} - value={encounter?.patient?.name} + value={encounter?.patient.name} isStrong /> <DetailRow @@ -115,7 +112,7 @@ export const PrintPrescription = (props: { /> <DetailRow label={t("mobile_number")} - value={encounter?.patient?.phone_number} + value={encounter?.patient.phone_number} isStrong /> </div> @@ -125,7 +122,7 @@ export const PrintPrescription = (props: { <div className="text-2xl font-semibold mb-3">℞</div> {/* Medications Table */} - <MedicationsTable medications={medications.results} /> + <MedicationsTable patientId={patientId} encounterId={encounterId} /> {/* Doctor's Signature */} <div className="mt-6 flex justify-end gap-8"> diff --git a/src/pages/Encounters/tabs/EncounterFilesTab.tsx b/src/pages/Encounters/tabs/EncounterFilesTab.tsx index ff270ac9d60..76add034ca5 100644 --- a/src/pages/Encounters/tabs/EncounterFilesTab.tsx +++ b/src/pages/Encounters/tabs/EncounterFilesTab.tsx @@ -7,7 +7,8 @@ export const EncounterFilesTab = (props: EncounterTabProps) => { <FilesTab type="encounter" facilityId={props.facilityId} - encounterId={props.encounter.id} + encounter={props.encounter} + subPage={props.subPage} /> ); }; diff --git a/src/pages/Encounters/tabs/EncounterNotesTab.tsx b/src/pages/Encounters/tabs/EncounterNotesTab.tsx index 89b535134df..058606392e4 100644 --- a/src/pages/Encounters/tabs/EncounterNotesTab.tsx +++ b/src/pages/Encounters/tabs/EncounterNotesTab.tsx @@ -9,11 +9,13 @@ import { Info, Loader2, MessageCircle, + MessageSquare, MessageSquarePlus, Plus, Send, Users, } from "lucide-react"; +import { Link, usePathParams } from "raviger"; import { useEffect, useRef, useState } from "react"; import { useTranslation } from "react-i18next"; import { useInView } from "react-intersection-observer"; @@ -25,6 +27,7 @@ import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Dialog, + DialogClose, DialogContent, DialogDescription, DialogFooter, @@ -61,6 +64,7 @@ import { Thread } from "@/types/notes/threads"; const MESSAGES_LIMIT = 20; // Thread templates for quick selection + const threadTemplates = [ "Treatment Plan", "Medication Notes", @@ -118,6 +122,7 @@ const ThreadItem = ({ // Message item component const MessageItem = ({ message }: { message: Message }) => { const authUser = useAuthUser(); + const { facilityId } = usePathParams("/facility/:facilityId/*")!; const isCurrentUser = authUser?.external_id === message.created_by.id; return ( @@ -135,15 +140,19 @@ const MessageItem = ({ message }: { message: Message }) => { > <TooltipProvider> <Tooltip> - <TooltipTrigger asChild> - <div className="flex"> - <Avatar - name={message.created_by.username} - imageUrl={message.created_by.profile_picture_url} - className="w-8 h-8 rounded-full object-cover" - /> - </div> - </TooltipTrigger> + <Link + href={`/facility/${facilityId}/users/${message.created_by.username}`} + > + <TooltipTrigger asChild> + <div className="flex pr-2"> + <Avatar + name={message.created_by.username} + imageUrl={message.created_by.profile_picture_url} + className="w-8 h-8 rounded-full object-cover ring-1 ring-transparent hover:ring-red-200 transition" + /> + </div> + </TooltipTrigger> + </Link> <TooltipContent> <p>{message.created_by.username}</p> </TooltipContent> @@ -192,11 +201,13 @@ const NewThreadDialog = ({ onClose, onCreate, isCreating, + threadsUnused, }: { isOpen: boolean; onClose: () => void; onCreate: (title: string) => void; isCreating: boolean; + threadsUnused: string[]; }) => { const { t } = useTranslation(); const [title, setTitle] = useState(""); @@ -218,13 +229,15 @@ const NewThreadDialog = ({ <InfoTooltip content={t("encounter_notes__create_discussion")} /> </DialogTitle> <DialogDescription className="text-sm text-left"> - {t("encounter_notes__choose_template")} + {threadsUnused.length === 0 + ? t("encounter_notes__no_unused_threads") + : t("encounter_notes__choose_template")} </DialogDescription> </DialogHeader> <div className="space-y-4"> <div className="flex flex-wrap gap-2"> - {threadTemplates.map((template) => ( + {threadsUnused.map((template) => ( <Badge key={template} variant="primary" @@ -246,9 +259,10 @@ const NewThreadDialog = ({ </div> <DialogFooter> - <Button variant="outline" onClick={onClose} disabled={isCreating}> - {t("Cancel")} - </Button> + <DialogClose asChild disabled={isCreating}> + <Button variant="outline">{t("cancel")}</Button> + </DialogClose> + <Button onClick={() => onCreate(title)} disabled={!title.trim() || isCreating} @@ -258,7 +272,7 @@ const NewThreadDialog = ({ ) : ( <MessageSquarePlus className="h-4 w-4 mr-2" /> )} - {t("Create")} + {t("create")} </Button> </DialogFooter> </DialogContent> @@ -308,6 +322,7 @@ export const EncounterNotesTab = ({ encounter }: EncounterTabProps) => { const [newMessage, setNewMessage] = useState(""); const messagesEndRef = useRef<HTMLDivElement>(null); const { ref, inView } = useInView(); + const [commentAdded, setCommentAdded] = useState(false); // Fetch threads const { data: threadsData, isLoading: threadsLoading } = useQuery({ @@ -318,17 +333,11 @@ export const EncounterNotesTab = ({ encounter }: EncounterTabProps) => { }), }); - // Auto-select first thread - useEffect(() => { - if (threadsData?.results.length && !selectedThread) { - setSelectedThread(threadsData.results[0].id); - } - }, [threadsData, selectedThread]); - // Fetch messages with infinite scroll const { data: messagesData, isLoading: messagesLoading, + isFetching: isFetchingMessages, hasNextPage, fetchNextPage, isFetchingNextPage, @@ -382,28 +391,63 @@ export const EncounterNotesTab = ({ encounter }: EncounterTabProps) => { onSuccess: () => { queryClient.invalidateQueries({ queryKey: ["messages", selectedThread] }); setNewMessage(""); - setTimeout(() => { - messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); - }, 100); + setCommentAdded(true); }, }); - // Handle infinite scroll + // handle scrolling to last message when new message is added + useEffect(() => { - if (inView && hasNextPage) { - fetchNextPage(); + if (commentAdded && !isFetchingMessages) { + messagesEndRef.current?.scrollIntoView(); + setCommentAdded(false); } - }, [inView, hasNextPage, fetchNextPage]); + }, [commentAdded, isFetchingMessages]); + + const [threads, setThreads] = useState<string[]>([...threadTemplates]); + + // Auto-select first thread - // Scroll to bottom on initial load and thread change useEffect(() => { - if (messagesData && !messagesLoading && !isFetchingNextPage) { + if (threadsData?.results.length) { + if (!selectedThread) setSelectedThread(threadsData.results[0].id); + const threadTitles = threadsData.results.map((thread) => thread.title); + setThreads( + threads.filter((template) => !threadTitles.includes(template)), + ); + } + }, [threadsData, selectedThread]); + + // hack to scroll to bottom on initial load + + useEffect(() => { + messagesEndRef.current?.scrollIntoView(); + }, [messagesLoading]); + + // Handle infinite scroll + + useEffect(() => { + if (inView && hasNextPage) { + fetchNextPage(); messagesEndRef.current?.scrollIntoView(); } - }, [selectedThread, messagesData, messagesLoading, isFetchingNextPage]); + }, [ + inView, + hasNextPage, + fetchNextPage, + messagesData, + isFetchingNextPage, + messagesLoading, + ]); const handleCreateThread = (title: string) => { if (title.trim()) { + if ( + threadsData?.results.some((thread) => thread.title === title.trim()) + ) { + toast.error(t("thread_already_exists")); + return; + } createThreadMutation.mutate({ title: title.trim(), encounter: encounter.id, @@ -423,6 +467,7 @@ export const EncounterNotesTab = ({ encounter }: EncounterTabProps) => { } const messages = messagesData?.pages.flatMap((page) => page.results) ?? []; + const totalMessages = messagesData?.pages[0]?.count ?? 0; return ( <div className="flex h-[calc(100vh-12rem)]"> @@ -529,8 +574,8 @@ export const EncounterNotesTab = ({ encounter }: EncounterTabProps) => { {/* Main Content */} <div className="flex-1 min-w-0"> <div className="flex flex-col h-full pb-[60px] lg:pb-0"> - {/* Mobile Header */} - <div className="lg:hidden p-4 border-b bg-background sticky top-0 z-10"> + {/* Header */} + <div className="p-4 border-b bg-background sticky top-0 z-10"> {selectedThread ? ( <div className="flex items-center gap-3"> <h2 className="text-base font-medium truncate flex-1"> @@ -539,10 +584,27 @@ export const EncounterNotesTab = ({ encounter }: EncounterTabProps) => { ?.title } </h2> - <div className="flex items-center gap-2 text-xs text-gray-500"> - <Users className="h-4 w-4" /> - <span>{messages.length}</span> - </div> + <Tooltip> + <TooltipTrigger asChild> + <div className="flex items-center gap-2 text-xs text-gray-500 cursor-pointer"> + <Users className="h-4 w-4" /> + <span> + {new Set(messages.map((m) => m.created_by.id)).size} + </span> + <MessageSquare className="h-4 w-4 ml-3" /> + <span>{totalMessages}</span> + </div> + </TooltipTrigger> + <TooltipContent> + <p> + {t("participants")}:{" "} + {new Set(messages.map((m) => m.created_by.id)).size} + </p> + <p> + {t("messages")}: {totalMessages} + </p> + </TooltipContent> + </Tooltip> </div> ) : ( <div className="text-center text-sm font-medium text-gray-500"> @@ -550,13 +612,12 @@ export const EncounterNotesTab = ({ encounter }: EncounterTabProps) => { </div> )} </div> - {selectedThread ? ( <> {messagesLoading ? ( <div className="flex-1 p-4"> <div className="space-y-4"> - <CardListSkeleton count={3} /> + <CardListSkeleton count={4} /> </div> </div> ) : ( @@ -580,17 +641,17 @@ export const EncounterNotesTab = ({ encounter }: EncounterTabProps) => { <MessageItem key={message.id} message={message} /> )) )} - {isFetchingNextPage && ( + {isFetchingNextPage ? ( <div className="py-2"> <div className="space-y-4"> <CardListSkeleton count={3} /> </div> </div> + ) : ( + <div ref={ref} /> )} - <div ref={ref} /> </div> </ScrollArea> - {/* Message Input */} <div className="border-t bg-background p-4 sticky bottom-0"> <form onSubmit={handleSendMessage}> @@ -662,6 +723,7 @@ export const EncounterNotesTab = ({ encounter }: EncounterTabProps) => { onClose={() => setShowNewThreadDialog(false)} onCreate={handleCreateThread} isCreating={createThreadMutation.isPending} + threadsUnused={threads} /> </div> ); diff --git a/src/pages/Encounters/tabs/EncounterUpdatesTab.tsx b/src/pages/Encounters/tabs/EncounterUpdatesTab.tsx index 5f6eaa151d9..d55cf9b5346 100644 --- a/src/pages/Encounters/tabs/EncounterUpdatesTab.tsx +++ b/src/pages/Encounters/tabs/EncounterUpdatesTab.tsx @@ -14,7 +14,7 @@ export const EncounterUpdatesTab = ({ return ( <div className="flex flex-col gap-4"> {/* Main Content Area */} - <div className="flex flex-col xl:flex-row gap-4"> + <div className="flex flex-col-reverse xl:flex-row gap-4"> {/* Left Column - Symptoms, Diagnoses, and Questionnaire Responses */} <div className="flex-1 space-y-4" data-cy="encounter-overview"> {/* Allergies Section */} @@ -55,7 +55,7 @@ export const EncounterUpdatesTab = ({ </div> {/* Right Column - Observations */} - <div className="xl:w-1/3 p-1 bg-white rounded-md shadow-md h-full"> + <div className="xl:w-1/4 p-1 bg-white rounded-md shadow-md h-full"> <SideOverview encounter={encounter} /> </div> </div> diff --git a/src/pages/Facility/overview.tsx b/src/pages/Facility/overview.tsx index 346a34c6c48..cf07db69e65 100644 --- a/src/pages/Facility/overview.tsx +++ b/src/pages/Facility/overview.tsx @@ -27,7 +27,7 @@ export function FacilityOverview({ facilityId }: FacilityOverviewProps) { href: `/facility/${facilityId}/users/${user?.username}/availability`, }, { - title: t("Encounters"), + title: t("encounters"), description: t("manage_facility_users"), icon: Users, href: `/facility/${facilityId}/encounters`, diff --git a/src/pages/Facility/settings/layout.tsx b/src/pages/Facility/settings/layout.tsx index 9ba1d35ec39..a2b7c1c58f3 100644 --- a/src/pages/Facility/settings/layout.tsx +++ b/src/pages/Facility/settings/layout.tsx @@ -4,6 +4,8 @@ import { useTranslation } from "react-i18next"; import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"; +import ErrorPage from "@/components/ErrorPages/DefaultErrorPage"; + import { GeneralSettings } from "./general/general"; import LocationList from "./locations/LocationList"; import LocationView from "./locations/LocationView"; @@ -28,7 +30,7 @@ const getRoutes = (facilityId: string) => ({ "/location/:id": ({ id }: { id: string }) => ( <LocationView facilityId={facilityId} id={id} /> ), - "*": () => <div>404</div>, + "*": () => <ErrorPage />, }); export function SettingsLayout({ facilityId }: SettingsLayoutProps) { diff --git a/src/pages/Facility/settings/locations/LocationForm.tsx b/src/pages/Facility/settings/locations/LocationForm.tsx index dc9b3f96bfd..6f82f64228a 100644 --- a/src/pages/Facility/settings/locations/LocationForm.tsx +++ b/src/pages/Facility/settings/locations/LocationForm.tsx @@ -223,7 +223,7 @@ export default function LocationForm({ <SelectValue /> </SelectTrigger> </FormControl> - <SelectContent> + <SelectContent className="max-h-[46vh]"> {locationFormOptions.map((option) => ( <SelectItem key={option.value} value={option.value}> {option.label} diff --git a/src/pages/Facility/settings/locations/LocationView.tsx b/src/pages/Facility/settings/locations/LocationView.tsx index d5527d5fe4f..9bab726b813 100644 --- a/src/pages/Facility/settings/locations/LocationView.tsx +++ b/src/pages/Facility/settings/locations/LocationView.tsx @@ -1,10 +1,18 @@ import { useQuery, useQueryClient } from "@tanstack/react-query"; +import { Link } from "raviger"; import { useState } from "react"; import { useTranslation } from "react-i18next"; import CareIcon from "@/CAREUI/icons/CareIcon"; import { Badge } from "@/components/ui/badge"; +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbSeparator, +} from "@/components/ui/breadcrumb"; import { Button } from "@/components/ui/button"; import { Card, CardContent } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; @@ -44,7 +52,6 @@ export default function LocationView({ id, facilityId }: Props) { pathParams: { facility_id: facilityId, id }, }), }); - const { data: locationOrganizations } = useQuery({ queryKey: ["location", id, "organizations"], queryFn: query(locationApi.getOrganizations, { @@ -92,110 +99,157 @@ export default function LocationView({ id, facilityId }: Props) { <CardGridSkeleton count={6} /> </div> ); + const generateBreadcrumbs = (location: any) => { + const breadcrumbs = []; + let current = location; + while (current) { + breadcrumbs.unshift({ + name: current.name, + id: current.id, + }); + current = current.parent; + } + return breadcrumbs; + }; + const breadcrumbs = location ? generateBreadcrumbs(location) : []; return ( - <Page title={location?.name || t("location")}> - <div className="space-y-6"> - <div className="flex justify-between"> - <div className="flex flex-col justify-between items-start gap-4"> - <div className="flex items-center gap-4"> - <h2 className="text-lg font-semibold">{t("locations")}</h2> - <Badge variant="outline"> - {getLocationFormLabel(location?.form)} - </Badge> - <Badge - variant={ - location?.status === "active" ? "default" : "secondary" - } - > - {location?.status} - </Badge> - {location && "mode" in location && location.mode === "kind" && ( - <Button variant="default" onClick={handleAddLocation}> - <CareIcon icon="l-plus" className="h-4 w-4 mr-2" /> - {t("add_location")} - </Button> + <> + <Breadcrumb className="m-4"> + <BreadcrumbList> + <BreadcrumbItem> + <BreadcrumbLink + asChild + className="text-sm text-gray-900 hover:underline hover:underline-offset-2" + > + <Link href={`/locations`}>{t("home")}</Link> + </BreadcrumbLink> + </BreadcrumbItem> + {breadcrumbs.map((breadcrumb, index) => ( + <BreadcrumbItem key={breadcrumb.id}> + {index === breadcrumbs.length - 1 ? ( + <span className="font-semibold text-gray-900"> + {breadcrumb.name} + </span> + ) : ( + <> + <BreadcrumbLink + asChild + className="text-sm text-gray-900 hover:underline hover:underline-offset-2" + > + <Link href={`${breadcrumb.id}`}>{breadcrumb.name}</Link> + </BreadcrumbLink> + <BreadcrumbSeparator /> + </> )} + </BreadcrumbItem> + ))} + </BreadcrumbList> + </Breadcrumb> + + <Page title={location?.name || t("location")}> + <div className="space-y-6"> + <div className="flex justify-between"> + <div className="flex flex-col justify-between items-start gap-4"> + <div className="flex items-center gap-4"> + <h2 className="text-lg font-semibold">{t("locations")}</h2> + <Badge variant="outline"> + {getLocationFormLabel(location?.form)} + </Badge> + <Badge + variant={ + location?.status === "active" ? "default" : "secondary" + } + > + {location?.status} + </Badge> + {location && "mode" in location && location.mode === "kind" && ( + <Button variant="default" onClick={handleAddLocation}> + <CareIcon icon="l-plus" className="h-4 w-4 mr-2" /> + {t("add_location")} + </Button> + )} + </div> + <div className="w-72"> + <Input + placeholder={t("search_by_name")} + value={searchQuery} + onChange={(e) => { + setSearchQuery(e.target.value); + setPage(1); + }} + className="w-full" + /> + </div> </div> - <div className="w-72"> - <Input - placeholder={t("search_by_name")} - value={searchQuery} - onChange={(e) => { - setSearchQuery(e.target.value); - setPage(1); + {locationOrganizations && ( + <LinkDepartmentsSheet + entityType="location" + entityId={id} + currentOrganizations={locationOrganizations.results} + facilityId={facilityId} + trigger={ + <Button variant="outline"> + <CareIcon icon="l-building" className="h-4 w-4 mr-2" /> + {t("manage_organizations")} + </Button> + } + onUpdate={() => { + queryClient.invalidateQueries({ + queryKey: ["location", facilityId, id], + }); }} - className="w-full" /> - </div> + )} </div> - {locationOrganizations && ( - <LinkDepartmentsSheet - entityType="location" - entityId={id} - currentOrganizations={locationOrganizations.results} - facilityId={facilityId} - trigger={ - <Button variant="outline"> - <CareIcon icon="l-building" className="h-4 w-4 mr-2" /> - {t("manage_organizations")} - </Button> - } - onUpdate={() => { - queryClient.invalidateQueries({ - queryKey: ["location", facilityId, id], - }); - }} - /> - )} - </div> - {isLoading ? ( - <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> - <CardGridSkeleton count={6} /> - </div> - ) : ( - <div className="space-y-6"> + {isLoading ? ( <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> - {children?.results?.length ? ( - children.results.map((childLocation: LocationList) => ( - <LocationCard - key={childLocation.id} - location={childLocation} - onEdit={handleEditLocation} + <CardGridSkeleton count={6} /> + </div> + ) : ( + <div className="space-y-6"> + <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> + {children?.results?.length ? ( + children.results.map((childLocation: LocationList) => ( + <LocationCard + key={childLocation.id} + location={childLocation} + onEdit={handleEditLocation} + /> + )) + ) : ( + <Card className="col-span-full"> + <CardContent className="p-6 text-center text-gray-500"> + {searchQuery + ? t("no_locations_found") + : t("no_child_locations_found")} + </CardContent> + </Card> + )} + </div> + {children && children.count > limit && ( + <div className="flex justify-center"> + <Pagination + data={{ totalCount: children.count }} + onChange={(page, _) => setPage(page)} + defaultPerPage={limit} + cPage={page} /> - )) - ) : ( - <Card className="col-span-full"> - <CardContent className="p-6 text-center text-gray-500"> - {searchQuery - ? t("no_locations_found") - : t("no_child_locations_found")} - </CardContent> - </Card> + </div> )} </div> - {children && children.count > limit && ( - <div className="flex justify-center"> - <Pagination - data={{ totalCount: children.count }} - onChange={(page, _) => setPage(page)} - defaultPerPage={limit} - cPage={page} - /> - </div> - )} - </div> - )} - </div> + )} + </div> - <LocationSheet - open={isSheetOpen} - onOpenChange={handleSheetClose} - facilityId={facilityId} - location={selectedLocation || undefined} - parentId={id} - /> - </Page> + <LocationSheet + open={isSheetOpen} + onOpenChange={handleSheetClose} + facilityId={facilityId} + location={selectedLocation || undefined} + parentId={id} + /> + </Page> + </> ); } diff --git a/src/pages/Facility/settings/organizations/FacilityOrganizationIndex.tsx b/src/pages/Facility/settings/organizations/FacilityOrganizationIndex.tsx index 571d898bd10..da1e2eae284 100644 --- a/src/pages/Facility/settings/organizations/FacilityOrganizationIndex.tsx +++ b/src/pages/Facility/settings/organizations/FacilityOrganizationIndex.tsx @@ -55,12 +55,7 @@ export default function FacilityOrganizationIndex({ if (!data?.results?.length) { return ( - <Page - title={t("organizations")} - breadcrumbs={false} - hideBack={true} - hideTitleOnPage={true} - > + <Page title={t("organizations")} hideTitleOnPage={true}> <div className="flex justify-center md:justify-end mt-2 mb-4"> <CreateFacilityOrganizationSheet facilityId={facilityId} /> </div> @@ -87,12 +82,7 @@ export default function FacilityOrganizationIndex({ } return ( - <Page - title={t("departments")} - hideBack={true} - hideTitleOnPage={true} - breadcrumbs={false} - > + <Page title={t("departments")} hideTitleOnPage={true}> <div className="flex justify-center md:justify-end mt-2 mb-4"> <CreateFacilityOrganizationSheet facilityId={facilityId} /> </div> diff --git a/src/pages/Facility/settings/organizations/FacilityOrganizationUsers.tsx b/src/pages/Facility/settings/organizations/FacilityOrganizationUsers.tsx index 509f451a592..d0bde50e2ce 100644 --- a/src/pages/Facility/settings/organizations/FacilityOrganizationUsers.tsx +++ b/src/pages/Facility/settings/organizations/FacilityOrganizationUsers.tsx @@ -1,19 +1,19 @@ import { useQuery } from "@tanstack/react-query"; -import { useQueryParams } from "raviger"; +import { useState } from "react"; import { useTranslation } from "react-i18next"; 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 { Avatar } from "@/components/Common/Avatar"; -import { - CardGridSkeleton, - CardListSkeleton, -} from "@/components/Common/SkeletonLoading"; +import { CardGridSkeleton } from "@/components/Common/SkeletonLoading"; import { UserStatusIndicator } from "@/components/Users/UserListAndCard"; +import useFilters from "@/hooks/useFilters"; + import routes from "@/Utils/request/api"; import query from "@/Utils/request/query"; import AddUserSheet from "@/pages/Organization/components/AddUserSheet"; @@ -29,19 +29,30 @@ interface Props { } export default function FacilityOrganizationUsers({ id, facilityId }: Props) { - const [qParams, setQueryParams] = useQueryParams<{ + const [sheetState, setSheetState] = useState<{ sheet: string; username: string; - }>(); + }>({ + sheet: "", + username: "", + }); + const { qParams, updateQuery, Pagination, resultsPerPage } = useFilters({ + limit: 12, + }); const { t } = useTranslation(); - const openAddUserSheet = qParams.sheet === "add"; - const openLinkUserSheet = qParams.sheet === "link"; + const openAddUserSheet = sheetState.sheet === "add"; + const openLinkUserSheet = sheetState.sheet === "link"; const { data: users, isLoading: isLoadingUsers } = useQuery({ - queryKey: ["facilityOrganizationUsers", facilityId, id], - queryFn: query(routes.facilityOrganization.listUsers, { + queryKey: ["facilityOrganizationUsers", facilityId, id, qParams], + queryFn: query.debounced(routes.facilityOrganization.listUsers, { pathParams: { facilityId, organizationId: id }, + queryParams: { + search_text: qParams.search || undefined, + limit: resultsPerPage, + offset: ((qParams.page || 1) - 1) * resultsPerPage, + }, }), enabled: !!id, }); @@ -50,32 +61,32 @@ export default function FacilityOrganizationUsers({ id, facilityId }: Props) { return null; } - if (isLoadingUsers) { - return ( - <FacilityOrganizationLayout id={id} facilityId={facilityId}> - <div className="grid gap-4"> - <CardListSkeleton count={1} /> - <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> - <CardGridSkeleton count={6} /> - </div> - </div> - </FacilityOrganizationLayout> - ); - } - return ( <FacilityOrganizationLayout id={id} facilityId={facilityId}> <div className="space-y-6"> - <div className="flex justify-between items-center"> - <h2 className="text-lg font-semibold">{t("users")}</h2> - <div className="flex gap-2"> + <div className="flex flex-col md:flex-row items-center md:items-end gap-4 w-full justify-between"> + <div className="relative w-full md:w-auto"> + <CareIcon + icon="l-search" + className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 h-4 w-4" + /> + <Input + placeholder={t("search_by_user_name")} + value={qParams.search || ""} + onChange={(e) => { + updateQuery({ search: e.target.value || undefined }); + }} + className="w-full pl-8" + /> + </div> + <div className="flex gap-2 w-full md:w-auto justify-end"> <AddUserSheet open={openAddUserSheet} setOpen={(open) => { - setQueryParams({ sheet: open ? "add" : "", username: "" }); + setSheetState({ sheet: open ? "add" : "", username: "" }); }} onUserCreated={(user) => { - setQueryParams({ sheet: "link", username: user.username }); + setSheetState({ sheet: "link", username: user.username }); }} /> <LinkFacilityUserSheet @@ -83,88 +94,98 @@ export default function FacilityOrganizationUsers({ id, facilityId }: Props) { organizationId={id} open={openLinkUserSheet} setOpen={(open) => { - setQueryParams({ sheet: open ? "link" : "", username: "" }); + setSheetState({ sheet: open ? "link" : "", username: "" }); }} - preSelectedUsername={qParams.username} + preSelectedUsername={sheetState.username} /> </div> </div> - <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4"> - {users?.results?.length === 0 ? ( - <Card className="col-span-full"> - <CardContent className="p-6 text-center text-gray-500"> - {t("no_users_found")} - </CardContent> - </Card> - ) : ( - users?.results?.map((userRole: OrganizationUserRole) => ( - <Card key={userRole.id} className="h-full"> - <CardContent className="p-4 sm:p-6"> - <div className="flex flex-col h-full gap-4"> - <div className="flex gap-4"> - <Avatar - name={`${userRole.user.first_name} ${userRole.user.last_name}`} - imageUrl={userRole.user.profile_picture_url} - className="h-12 w-12 sm:h-16 sm:w-16 text-xl sm:text-2xl flex-shrink-0" - /> - - <div className="flex flex-col min-w-0 flex-1"> - <div className="flex flex-col gap-1"> - <h1 className="text-base font-bold break-words pr-2"> - {userRole.user.first_name} {userRole.user.last_name} - </h1> - <span className="text-sm text-gray-500"> - <span className="mr-2 break-words"> + {isLoadingUsers ? ( + <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-2 gap-4"> + <CardGridSkeleton count={6} /> + </div> + ) : ( + <div className="space-y-4"> + <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-2 gap-4"> + {!users?.results?.length ? ( + <Card className="col-span-full"> + <CardContent className="p-6 text-center text-gray-500"> + {t("no_users_found")} + </CardContent> + </Card> + ) : ( + users.results.map((userRole: OrganizationUserRole) => ( + <Card key={userRole.id} className="h-full"> + <CardContent className="p-4 sm:p-6 flex flex-col h-full justify-between"> + <div className="flex items-start gap-3"> + <Avatar + name={`${userRole.user.first_name} ${userRole.user.last_name}`} + imageUrl={userRole.user.profile_picture_url} + className="h-12 w-12 sm:h-14 sm:w-14 text-xl sm:text-2xl flex-shrink-0" + /> + + <div className="flex flex-col min-w-0 flex-1"> + <div className="flex flex-col gap-1"> + <div className="flex items-start justify-between"> + <h1 className="text-base font-bold break-words pr-2"> + {userRole.user.first_name}{" "} + {userRole.user.last_name} + </h1> + <span className="text-sm text-gray-500"> + <UserStatusIndicator user={userRole.user} /> + </span> + </div> + <span className="text-sm text-gray-500 mr-2 break-words"> {userRole.user.username} </span> - <UserStatusIndicator user={userRole.user} /> - </span> + </div> + <div className="mt-4 -ml-12 sm:ml-0 grid grid-cols-2 gap-2 text-sm"> + <div> + <div className="text-gray-500">{t("role")}</div> + <div className="font-medium truncate"> + {userRole.role.name} + </div> + </div> + <div> + <div className="text-gray-500"> + {t("phone_number")} + </div> + <div className="font-medium truncate"> + {userRole.user.phone_number} + </div> + </div> + </div> </div> </div> - </div> - <div className="grid grid-cols-2 gap-4 text-sm"> - <div> - <div className="text-gray-500">{t("role")}</div> - <div className="font-medium truncate"> - {userRole.role.name} - </div> + <div className="mt-2 -mx-2 -mb-2 sm:-mx-4 sm:-mb-4 rounded-md py-4 px-4 bg-gray-50 flex justify-end"> + <EditFacilityUserRoleSheet + facilityId={facilityId} + organizationId={id} + userRole={userRole} + trigger={ + <Button variant="outline" size="sm"> + <span>{t("see_details")}</span> + </Button> + } + /> </div> - <div> - <div className="text-gray-500">{t("phone_number")}</div> - <div className="font-medium truncate"> - {userRole.user.phone_number} - </div> - </div> - </div> - - <div className="mt-auto pt-2"> - <EditFacilityUserRoleSheet - facilityId={facilityId} - organizationId={id} - userRole={userRole} - trigger={ - <Button - variant="secondary" - size="sm" - className="w-full gap-2" - > - <CareIcon - icon="l-arrow-up-right" - className="h-4 w-4" - /> - <span>{t("more_details")}</span> - </Button> - } - /> - </div> - </div> - </CardContent> - </Card> - )) - )} - </div> + </CardContent> + </Card> + )) + )} + </div> + + {(users?.results || []).length > 0 && + users?.count && + users.count > resultsPerPage && ( + <div className="flex justify-center"> + <Pagination totalCount={users.count} /> + </div> + )} + </div> + )} </div> </FacilityOrganizationLayout> ); diff --git a/src/pages/Facility/settings/organizations/FacilityOrganizationView.tsx b/src/pages/Facility/settings/organizations/FacilityOrganizationView.tsx index 1ce58eaa786..5efc8fc4076 100644 --- a/src/pages/Facility/settings/organizations/FacilityOrganizationView.tsx +++ b/src/pages/Facility/settings/organizations/FacilityOrganizationView.tsx @@ -10,11 +10,13 @@ import { Button } from "@/components/ui/button"; import { Card, CardContent } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; -import Pagination from "@/components/Common/Pagination"; import { CardGridSkeleton } from "@/components/Common/SkeletonLoading"; +import useFilters from "@/hooks/useFilters"; + import routes from "@/Utils/request/api"; import query from "@/Utils/request/query"; +import { FacilityOrganization } from "@/types/facilityOrganization/facilityOrganization"; import CreateFacilityOrganizationSheet from "./components/CreateFacilityOrganizationSheet"; import FacilityOrganizationLayout from "./components/FacilityOrganizationLayout"; @@ -24,12 +26,47 @@ interface Props { facilityId: string; } -export default function FacilityOrganizationView({ id, facilityId }: Props) { +function OrganizationCard({ + org, +}: { + org: FacilityOrganization; + facilityId: string; +}) { const { t } = useTranslation(); - const [page, setPage] = useState(1); + return ( + <Card key={org.id}> + <CardContent className="p-4"> + <div className="space-y-4"> + <div className="flex items-center justify-between flex-wrap"> + <div className="space-y-1 mb-2"> + <h3 className="text-lg font-semibold">{org.name}</h3> + <div className="flex items-center gap-2 capitalize"> + <Badge + variant="primary" + className=" border border-transparent text-indigo-800 bg-indigo-100 px-2 py-1" + > + {org.org_type} + </Badge> + </div> + </div> + <Button variant="white" size="sm" className="font-semibold" asChild> + <Link href={`/departments/${org.id}`}>{t("see_details")}</Link> + </Button> + </div> + </div> + </CardContent> + </Card> + ); +} + +export default function FacilityOrganizationView({ id, facilityId }: Props) { + const { t } = useTranslation(); + const { qParams, Pagination, resultsPerPage } = useFilters({ + limit: 12, + cacheBlacklist: ["username"], + }); const [searchQuery, setSearchQuery] = useState(""); - const limit = 12; // 3x4 grid const { data: children, isLoading } = useQuery({ queryKey: [ @@ -37,16 +74,16 @@ export default function FacilityOrganizationView({ id, facilityId }: Props) { "list", facilityId, id, - page, - limit, + qParams.page, + resultsPerPage, searchQuery, ], queryFn: query.debounced(routes.facilityOrganization.list, { pathParams: { facilityId }, queryParams: { parent: id, - offset: (page - 1) * limit, - limit, + offset: ((qParams.page || 1) - 1) * resultsPerPage, + limit: resultsPerPage, name: searchQuery || undefined, }, }), @@ -54,20 +91,24 @@ export default function FacilityOrganizationView({ id, facilityId }: Props) { return ( <FacilityOrganizationLayout id={id} facilityId={facilityId}> - <div className="space-y-6"> + <div className="space-y-6 mx-auto max-w-4xl"> <div className="flex flex-col lg:flex-row justify-between item-start lg:items-center gap-4"> - <h2 className="text-lg font-semibold">{t("departments")}</h2> - <div className="flex flex-col items-center md:flex-row sm:items-center gap-4 w-full lg:justify-end"> - <div className="w-full lg:w-1/3"> - <Input - placeholder="Search by name..." - value={searchQuery} - onChange={(e) => { - setSearchQuery(e.target.value); - setPage(1); // Reset to first page on search - }} - className="w-full" - /> + <div className="flex flex-col items-start md:flex-row sm:items-center gap-4 w-full lg:justify-between"> + <div className="w-full lg:w-1/3 relative"> + <div className="relative"> + <CareIcon + icon="l-search" + className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 h-4 w-4" + /> + <Input + placeholder={t("search_by_department_team_name")} + value={searchQuery} + onChange={(e) => { + setSearchQuery(e.target.value); + }} + className="w-full pl-8" + /> + </div> </div> <div className="w-auto"> <CreateFacilityOrganizationSheet @@ -84,40 +125,14 @@ export default function FacilityOrganizationView({ id, facilityId }: Props) { </div> ) : ( <div className="space-y-6"> - <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> + <div className="space-y-4"> {children?.results?.length ? ( children.results.map((org) => ( - <Card key={org.id}> - <CardContent className="p-6"> - <div className="space-y-4"> - <div className="flex items-center justify-between flex-wrap"> - <div className="space-y-1 mb-2"> - <h3 className="text-lg font-semibold"> - {org.name} - </h3> - <div className="flex items-center gap-2"> - <Badge variant="outline">{org.org_type}</Badge> - <Badge variant="outline">{org.org_type}</Badge> - </div> - </div> - <Button variant="link" asChild> - <Link href={`/departments/${org.id}`}> - {t("view_details")} - <CareIcon - icon="l-arrow-right" - className="h-4 w-4" - /> - </Link> - </Button> - </div> - {org.description && ( - <p className="text-sm text-gray-500 line-clamp-2"> - {org.description} - </p> - )} - </div> - </CardContent> - </Card> + <OrganizationCard + key={org.id} + org={org} + facilityId={facilityId} + /> )) ) : ( <Card className="col-span-full"> @@ -127,14 +142,9 @@ export default function FacilityOrganizationView({ id, facilityId }: Props) { </Card> )} </div> - {children && children.count > limit && ( + {children && children.count > resultsPerPage && ( <div className="flex justify-center"> - <Pagination - data={{ totalCount: children.count }} - onChange={(page, _) => setPage(page)} - defaultPerPage={limit} - cPage={page} - /> + <Pagination totalCount={children.count} /> </div> )} </div> diff --git a/src/pages/Facility/settings/organizations/components/CreateFacilityOrganizationSheet.tsx b/src/pages/Facility/settings/organizations/components/CreateFacilityOrganizationSheet.tsx index aa0a1774d58..feca583e80d 100644 --- a/src/pages/Facility/settings/organizations/components/CreateFacilityOrganizationSheet.tsx +++ b/src/pages/Facility/settings/organizations/components/CreateFacilityOrganizationSheet.tsx @@ -1,4 +1,5 @@ import { useMutation, useQueryClient } from "@tanstack/react-query"; +import { t } from "i18next"; import { useState } from "react"; import { toast } from "sonner"; @@ -62,7 +63,7 @@ export default function CreateFacilityOrganizationSheet({ queryClient.invalidateQueries({ queryKey: ["getCurrentUser"], }); - toast.success("Organization created successfully"); + toast.success(t("organization_created_successfully")); setOpen(false); setName(""); setDescription(""); @@ -72,7 +73,7 @@ export default function CreateFacilityOrganizationSheet({ const handleSubmit = () => { if (!name.trim()) { - toast.error("Please enter an organization name"); + toast.error(t("please_enter_organization_name")); return; } @@ -87,16 +88,16 @@ export default function CreateFacilityOrganizationSheet({ return ( <Sheet open={open} onOpenChange={setOpen}> <SheetTrigger asChild> - <Button variant="primary_gradient"> + <Button> <CareIcon icon="l-plus" className="mr-2 h-4 w-4" /> - Create Department/Team + {t("add_department_team")} </Button> </SheetTrigger> <SheetContent> <SheetHeader> - <SheetTitle>Create Department/Team</SheetTitle> + <SheetTitle>{t("create_department_team")}</SheetTitle> <SheetDescription> - Create a new department/team in this facility. + {t("create_department_team_description")} </SheetDescription> </SheetHeader> <div className="space-y-6 py-4"> @@ -105,18 +106,18 @@ export default function CreateFacilityOrganizationSheet({ <Input value={name} onChange={(e) => setName(e.target.value)} - placeholder="Enter department/team name" + placeholder={t("enter_department_team_name")} /> </div> <div className="space-y-2"> - <label className="text-sm font-medium">Type</label> + <label className="text-sm font-medium">{t(`type`)}</label> <Select value={orgType} onValueChange={(value: OrgType) => setOrgType(value)} > <SelectTrigger> - <SelectValue placeholder="Select organization type" /> + <SelectValue placeholder={t("select_organization_type")} /> </SelectTrigger> <SelectContent> {ORG_TYPES.map((type) => ( @@ -133,7 +134,7 @@ export default function CreateFacilityOrganizationSheet({ <Textarea value={description} onChange={(e) => setDescription(e.target.value)} - placeholder="Enter department/team description (optional)" + placeholder={t("enter_department_team_description")} /> </div> @@ -142,7 +143,7 @@ export default function CreateFacilityOrganizationSheet({ onClick={handleSubmit} disabled={isPending || !name.trim()} > - {isPending ? "Creating..." : "Create Organization"} + {isPending ? t("creating") : t("create_organization")} </Button> </div> </SheetContent> diff --git a/src/pages/Facility/settings/organizations/components/EditFacilityUserRoleSheet.tsx b/src/pages/Facility/settings/organizations/components/EditFacilityUserRoleSheet.tsx index 90ab2e20ca2..6628bfac56b 100644 --- a/src/pages/Facility/settings/organizations/components/EditFacilityUserRoleSheet.tsx +++ b/src/pages/Facility/settings/organizations/components/EditFacilityUserRoleSheet.tsx @@ -3,6 +3,8 @@ import { useState } from "react"; import { useTranslation } from "react-i18next"; import { toast } from "sonner"; +import { cn } from "@/lib/utils"; + import { AlertDialog, AlertDialogAction, @@ -14,7 +16,7 @@ import { AlertDialogTitle, AlertDialogTrigger, } from "@/components/ui/alert-dialog"; -import { Button } from "@/components/ui/button"; +import { Button, buttonVariants } from "@/components/ui/button"; import { Label } from "@/components/ui/label"; import { Select, @@ -218,7 +220,7 @@ export default function EditUserRoleSheet({ <AlertDialogCancel>{t("cancel")}</AlertDialogCancel> <AlertDialogAction onClick={() => removeRole()} - className="bg-destructive text-destructive-foreground hover:bg-destructive/90" + className={cn(buttonVariants({ variant: "destructive" }))} > {t("remove")} </AlertDialogAction> diff --git a/src/pages/Facility/settings/organizations/components/FacilityOrganizationLayout.tsx b/src/pages/Facility/settings/organizations/components/FacilityOrganizationLayout.tsx index c706c2b38d9..de12da5794e 100644 --- a/src/pages/Facility/settings/organizations/components/FacilityOrganizationLayout.tsx +++ b/src/pages/Facility/settings/organizations/components/FacilityOrganizationLayout.tsx @@ -1,8 +1,8 @@ import { useQuery } from "@tanstack/react-query"; import { Link, usePath } from "raviger"; +import { useTranslation } from "react-i18next"; -import CareIcon, { IconName } from "@/CAREUI/icons/CareIcon"; - +import { Badge } from "@/components/ui/badge"; import { Breadcrumb, BreadcrumbItem, @@ -10,8 +10,8 @@ import { BreadcrumbList, BreadcrumbSeparator, } from "@/components/ui/breadcrumb"; -import { Menubar, MenubarMenu, MenubarTrigger } from "@/components/ui/menubar"; import { Skeleton } from "@/components/ui/skeleton"; +import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"; import Page from "@/components/Common/Page"; import { CardGridSkeleton } from "@/components/Common/SkeletonLoading"; @@ -32,7 +32,7 @@ interface Props { interface NavItem { path: string; title: string; - icon: IconName; + value: string; } export default function FacilityOrganizationLayout({ @@ -41,20 +41,24 @@ export default function FacilityOrganizationLayout({ children, }: Props) { const path = usePath() || ""; + const { t } = useTranslation(); const navItems: NavItem[] = [ { path: `/departments/${id}`, - title: "Departments", - icon: "d-hospital", + title: t("departments_or_teams"), + value: "departments", }, { path: `/departments/${id}/users`, - title: "Users", - icon: "d-people", + title: t("users"), + value: "users", }, ]; + const currentTab = + navItems.find((item) => item.path === path)?.value || "departments"; + const { data: org, isLoading } = useQuery<FacilityOrganization>({ queryKey: ["facilityOrganization", id], queryFn: query(routes.facilityOrganization.get, { @@ -74,9 +78,9 @@ export default function FacilityOrganizationLayout({ </div> ); } - // add loading state + if (!org) { - return <div>Not found</div>; + return <div>{t("not_found")}</div>; } const orgParents: FacilityOrganizationParent[] = []; @@ -89,55 +93,76 @@ export default function FacilityOrganizationLayout({ } return ( - <Page title={`${org.name} `} breadcrumbs={false}> - {/* Since we have links to all parent organizations, we can show the breadcrumb here */} - <Breadcrumb className="mt-1"> - <BreadcrumbList> - {/* Org has parent and each parent may have another parent, so we need to show all the parents */} - - {orgParents.reverse().map((parent) => ( - <> - <BreadcrumbItem key={parent.id}> - <BreadcrumbLink href={`/departments/${parent.id}`}> - {parent.name} - </BreadcrumbLink> + <> + {orgParents.length > 0 && ( + <div className="md:px-6 py-2 flex items-center gap-2 mx-auto max-w-4xl"> + <Breadcrumb> + <BreadcrumbList> + {orgParents.reverse().map((parent) => ( + <> + <BreadcrumbItem key={parent.id}> + <BreadcrumbLink + asChild + className="text-sm text-gray-900 hover:underline hover:underline-offset-2" + > + <Link href={path.replace(id, parent.id)}> + {parent.name} + </Link> + </BreadcrumbLink> + </BreadcrumbItem> + <BreadcrumbItem key={`ellipsis-${parent.id}`}> + <BreadcrumbSeparator /> + </BreadcrumbItem> + </> + ))} + <BreadcrumbItem key={org.id}> + <span className="text-sm font-semibold text-gray-900"> + {org.name} + </span> </BreadcrumbItem> - <BreadcrumbItem key={`ellipsis-${parent.id}`}> - <BreadcrumbSeparator /> - </BreadcrumbItem> - </> - ))} - <BreadcrumbItem key={org.id}> - <BreadcrumbLink asChild> - <Link href={`/departments/${org.id}`}>{org.name}</Link> - </BreadcrumbLink> - </BreadcrumbItem> - </BreadcrumbList> - </Breadcrumb> - {/* Navigation */} - <div className="mt-4"> - <Menubar> - {navItems.map((item) => ( - <MenubarMenu key={item.path}> - <MenubarTrigger - className={`${ - path === item.path - ? "font-medium text-primary-700 bg-gray-100" - : "hover:text-primary-500 hover:bg-gray-100 text-gray-700" - }`} - asChild - > - <Link href={item.path} className="cursor-pointer"> - <CareIcon icon={item.icon} className="mr-2 h-4 w-4" /> - {item.title} + </BreadcrumbList> + </Breadcrumb> + </div> + )} + <Page + title={org.name} + componentRight={ + <Badge + variant="outline" + className="border border-transparent ml-2 text-indigo-800 bg-indigo-100 px-2 py-1 w-max" + > + {t(`facility_organization_type__${org.org_type}`)} + </Badge> + } + className="mx-auto max-w-4xl" + > + <div className="mt-2"> + {org.description && ( + <p className="text-sm text-gray-500 line-clamp-2"> + {org.description} + </p> + )} + <Tabs + defaultValue={currentTab} + className="w-full mt-2" + value={currentTab} + > + <TabsList className="w-full justify-start border-b border-gray-300 bg-transparent p-0 h-auto rounded-none"> + {navItems.map((item) => ( + <Link key={item.path} href={item.path}> + <TabsTrigger + value={item.value} + className="border-b-2 border-transparent px-2 py-2 text-gray-600 hover:text-gray-900 data-[state=active]:text-primary-800 data-[state=active]:border-primary-700 data-[state=active]:bg-transparent data-[state=active]:shadow-none rounded-none" + > + {item.title} + </TabsTrigger> </Link> - </MenubarTrigger> - </MenubarMenu> - ))} - </Menubar> - </div> - {/* Page Content */} - <div className="mt-4">{children}</div> - </Page> + ))} + </TabsList> + </Tabs> + </div> + <div className="mt-4">{children}</div> + </Page> + </> ); } diff --git a/src/pages/Organization/OrganizationUsers.tsx b/src/pages/Organization/OrganizationUsers.tsx index 479059fa9a3..e05e6374097 100644 --- a/src/pages/Organization/OrganizationUsers.tsx +++ b/src/pages/Organization/OrganizationUsers.tsx @@ -1,13 +1,15 @@ import { useQuery } from "@tanstack/react-query"; +import { useCallback } from "react"; import { useTranslation } from "react-i18next"; +import { isValidPhoneNumber } from "react-phone-number-input"; 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 { Avatar } from "@/components/Common/Avatar"; +import SearchByMultipleFields from "@/components/Common/SearchByMultipleFields"; import { CardGridSkeleton } from "@/components/Common/SkeletonLoading"; import { UserStatusIndicator } from "@/components/Users/UserListAndCard"; @@ -30,19 +32,62 @@ interface Props { export default function OrganizationUsers({ id, navOrganizationId }: Props) { const { qParams, updateQuery, Pagination, resultsPerPage } = useFilters({ limit: 15, - cacheBlacklist: ["search"], + cacheBlacklist: ["name", "phone_number"], }); const { t } = useTranslation(); + const searchOptions = [ + { + key: "username", + type: "text" as const, + placeholder: "Search by username", + value: qParams.name || "", + }, + { + key: "phone_number", + type: "phone" as const, + placeholder: "Search by phone number", + value: qParams.phone_number || "", + }, + ]; + + const handleSearch = useCallback((key: string, value: string) => { + const searchParams = { + name: key === "username" ? value : "", + phone_number: + key === "phone_number" + ? isValidPhoneNumber(value) + ? value + : undefined + : undefined, + }; + updateQuery(searchParams); + }, []); + + const handleFieldChange = () => { + updateQuery({ + name: undefined, + phone_number: undefined, + }); + }; + const openAddUserSheet = qParams.sheet === "add"; const openLinkUserSheet = qParams.sheet === "link"; const { data: users, isFetching: isFetchingUsers } = useQuery({ - queryKey: ["organizationUsers", id, qParams.search, qParams.page], + queryKey: [ + "organizationUsers", + id, + qParams.name, + qParams.phone_number, + qParams.page, + ], queryFn: query.debounced(organizationApi.listUsers, { pathParams: { id }, queryParams: { - username: qParams.search, + username: qParams.name, + phone_number: qParams.phone_number, + page: qParams.page, limit: resultsPerPage, offset: ((qParams.page ?? 1) - 1) * resultsPerPage, }, @@ -88,16 +133,16 @@ export default function OrganizationUsers({ id, navOrganizationId }: Props) { </div> </div> <div className="flex gap-2"> - <Input - type="text" - placeholder="Search users..." - value={qParams.search || ""} - onChange={(e) => - updateQuery({ - search: e.target.value as string, - }) - } - className="max-w-sm" + <SearchByMultipleFields + id="user-search" + options={searchOptions} + initialOptionIndex={Math.max( + searchOptions.findIndex((option) => option.value !== ""), + 0, + )} + onSearch={handleSearch} + onFieldChange={handleFieldChange} + className="w-full" data-cy="search-user" /> </div> diff --git a/src/pages/Organization/components/AddUserSheet.tsx b/src/pages/Organization/components/AddUserSheet.tsx index 1efba82ca81..b6054eb4a56 100644 --- a/src/pages/Organization/components/AddUserSheet.tsx +++ b/src/pages/Organization/components/AddUserSheet.tsx @@ -33,7 +33,7 @@ export default function AddUserSheet({ return ( <Sheet open={open} onOpenChange={setOpen}> <SheetTrigger asChild> - <Button variant="outline" data-cy="add-user-button" className="ml-3"> + <Button variant="outline" data-cy="add-user-button"> <CareIcon icon="l-plus" className="mr-2 h-4 w-4" /> {t("add_user")} </Button> diff --git a/src/pages/Organization/components/EditUserRoleSheet.tsx b/src/pages/Organization/components/EditUserRoleSheet.tsx index 2903aff574b..ca8c6d796ab 100644 --- a/src/pages/Organization/components/EditUserRoleSheet.tsx +++ b/src/pages/Organization/components/EditUserRoleSheet.tsx @@ -3,6 +3,8 @@ import { useState } from "react"; import { useTranslation } from "react-i18next"; import { toast } from "sonner"; +import { cn } from "@/lib/utils"; + import { AlertDialog, AlertDialogAction, @@ -14,7 +16,7 @@ import { AlertDialogTitle, AlertDialogTrigger, } from "@/components/ui/alert-dialog"; -import { Button } from "@/components/ui/button"; +import { Button, buttonVariants } from "@/components/ui/button"; import { Label } from "@/components/ui/label"; import { Select, @@ -226,7 +228,7 @@ export default function EditUserRoleSheet({ <AlertDialogCancel>{t("cancel")}</AlertDialogCancel> <AlertDialogAction onClick={() => removeRole()} - className="bg-destructive text-destructive-foreground hover:bg-destructive/90" + className={cn(buttonVariants({ variant: "destructive" }))} > {t("remove")} </AlertDialogAction> diff --git a/src/pages/Organization/components/OrganizationLayout.tsx b/src/pages/Organization/components/OrganizationLayout.tsx index e10168c8257..2b3a3da33a4 100644 --- a/src/pages/Organization/components/OrganizationLayout.tsx +++ b/src/pages/Organization/components/OrganizationLayout.tsx @@ -5,13 +5,6 @@ import { useTranslation } from "react-i18next"; import CareIcon, { IconName } from "@/CAREUI/icons/CareIcon"; -import { - Breadcrumb, - BreadcrumbItem, - BreadcrumbLink, - BreadcrumbList, - BreadcrumbSeparator, -} from "@/components/ui/breadcrumb"; import { Menubar, MenubarMenu, MenubarTrigger } from "@/components/ui/menubar"; import Page from "@/components/Common/Page"; @@ -113,31 +106,7 @@ export default function OrganizationLayout({ } return ( - <Page title={`${org.name}`} breadcrumbs={false}> - {/* Since we have links to all parent organizations, we can show the breadcrumb here */} - <Breadcrumb className="mt-1"> - <BreadcrumbList> - {/* Org has parent and each parent may have another parent, so we need to show all the parents */} - - {orgParents.reverse().map((parent) => ( - <> - <BreadcrumbItem key={parent.id}> - <BreadcrumbLink href={`${baseUrl}/${parent.id}`}> - {parent.name} - </BreadcrumbLink> - </BreadcrumbItem> - <BreadcrumbItem key={`ellipsis-${parent.id}`}> - <BreadcrumbSeparator /> - </BreadcrumbItem> - </> - ))} - <BreadcrumbItem key={org.id}> - <BreadcrumbLink asChild> - <Link href={`${baseUrl}/${id}`}>{org.name}</Link> - </BreadcrumbLink> - </BreadcrumbItem> - </BreadcrumbList> - </Breadcrumb> + <Page title={`${org.name}`}> {/* Navigation */} <div className="mt-4"> <Menubar className="w-full h-full overflow-x-auto"> diff --git a/src/pages/Scheduling/ScheduleExceptions.tsx b/src/pages/Scheduling/ScheduleExceptions.tsx index 7480c49a323..96e97fa177e 100644 --- a/src/pages/Scheduling/ScheduleExceptions.tsx +++ b/src/pages/Scheduling/ScheduleExceptions.tsx @@ -15,7 +15,7 @@ import Loading from "@/components/Common/Loading"; import mutate from "@/Utils/request/mutate"; import { formatTimeShort } from "@/Utils/utils"; import { ScheduleException } from "@/types/scheduling/schedule"; -import scheduleApis from "@/types/scheduling/scheduleApis"; +import scheduleApis from "@/types/scheduling/scheduleApi"; interface Props { items?: ScheduleException[]; diff --git a/src/pages/Scheduling/components/CreateScheduleExceptionSheet.tsx b/src/pages/Scheduling/components/CreateScheduleExceptionSheet.tsx index 1d050aea3cd..22883d6f75b 100644 --- a/src/pages/Scheduling/components/CreateScheduleExceptionSheet.tsx +++ b/src/pages/Scheduling/components/CreateScheduleExceptionSheet.tsx @@ -34,7 +34,7 @@ import { import mutate from "@/Utils/request/mutate"; import { Time } from "@/Utils/types"; import { dateQueryString } from "@/Utils/utils"; -import scheduleApis from "@/types/scheduling/scheduleApis"; +import scheduleApis from "@/types/scheduling/scheduleApi"; interface Props { facilityId: string; diff --git a/src/pages/Scheduling/components/CreateScheduleTemplateSheet.tsx b/src/pages/Scheduling/components/CreateScheduleTemplateSheet.tsx index d4081a965fe..daee952132e 100644 --- a/src/pages/Scheduling/components/CreateScheduleTemplateSheet.tsx +++ b/src/pages/Scheduling/components/CreateScheduleTemplateSheet.tsx @@ -44,7 +44,7 @@ import { Time } from "@/Utils/types"; import { dateQueryString } from "@/Utils/utils"; import { getSlotsPerSession, getTokenDuration } from "@/pages/Scheduling/utils"; import { ScheduleAvailabilityCreateRequest } from "@/types/scheduling/schedule"; -import scheduleApis from "@/types/scheduling/scheduleApis"; +import scheduleApis from "@/types/scheduling/scheduleApi"; interface Props { facilityId: string; diff --git a/src/pages/Scheduling/components/EditScheduleTemplateSheet.tsx b/src/pages/Scheduling/components/EditScheduleTemplateSheet.tsx index 5cdd6790bcb..16d62abc1dc 100644 --- a/src/pages/Scheduling/components/EditScheduleTemplateSheet.tsx +++ b/src/pages/Scheduling/components/EditScheduleTemplateSheet.tsx @@ -47,7 +47,7 @@ import { ScheduleAvailabilityCreateRequest, ScheduleTemplate, } from "@/types/scheduling/schedule"; -import scheduleApis from "@/types/scheduling/scheduleApis"; +import scheduleApis from "@/types/scheduling/scheduleApi"; export default function EditScheduleTemplateSheet({ template, diff --git a/src/pages/UserDashboard.tsx b/src/pages/UserDashboard.tsx index ab7e8430033..573d51c0032 100644 --- a/src/pages/UserDashboard.tsx +++ b/src/pages/UserDashboard.tsx @@ -1,4 +1,4 @@ -import { ChevronRight, ClipboardList, LogOut, Settings } from "lucide-react"; +import { ChevronRight, LogOut, Settings, User2Icon } from "lucide-react"; import { Link } from "raviger"; import { Button } from "@/components/ui/button"; @@ -8,6 +8,7 @@ import { Avatar } from "@/components/Common/Avatar"; import useAuthUser, { useAuthContext } from "@/hooks/useAuthUser"; +import { formatDisplayName } from "@/Utils/utils"; import { getOrgLabel } from "@/types/organization/organization"; export default function UserDashboard() { @@ -22,7 +23,7 @@ export default function UserDashboard() { <div className="flex flex-col gap-4 bg-card p-4 md:p-6 rounded-lg border shadow-sm"> <div className="flex flex-col sm:flex-row sm:items-center gap-4"> <Avatar - name={user.first_name} + name={formatDisplayName(user)} imageUrl={user.read_profile_picture_url} className="h-14 w-14 md:h-16 md:w-16" /> @@ -62,9 +63,9 @@ export default function UserDashboard() { className="w-full sm:w-auto" asChild > - <Link href="/questionnaire" className="gap-2 text-inherit"> - <ClipboardList className="h-4 w-4" /> - Questionnaires + <Link href="/admin/questionnaire" className="gap-2 text-inherit"> + <User2Icon className="h-4 w-4" /> + Admin Dashboard </Link> </Button> )} diff --git a/src/pluginTypes.ts b/src/pluginTypes.ts index f25c3aa7eb3..180df1502a2 100644 --- a/src/pluginTypes.ts +++ b/src/pluginTypes.ts @@ -31,6 +31,10 @@ export type PatientInfoCardActionsComponentType = React.FC<{ className?: string; }>; +export type PatientInfoCardMarkAsCompleteComponentType = React.FC<{ + encounter: Encounter; +}>; + export type FacilityHomeActionsComponentType = React.FC<{ facility: FacilityData; className?: string; @@ -53,6 +57,7 @@ export type SupportedPluginComponents = { Scribe: ScribeComponentType; PatientHomeActions: PatientHomeActionsComponentType; PatientInfoCardActions: PatientInfoCardActionsComponentType; + PatientInfoCardMarkAsComplete: PatientInfoCardMarkAsCompleteComponentType; FacilityHomeActions: FacilityHomeActionsComponentType; PatientRegistrationForm: PatientRegistrationFormComponentType; PatientDetailsTabDemographyGeneralInfo: PatientDetailsTabDemographyGeneralInfoComponentType; diff --git a/src/service-worker.ts b/src/service-worker.ts index 078e4237c28..973ff051736 100644 --- a/src/service-worker.ts +++ b/src/service-worker.ts @@ -1,6 +1,4 @@ /// <reference lib="webworker" /> - -/* eslint-disable no-restricted-globals */ // This service worker can be customized! // See https://developers.google.com/web/tools/workbox/modules // for the list of available Workbox modules, or add any other @@ -13,7 +11,6 @@ import { precacheAndRoute } from "workbox-precaching"; declare const self: ServiceWorkerGlobalScope; -// eslint-disable-next-line no-restricted-globals const _ignored = self.__WB_MANIFEST.map((_) => { return _; }); diff --git a/src/style/CAREUI.css b/src/style/CAREUI.css index 893d16c2e4e..0e01efa2853 100644 --- a/src/style/CAREUI.css +++ b/src/style/CAREUI.css @@ -1,34 +1,3 @@ -.cui-input-legend::before { - content: " "; - position: absolute; - left: -4px; - right: -4px; - top: calc(50% - 3px); - height: 6px; - background: #fff; - z-index: -1; -} - -.cui-label-required::after { - content: "*"; - color: rgb(255, 81, 0); - font-size: 1.2em; - font-weight: bold; - margin-left: 4px; -} - -.cui-input-base { - @apply text-sm block w-full py-3 px-4 text-black placeholder:text-secondary-600 bg-white disabled:bg-secondary-200 border border-secondary-400 focus:border-primary-400 ring-0 focus:ring-1 ring-primary-400 outline-none focus:outline-none shadow-none rounded transition-colors duration-300 !important -} - -.cui-dropdown-base { - @apply z-40 w-full rounded-b-md xl:rounded-b-lg shadow-lg overflow-auto max-h-96 bg-secondary-100 divide-y divide-secondary-300 ring-1 ring-secondary-400 focus:outline-none -} - -.cui-card { - @apply bg-white p-5 rounded-lg shadow -} - .tooltip { @apply relative } @@ -83,41 +52,6 @@ transform: translateY(0px); } -.cui-input:-webkit-autofill, -.cui-input:-webkit-autofill:hover, -.cui-input:-webkit-autofill:focus, -.cui-input:-webkit-autofill:active { - box-shadow: 0 0 0 40px #f9fafb inset !important; - -webkit-box-shadow: 0 0 0 40px #f9fafb inset !important; -} - -.cui-slideover-x { - @apply w-full md:w-[300px] h-full -} - -.cui-slideover-y { - @apply h-full md:h-[300px] w-full -} - -.dropdown-item-primary { @apply accent-primary-500 hover:bg-primary-100 text-black hover:text-primary-500 } -.dropdown-item-secondary { @apply accent-secondary-200 hover:bg-secondary-200 text-secondary-700 } -.dropdown-item-danger { @apply accent-danger-500 hover:bg-danger-100 text-danger-500 } -.dropdown-item-warning { @apply accent-warning-500 hover:bg-warning-100 text-warning-500 } -.dropdown-item-alert { @apply accent-alert-600 hover:bg-alert-100 text-alert-600 } - -.cui-form-button-group { - @apply flex flex-col-reverse md:flex-row md:justify-end gap-2 w-full md:w-auto -} - -.cui-range-slider { - @apply outline-none bg-black/10 h-2 w-full appearance-none transition-all -} -.cui-range-slider::-webkit-slider-thumb { - @apply appearance-none w-5 aspect-square bg-black border border-black rounded-full cursor-pointer hover:scale-125 transition-all -} -.cui-range-slider::-moz-range-thumb { - @apply appearance-none w-5 aspect-square bg-black border border-black rounded-full cursor-pointer -} hr { @apply border border-secondary-300 } diff --git a/src/style/index.css b/src/style/index.css index 2f14f673a18..4c7410e732b 100644 --- a/src/style/index.css +++ b/src/style/index.css @@ -10,23 +10,7 @@ @tailwind base; @tailwind components; - -@keyframes indeterminateAnimation { - 0% { - transform: translateX(0) scaleX(0); - } - 40% { - transform: translateX(0) scaleX(0.4); - } - 100% { - transform: translateX(100%) scaleX(0.5); - } -} - -.indeterminate { - animation: indeterminateAnimation 1s infinite linear; - transform-origin: 0% 50%; -} +@tailwind utilities; html { @@ -72,363 +56,12 @@ h6 { font-size: 0.875rem; } -.btn { - @apply inline-flex items-center justify-center whitespace-nowrap text-sm font-semibold py-2 px-4 rounded cursor-pointer; -} - -.btn:focus { - @apply outline-none shadow-inner; -} - -[type="text"]:focus { - @apply border-black ring-white; -} - - -/* Button Styles */ - -.btn-large { - @apply py-2 px-5 text-base h-10; -} - -a { - @apply text-blue-800; -} - -a:hover { - @apply text-blue-600; -} - -.bg-primary { - background-image: linear-gradient( 135deg, rgba(56, 161, 105, 1) 0%, rgba(47, 133, 90, 1) 100%); -} - - -/* Button */ - -button:focus { - outline: none; -} - -.btn { - @apply inline-flex items-center justify-center whitespace-nowrap text-sm font-semibold py-2 px-4 rounded cursor-pointer; -} - -.btn:focus { - @apply outline-none shadow-inner; -} - - -/* Button Styles */ - -.btn-default { - @apply border text-secondary-800; -} - -.btn-default:hover { - @apply bg-secondary-100 text-secondary-600; -} - -.btn-default:focus { - @apply bg-secondary-400 text-secondary-700; -} - -.btn-subtle { - @apply bg-secondary-200 text-secondary-800; -} - -.btn-subtle:hover { - @apply bg-secondary-300 text-secondary-900; -} - -.btn-subtle:focus { - @apply bg-secondary-400 text-secondary-900; -} - -.btn-primary-ghost { - @apply bg-white text-primary-500 border border-primary-500; -} - -.btn-primary-ghost:hover { - @apply bg-primary-100 text-primary-600 border-primary-400; -} - -.btn-primary-ghost:focus { - @apply bg-primary-800 text-white border-primary-400; -} - -.btn-primary { - @apply bg-primary-500 text-white; -} - -.btn-primary:hover { - @apply bg-primary-600; -} - -.btn-primary:focus { - @apply bg-primary-800; - background-image: none; -} - -.btn-warning { - @apply bg-yellow-500 text-white; - background-image: linear-gradient( 135deg, rgba(237, 137, 54, 1) 0%, rgba(221, 107, 32, 1) 100%); -} - -.btn-warning:hover { - @apply bg-yellow-600; - background-image: linear-gradient( 135deg, rgba(221, 107, 32, 1) 0%, rgba(192, 86, 33, 1) 100%); -} - -.btn-warning:focus { - @apply bg-yellow-800; - background-image: none; -} - -.btn-danger { - @apply bg-red-500 text-white; - background-image: linear-gradient( 135deg, rgba(245, 101, 101, 1) 0%, rgba(229, 62, 62, 1) 100%); -} - -.btn-danger:hover { - @apply bg-red-600; - background-image: linear-gradient( 135deg, rgba(229, 62, 62, 1) 0%, rgba(197, 48, 48, 1) 100%); -} - -.btn-danger:focus { - @apply bg-red-800; - background-image: none; -} - - -.primary-button { - @apply focus:outline-none text-white bg-primary-500 hover:bg-primary-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-6 py-2.5 mr-2 mb-2 transition-all ease-in-out duration-200 !important; -} - -.secondary-button { - @apply text-secondary-900 bg-white border border-secondary-300 focus:outline-none hover:bg-secondary-100 focus:ring-4 focus:ring-secondary-200 font-medium rounded-lg text-sm px-6 py-2.5 mr-2 mb-2 transition-all ease-in-out duration-200 !important; -} - -button:disabled, -.disabled { - @apply cursor-not-allowed bg-secondary-300 text-secondary-500 shadow-none border-transparent; - background-image: none; -} - -button:disabled:hover, -.disabled:hover, -button:disabled:focus, -.disabled:focus { - @apply bg-secondary-300 text-secondary-500 border-transparent shadow-none; - background-image: none; -} - -.btn-small { - @apply py-1 px-3 text-xs h-7 leading-normal; -} - -.btn-normal { - @apply py-1 px-4 text-sm h-8; -} - -.btn-large { - @apply py-2 px-5 text-base h-10; -} - -.button-xl { - @apply py-2 px-6 text-base h-12; -} - -@tailwind utilities; -.multiselect-dropdown__search-dropdown { - max-height: 20rem; - overflow: auto; -} - -.max-height-dropdown { - max-height: 20rem; - overflow: auto; -} - - -/* Radio */ - -.radio-label { - @apply select-none cursor-pointer; -} - -.radio-label span { - @apply inline-block align-middle; - transform: translate3d(0, 0, 0); -} - -.radio-label span:first-child { - @apply relative rounded-full align-middle border border-secondary-500 bg-white mr-3; - width: 1.125rem; - height: 1.125rem; - transform: scale(1); - transition: all 0.2s ease; -} - -.radio-label span:first-child svg { - position: absolute; - top: 0; - left: 0; - fill: none; - stroke: #ffffff; - stroke-width: 2; - stroke-linecap: round; - stroke-linejoin: round; - transition: all 0.3s ease; - transition-delay: 0.1s; -} - -.radio-label span:first-child:before { - content: ""; - @apply bg-primary-500 w-full h-full block opacity-100 rounded-full; - transform: scale(0); -} - -.radio-label:hover span:first-child { - @apply bg-primary-100 border-primary-500; -} - -.radio-input:checked+.radio-label span:first-child { - @apply bg-primary-500 border-primary-500; - animation: wave 0.4s ease; -} - -.radio-input:checked+.radio-label span:first-child:before { - transform: scale(3.5); - opacity: 0; - transition: all 0.6s ease; -} - - -/* Checkbox */ - -.checkbox__label { - @apply select-none cursor-pointer; -} - -.checkbox__label span { - @apply inline-block align-middle; - transform: translate3d(0, 0, 0); -} - -.checkbox__label span:first-child { - @apply relative rounded align-middle border border-secondary-500 bg-white w-4 h-4 mr-3; - transform: scale(1); - transition: all 0.2s ease; -} - -.checkbox__label span:first-child svg { - position: absolute; - top: 3px; - left: 2px; - fill: none; - stroke: #ffffff; - stroke-width: 2; - stroke-linecap: round; - stroke-linejoin: round; - stroke-dasharray: 16px; - stroke-dashoffset: 16px; - transition: all 0.3s ease; - transition-delay: 0.1s; - transform: translate3d(0, 0, 0); -} - -.checkbox__label span:first-child:before { - content: ""; - @apply bg-primary-500 w-full h-full block opacity-100 rounded-full; - transform: scale(0); -} - -.checkbox__label:hover span:first-child { - @apply bg-primary-100 border-primary-500; -} - -.checkbox__input:checked+.checkbox__label span:first-child { - @apply bg-primary-500 border-primary-500; - animation: wave 0.4s ease; -} - -.checkbox__input:checked+.checkbox__label span:first-child svg { - stroke-dashoffset: 0; -} - -.checkbox__input:checked+.checkbox__label span:first-child:before { - transform: scale(3.5); - opacity: 0; - transition: all 0.6s ease; -} - @keyframes wave { 50% { transform: scale(0.9); } } -label { - @apply block text-secondary-700 text-sm font-medium; -} - -input { - @apply border-secondary-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 transition-colors duration-300 !important; -} - -input:disabled, -.disabled { - @apply cursor-not-allowed bg-secondary-200 border-secondary-400 text-secondary-700; -} - -textarea { - @apply border-secondary-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 transition-colors duration-300; -} - -button:disabled, -.disabled { - @apply cursor-not-allowed bg-secondary-300 text-secondary-500 shadow-none border-transparent; - background-image: none; -} - - -/* Styling skeleton loading */ - -.skeleton-placeholder__line-sm { - @apply rounded-full bg-secondary-100; - height: 0.625rem; -} - -.skeleton-placeholder__line-md { - @apply rounded-full bg-secondary-100; - height: 1rem; -} - -.skeleton-placeholder__image { - @apply mt-5 h-48 rounded-lg bg-secondary-100; -} - -.skeleton-animate { - animation: skeletonShimmer 3s infinite linear; - background: linear-gradient(to right, #f5f3f7 10%, #fbfafc 40%, #f5f3f7 70%); - background-size: 1000px 100%; -} - -@keyframes skeletonShimmer { - 0% { - background-position: -1000px 0; - } - 100% { - background-position: 1000px 0; - } -} - -.skeleton-animate-alpha { - animation: skeletonShimmer 3s infinite linear; - background: linear-gradient(to right, rgba(0, 0, 0, 0.1) 10%, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1) 70%); - background-size: 1000px 100%; -} @media print { @page { @@ -449,20 +82,6 @@ button:disabled, } } -.header-section .appBar { - z-index: 1201; -} - -.header-section .toolbar { - padding-top: 72px; -} - -@media only screen and (min-width: 601px) { - .header-section .menuButton { - display: none; - } -} - .App { text-align: center; } @@ -497,87 +116,10 @@ button:disabled, 100% {opacity: 0;} } -.badge { - display: inline-block; - padding: 0.25em 0.4em; - font-size: 12px; - font-weight: 700; - line-height: 1; - text-align: center; - white-space: nowrap; - vertical-align: baseline; - border-radius: 0.25rem; - transition: color 0.15s; -} - -.badge-pill { - padding-right: 0.6em; - padding-left: 0.6em; - border-radius: 10rem; -} - -.badge-primary { - color: #fff; - background-color: #007bff; -} - -.badge-secondary { - color: #fff; - background-color: #6c757d; -} - -.badge-success { - color: #fff; - background-color: #28a745; -} - -.badge-warning { - color: #212529; - background-color: #ffc107; -} - -.badge-danger { - color: #fff; - background-color: #dc3545; -} - -.badge-dark { - color: #fff; - background-color: #343a40; -} - .dropdown:hover .dropdown-menu { display: block; } -.border-primary { - border-color: #28a745; -} - -.form-input { - padding-top: 6px; - padding-bottom: 6px; - width: 100%; - border-radius: 4px; - height: 38px; -} - -.form-input:focus { - border-color: #28a745 !important; - box-shadow: 0 0 0 1px #28a745 !important; -} - -.copied-to-cb { - color: #28a745; - font-size: 13px; - padding-left: 5px; - font-style: italic; -} - -.copy-to-cb { - padding-left: 5px; -} - ::-webkit-scrollbar { width: 10px; height: 8px; @@ -596,166 +138,6 @@ button:disabled, background: rgba(0, 0, 0, 0.4); } -@media (min-width:1000px) { - .manualGrid { - display: grid !important - } -} - -.scrollbar-hide::-webkit-scrollbar { - width: 0px; - height: 0px; -} - -/* - Range Sliders for Camera Feed -*/ - -#feed-range { - -webkit-appearance: none; - appearance: none; - margin: 18px 0; - width: 100%; -} - -#feed-range:focus { - outline: none; -} - -#feed-range::-webkit-slider-runnable-track { - width: 100%; - height: 1px; - cursor: pointer; - background: transparent; - border-radius: 5px; -} - -#feed-range::-webkit-slider-thumb { - height: 16px; - width: 16px; - border-radius: 3px; - border: 1px solid white; - background: black; - cursor: pointer; - -webkit-appearance: none; - margin-top: -8px; - border-radius: 50%; -} - -@media (min-width:471px) { - .csv-input { - display: block; - font-size: 0.875rem; - line-height: 1.25rem; - margin: auto; - width: 50%; - } -} - -@media (max-width:470px) { - .csv-input { - display: block; - font-size: 0.875rem; - line-height: 1.25rem; - margin: auto; - width: 100%; - } -} - -[type="checkbox"] { - @apply text-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none; -} - - - -.csv-input::file-selector-button:hover { - background-color: #84e1bc; -} - - - -/* for gmaps search dropdown */ -.pac-container { - z-index: 100000 !important; -} - -.csv-input::file-selector-button { - padding-top: 0.5rem; - padding-bottom: 0.5rem; - padding-left: 1rem; - padding-right: 1rem; - font-size: 0.875rem; - line-height: 1.25rem; - font-weight: 600; - border-width: 0; - background-color: #def7ec; - color: #046c4e; -} - -.csv-input::file-selector-button:hover { - background-color: #84e1bc; -} - -/* Patient Category Styles */ - -.patient-comfort { - @apply bg-patient-comfort text-patient-comfort-fore -} -.patient-stable { - @apply bg-patient-stable text-patient-stable-fore -} -.patient-abnormal { - @apply bg-patient-abnormal text-patient-abnormal-fore -} -.patient-critical { - @apply bg-patient-critical text-patient-critical-fore -} -.patient-unknown { - @apply bg-patient-unknown text-patient-unknown-fore -} - -.patient-activelydying { - @apply bg-patient-activelydying text-patient-activelydying-fore -} - -.patient-comfort-ring { - @apply ring-patient-comfort -} -.patient-stable-ring { - @apply ring-patient-stable -} -.patient-abnormal-ring { - @apply ring-patient-abnormal -} -.patient-critical-ring { - @apply ring-patient-critical -} -.patient-unknown-ring { - @apply ring-patient-unknown -} -.patient-activelydying-ring { - @apply ring-patient-activelydying -} - -.patient-comfort-profile { - @apply border-2 border-patient-comfort rounded-t -} -.patient-stable-profile { - @apply border-2 border-patient-stable rounded-t -} -.patient-abnormal-profile { - @apply border-2 border-patient-abnormal rounded-t -} -.patient-critical-profile { - @apply border-2 border-patient-critical rounded-t -} -.patient-unknown-profile { - @apply border border-patient-unknown rounded -} -.patient-activelydying-profile { - @apply border-2 border-patient-activelydying rounded-t -} - /* for gmaps search dropdown */ .pac-container { z-index: 100000 !important; @@ -855,468 +237,6 @@ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { display: none; } -.service-panel{ - @apply flex-row -} - -@media screen and (max-width: 920px) { - .service-panel{ - @apply flex-col - } -} -/* styles for files in src/Components/CriticalCareRecording/PressureSore */ - -input[type="checkbox"]:checked~.dot { - transform: translateX(100%); -} - - -/* styles for files in src/Components/CriticalCareRecording/components */ - -.range { - position: relative; - width: 644px; - height: 5px; -} - -.range input { - width: 100%; - position: absolute; - top: 2px; - height: 0; - -webkit-appearance: none; -} - -.range input::-webkit-slider-thumb { - -webkit-appearance: none; - width: 18px; - height: 18px; - margin: -8px 0 0; - border-radius: 50%; - background: rgb(7, 109, 243); - cursor: pointer; - border: 0 !important; - z-index: 10; -} - -.range input::-moz-range-thumb { - width: 18px; - height: 18px; - margin: -8px 0 0; - border-radius: 50%; - background: rgb(7, 109, 243); - cursor: pointer; - border: 0 !important; - z-index: 10; -} - -.range input::-ms-thumb { - width: 18px; - height: 18px; - margin: -8px 0 0; - border-radius: 50%; - background: rgb(7, 109, 243); - cursor: pointer; - border: 0 !important; - z-index: 10; -} - -.range input::-webkit-slider-runnable-track { - width: 100%; - height: 2px; - cursor: pointer; - background: #b2b2b2; - z-index: 1; -} - -.range input::-moz-range-track { - width: 100%; - height: 2px; - cursor: pointer; - background: black; - z-index: 1; -} - -.range input::-ms-track { - width: 100%; - height: 2px; - cursor: pointer; - background: #b2b2b2; - z-index: 1; -} - -.range input:focus { - background: none; - outline: none; -} - -.range input::-ms-track { - width: 100%; - cursor: pointer; - background: transparent; - border-color: transparent; - color: transparent; -} - -.range-labels { - margin: 18px -41px 0; - padding: 0; - list-style: none; -} - -.range-labels li { - position: relative; - float: left; - width: 90.25px; - text-align: center; - color: black; - font-size: 14px; - cursor: pointer; -} - -.range-labels .label::before { - position: absolute; - top: -25px; - right: 0; - left: 0; - content: ""; - margin: 0 auto; - width: 9px; - height: 9px; - background: #b2b2b2; - border-radius: 50%; -} - -.double-range-labels { - margin: 18px -41px 0; - padding: 0; - list-style: none; -} - -.double-range-labels li { - position: relative; - float: left; - width: 45.25px; - text-align: center; - color: black; - font-size: 14px; - cursor: pointer; -} - -.double-range-labels .label::before { - position: absolute; - top: -25px; - right: 0; - left: 0; - content: ""; - margin: 0 auto; - width: 9px; - height: 9px; - background: #b2b2b2; - border-radius: 50%; -} - -.upper-label { - height: 10px; - margin-bottom: 10px; -} - -.pupil1 { - bottom: 0; - margin: 0 auto; - width: 9px; - height: 9px; - border-radius: 50%; - background-color: black; -} - -.pupil2 { - bottom: 0; - margin: 0 auto; - width: 15px; - height: 15px; - border-radius: 50%; - background-color: black; -} - -.pupil3 { - bottom: 0; - margin: 0 auto; - width: 21px; - height: 21px; - border-radius: 50%; - background-color: black; -} - -.pupil4 { - bottom: 0; - margin: 0 auto; - width: 25px; - height: 25px; - border-radius: 50%; - background-color: black; -} - -.pupil5 { - bottom: 0; - margin: 0 auto; - width: 30px; - height: 30px; - border-radius: 50%; - background-color: black; -} - -.pupil6 { - bottom: 0; - margin: 0 auto; - width: 35px; - height: 35px; - border-radius: 50%; - background-color: black; -} - -.pupil7 { - bottom: 0; - margin: 0 auto; - width: 38px; - height: 38px; - border-radius: 50%; - background-color: black; -} - -.pupil8 { - width: 41px; - height: 41px; - border-radius: 50%; - background-color: black; -} - -.range-labels .active { - color: rgb(7, 109, 243); -} - -.range-labels .selected::before { - background: rgb(7, 109, 243); -} - -.range-labels .active.selected::before { - display: none; -} - -.align-circles { - position: relative; - display: flex; - justify-content: center; - height: 41px; - vertical-align: baseline; -} - -input[type="number"] { - background-color: #fbfafc; -} - - -/* Copied CSS */ - -.slider { - position: relative; - width: 200px; -} - -.slider__track, -.slider__range, -.slider__left-value, -.slider__right-value { - position: absolute; -} - -.slider__track, -.slider__range { - border-radius: 3px; - height: 5px; -} - -.slider__track { - background-color: #1476d8; - width: 100%; - z-index: 1; -} - -.slider__range { - background-color: #19ebe0; - z-index: 2; -} - -.slider__left-value, -.slider__right-value { - color: #1c85ee; - font-size: 12px; - margin-top: 20px; -} - -.slider__left-value { - left: 6px; -} - -.slider__right-value { - right: -4px; -} - - -/* Removing the default appearance */ - -.thumb input { - pointer-events: none; - position: absolute; - height: 0; - width: 200px; - outline: none; -} - -.thumb--left { - z-index: 3; -} - -.thumb--right { - z-index: 4; -} - - -/* For Chrome browsers */ - -.thumb input::-webkit-slider-thumb { - background-color: #242525; - border: none; - border-radius: 50%; - box-shadow: 0 0 1px 1px #0b2846; - cursor: pointer; - height: 18px; - width: 18px; - margin-top: 4px; - pointer-events: all; - position: relative; -} - - -/* For Firefox browsers */ - -.thumb input::-moz-range-thumb { - background-color: #272b2c; - border: none; - border-radius: 50%; - box-shadow: 0 0 1px 1px #0d2d4d; - cursor: pointer; - height: 18px; - width: 18px; - margin-top: 4px; - pointer-events: all; - position: relative; -} - -.slider { - appearance: none; - background-color: #dee0e4; - width: 100%; - height: 4px; - margin: 0; - padding: 0; - z-index: 2; -} - -.slider::-webkit-slider-thumb { - cursor: pointer; -} - -.slider-container { - position: relative; - width: 100%; - /* max-width: 700px; */ - display: flex; - justify-content: center; -} - -.indicators { - position: absolute; - top: -200%; - width: 100%; - height: 20px; - border-left: 2px solid #dee0e4; -} - -.tick { - content: ""; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - background: linear-gradient(to left, #dee0e4 2px, transparent 2px); -} - -.slider-box { - width: 100%; - /* max-width: 700px; */ - padding: 20px 10px 60px 10px; - border-radius: 12px; -} - -.slider-head { - font-family: sans-serif; - margin-bottom: 2rem; -} - -.slider-head>div>h1 { - font-size: 1rem; - font-weight: bold; -} - -.slider-head input { - padding: 0.5rem 0.7rem; - border-radius: 8px; - border: 1px solid #979aa0; - margin-left: 12px; - font-size: 1.1rem; - color: #383a3e; - letter-spacing: 1px; -} - -.slider-head label { - font-weight: 700; - color: #2856ff; - font-size: 1rem; -} - - -.grid-2-col, .grid-3-col, .grid-2-1-col, .grid-3-1-col, .grid-1-2-col { - display: grid; - grid-template-columns: 1fr; - gap: 1.5rem; -} - -@media (min-width: 768px) { - .grid-2-col { - grid-template-columns: repeat(2, 1fr); - } - .grid-3-col { - grid-template-columns: repeat(3, 1fr); - } - .grid-2-1-col { - grid-template-columns: 2fr 1fr; - } - .grid-1-2-col { - grid-template-columns: 1fr 2fr; - } -} - -.input-field-group { - display: flex; - flex-direction: column; - gap: 0.5rem; -} -.col-span-all { - grid-column: 1 / -1; -} - @layer base { :root { --radius: 0.5rem; diff --git a/src/types/emr/encounter.ts b/src/types/emr/encounter.ts index f63a118a83f..45c6602b763 100644 --- a/src/types/emr/encounter.ts +++ b/src/types/emr/encounter.ts @@ -117,6 +117,12 @@ export type StatusHistory = { history: History[]; }; +export type LocationHistory = { + start_datetime: string; + location: LocationList; + status: string; +}; + export interface Encounter { id: string; patient: Patient; @@ -138,6 +144,7 @@ export interface Encounter { status_history: StatusHistory; organizations: FacilityOrganization[]; current_location: LocationList; + location_history: LocationHistory[]; } export interface EncounterEditRequest { diff --git a/src/types/emr/medicationAdministration/medicationAdministration.ts b/src/types/emr/medicationAdministration/medicationAdministration.ts index a736846de4a..caf6f254711 100644 --- a/src/types/emr/medicationAdministration/medicationAdministration.ts +++ b/src/types/emr/medicationAdministration/medicationAdministration.ts @@ -11,7 +11,6 @@ export const MEDICATION_ADMINISTRATION_STATUS = [ "stopped", "in_progress", "on_hold", - "unknown", "cancelled", ] as const; @@ -93,4 +92,6 @@ export interface MedicationAdministrationRead { dose?: DosageQuantity; rate?: Quantity; }; + created_by: UserBareMinimum; + updated_by: UserBareMinimum; } diff --git a/src/types/emr/medicationAdministration/medicationAdministrationApi.ts b/src/types/emr/medicationAdministration/medicationAdministrationApi.ts index 77e37c391e2..35b980b0349 100644 --- a/src/types/emr/medicationAdministration/medicationAdministrationApi.ts +++ b/src/types/emr/medicationAdministration/medicationAdministrationApi.ts @@ -7,12 +7,12 @@ import { } from "./medicationAdministration"; export default { - listMedicationAdministrations: { + list: { path: "/api/v1/patient/{patientId}/medication/administration/", method: HttpMethod.GET, TRes: Type<PaginatedResponse<MedicationAdministrationRead>>(), }, - upsertMedicationAdministration: { + upsert: { path: "/api/v1/patient/{patientId}/medication/administration/upsert/", method: HttpMethod.POST, TRes: Type<MedicationAdministrationRequest[]>, diff --git a/src/types/emr/medicationStatement.ts b/src/types/emr/medicationStatement.ts index a357ddab63c..00e20ae150a 100644 --- a/src/types/emr/medicationStatement.ts +++ b/src/types/emr/medicationStatement.ts @@ -23,6 +23,17 @@ export const MEDICATION_STATEMENT_STATUS = [ export type MedicationStatementStatus = (typeof MEDICATION_STATEMENT_STATUS)[number]; +export const MEDICATION_STATEMENT_STATUS_STYLES = { + active: "bg-green-100 text-green-800 border-green-200", + completed: "bg-blue-100 text-blue-800 border-blue-200", + stopped: "bg-red-100 text-red-800 border-red-200", + on_hold: "bg-yellow-100 text-yellow-800 border-yellow-200", + intended: "bg-purple-100 text-purple-800 border-purple-200", + not_taken: "bg-gray-100 text-gray-800 border-gray-200", + unknown: "bg-gray-100 text-gray-800 border-gray-200", + entered_in_error: "bg-red-100 text-red-800 border-red-200", +} as const; + export type MedicationStatement = { readonly id: string; status: MedicationStatementStatus; diff --git a/src/types/emr/medicationStatement/medicationStatementApi.ts b/src/types/emr/medicationStatement/medicationStatementApi.ts index 68736e4ab13..7f65dc5f3c8 100644 --- a/src/types/emr/medicationStatement/medicationStatementApi.ts +++ b/src/types/emr/medicationStatement/medicationStatementApi.ts @@ -1,12 +1,12 @@ import { Type } from "@/Utils/request/api"; import { PaginatedResponse } from "@/Utils/request/types"; -import { MedicationStatement } from "@/types/emr/medicationStatement"; +import { MedicationStatementRead } from "@/types/emr/medicationStatement"; const medicationStatementApi = { list: { path: "/api/v1/patient/{patientId}/medication/statement/", method: "GET", - TRes: Type<PaginatedResponse<MedicationStatement>>(), + TRes: Type<PaginatedResponse<MedicationStatementRead>>(), }, } as const; diff --git a/src/types/location/location.ts b/src/types/location/location.ts index cfb16dd13c3..3738dce63f7 100644 --- a/src/types/location/location.ts +++ b/src/types/location/location.ts @@ -45,6 +45,7 @@ export interface LocationDetail extends LocationBase { export interface LocationList extends LocationBase { id: string; has_children: boolean; + parent?: LocationList; } export interface LocationWrite extends LocationBase { diff --git a/src/types/questionnaire/question.ts b/src/types/questionnaire/question.ts index cc16b086bc7..f0199d63890 100644 --- a/src/types/questionnaire/question.ts +++ b/src/types/questionnaire/question.ts @@ -16,6 +16,23 @@ export type QuestionType = | "quantity" | "structured"; +export const SUPPORTED_QUESTION_TYPES = [ + { name: "Group", value: "group" }, + { name: "Display", value: "display" }, + { name: "Boolean", value: "boolean" }, + { name: "Decimal", value: "decimal" }, + { name: "Integer", value: "integer" }, + { name: "Date", value: "date" }, + { name: "DateTime", value: "dateTime" }, + { name: "Time", value: "time" }, + { name: "String", value: "string" }, + { name: "Text", value: "text" }, + { name: "URL", value: "url" }, + { name: "Choice", value: "choice" }, + { name: "Quantity", value: "quantity" }, + { name: "Structured", value: "structured" }, +]; + export type StructuredQuestionType = | "allergy_intolerance" | "medication_request" @@ -49,6 +66,13 @@ export interface AnswerOption { value: string; display?: string; initialSelected?: boolean; + code?: Code; +} + +export interface ObservationType { + system: string; + code: string; + display: string; } export interface Question { diff --git a/src/types/resourceRequest/resourceRequest.ts b/src/types/resourceRequest/resourceRequest.ts index 7594766017c..07bfdbd2479 100644 --- a/src/types/resourceRequest/resourceRequest.ts +++ b/src/types/resourceRequest/resourceRequest.ts @@ -2,6 +2,7 @@ import { FacilityModel } from "@/components/Facility/models"; import { UserBareMinimum } from "@/components/Users/models"; import { PatientModel } from "@/types/emr/patient"; +import { UserBase } from "@/types/user/user"; export interface ResourceRequest { approving_facility: FacilityModel | null; @@ -17,9 +18,9 @@ export interface ResourceRequest { requested_quantity: number; status: string; title: string; - assigned_to: UserBareMinimum | null; - created_by: UserBareMinimum; - updated_by: UserBareMinimum; + assigned_to: UserBase | null; + created_by: UserBase; + updated_by: UserBase; created_date: string; modified_date: string; related_patient: PatientModel | null; @@ -32,6 +33,7 @@ export interface CreateResourceRequest { referring_facility_contact_name: string; referring_facility_contact_number: string; approving_facility: string | null; + assigned_to: string | null; assigned_facility: string | null; origin_facility: string; related_patient: string; diff --git a/src/types/scheduling/scheduleApis.ts b/src/types/scheduling/scheduleApi.ts similarity index 100% rename from src/types/scheduling/scheduleApis.ts rename to src/types/scheduling/scheduleApi.ts diff --git a/src/types/user/userApi.ts b/src/types/user/userApi.ts index f1f776cece0..dd11f7e2ae2 100644 --- a/src/types/user/userApi.ts +++ b/src/types/user/userApi.ts @@ -30,4 +30,4 @@ export default { TRes: Type<UserBase>(), TBody: Type<Partial<UpdateUserModel>>(), }, -}; +} as const; diff --git a/src/types/valueset/valueset.ts b/src/types/valueset/valueset.ts new file mode 100644 index 00000000000..01ad2e9f8c1 --- /dev/null +++ b/src/types/valueset/valueset.ts @@ -0,0 +1,70 @@ +export interface ValuesetFilter { + op: string; + value: string; + property: string; +} + +export interface ValuesetConcept { + code: string; + display: string; +} + +export interface ValuesetInclude { + filter?: ValuesetFilter[]; + system: string; + concept?: ValuesetConcept[]; +} + +interface ValuesetCompose { + exclude: ValuesetInclude[]; + include: ValuesetInclude[]; +} + +export interface ValuesetBase { + id: string; + slug: string; + name: string; + description: string; + compose: ValuesetCompose; + status: "active" | "inactive"; + is_system_defined: boolean; + created_by: string | null; + updated_by: string | null; +} + +export type CreateValuesetModel = Omit< + ValuesetBase, + "id" | "created_by" | "updated_by" +>; + +export type UpdateValuesetModel = CreateValuesetModel & { + id: string; +}; + +export type ValuesetFormType = CreateValuesetModel; + +export interface ValuesetCodeMetadata { + code: string; + display: string; + name: string; + system: string; + version: string; + inactive: boolean; +} + +export interface ValuesetLookupResponse { + metadata: ValuesetCodeMetadata; +} + +export interface ValuesetLookupRequest { + system: string; + code: string; +} + +export const TERMINOLOGY_SYSTEMS = { + LOINC: "http://loinc.org", + SNOMED: "http://snomed.info/sct", + UCUM: "http://unitsofmeasure.org", +} as const; + +export type TerminologySystem = keyof typeof TERMINOLOGY_SYSTEMS; diff --git a/src/types/valueset/valuesetApi.ts b/src/types/valueset/valuesetApi.ts new file mode 100644 index 00000000000..3398cd18432 --- /dev/null +++ b/src/types/valueset/valuesetApi.ts @@ -0,0 +1,49 @@ +import { HttpMethod, Type } from "@/Utils/request/api"; +import { PaginatedResponse } from "@/Utils/request/types"; + +import { + CreateValuesetModel, + UpdateValuesetModel, + ValuesetBase, + ValuesetLookupRequest, + ValuesetLookupResponse, +} from "./valueset"; + +export default { + list: { + path: "/api/v1/valueset/", + method: HttpMethod.GET, + TRes: Type<PaginatedResponse<ValuesetBase>>(), + }, + create: { + path: "/api/v1/valueset/", + method: HttpMethod.POST, + TRes: Type<ValuesetBase>(), + TBody: Type<CreateValuesetModel>(), + }, + get: { + path: "/api/v1/valueset/{slug}/", + method: HttpMethod.GET, + TRes: Type<ValuesetBase>(), + }, + update: { + path: "/api/v1/valueset/{slug}/", + method: HttpMethod.PUT, + TRes: Type<ValuesetBase>(), + TBody: Type<UpdateValuesetModel>(), + }, + lookup: { + path: "/api/v1/valueset/lookup_code/", + method: HttpMethod.POST, + TRes: Type<ValuesetLookupResponse>(), + TBody: Type<ValuesetLookupRequest>(), + }, + expand: { + path: "/api/v1/valueset/expand/", + method: HttpMethod.POST, + TRes: Type<ValuesetBase>(), + TBody: Type<{ + search: string; + }>(), + }, +} as const; diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts index defba258b80..5e2066155a8 100644 --- a/src/vite-env.d.ts +++ b/src/vite-env.d.ts @@ -19,11 +19,7 @@ interface ImportMetaEnv { readonly REACT_CUSTOM_LOGO_ALT?: string; readonly REACT_CUSTOM_DESCRIPTION?: string; readonly REACT_GMAPS_API_KEY?: string; - readonly REACT_GOV_DATA_API_KEY?: string; readonly REACT_RECAPTCHA_SITE_KEY?: string; - readonly REACT_WARTIME_SHIFTING?: string; - readonly REACT_STILL_WATCHING_IDLE_TIMEOUT?: string; - readonly REACT_STILL_WATCHING_PROMPT_DURATION?: string; readonly REACT_JWT_TOKEN_REFRESH_INTERVAL?: string; readonly REACT_MIN_ENCOUNTER_DATE?: string; readonly REACT_DEFAULT_ENCOUNTER_TYPE?: string; diff --git a/vite.config.mts b/vite.config.mts index 749f188002c..308c942b7ad 100644 --- a/vite.config.mts +++ b/vite.config.mts @@ -288,6 +288,7 @@ export default defineConfig(({ mode }) => { server: { port: 4000, host: "0.0.0.0", + allowedHosts: true, }, preview: { headers: {
+ {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")}
{fileName}
{`${Math.round(props.value)}%`}
{fileUpload.error}
+ {fileUpload.error} +
- {fileUpload.error} -
{label}
{ - e.stopPropagation(); - onRemove(); - }} - > - -
- {value.selectedLabel} -
{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} +
- {props.encounter.current_location.name} -
- {props.encounter.current_location.description} -
+ {t("medications")} +
+ {t("generated_on")} {format(new Date(), "PPP 'at' p")} +
- {note} + {allergy.note}
- {note} -
+ {diagnosis.note} +
+ {symptom.note} +
+ Configure the basic behavior: mark as required, allow multiple + entries, or set as read only. +
+ Specify key collection info: time, performer, body site, and + method. +
+ Define possible answers for this question +
- {JSON.stringify(questionnaireForms, null, 2)} -
Manage and view questionnaires
{t("manage_and_view_questionnaires")}
{questionnaire.description}
- {comment.replace(/\n+/g, "\n")} -
- {t("resource_request_basic_info_description")} -
- {t("resource_request_details_description")} -
-