Fix Online Status Indicator in Organization Tab (#9728)

public/locale/en.json

@@ -28,7 +28,6 @@
   "CONSCIOUSNESS_LEVEL__RESPONDS_TO_PAIN": "Responds to Pain",
   "CONSCIOUSNESS_LEVEL__RESPONDS_TO_VOICE": "Responds to Voice",
   "CONSCIOUSNESS_LEVEL__UNRESPONSIVE": "Unresponsive",
-  "Cancel": "Cancel",
   "DAYS_OF_WEEK_SHORT__0": "Mon",
   "DAYS_OF_WEEK_SHORT__1": "Tue",
   "DAYS_OF_WEEK_SHORT__2": "Wed",
@@ -355,6 +354,7 @@
   "age_input_warning_bold": "Recommended only when the patient's date of birth is unknown",
   "age_less_than_0": "Age cannot be less than 0",
   "age_notice": "Only year of birth will be stored for age.",
+  "ago": "ago",
   "all": "All",
   "all_changes_have_been_saved": "All changes have been saved",
   "all_details": "All Details",
@@ -486,6 +486,7 @@
   "cancelled": "Cancelled",
   "capture": "Capture",
   "capture_cover_photo": "Capture Cover Photo",
+  "card": "Card",
   "care": "CARE",
   "category": "Category",
   "caution": "Caution",
@@ -658,6 +659,7 @@
   "csv_file_in_the_specified_format": "Select a CSV file in the specified format",
   "current_address": "Current Address",
   "current_password": "Current Password",
+  "current_role": "Current Role",
   "current_status": "Current Status",
   "customer_support_email": "Customer Support Email",
   "customer_support_name": "Customer Support Name",
@@ -678,7 +680,6 @@
   "date_of_return": "Date of Return",
   "date_of_test": "Date of sample collection for Covid testing",
   "day": "Day",
-  "days": "Days",
   "death_report": "Death Report",
   "delete": "Delete",
   "delete_account": "Delete account",
@@ -767,7 +768,9 @@
   "edit_policy_description": "Add or edit patient's insurance details",
   "edit_prescriptions": "Edit Prescriptions",
   "edit_profile": "Edit Profile",
+  "edit_role": "Edit Role",
   "edit_user_profile": "Edit Profile",
+  "edit_user_role": "Edit User Role",
   "edited_by": "Edited by",
   "edited_on": "Edited on",
   "education": "Education",
@@ -1033,7 +1036,6 @@
   "home_facility_cleared_success": "Home Facility cleared successfully",
   "home_facility_updated_error": "Error while updating Home Facility",
   "home_facility_updated_success": "Home Facility updated successfully",
-  "hours": "hours",
   "hubs": "Hub Facilities",
   "i_declare": "I hereby declare that:",
   "icd11_as_recommended": "As per ICD-11 recommended by WHO",
@@ -1117,6 +1119,7 @@
   "last_administered": "Last administered",
   "last_discharge_reason": "Last Discharge Reason",
   "last_edited": "Last Edited",
+  "last_login": "Last Login",
   "last_modified": "Last Modified",
   "last_modified_by": "Last Modified By",
   "last_name": "Last Name",
@@ -1230,6 +1233,7 @@
   "nationality": "Nationality",
   "nearby_facilities": "Nearby Facilities",
   "never": "never",
+  "never_logged_in": "Never Logged In",
   "new_password": "New Password",
   "new_password_confirmation": "Confirm New Password",
   "new_password_same_as_old": "New password is same as old password, please enter a different new password.",
@@ -1546,6 +1550,8 @@
   "reload": "Reload",
   "remove": "Remove",
   "remove_user": "Remove User",
+  "remove_user_organization": "Remove User from Organization",
+  "remove_user_warn": "Are you sure you want to remove {{firstName}} {{lastName}} from this organization? This action cannot be undone.",
   "rename": "Rename",
   "replace_home_facility": "Replace Home Facility",
   "replace_home_facility_confirm": "Are you sure you want to replace",
@@ -1643,14 +1649,17 @@
   "select_all": "Select All",
   "select_date": "Select date",
   "select_department": "Select Department",
+  "select_diff_role": "Please select a different role",
   "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",
   "select_investigation": "Select Investigations (all investigations will be selected by default)",
   "select_investigation_groups": "Select Investigation Groups",
   "select_investigations": "Select Investigations",
   "select_local_body": "Select Local Body",
+  "select_new_role": "Select New Role",
   "select_patient": "Select Patient",
   "select_policy": "Select an Insurance Policy",
   "select_policy_to_add_items": "Select a Policy to Add Items",
@@ -1837,9 +1846,11 @@
   "update_preset_position_to_current": "Update preset's position to camera's current position",
   "update_record": "Update Record",
   "update_record_for_asset": "Update record for asset",
+  "update_role": "Update Role",
   "update_shift_request": "Update Shift Request",
   "update_status": "Update Status",
   "update_status_details": "Update Status/Details",
+  "update_user_role_organization": "Update the role for this user in the organization",
   "update_volunteer": "Reassign Volunteer",
   "updated": "Updated",
   "updated_on": "Updated On",
@@ -1869,6 +1880,8 @@
   "user_not_available_for_appointments": "This user is not available for appointments",
   "user_qualifications": "Qualifications",
   "user_qualifications_note": "Enter appropriate qualifications for this user",
+  "user_removed_success": "User removed from organization successfully",
+  "user_role_update_success": "User role updated successfully",
   "user_type": "User Type",
   "username": "Username",
   "username_already_exists": "This username already exists",
@@ -1909,6 +1922,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/Users/UserListAndCard.tsx

@@ -4,6 +4,8 @@ import { useTranslation } from "react-i18next";
 import Card from "@/CAREUI/display/Card";
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
+import { Badge } from "@/components/ui/badge";
+
 import { Avatar } from "@/components/Common/Avatar";
 import Tabs from "@/components/Common/Tabs";
 import SearchInput from "@/components/Form/SearchInput";
@@ -14,12 +16,7 @@ import useWindowDimensions from "@/hooks/useWindowDimensions";
 
 import { USER_TYPE_OPTIONS } from "@/common/constants";
 
-import {
-  classNames,
-  formatName,
-  isUserOnline,
-  relativeTime,
-} from "@/Utils/utils";
+import { formatName, isUserOnline, relativeTime } from "@/Utils/utils";
 import { UserBase } from "@/types/user/user";
 
 export const GetUserTypes = () => {
@@ -65,11 +62,7 @@ const GetDetailsButton = (username: string) => {
     </div>
   );
 };
-const getNameAndStatusCard = (
-  user: UserBase,
-  cur_online: boolean,
-  showDetailsButton = false,
-) => {
+const getNameAndStatusCard = (user: UserBase, showDetailsButton = false) => {
   return (
     <div>
       <div className="flex flex-row justify-between gap-x-3">
@@ -78,14 +71,7 @@ const getNameAndStatusCard = (
             <h1 id={`name-${user.username}`} className="text-base font-bold">
               {formatName(user)}
             </h1>
-            <div
-              className={classNames(
-                "flex items-center gap-2 rounded-full px-3 py-1",
-                cur_online ? "bg-green-100" : "bg-gray-100",
-              )}
-            >
-              <UserStatusIndicator user={user} />
-            </div>
+            <UserStatusIndicator user={user} />
           </div>
           <span
             className="text-sm text-gray-500"
@@ -102,46 +88,41 @@ const getNameAndStatusCard = (
 
 export const UserStatusIndicator = ({
   user,
-  className,
   addPadding = false,
+  className = "",
 }: {
   user: UserBase;
   className?: string;
   addPadding?: boolean;
 }) => {
   const authUser = useAuthUser();
   const isAuthUser = user.id === authUser.external_id;
-  const isOnline = isUserOnline(user) || isAuthUser;
   const { t } = useTranslation();
 
   return (
-    <div
-      className={classNames(
-        "inline-flex items-center gap-2 rounded-full",
-        addPadding ? "px-3 py-1" : "py-px",
-        isOnline ? "bg-green-100" : "bg-gray-100",
-        className,
-      )}
+    <span
+      title={`${new Date(user.last_login).toLocaleString()}`}
+      className={`${addPadding ? "px-3 py-1" : "py-px"} ${className}`}
     >
-      <span
-        className={classNames(
-          "inline-block h-2 w-2 shrink-0 rounded-full",
-          isOnline ? "bg-green-500" : "bg-gray-400",
-        )}
-      ></span>
-      <span
-        className={classNames(
-          "whitespace-nowrap text-xs",
-          isOnline ? "text-green-700" : "text-gray-500",
-        )}
-      >
-        {isOnline
-          ? t("online")
-          : user.last_login
-            ? relativeTime(user.last_login)
-            : t("never")}
-      </span>
-    </div>
+      {isUserOnline(user) || isAuthUser ? (
+        <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">{t("online")}</span>
+        </Badge>
+      ) : user.last_login ? (
+        <Badge variant="secondary" className="bg-yellow-100 whitespace-nowrap">
+          <span className="inline-block h-2 w-2 shrink-0 rounded-full bg-yellow-500 mr-2" />
+          <span className="text-xs text-yellow-700">
+            {relativeTime(user.last_login)}
+          </span>
+        </Badge>
+      ) : (
+        <Badge variant="secondary" className="bg-gray-100 whitespace-nowrap">
+          <span className="inline-block h-2 w-2 shrink-0 rounded-full bg-gray-500 mr-2" />
+          <span className="text-xs text-gray-700">{t("never_logged_in")}</span>
+        </Badge>
+      )}
+    </span>
   );
 };
 const UserCard = ({ user }: { user: UserBase }) => {
@@ -173,7 +154,7 @@ const UserCard = ({ user }: { user: UserBase }) => {
             </div>
             <div className="flex flex-col w-full">
               {!isMediumScreen &&
-                getNameAndStatusCard(user, userOnline, !isLessThanXLargeScreen)}
+                getNameAndStatusCard(user, !isLessThanXLargeScreen)}
               <div className="mt-4 grid grid-cols-2 gap-x-4 gap-y-4">
                 <div className="text-sm">
                   <div className="text-gray-500">{t("role")}</div>
@@ -312,7 +293,7 @@ export default function UserListView({
               text: (
                 <div className="flex items-center gap-2">
                   <CareIcon icon="l-credit-card" className="text-lg" />
-                  <span>Card</span>
+                  <span>{t("card")}</span>
                 </div>
               ),
               value: 0,
@@ -322,7 +303,7 @@ export default function UserListView({
               text: (
                 <div className="flex items-center gap-2">
                   <CareIcon icon="l-list-ul" className="text-lg" />
-                  <span>List</span>
+                  <span>{t("list")}</span>
                 </div>
               ),
               value: 1,
@@ -345,7 +326,7 @@ export default function UserListView({
       ) : (
         <div className="h-full space-y-2 rounded-lg bg-white p-7 shadow">
           <div className="flex w-full items-center justify-center text-xl font-bold text-secondary-500">
-            No Users Found
+            {t("no_users_found")}
           </div>
         </div>
       )}

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, setOpenMobile } = 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