Remove Manual keyboard-shortcut handle

public/locale/en.json

@@ -1260,6 +1260,8 @@
   "no_notices_for_you": "No notices for you.",
   "no_observations": "No Observations",
   "no_ongoing_medications": "No Ongoing Medications",
+  "no_patient_record_found": "No Patient Records Found",
+  "no_patient_record_text": "No existing records found with this phone number. Would you like to register a new patient?",
   "no_patients": "No patients found",
   "no_patients_found": "No Patients Found",
   "no_patients_found_phone_number": "No patients found with this phone number. Please create a new patient to proceed with booking appointment.",
@@ -1358,6 +1360,7 @@
   "patient__social-profile": "Social Profile",
   "patient__volunteer-contact": "Volunteer Contact",
   "patient_address": "Patient Address",
+  "patient_birth_year_for_identity": "Please enter the patient's year of birth to verify their identity",
   "patient_body": "Patient Body",
   "patient_category": "Patient Category",
   "patient_consultation__admission": "Date of admission",
@@ -1623,6 +1626,7 @@
   "search_icd11_placeholder": "Search for ICD-11 Diagnoses",
   "search_investigation_placeholder": "Search Investigation & Groups",
   "search_medication": "Search Medication",
+  "search_patient_page_text": "Search for existing patients using their phone number or create a new patient record",
   "search_patients": "Search Patients",
   "search_resource": "Search Resource",
   "search_user": "Search User",
@@ -1869,6 +1873,7 @@
   "vaccinated": "Vaccinated",
   "vaccine_name": "Vaccine name",
   "valid_otp_found": "Valid OTP found, Navigating to Appointments",
+  "valid_year_of_birth": "Please enter a valid year of birth (YYYY)",
   "vehicle_preference": "Vehicle preference",
   "vendor_name": "Vendor Name",
   "ventilator_interface": "Respiratory Support Type",
@@ -1878,13 +1883,15 @@
   "ventilator_oxygen_modality": "Oxygen Modality",
   "ventilator_oxygen_modality_oxygen_rate": "Oxygen Flow Rate",
   "ventilator_spo2": "SpO₂",
+  "verify": "Verify",
   "verify_and_link": "Verify and Link",
   "verify_otp": "Verify OTP",
   "verify_otp_error": "Failed to verify OTP. Please try again later.",
   "verify_otp_success": "OTP has been verified successfully.",
   "verify_otp_success_login": "OTP has been verified successfully. Logging in.",
   "verify_patient": "Verify Patient",
   "verify_patient_identifier": "Please verify the patient identifier",
+  "verify_patient_identity": "Verify Patient Identity",
   "verify_using": "Verify Using",
   "video_call": "Video Call",
   "video_conference_link": "Video Conference Link",

src/components/Common/FilePreviewDialog.tsx

@@ -11,6 +11,7 @@ import {
   useState,
 } from "react";
 import { useTranslation } from "react-i18next";
+import useKeyboardShortcut from "use-keyboard-shortcut";
 
 import CareIcon, { IconName } from "@/CAREUI/icons/CareIcon";
 
@@ -152,20 +153,11 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
       : `rotate-${normalizedRotation}`;
   }
 
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (!show) return;
-      if (e.key === "ArrowLeft" && index > 0) {
-        handleNext(index - 1);
-      }
-      if (e.key === "ArrowRight" && index < (uploadedFiles?.length || 0) - 1) {
-        handleNext(index + 1);
-      }
-    };
-
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [show, index, uploadedFiles]);
+  useKeyboardShortcut(["ArrowLeft"], () => index > 0 && handleNext(index - 1));
+  useKeyboardShortcut(
+    ["ArrowRight"],
+    () => index < (uploadedFiles?.length || 0) - 1 && handleNext(index + 1),
+  );
 
   return (
     <DialogModal
@@ -199,7 +191,7 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
                 uploadedFiles[index] &&
                 uploadedFiles[index].created_date && (
                   <p className="mt-1 text-sm text-gray-600">
-                    Created on{" "}
+                    {t("created_on")}{" "}
                     {new Date(
                       uploadedFiles[index].created_date!,
                     ).toLocaleString("en-US", {
@@ -235,9 +227,6 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
                 onClick={() => handleNext(index - 1)}
                 disabled={index <= 0}
                 aria-label="Previous file"
-                onKeyDown={(e) =>
-                  e.key === "ArrowLeft" && handleNext(index - 1)
-                }
               >
                 <CareIcon icon="l-arrow-left" className="h-4 w-4" />
               </Button>
@@ -288,9 +277,6 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
                 onClick={() => handleNext(index + 1)}
                 disabled={index >= uploadedFiles.length - 1}
                 aria-label="Next file"
-                onKeyDown={(e) =>
-                  e.key === "ArrowRight" && handleNext(index + 1)
-                }
               >
                 <CareIcon icon="l-arrow-right" className="h-4 w-4" />
               </Button>

src/components/Patient/PatientIndex.tsx

@@ -1,7 +1,9 @@
 import { useMutation } from "@tanstack/react-query";
 import { navigate } from "raviger";
 import { useCallback, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
+import useKeyboardShortcut from "use-keyboard-shortcut";
 
 import { cn } from "@/lib/utils";
 
@@ -51,6 +53,7 @@ export default function PatientIndex({ facilityId }: { facilityId: string }) {
     results: [],
     count: 0,
   });
+  const { t } = useTranslation();
 
   const handleCreatePatient = useCallback(() => {
     const queryParams = phoneNumber ? { phone_number: phoneNumber } : {};
@@ -60,6 +63,8 @@ export default function PatientIndex({ facilityId }: { facilityId: string }) {
     });
   }, [facilityId, phoneNumber]);
 
+  useKeyboardShortcut(["shift", "p"], handleCreatePatient);
+
   function AddPatientButton({ outline }: { outline?: boolean }) {
     return (
       <Button
@@ -68,7 +73,7 @@ export default function PatientIndex({ facilityId }: { facilityId: string }) {
         onClick={handleCreatePatient}
       >
         <CareIcon icon="l-plus" className="h-4 w-4" />
-        Add New Patient
+        {t("add_new_patient")}
         <kbd
           className={cn(
             "hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex",
@@ -87,7 +92,7 @@ export default function PatientIndex({ facilityId }: { facilityId: string }) {
     {
       key: "phone_number",
       type: "phone" as const,
-      placeholder: "Search by phone number",
+      placeholder: t("search_by_phone_number"),
       value: phoneNumber,
       shortcutKey: "p",
     },
@@ -122,7 +127,7 @@ export default function PatientIndex({ facilityId }: { facilityId: string }) {
 
   const handleVerify = () => {
     if (!selectedPatient || !yearOfBirth || yearOfBirth.length !== 4) {
-      toast.error("Please enter a valid year of birth (YYYY)");
+      toast.error(t("valid_year_of_birth"));
       return;
     }
 
@@ -141,18 +146,6 @@ export default function PatientIndex({ facilityId }: { facilityId: string }) {
     }
   }, [phoneNumber, listPatients]);
 
-  useEffect(() => {
-    function handleKeyPress(event: KeyboardEvent) {
-      if (event.shiftKey && (event.key === "p" || event.key === "P")) {
-        event.preventDefault();
-        handleCreatePatient();
-      }
-    }
-
-    window.addEventListener("keydown", handleKeyPress);
-    return () => window.removeEventListener("keydown", handleKeyPress);
-  }, [handleCreatePatient]);
-
   return (
     <div>
       <div className="container max-w-5xl mx-auto py-6">
@@ -162,11 +155,10 @@ export default function PatientIndex({ facilityId }: { facilityId: string }) {
         <div className="space-y-6 mt-6">
           <div className="text-center space-y-2">
             <h1 className="text-3xl font-bold tracking-tight">
-              Search Patients
+              {t("search_patients")}
             </h1>
             <p className="text-muted-foreground">
-              Search for existing patients using their phone number or create a
-              new patient record
+              {t("search_patient_page_text")}
             </p>
           </div>
 
@@ -190,11 +182,10 @@ export default function PatientIndex({ facilityId }: { facilityId: string }) {
                       <div>
                         <div className="flex flex-col items-center justify-center py-10 text-center">
                           <h3 className="text-lg font-semibold">
-                            No Patient Records Found
+                            {t("no_patient_record_found")}
                           </h3>
                           <p className="text-sm text-muted-foreground mb-6">
-                            No existing records found with this phone number.
-                            Would you like to register a new patient?
+                            {t("no_patient_record_text")}
                           </p>
                           <AddPatientButton outline />
                         </div>
@@ -205,10 +196,10 @@ export default function PatientIndex({ facilityId }: { facilityId: string }) {
                           <TableHeader>
                             <TableRow>
                               <TableHead className="w-[300px]">
-                                Patient Name
+                                {t("patient_name")}
                               </TableHead>
-                              <TableHead>Phone Number</TableHead>
-                              <TableHead>Gender</TableHead>
+                              <TableHead>{t("phone_number")}</TableHead>
+                              <TableHead>{t("gender")}</TableHead>
                             </TableRow>
                           </TableHeader>
                           <TableBody>
@@ -246,15 +237,15 @@ export default function PatientIndex({ facilityId }: { facilityId: string }) {
       <Dialog open={verificationOpen} onOpenChange={setVerificationOpen}>
         <DialogContent>
           <DialogHeader>
-            <DialogTitle>Verify Patient Identity</DialogTitle>
+            <DialogTitle>{t("verify_patient_identity")}</DialogTitle>
             <DialogDescription>
-              Please enter the patient's year of birth to verify their identity
+              {t("patient_birth_year_for_identity")}
             </DialogDescription>
           </DialogHeader>
           <div className="py-4">
             <Input
               type="text"
-              placeholder="Year of Birth (YYYY)"
+              placeholder={`${t("year_of_birth")} (YYYY)`}
               value={yearOfBirth}
               onChange={(e) => {
                 const value = e.target.value;
@@ -269,9 +260,9 @@ export default function PatientIndex({ facilityId }: { facilityId: string }) {
               variant="outline"
               onClick={() => setVerificationOpen(false)}
             >
-              Cancel
+              {t("cancel")}
             </Button>
-            <Button onClick={handleVerify}>Verify</Button>
+            <Button onClick={handleVerify}>{t("verify")}</Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>

src/components/ui/sidebar.tsx

@@ -2,6 +2,7 @@ import { Slot } from "@radix-ui/react-slot";
 import { VariantProps, cva } from "class-variance-authority";
 import { PanelLeftClose, PanelRightClose } from "lucide-react";
 import * as React from "react";
+import useKeyboardShortcut from "use-keyboard-shortcut";
 
 import { cn } from "@/lib/utils";
 
@@ -19,6 +20,8 @@ import {
 
 import { useIsMobile } from "@/hooks/use-mobile";
 
+import { isAppleDevice } from "@/Utils/utils";
+
 const SIDEBAR_COOKIE_NAME = "sidebar:state";
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 const SIDEBAR_WIDTH = "16rem";
@@ -97,20 +100,10 @@ const SidebarProvider = React.forwardRef<
     }, [isMobile, setOpen, setOpenMobile]);
 
     // Adds a keyboard shortcut to toggle the sidebar.
-    React.useEffect(() => {
-      const handleKeyDown = (event: KeyboardEvent) => {
-        if (
-          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
-          (event.metaKey || event.ctrlKey)
-        ) {
-          event.preventDefault();
-          toggleSidebar();
-        }
-      };
-
-      window.addEventListener("keydown", handleKeyDown);
-      return () => window.removeEventListener("keydown", handleKeyDown);
-    }, [toggleSidebar]);
+    useKeyboardShortcut(
+      [isAppleDevice ? "Meta" : "Control", SIDEBAR_KEYBOARD_SHORTCUT],
+      toggleSidebar,
+    );
 
     // We add a state so that we can do data-state="expanded" or "collapsed".
     // This makes it easier to style the sidebar with Tailwind classes.