- {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} +
- {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/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/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/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/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/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/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({ - + = ({ 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, diff --git a/src/components/Medicine/MedicationAdministration/MedicineAdminDialog.tsx b/src/components/Medicine/MedicationAdministration/MedicineAdminDialog.tsx index 3668e4f84de..d8e711e5f2d 100644 --- a/src/components/Medicine/MedicationAdministration/MedicineAdminDialog.tsx +++ b/src/components/Medicine/MedicationAdministration/MedicineAdminDialog.tsx @@ -50,12 +50,9 @@ export const MedicineAdminDialog = ({ }, [initialRequest]); const { mutate: upsertAdministration, isPending } = useMutation({ - mutationFn: mutate( - medicationAdministrationApi.upsertMedicationAdministration, - { - pathParams: { patientId: patientId }, - }, - ), + mutationFn: mutate(medicationAdministrationApi.upsert, { + pathParams: { patientId: patientId }, + }), onSuccess: () => { onOpenChange(false); toast.success(t("medication_administration_saved")); diff --git a/src/components/Medicine/MedicationAdministration/MedicineAdminSheet.tsx b/src/components/Medicine/MedicationAdministration/MedicineAdminSheet.tsx index a2f7ee23111..8b22e738b59 100644 --- a/src/components/Medicine/MedicationAdministration/MedicineAdminSheet.tsx +++ b/src/components/Medicine/MedicationAdministration/MedicineAdminSheet.tsx @@ -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/Patient/FileUploadPage.tsx b/src/components/Patient/FileUploadPage.tsx deleted file mode 100644 index 83bce32954c..00000000000 --- a/src/components/Patient/FileUploadPage.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { useTranslation } from "react-i18next"; - -import Page from "@/components/Common/Page"; -import { FileUpload } from "@/components/Files/FileUpload"; - -export default function FileUploadPage(props: { - facilityId: string; - patientId: string; - encounterId?: string; - type: "encounter" | "patient"; -}) { - const { patientId, encounterId, type } = props; - const { t } = useTranslation(); - - return ( - - - - ); -} diff --git a/src/components/Patient/MedicationStatementList.tsx b/src/components/Patient/MedicationStatementList.tsx index c9ea302c21a..112c42414a4 100644 --- a/src/components/Patient/MedicationStatementList.tsx +++ b/src/components/Patient/MedicationStatementList.tsx @@ -24,13 +24,13 @@ import { import { Avatar } from "@/components/Common/Avatar"; -import routes from "@/Utils/request/api"; import query from "@/Utils/request/query"; 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; @@ -129,7 +129,7 @@ export function MedicationStatementList({ const { data: medications, isLoading } = useQuery({ queryKey: ["medication_statements", patientId], - queryFn: query(routes.medicationStatement.list, { + queryFn: query(medicationStatementApi.list, { pathParams: { patientId }, }), }); 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 d7bfb9d01d5..955de6a9ef6 100644 --- a/src/components/Patient/PatientInfoCard.tsx +++ b/src/components/Patient/PatientInfoCard.tsx @@ -481,6 +481,11 @@ export default function PatientInfoCard(props: PatientInfoCardProps) { + + {t("cancel")} diff --git a/src/components/Patient/PatientRegistration.tsx b/src/components/Patient/PatientRegistration.tsx index 8557b4fab89..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"; @@ -747,10 +743,13 @@ export default function PatientRegistration( {showDuplicate && ( { - handleDialogClose("close"); + onOpenChange={(open) => { + if (!open) { + handleDialogClose("close"); + } }} /> )} 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/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 ; - - const { data: patientData } = useQuery({ - queryKey: ["patient", related_patient], - queryFn: query(routes.patient.getPatient, { - pathParams: { id: String(related_patient) }, - }), - enabled: !!related_patient, - }); - - 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 { 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 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 ( - - - - - - {patientData && ( - - - - - - {t("linked_patient")}:{" "} - {patientData.name} - - - - - )} - - - - - {t("basic_information")} - - - {t("resource_request_basic_info_description")} - - - - - ( - - - {t("facility_for_care_support")} - - - { - const facility = - facilities?.results.find( - (f) => f.id === value, - ) ?? null; - form.setValue("assigned_facility", facility); - }} - /> - - - {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/ResourceDetailsUpdate.tsx b/src/components/Resource/ResourceDetailsUpdate.tsx deleted file mode 100644 index e589a83c166..00000000000 --- a/src/components/Resource/ResourceDetailsUpdate.tsx +++ /dev/null @@ -1,313 +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 Autocomplete from "@/components/ui/autocomplete"; -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 Loading from "@/components/Common/Loading"; -import Page from "@/components/Common/Page"; -import UserAutocomplete from "@/components/Common/UserAutocompleteFormField"; -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 facilityApi from "@/types/facility/facilityApi"; -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 [facilitySearch, setFacilitySearch] = useState(""); - 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 { 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 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={t("update_request")}> - <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> - <Label className="text-gray-700 -mt-3 mb-3"> - {t("facility_assign_request")} - </Label> - <Autocomplete - options={facilityOptions ?? []} - placeholder={t("start_typing_to_search")} - value={state.form.assigned_facility} - onSearch={setFacilitySearch} - onChange={(selected) => - setFacility(selected, "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/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 76010214af9..ee78d887d9f 100644 --- a/src/components/Users/UserForm.tsx +++ b/src/components/Users/UserForm.tsx @@ -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(() => { 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/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/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/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/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/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/AppointmentsPage.tsx b/src/pages/Appointments/AppointmentsPage.tsx index 2a9fd13d298..dfb7c5e1401 100644 --- a/src/pages/Appointments/AppointmentsPage.tsx +++ b/src/pages/Appointments/AppointmentsPage.tsx @@ -399,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/Facility/settings/organizations/FacilityOrganizationUsers.tsx b/src/pages/Facility/settings/organizations/FacilityOrganizationUsers.tsx index 0319faf83d2..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 flex-wrap"> - <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/components/CreateFacilityOrganizationSheet.tsx b/src/pages/Facility/settings/organizations/components/CreateFacilityOrganizationSheet.tsx index 0726a6d44fe..741ec7aa046 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(""); @@ -78,7 +79,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; } @@ -93,16 +94,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"> @@ -111,18 +112,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) => ( @@ -139,7 +140,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> @@ -148,7 +149,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/FacilityOrganizationLayout.tsx b/src/pages/Facility/settings/organizations/components/FacilityOrganizationLayout.tsx index fd34b3449e2..de12da5794e 100644 --- a/src/pages/Facility/settings/organizations/components/FacilityOrganizationLayout.tsx +++ b/src/pages/Facility/settings/organizations/components/FacilityOrganizationLayout.tsx @@ -105,7 +105,9 @@ export default function FacilityOrganizationLayout({ asChild className="text-sm text-gray-900 hover:underline hover:underline-offset-2" > - <Link href={parent.id}>{parent.name}</Link> + <Link href={path.replace(id, parent.id)}> + {parent.name} + </Link> </BreadcrumbLink> </BreadcrumbItem> <BreadcrumbItem key={`ellipsis-${parent.id}`}> diff --git a/src/pages/UserDashboard.tsx b/src/pages/UserDashboard.tsx index ab7e8430033..7ba9c365b25 100644 --- a/src/pages/UserDashboard.tsx +++ b/src/pages/UserDashboard.tsx @@ -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" /> 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/medicationAdministration/medicationAdministration.ts b/src/types/emr/medicationAdministration/medicationAdministration.ts index db45449679f..caf6f254711 100644 --- a/src/types/emr/medicationAdministration/medicationAdministration.ts +++ b/src/types/emr/medicationAdministration/medicationAdministration.ts @@ -92,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/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/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/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/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
- {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")}
{`${Math.round(props.value)}%`}
{fileUpload.error}
{label}
{ - e.stopPropagation(); - onRemove(); - }} - > - -
- {value.selectedLabel} -
- {t("resource_request_basic_info_description")} -
- {t("resource_request_details_description")} -
-