Fix Online Status Indicator in Organization Tab

public/locale/en.json

@@ -1606,6 +1606,7 @@
   "select_all": "Select All",
   "select_date": "Select date",
   "select_eligible_policy": "Select an Eligible Insurance Policy",
+  "select_facility": "Select Facility",
   "select_facility_for_discharged_patients_warning": "Facility needs to be selected to view discharged patients.",
   "select_for_administration": "Select for Administration",
   "select_groups": "Select Groups",
@@ -1866,6 +1867,7 @@
   "view_cns": "View CNS",
   "view_consultation": "View Latest Encounter",
   "view_consultation_and_log_updates": "View Consultation / Log Updates",
+  "view_dashboard": "View Dashboard",
   "view_details": "View Details",
   "view_facility": "View Facility",
   "view_files": "View Files",

src/components/ui/sidebar/facility-switcher.tsx

@@ -1,6 +1,7 @@
 import { CaretSortIcon, DashboardIcon } from "@radix-ui/react-icons";
 import { Hospital } from "lucide-react";
 import { navigate } from "raviger";
+import { useTranslation } from "react-i18next";
 
 import {
   DropdownMenu,
@@ -27,6 +28,7 @@ export function FacilitySwitcher({
   selectedFacility: UserFacilityModel | null;
 }) {
   const { isMobile } = useSidebar();
+  const { t } = useTranslation();
 
   return (
     <SidebarMenu>
@@ -42,7 +44,7 @@ export function FacilitySwitcher({
               </div>
               <div className="grid flex-1 text-left text-sm leading-tight">
                 <span className="truncate font-semibold">
-                  {selectedFacility?.name || "Select Facility"}
+                  {selectedFacility?.name || t("select_facility")}
                 </span>
               </div>
               <CaretSortIcon className="ml-auto" />
@@ -56,10 +58,10 @@ export function FacilitySwitcher({
           >
             <DropdownMenuItem onClick={() => navigate("/")}>
               <DashboardIcon className="size-4" />
-              View Dashboard
+              {t("view_dashboard")}
             </DropdownMenuItem>
             <DropdownMenuSeparator />
-            <DropdownMenuLabel>Facilities</DropdownMenuLabel>
+            <DropdownMenuLabel>{t("facilities")}</DropdownMenuLabel>
             <DropdownMenuSeparator />
             {facilities.map((facility, index) => (
               <DropdownMenuItem

src/pages/FacilityOrganization/FacilityOrganizationUsers.tsx

@@ -1,13 +1,14 @@
 import { useQuery } from "@tanstack/react-query";
 import { useQueryParams } from "raviger";
+import { useTranslation } from "react-i18next";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 
 import { Avatar } from "@/components/Common/Avatar";
+import { UserStatusIndicator } from "@/components/Users/UserListAndCard";
 
 import routes from "@/Utils/request/api";
 import query from "@/Utils/request/query";
@@ -28,6 +29,7 @@ export default function FacilityOrganizationUsers({ id, facilityId }: Props) {
     sheet: string;
     username: string;
   }>();
+  const { t } = useTranslation();
 
   const openAddUserSheet = qParams.sheet === "add";
   const openLinkUserSheet = qParams.sheet === "link";
@@ -70,7 +72,7 @@ export default function FacilityOrganizationUsers({ id, facilityId }: Props) {
     <FacilityOrganizationLayout id={id} facilityId={facilityId}>
       <div className="space-y-6">
         <div className="flex justify-between items-center">
-          <h2 className="text-lg font-semibold">Users</h2>
+          <h2 className="text-lg font-semibold">{t("users")}</h2>
           <div className="flex gap-2">
             <AddUserSheet
               open={openAddUserSheet}
@@ -97,7 +99,7 @@ export default function FacilityOrganizationUsers({ id, facilityId }: Props) {
           {users?.results?.length === 0 ? (
             <Card className="col-span-full">
               <CardContent className="p-6 text-center text-gray-500">
-                No users found.
+                {t("no_users_found")}
               </CardContent>
             </Card>
           ) : (
@@ -121,29 +123,24 @@ export default function FacilityOrganizationUsers({ id, facilityId }: Props) {
                             <span className="text-sm text-gray-500 truncate">
                               {userRole.user.username}
                             </span>
-                            <Badge
-                              variant="secondary"
-                              className="bg-green-100 whitespace-nowrap"
-                            >
-                              <span className="inline-block h-2 w-2 shrink-0 rounded-full bg-green-500 mr-2" />
-                              <span className="text-xs text-green-700">
-                                online
-                              </span>
-                            </Badge>
+                            <UserStatusIndicator
+                              user={userRole.user}
+                              addPadding
+                            />
                           </div>
                         </div>
                       </div>
                     </div>
 
                     <div className="grid grid-cols-2 gap-4 text-sm">
                       <div>
-                        <div className="text-gray-500">Role</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">Phone Number</div>
+                        <div className="text-gray-500">{t("phone_number")}</div>
                         <div className="font-medium truncate">
                           {userRole.user.phone_number}
                         </div>
@@ -165,7 +162,7 @@ export default function FacilityOrganizationUsers({ id, facilityId }: Props) {
                               icon="l-arrow-up-right"
                               className="h-4 w-4"
                             />
-                            <span>More details</span>
+                            <span>{t("more_details")}</span>
                           </Button>
                         }
                       />