diff --git a/public/locale/en.json b/public/locale/en.json index 630cacec9aa..3e92b18fb50 100644 --- a/public/locale/en.json +++ b/public/locale/en.json @@ -803,6 +803,7 @@ "edit_caution_note": "A new prescription will be added to the consultation with the edited details and the current prescription will be discontinued.", "edit_cover_photo": "Edit Cover Photo", "edit_facility": "Edit Facility", + "edit_facility_details": "Edit Facility Details", "edit_history": "Edit History", "edit_location": "Edit Location", "edit_location_description": "Edit the Location to make any changes", diff --git a/src/components/Common/AvatarEditModal.tsx b/src/components/Common/AvatarEditModal.tsx index 3c278ea80b0..7ef393d0fa8 100644 --- a/src/components/Common/AvatarEditModal.tsx +++ b/src/components/Common/AvatarEditModal.tsx @@ -62,8 +62,8 @@ const AvatarEditModal = ({ const [selectedFile, setSelectedFile] = useState(); const [preview, setPreview] = useState(); const [isCameraOpen, setIsCameraOpen] = useState(false); - const webRef = useRef(null); - const [previewImage, setPreviewImage] = useState(null); + const webRef = useRef(null); + const [previewImage, setPreviewImage] = useState(null); const [isCaptureImgBeingUploaded, setIsCaptureImgBeingUploaded] = useState(false); const [constraint, setConstraint] = useState( @@ -81,16 +81,35 @@ const AvatarEditModal = ({ }, []); const captureImage = () => { - setPreviewImage(webRef.current.getScreenshot()); - const canvas = webRef.current.getCanvas(); - canvas?.toBlob((blob: Blob) => { - const myFile = new File([blob], "image.png", { - type: blob.type, - }); - setSelectedFile(myFile); + if (webRef.current) { + setPreviewImage(webRef.current.getScreenshot()); + } + const canvas = webRef.current?.getCanvas(); + canvas?.toBlob((blob) => { + if (blob) { + const myFile = new File([blob], "image.png", { + type: blob.type, + }); + setSelectedFile(myFile); + } else { + toast.error(t("failed_to_capture_image")); + } }); }; - + const stopCamera = useCallback(() => { + try { + if (webRef.current) { + const openCamera = webRef.current?.video?.srcObject as MediaStream; + if (openCamera) { + openCamera.getTracks().forEach((track) => track.stop()); + } + } + } catch { + toast.error("Failed to stop camera"); + } finally { + setIsCameraOpen(false); + } + }, []); const closeModal = () => { setPreview(undefined); setIsProcessing(false); @@ -410,7 +429,7 @@ const AvatarEditModal = ({ onClick={() => { setPreviewImage(null); setIsCameraOpen(false); - webRef.current.stopCamera(); + stopCamera(); }} disabled={isProcessing} > diff --git a/src/components/Common/ContactLink.tsx b/src/components/Common/ContactLink.tsx index c8115b42a1f..fc3cf7729e1 100644 --- a/src/components/Common/ContactLink.tsx +++ b/src/components/Common/ContactLink.tsx @@ -7,14 +7,8 @@ type ContactLinkProps = export default function ContactLink(props: ContactLinkProps) { return ( diff --git a/src/components/Common/UserSelector.tsx b/src/components/Common/UserSelector.tsx index 5c898e336da..3d068034791 100644 --- a/src/components/Common/UserSelector.tsx +++ b/src/components/Common/UserSelector.tsx @@ -71,7 +71,7 @@ export default function UserSelector({ className="size-6 rounded-full" /> -

+

{formatName(selected)}

diff --git a/src/components/Facility/FacilityHome.tsx b/src/components/Facility/FacilityHome.tsx index 195e4d700bf..39c2510590b 100644 --- a/src/components/Facility/FacilityHome.tsx +++ b/src/components/Facility/FacilityHome.tsx @@ -1,39 +1,16 @@ import careConfig from "@careConfig"; -import { - Tooltip, - TooltipContent, - TooltipProvider, - TooltipTrigger, -} from "@radix-ui/react-tooltip"; import { useQuery, useQueryClient } from "@tanstack/react-query"; import { useMutation } from "@tanstack/react-query"; -import { Edit2, Hospital, MapPin, MoreVertical, Settings } from "lucide-react"; -import { navigate } from "raviger"; +import { Hospital } from "lucide-react"; import { useState } from "react"; import { useTranslation } from "react-i18next"; import { toast } from "sonner"; -import { cn } from "@/lib/utils"; +import CareIcon from "@/CAREUI/icons/CareIcon"; -import { - AlertDialog, - AlertDialogAction, - AlertDialogCancel, - AlertDialogContent, - AlertDialogDescription, - AlertDialogFooter, - AlertDialogHeader, - AlertDialogTitle, -} from "@/components/ui/alert-dialog"; import { Badge } from "@/components/ui/badge"; -import { Button, buttonVariants } from "@/components/ui/button"; +import { Button } from "@/components/ui/button"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuTrigger, -} from "@/components/ui/dropdown-menu"; import { Markdown } from "@/components/ui/markdown"; import { Avatar } from "@/components/Common/Avatar"; @@ -84,25 +61,28 @@ const renderGeoOrganizations = (geoOrg: Organization) => { currentParent = currentParent.parent; } + const formatValue = (name: string, label: string) => { + return name.endsWith(label) + ? name.replace(new RegExp(`${label}$`), "").trim() + : name; + }; + const parentDetails = orgParents.map((org) => { + const label = getOrgLabel(org.org_type, org.metadata); return { - label: getOrgLabel(org.org_type, org.metadata), - value: org.name, + label, + value: formatValue(org.name, label), }; }); + const geoOrgLabel = getOrgLabel(geoOrg.org_type, geoOrg.metadata); + return [ { - label: getOrgLabel(geoOrg.org_type, geoOrg.metadata), - value: geoOrg.name, + label: geoOrgLabel, + value: formatValue(geoOrg.name, geoOrgLabel), }, - ] - .concat(parentDetails) - .map((org, index) => ( -
- {org.value} -
- )); + ].concat(parentDetails); }; export const FacilityHome = ({ facilityId }: Props) => { @@ -117,18 +97,6 @@ export const FacilityHome = ({ facilityId }: Props) => { }), }); - const { mutate: deleteFacility, isPending: isDeleting } = useMutation({ - mutationFn: mutate(routes.deleteFacility, { - pathParams: { id: facilityId }, - }), - onSuccess: () => { - toast.success( - t("facility_deleted_successfully", { name: facilityData?.name }), - ); - navigate("/facility"); - }, - }); - const { mutateAsync: deleteAvatar } = useMutation({ mutationFn: mutate(routes.deleteFacilityCoverImage, { pathParams: { id: facilityId }, @@ -184,6 +152,8 @@ export const FacilityHome = ({ facilityId }: Props) => { const hasPermissionToEditCoverImage = true; + // TODO: get permissions from backend to delete facility + const coverImageHint = ( <> {t("max_size_for_image_uploaded_should_be", { maxSize: "1MB" })} @@ -206,163 +176,170 @@ export const FacilityHome = ({ facilityId }: Props) => { />
- -
+ +
{facilityData?.read_cover_image_url ? ( <> {facilityData?.name} -
+
) : ( -
+
)} +
+ +
-
+
-
- -
- - - -

- {facilityData?.name} -

- - -

- {facilityData?.name} -

- - - -
+
+

+ {facilityData?.name} +

+

+ {facilityData?.facility_type} +

- - - - - - {hasPermissionToEditCoverImage && ( - setEditCoverImage(true)} + + {/* + TODO: add delete facility + + + {t("delete_facility")} + + + + + {t("delete_facility")} + + + {t("delete_facility_confirmation", { + name: facilityData?.name, + })} + + + + {t("cancel")} +
deleteFacility()} + className={cn( + buttonVariants({ variant: "destructive" }), + )} + // disabled={isDeleting} > - - {t("edit_cover_photo")} - - )} - - { - e.preventDefault(); - }} - > - - {t("update_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")} - - - - - - - - + {isDeleting ? t("deleting") : t("delete")} +
+ + + */}
+
+ {hasPermissionToEditCoverImage && ( + + )} +
- - -
-
- -
- {facilityData?.geo_organization && ( -
- {renderGeoOrganizations( - facilityData?.geo_organization, - )} -
- )} +
+ + + {t("edit_facility_details")} + + } + /> +
+
+ + +
+
+ + {t("address")} + + + {facilityData.address} +
-
-
-
-
+
+ + {t("mobile_number")} + + -
+ +
+ +
+ + {t("location_details")} + + + {/* Add Location Link Here */} +
-
- - + + + + +
+ {facilityData.geo_organization && + renderGeoOrganizations( + facilityData.geo_organization, + ).map((item, index) => ( +
+ + {item.label} + + + {item.value} + +
+ ))} +
+ + +
{facilityData?.features?.some((feature: number) => FACILITY_FEATURE_TYPES.some((f) => f.id === feature), @@ -383,7 +360,7 @@ export const FacilityHome = ({ facilityId }: Props) => { {getFacilityFeatureIcon(feature)} diff --git a/src/components/Users/UserListAndCard.tsx b/src/components/Users/UserListAndCard.tsx index bf8b2b3e96d..c11c2bc5199 100644 --- a/src/components/Users/UserListAndCard.tsx +++ b/src/components/Users/UserListAndCard.tsx @@ -64,7 +64,10 @@ export const UserStatusIndicator = ({ ) : ( - + {t("never_logged_in")} diff --git a/src/pages/Facility/settings/organizations/components/EditFacilityUserRoleSheet.tsx b/src/pages/Facility/settings/organizations/components/EditFacilityUserRoleSheet.tsx index dfae40ba31f..6af8838d2dd 100644 --- a/src/pages/Facility/settings/organizations/components/EditFacilityUserRoleSheet.tsx +++ b/src/pages/Facility/settings/organizations/components/EditFacilityUserRoleSheet.tsx @@ -157,18 +157,22 @@ export default function EditUserRoleSheet({
-
-
- {t("username")} -

{userRole.user.username}

+
+
+
+ {t("username")} +

+ {userRole.user.username} +

+
+
+ + {t("current_role")} + +

{userRole.role.name}

+
- - {t("current_role")} - -

{userRole.role.name}

-
-
{t("last_login")}{" "} diff --git a/src/pages/Facility/settings/organizations/components/LinkFacilityUserSheet.tsx b/src/pages/Facility/settings/organizations/components/LinkFacilityUserSheet.tsx index c0cb464b2b1..8c7cea2e719 100644 --- a/src/pages/Facility/settings/organizations/components/LinkFacilityUserSheet.tsx +++ b/src/pages/Facility/settings/organizations/components/LinkFacilityUserSheet.tsx @@ -136,16 +136,16 @@ export default function LinkFacilityUserSheet({ {selectedUser && (
-
+
-
- +
+

{selectedUser.first_name} {selectedUser.last_name} - +

{selectedUser.email} @@ -153,7 +153,7 @@ export default function LinkFacilityUserSheet({
-
+
Username

{selectedUser.username} diff --git a/src/pages/Organization/OrganizationUsers.tsx b/src/pages/Organization/OrganizationUsers.tsx index e05e6374097..b81c3313b17 100644 --- a/src/pages/Organization/OrganizationUsers.tsx +++ b/src/pages/Organization/OrganizationUsers.tsx @@ -102,7 +102,7 @@ export default function OrganizationUsers({ id, navOrganizationId }: Props) { return (

-
+
-
+
{ diff --git a/src/pages/Organization/components/LinkUserSheet.tsx b/src/pages/Organization/components/LinkUserSheet.tsx index 967783d61be..a442cdf1a3e 100644 --- a/src/pages/Organization/components/LinkUserSheet.tsx +++ b/src/pages/Organization/components/LinkUserSheet.tsx @@ -111,7 +111,7 @@ export default function LinkUserSheet({ return ( - @@ -135,16 +135,16 @@ export default function LinkUserSheet({ {selectedUser && (
-
+
-
- +
+

{selectedUser.first_name} {selectedUser.last_name} - +

{selectedUser.email} @@ -154,7 +154,7 @@ export default function LinkUserSheet({
Username -

+

{selectedUser.username}

@@ -192,7 +192,6 @@ export default function LinkUserSheet({
-