From 914c268ef764eb0abdc139f432589982f1fc46a6 Mon Sep 17 00:00:00 2001
From: Behera Manav <manavbehera123@gmail.com>
Date: Fri, 28 Feb 2025 19:31:11 +0530
Subject: [PATCH 1/3] fix(pagination): auto-reset page on organization change

---
 src/pages/Organization/OrganizationView.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/pages/Organization/OrganizationView.tsx b/src/pages/Organization/OrganizationView.tsx
index 88cb629baf1..be61d1c0e5f 100644
--- a/src/pages/Organization/OrganizationView.tsx
+++ b/src/pages/Organization/OrganizationView.tsx
@@ -105,7 +105,11 @@ export default function OrganizationView({ id, navOrganizationId }: Props) {
                               )}
                             </div>
                           </div>
-                          <Button variant="link" asChild>
+                          <Button
+                            variant="link"
+                            asChild
+                            onClick={() => setPage(1)}
+                          >
                             <Link href={`${baseUrl}/children/${orgChild.id}`}>
                               {t("view_details")}
                               <CareIcon

From e81b57910f90a236c8ead65f02c2562460b0e6e0 Mon Sep 17 00:00:00 2001
From: Behera Manav <manavbehera123@gmail.com>
Date: Sat, 1 Mar 2025 09:16:56 +0530
Subject: [PATCH 2/3] fix(pagination): reset page to 1 when id changes using
 use-effect

---
 src/pages/Organization/OrganizationView.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/pages/Organization/OrganizationView.tsx b/src/pages/Organization/OrganizationView.tsx
index be61d1c0e5f..86ec78c8ecc 100644
--- a/src/pages/Organization/OrganizationView.tsx
+++ b/src/pages/Organization/OrganizationView.tsx
@@ -1,6 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { Link } from "raviger";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
@@ -44,6 +44,10 @@ export default function OrganizationView({ id, navOrganizationId }: Props) {
     }),
   });
 
+  useEffect(() => {
+    setPage(1);
+  }, [id]);
+
   // Hack for the sidebar to work
   const baseUrl = navOrganizationId
     ? `/organization/${navOrganizationId}`
@@ -105,11 +109,7 @@ export default function OrganizationView({ id, navOrganizationId }: Props) {
                               )}
                             </div>
                           </div>
-                          <Button
-                            variant="link"
-                            asChild
-                            onClick={() => setPage(1)}
-                          >
+                          <Button variant="link" asChild>
                             <Link href={`${baseUrl}/children/${orgChild.id}`}>
                               {t("view_details")}
                               <CareIcon

From 4bde3e541a4beef83e321df3dab733c5b1746675 Mon Sep 17 00:00:00 2001
From: Behera Manav <manavbehera123@gmail.com>
Date: Sun, 9 Mar 2025 11:35:39 +0530
Subject: [PATCH 3/3] fix(pagination): added page query parameter to the url
 for pagination

---
 src/Routers/routes/OrganizationRoutes.tsx     | 58 ++++++++++++++-----
 .../Organization/OrganizationFacilities.tsx   |  8 ++-
 .../Organization/OrganizationPatients.tsx     |  8 ++-
 src/pages/Organization/OrganizationUsers.tsx  | 13 ++++-
 src/pages/Organization/OrganizationView.tsx   | 32 +++++-----
 .../components/OrganizationLayout.tsx         | 10 ++--
 src/pages/UserDashboard.tsx                   |  2 +-
 7 files changed, 94 insertions(+), 37 deletions(-)

diff --git a/src/Routers/routes/OrganizationRoutes.tsx b/src/Routers/routes/OrganizationRoutes.tsx
index d6e83cb4f0f..036b49638e2 100644
--- a/src/Routers/routes/OrganizationRoutes.tsx
+++ b/src/Routers/routes/OrganizationRoutes.tsx
@@ -7,29 +7,61 @@ import OrganizationView from "@/pages/Organization/OrganizationView";
 
 const OrganizationRoutes: AppRoutes = {
   "/organization": () => <OrganizationIndex />,
-  "/organization/:id": ({ id }) => <OrganizationView id={id} />,
-  "/organization/:id/users": ({ id }) => <OrganizationUsers id={id} />,
-  "/organization/:id/patients": ({ id }) => <OrganizationPatients id={id} />,
-  "/organization/:id/facilities": ({ id }) => (
-    <OrganizationFacilities id={id} />
+  "/organization/:id/:page": ({ id, page }) => (
+    <OrganizationView id={id} page={Number(page || 1)} />
   ),
-  "/organization/:navOrganizationId/children/:id": ({
+  "/organization/:id/:page/users": ({ id, page }) => (
+    <OrganizationUsers id={id} page={Number(page || 1)} />
+  ),
+  "/organization/:id/:page/patients": ({ id, page }) => (
+    <OrganizationPatients id={id} page={Number(page || 1)} />
+  ),
+  "/organization/:id/:page/facilities": ({ id, page }) => (
+    <OrganizationFacilities id={id} page={Number(page || 1)} />
+  ),
+  "/organization/:navOrganizationId/children/:id/:page": ({
     navOrganizationId,
     id,
-  }) => <OrganizationView id={id} navOrganizationId={navOrganizationId} />,
-  "/organization/:navOrganizationId/children/:id/users": ({
+    page,
+  }) => (
+    <OrganizationView
+      navOrganizationId={navOrganizationId}
+      id={id}
+      page={Number(page || 1)}
+    />
+  ),
+  "/organization/:navOrganizationId/children/:id/:page/users": ({
     navOrganizationId,
     id,
-  }) => <OrganizationUsers id={id} navOrganizationId={navOrganizationId} />,
-  "/organization/:navOrganizationId/children/:id/patients": ({
+    page,
+  }) => (
+    <OrganizationUsers
+      id={id}
+      navOrganizationId={navOrganizationId}
+      page={Number(page || 1)}
+    />
+  ),
+  "/organization/:navOrganizationId/children/:id/:page/patients": ({
     navOrganizationId,
     id,
-  }) => <OrganizationPatients id={id} navOrganizationId={navOrganizationId} />,
-  "/organization/:navOrganizationId/children/:id/facilities": ({
+    page,
+  }) => (
+    <OrganizationPatients
+      id={id}
+      navOrganizationId={navOrganizationId}
+      page={Number(page || 1)}
+    />
+  ),
+  "/organization/:navOrganizationId/children/:id/:page/facilities": ({
     navOrganizationId,
     id,
+    page,
   }) => (
-    <OrganizationFacilities id={id} navOrganizationId={navOrganizationId} />
+    <OrganizationFacilities
+      id={id}
+      navOrganizationId={navOrganizationId}
+      page={Number(page || 1)}
+    />
   ),
 };
 
diff --git a/src/pages/Organization/OrganizationFacilities.tsx b/src/pages/Organization/OrganizationFacilities.tsx
index 897e04a939b..982dda9b164 100644
--- a/src/pages/Organization/OrganizationFacilities.tsx
+++ b/src/pages/Organization/OrganizationFacilities.tsx
@@ -25,11 +25,13 @@ import OrganizationLayout from "./components/OrganizationLayout";
 interface Props {
   id: string;
   navOrganizationId?: string;
+  page: number;
 }
 
 export default function OrganizationFacilities({
   id,
   navOrganizationId,
+  page,
 }: Props) {
   const { t } = useTranslation();
 
@@ -56,7 +58,11 @@ export default function OrganizationFacilities({
   }
 
   return (
-    <OrganizationLayout id={id} navOrganizationId={navOrganizationId}>
+    <OrganizationLayout
+      id={id}
+      navOrganizationId={navOrganizationId}
+      page={page}
+    >
       <div className="space-y-6">
         <div className="flex justify-between items-center">
           <div className="mt-1 flex flex-col justify-start space-y-2 md:flex-row md:justify-between md:space-y-0">
diff --git a/src/pages/Organization/OrganizationPatients.tsx b/src/pages/Organization/OrganizationPatients.tsx
index 927cc9062ea..7f2c93d1256 100644
--- a/src/pages/Organization/OrganizationPatients.tsx
+++ b/src/pages/Organization/OrganizationPatients.tsx
@@ -26,9 +26,14 @@ import OrganizationLayout from "./components/OrganizationLayout";
 interface Props {
   id: string;
   navOrganizationId?: string;
+  page: number;
 }
 
-export default function OrganizationPatients({ id, navOrganizationId }: Props) {
+export default function OrganizationPatients({
+  id,
+  navOrganizationId,
+  page,
+}: Props) {
   const { t } = useTranslation();
 
   const { qParams, Pagination, advancedFilter, resultsPerPage, updateQuery } =
@@ -95,6 +100,7 @@ export default function OrganizationPatients({ id, navOrganizationId }: Props) {
       id={id}
       navOrganizationId={navOrganizationId}
       setOrganization={setOrganization}
+      page={page}
     >
       <div className="space-y-6">
         <div className="flex justify-between items-center">
diff --git a/src/pages/Organization/OrganizationUsers.tsx b/src/pages/Organization/OrganizationUsers.tsx
index 70377f2ee13..4b53d82e330 100644
--- a/src/pages/Organization/OrganizationUsers.tsx
+++ b/src/pages/Organization/OrganizationUsers.tsx
@@ -29,9 +29,14 @@ import OrganizationLayout from "./components/OrganizationLayout";
 interface Props {
   id: string;
   navOrganizationId?: string;
+  page: number;
 }
 
-export default function OrganizationUsers({ id, navOrganizationId }: Props) {
+export default function OrganizationUsers({
+  id,
+  navOrganizationId,
+  page,
+}: Props) {
   const { qParams, updateQuery, Pagination, resultsPerPage } = useFilters({
     limit: 15,
     cacheBlacklist: ["name", "phone_number"],
@@ -102,7 +107,11 @@ export default function OrganizationUsers({ id, navOrganizationId }: Props) {
   }
 
   return (
-    <OrganizationLayout id={id} navOrganizationId={navOrganizationId}>
+    <OrganizationLayout
+      id={id}
+      navOrganizationId={navOrganizationId}
+      page={page}
+    >
       <div className="space-y-6">
         <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">
diff --git a/src/pages/Organization/OrganizationView.tsx b/src/pages/Organization/OrganizationView.tsx
index 86ec78c8ecc..bc7c13a53da 100644
--- a/src/pages/Organization/OrganizationView.tsx
+++ b/src/pages/Organization/OrganizationView.tsx
@@ -1,6 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
-import { Link } from "raviger";
-import { useEffect, useState } from "react";
+import { Link, navigate } from "raviger";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
@@ -23,12 +23,15 @@ import OrganizationLayout from "./components/OrganizationLayout";
 interface Props {
   id: string;
   navOrganizationId?: string;
+  page: number;
 }
 
-export default function OrganizationView({ id, navOrganizationId }: Props) {
+export default function OrganizationView({
+  id,
+  navOrganizationId,
+  page,
+}: Props) {
   const { t } = useTranslation();
-
-  const [page, setPage] = useState(1);
   const [searchQuery, setSearchQuery] = useState("");
   const limit = 12; // 3x4 grid
 
@@ -44,17 +47,17 @@ export default function OrganizationView({ id, navOrganizationId }: Props) {
     }),
   });
 
-  useEffect(() => {
-    setPage(1);
-  }, [id]);
-
   // Hack for the sidebar to work
   const baseUrl = navOrganizationId
-    ? `/organization/${navOrganizationId}`
+    ? `/organization/${id}`
     : `/organization/${id}`;
 
   return (
-    <OrganizationLayout id={id} navOrganizationId={navOrganizationId}>
+    <OrganizationLayout
+      id={id}
+      navOrganizationId={navOrganizationId}
+      page={page}
+    >
       <div className="space-y-6">
         <div className="flex flex-col justify-between items-start gap-4">
           <div className="mt-1 flex flex-col justify-start space-y-2 md:flex-row md:justify-between md:space-y-0">
@@ -70,8 +73,7 @@ export default function OrganizationView({ id, navOrganizationId }: Props) {
               placeholder="Search by name..."
               value={searchQuery}
               onChange={(e) => {
-                setSearchQuery(e.target.value);
-                setPage(1); // Reset to first page on search
+                setSearchQuery(e.target.value); // Reset to first page on search
               }}
               className="w-full"
             />
@@ -110,7 +112,7 @@ export default function OrganizationView({ id, navOrganizationId }: Props) {
                             </div>
                           </div>
                           <Button variant="link" asChild>
-                            <Link href={`${baseUrl}/children/${orgChild.id}`}>
+                            <Link href={`${baseUrl}/children/${orgChild.id}/1`}>
                               {t("view_details")}
                               <CareIcon
                                 icon="l-arrow-right"
@@ -142,7 +144,7 @@ export default function OrganizationView({ id, navOrganizationId }: Props) {
               <div className="flex justify-center">
                 <Pagination
                   data={{ totalCount: children.count }}
-                  onChange={(page, _) => setPage(page)}
+                  onChange={(page, _) => navigate(`${baseUrl}/${page}`)}
                   defaultPerPage={limit}
                   cPage={page}
                 />
diff --git a/src/pages/Organization/components/OrganizationLayout.tsx b/src/pages/Organization/components/OrganizationLayout.tsx
index 2b3a3da33a4..b36acf5ef94 100644
--- a/src/pages/Organization/components/OrganizationLayout.tsx
+++ b/src/pages/Organization/components/OrganizationLayout.tsx
@@ -23,6 +23,7 @@ interface Props {
   navOrganizationId?: string;
   id: string;
   children: React.ReactNode;
+  page: number;
   setOrganization?: (org: Organization) => void;
 }
 
@@ -36,6 +37,7 @@ interface NavItem {
 export default function OrganizationLayout({
   id,
   navOrganizationId,
+  page,
   children,
   setOrganization,
 }: Props) {
@@ -71,25 +73,25 @@ export default function OrganizationLayout({
 
   const navItems: NavItem[] = [
     {
-      path: `${baseUrl}/${id}`,
+      path: `${baseUrl}/${id}/${page}`,
       title: "Organizations",
       icon: "d-hospital",
       visibility: hasPermission("can_view_organization", org.permissions),
     },
     {
-      path: `${baseUrl}/${id}/users`,
+      path: `${baseUrl}/${id}/${page}/users`,
       title: "Users",
       icon: "d-people",
       visibility: hasPermission("can_list_organization_users", org.permissions),
     },
     {
-      path: `${baseUrl}/${id}/patients`,
+      path: `${baseUrl}/${id}/${page}/patients`,
       title: "Patients",
       icon: "d-patient",
       visibility: hasPermission("can_list_patients", org.permissions),
     },
     {
-      path: `${baseUrl}/${id}/facilities`,
+      path: `${baseUrl}/${id}/${page}/facilities`,
       title: "Facilities",
       icon: "d-hospital",
       visibility: hasPermission("can_read_facility", org.permissions),
diff --git a/src/pages/UserDashboard.tsx b/src/pages/UserDashboard.tsx
index 573d51c0032..79e1f87c092 100644
--- a/src/pages/UserDashboard.tsx
+++ b/src/pages/UserDashboard.tsx
@@ -126,7 +126,7 @@ export default function UserDashboard() {
             data-cy="organization-list"
           >
             {organizations.map((org) => (
-              <Link key={org.id} href={`/organization/${org.id}`}>
+              <Link key={org.id} href={`/organization/${org.id}/1`}>
                 <Card className="transition-all hover:shadow-md hover:border-primary/20">
                   <CardContent className="flex items-center gap-3 p-3 md:p-4">
                     <Avatar