Date handling in DOB section

src/components/Patient/PatientRegistration.tsx

@@ -175,7 +175,11 @@ export default function PatientRegistration(
     },
   });
 
-  const { mutate: updatePatient, isPending: isUpdatingPatient } = useMutation({
+  const {
+    mutate: updatePatient,
+    isPending: isUpdatingPatient,
+    isSuccess: isUpdateSuccess,
+  } = useMutation({
     mutationFn: mutate(routes.updatePatient, {
       pathParams: { id: patientId || "" },
     }),
@@ -291,7 +295,7 @@ export default function PatientRegistration(
   useNavigationPrompt(
     form.formState.isDirty &&
       !isCreatingPatient &&
-      !isUpdatingPatient &&
+      !(isUpdatingPatient || isUpdateSuccess) &&
       !showDuplicate,
     t("unsaved_changes"),
   );

src/components/ui/date-field.tsx

@@ -45,42 +45,53 @@ export default function DateField({
     const newDay = e.target.value;
     setDay(newDay);
 
+    // Check if change is from spinner (stepUp/stepDown) vs keyboard input
+    const isFromSpinner =
+      e.nativeEvent instanceof InputEvent &&
+      (e.nativeEvent as InputEvent).inputType === "insertReplacementText";
+
     if (
-      newDay.length === 2 &&
+      (isFromSpinner || newDay.length === 2) &&
       parseInt(newDay) >= 1 &&
       parseInt(newDay) <= 31
     ) {
-      if (isValidDate(year, month, newDay) && onChange) {
+      const modifiedDay = isFromSpinner ? newDay.padStart(2, "0") : newDay;
+      if (isValidDate(year, month, modifiedDay) && onChange) {
         const updatedDate = new Date(
           parseInt(year),
           parseInt(month) - 1,
-          parseInt(newDay),
+          parseInt(modifiedDay),
         );
         onChange(updatedDate);
       }
-      document.getElementById(`${id}-month-input`)?.focus();
     }
   };
 
   const handleMonthChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newMonth = e.target.value;
     setMonth(newMonth);
 
+    // Check if change is from spinner (stepUp/stepDown) vs keyboard input
+    const isFromSpinner =
+      e.nativeEvent instanceof InputEvent &&
+      (e.nativeEvent as InputEvent).inputType === "insertReplacementText";
+
     if (
-      newMonth.length === 2 &&
+      (isFromSpinner || newMonth.length === 2) &&
       parseInt(newMonth) >= 1 &&
       parseInt(newMonth) <= 12
     ) {
-      if (isValidDate(year, newMonth, day) && onChange) {
+      const modifiedMonth = isFromSpinner
+        ? newMonth.padStart(2, "0")
+        : newMonth;
+      if (isValidDate(year, modifiedMonth, day) && onChange) {
         const updatedDate = new Date(
           parseInt(year),
-          parseInt(newMonth) - 1,
+          parseInt(modifiedMonth) - 1,
           parseInt(day),
         );
         onChange(updatedDate);
       }
-
-      document.getElementById(`${id}-year-input`)?.focus();
     }
   };
 
@@ -100,6 +111,38 @@ export default function DateField({
     }
   };
 
+  // Handle day blur to pad single digit values
+  const handleDayBlur = () => {
+    if (day.length === 1 && parseInt(day) >= 1 && parseInt(day) <= 9) {
+      const paddedDay = day.padStart(2, "0");
+      setDay(paddedDay);
+      if (isValidDate(year, month, paddedDay) && onChange) {
+        const updatedDate = new Date(
+          parseInt(year),
+          parseInt(month) - 1,
+          parseInt(paddedDay),
+        );
+        onChange(updatedDate);
+      }
+    }
+  };
+
+  // Handle month blur to pad single digit values
+  const handleMonthBlur = () => {
+    if (month.length === 1 && parseInt(month) >= 1) {
+      const paddedMonth = month.padStart(2, "0");
+      setMonth(paddedMonth);
+      if (isValidDate(year, paddedMonth, day) && onChange) {
+        const updatedDate = new Date(
+          parseInt(year),
+          parseInt(paddedMonth) - 1,
+          parseInt(day),
+        );
+        onChange(updatedDate);
+      }
+    }
+  };
+
   return (
     <div className="flex items-center gap-2">
       <div className="flex-1">
@@ -109,6 +152,7 @@ export default function DateField({
           placeholder="DD"
           value={day}
           onChange={handleDayChange}
+          onBlur={handleDayBlur}
           min={1}
           max={31}
           id={`${id}-day-input`}
@@ -124,6 +168,7 @@ export default function DateField({
           placeholder="MM"
           value={month}
           onChange={handleMonthChange}
+          onBlur={handleMonthBlur}
           min={1}
           max={12}
           id={`${id}-month-input`}
@@ -140,6 +185,7 @@ export default function DateField({
           value={year}
           onChange={handleYearChange}
           min={1900}
+          max={new Date().getFullYear()}
           id={`${id}-year-input`}
           data-cy={`${id}-year-input`}
           disabled={disabled}

src/pages/Facility/settings/locations/LocationView.tsx

@@ -95,10 +95,10 @@ export default function LocationView({ id, facilityId }: Props) {
 
   return (
     <Page title={location?.name || t("location")}>
-      <div className="space-y-6">
-        <div className="flex justify-between">
-          <div className="flex flex-col justify-between items-start gap-4">
-            <div className="flex items-center gap-4">
+      <div className="my-4 flex flex-col flex-wrap">
+        <div className="py-2 flex flex-wrap justify-between">
+          <div className="flex flex-col flex-wrap justify-between items-start gap-4">
+            <div className="flex flex-wrap items-center gap-4 py-2">
               <h2 className="text-lg font-semibold">{t("locations")}</h2>
               <Badge variant="outline">
                 {getLocationFormLabel(location?.form)}
@@ -117,15 +117,15 @@ export default function LocationView({ id, facilityId }: Props) {
                 </Button>
               )}
             </div>
-            <div className="w-72">
+            <div className="flex flex-wrap w-72">
               <Input
                 placeholder={t("search_by_name")}
                 value={searchQuery}
                 onChange={(e) => {
                   setSearchQuery(e.target.value);
                   setPage(1);
                 }}
-                className="w-full"
+                className="w-full flex flex-wrap"
               />
             </div>
           </div>
@@ -136,7 +136,7 @@ export default function LocationView({ id, facilityId }: Props) {
               currentOrganizations={locationOrganizations.results}
               facilityId={facilityId}
               trigger={
-                <Button variant="outline">
+                <Button variant="outline" className="py-2 my-2 ">
                   <CareIcon icon="l-building" className="h-4 w-4 mr-2" />
                   {t("manage_organizations")}
                 </Button>

src/pages/Organization/OrganizationUsers.tsx

@@ -57,7 +57,7 @@ export default function OrganizationUsers({ id, navOrganizationId }: Props) {
   return (
     <OrganizationLayout id={id} navOrganizationId={navOrganizationId}>
       <div className="space-y-6">
-        <div className="flex justify-between items-center">
+        <div className="justify-between items-center flex flex-wrap">
           <div className="mt-1 flex flex-col justify-start space-y-2 md:flex-row md:justify-between md:space-y-0">
             <EntityBadge
               title={t("users")}
@@ -66,7 +66,7 @@ export default function OrganizationUsers({ id, navOrganizationId }: Props) {
               translationParams={{ entity: "User" }}
             />
           </div>
-          <div className="flex gap-2">
+          <div className="gap-2 flex flex-wrap mt-2">
             <AddUserSheet
               open={openAddUserSheet}
               setOpen={(open) => {

src/pages/Organization/components/AddUserSheet.tsx

@@ -33,7 +33,7 @@ export default function AddUserSheet({
   return (
     <Sheet open={open} onOpenChange={setOpen}>
       <SheetTrigger asChild>
-        <Button variant="outline" data-cy="add-user-button" className="ml-3">
+        <Button variant="outline" data-cy="add-user-button">
           <CareIcon icon="l-plus" className="mr-2 h-4 w-4" />
           {t("add_user")}
         </Button>

src/pages/Organization/components/LinkUserSheet.tsx

@@ -111,7 +111,7 @@ export default function LinkUserSheet({
   return (
     <Sheet open={open} onOpenChange={setOpen}>
       <SheetTrigger asChild>
-        <Button>
+        <Button variant="primary_gradient">
           <CareIcon icon="l-plus" className="mr-2 h-4 w-4" />
           Link User
         </Button>