GH-75: Making the application mobile responsive

src/components/ShareLinkButton.jsx

@@ -18,7 +18,7 @@ const ShareLinkButton = () => {
         `}
       >
         <Share2 size={22} />
-        <span className="text-sm whitespace-nowrap">Share</span>
+        <span className="text-sm whitespace-nowrap hidden md:block">Share</span>
       </button>
     </div>
   );

src/components/landscapeRequired.jsx

@@ -0,0 +1,44 @@
+import { useEffect, useState } from "react";
+
+export default function LandscapeRequired({
+  smallMaxWidth = 768,
+  children,
+  message = "Rotate your device to landscape 📱↔️"
+}) {
+  // Initialize with safe defaults
+  const [isLandscape, setIsLandscape] = useState(false);
+  const [isSmallScreen, setIsSmallScreen] = useState(false);
+
+  useEffect(() => {
+    const updateSizes = () => {
+      setIsLandscape(window.innerWidth > window.innerHeight);
+      setIsSmallScreen(window.innerWidth < smallMaxWidth);
+    };
+
+    // Set initial values on mount
+    updateSizes();
+
+    window.addEventListener("resize", updateSizes);
+    return () => window.removeEventListener("resize", updateSizes);
+  }, [smallMaxWidth]); // depend on smallMaxWidth prop
+
+  if (isSmallScreen && !isLandscape) {
+    return <div style={overlayStyle}>{message}</div>;
+  }
+
+  return children;
+}
+
+const overlayStyle = {
+  position: "fixed",
+  inset: 0,
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  background: "rgba(0,0,0,0.9)",
+  color: "#fff",
+  fontSize: "20px",
+  textAlign: "center",
+  zIndex: 9999,
+  padding: "16px"
+};

src/components/ministryViewModeToggleButton.jsx

@@ -5,7 +5,7 @@ export default function MinistryViewModeToggleButton({ viewMode, setViewMode })
   const isGraph = viewMode === "Graph";
 
   return (
-    <div className="flex justify-end w-full sm:w-auto">
+    <div className="flex justify-end w-full sm:w-auto landscape:-mt-2 portrait:mt-0">
       <div className="relative flex bg-transparent border border-foreground/80 rounded-md w-38 h-10 select-none">
         <div
           className={`absolute top-0 bottom-0 w-1/2 rounded-md transition-all duration-300 ${

src/pages/HomePage/components/TimeRangeSelector.jsx

@@ -694,10 +694,10 @@ export default function TimeRangeSelector({
   return (
     <div className="bg-background border-b border-border py-6 px-12 w-full mx-auto">
       {/* Presets and calendar */}
-      <div className="pb-4 px-1 text-primary text-md font-semibold">
+      <div className="pb-4 px-1 text-primary text-center md:text-left md:px-0 text-md font-semibold">
         Select a Date range
       </div>
-      <div className="flex gap-2 mb-4 flex-wrap sm:justify-start justify-center">
+      <div className="flex gap-2 mb-2 md:mb-4 flex-wrap sm:justify-start justify-center">
         {/* Year presets */}
         {[
           { label: "1Y", years: 1 },
@@ -1196,8 +1196,8 @@ export default function TimeRangeSelector({
         </div>
 
         {/* Selected range display */}
-        <div className="flex items-center gap-1.5 w-full sm:w-auto ml-auto">
-          <div className="px-2.5 py-1 text-xs rounded-full bg-border border border-border text-primary font-medium">
+        <div className="flex items-center gap-1 w-full justify-center sm:w-auto sm:ml-auto sm:justify-end">
+          <div className="px-2 py-1 text-xs rounded-full bg-border border border-border text-primary font-medium">
             {new Date(
               tempStartDate.toISOString().split("T")[0]
             ).toLocaleDateString("en-GB", {
@@ -1207,7 +1207,7 @@ export default function TimeRangeSelector({
             })}
           </div>
           <span className="text-primary font-medium text-xs">→</span>
-          <div className="px-2.5 py-1 text-xs rounded-full bg-border border border-border text-primary font-medium">
+          <div className="px-2 py-1 text-xs rounded-full bg-border border border-border text-primary font-medium">
             {new Date(
               tempEndDate.toISOString().split("T")[0]
             ).toLocaleDateString("en-GB", {

src/pages/HomePage/screens/HomePage.jsx

@@ -27,6 +27,7 @@ export default function HomePage() {
   const navigate = useNavigate();
   const location = useLocation();
   const { tab } = useParams();
+  const MOBILE_BREAKPOINT = 768;
 
   const selectedTab = tab || "organization";
 
@@ -135,10 +136,15 @@ export default function HomePage() {
       pathname: `/${tabName}`,
       search: params.toString() ? `?${params.toString()}` : "",
     });
+
+    // Close sidebar on mobile after selecting a tab
+    if (window.innerWidth < MOBILE_BREAKPOINT) {
+      setIsExpanded(false);
+    }
   };
 
   return (
-    <div className="flex">
+    <div className="flex relative">
       {/* <ToastContainer
         position="top-center"
         autoClose={5000}
@@ -154,46 +160,59 @@ export default function HomePage() {
         bodyClassName={() => "text-sm"}
         progressClassName="bg-primary"
       /> */}
+      {/* Backdrop overlay for mobile when sidebar is expanded */}
+      {isExpanded && (
+        <div
+          className="fixed inset-0 bg-black/50 z-10 md:hidden"
+          onClick={() => setIsExpanded(false)}
+        />
+      )}
 
-      {/* Sidebar */}
+      {/* Sidebar - Fixed on mobile, normal positioning on desktop */}
       <div
-        className={`fixed top-0 left-0 z-20 h-screen ${isExpanded ? "w-64" : "w-16"
-          } bg-background h-full transition-all ease-in-out flex flex-col items-center p-2 border-r border-border`}
+        className={`md:relative fixed top-0 left-0 z-20 h-screen bg-background transition-all duration-300 ease-in-out flex flex-col items-center p-2 border-r border-border
+          ${isExpanded ? "w-64" : "w-16"}
+        `}
       >
         <TextLogo isExpanded={isExpanded} />
 
-
-
         <nav className="flex flex-col text-foreground w-full gap-1 relative top-0 h-screen mt-4">
           <button
-            className={`${selectedTab === "organization"
-              ? "bg-accent text-primary-foreground font-semibold"
-              : "hover:bg-background-dark/85"
-              }  hover:cursor-pointer ${isExpanded ? "px-4" : "px-0"} py-3 rounded-md transition-all ease-in-out text-left flex items-center`}
+            className={`${
+              selectedTab === "organization"
+                ? "bg-accent text-primary-foreground font-semibold"
+                : "hover:bg-background-dark/85"
+            } hover:cursor-pointer ${
+              isExpanded ? "px-4" : "px-0"
+            } py-3 rounded-md transition-all ease-in-out text-left flex items-center`}
             onClick={() => handleTabChange("organization")}
           >
-            <Binoculars className={`${isExpanded ? "mr-3" : "mx-auto"}`}  />
+            <Binoculars className={`${isExpanded ? "mr-3" : "mx-auto"}`} />
             {isExpanded && "Organization"}
           </button>
           <button
-            className={`${selectedTab === "data"
-              ? "bg-accent text-primary-foreground font-semibold"
-              : "hover:bg-background-dark/85"
-              } hover:cursor-pointer ${isExpanded ? "px-4" : "px-0"} py-3 rounded-md transition-all ease-in-out text-left flex items-center`}
+            className={`${
+              selectedTab === "data"
+                ? "bg-accent text-primary-foreground font-semibold"
+                : "hover:bg-background-dark/85"
+            } hover:cursor-pointer ${
+              isExpanded ? "px-4" : "px-0"
+            } py-3 rounded-md transition-all ease-in-out text-left flex items-center`}
             onClick={() => handleTabChange("data")}
           >
-            <SquareLibrary className={`${isExpanded ? "mr-3" : "mx-auto"}`}  />
+            <SquareLibrary className={`${isExpanded ? "mr-3" : "mx-auto"}`} />
             {isExpanded && "Data"}
           </button>
 
-            <button
-          onClick={() => setIsExpanded(!isExpanded)}
+          <button
+            onClick={() => setIsExpanded(!isExpanded)}
             className="px-3 py-1 absolute bottom-12 left-1/2 -translate-x-1/2 
              flex items-center rounded-md text-primary/80 hover:text-primary 
              cursor-pointer"
           >
-          {isExpanded ? <ChevronLeft /> : <ChevronRight />}
-        </button>
+            {isExpanded ? <ChevronLeft /> : <ChevronRight />}
+          </button>
+
           <Link to={feedbackFormUrl} target="_blank" rel="noopener noreferrer">
             <div className="flex absolute bottom-0 w-full gap-2 justify-center items-center px-3 py-2 rounded-md text-active-green/100 hover:text-active-green bg-active-green/10 hover:bg-active-green/15 border-active-green/15 hover:border-active-green/15 cursor-pointer border duration-1000 transition-all animation">
               <MessageSquareHeart size={22} />
@@ -203,18 +222,19 @@ export default function HomePage() {
         </nav>
       </div>
 
-      {/* Main content */}
+      {/* Main content - Fixed margin on mobile, responsive margin on desktop */}
       <div
-        className={`flex-1 overflow-auto bg-background-dark transition-all ease-in-out animation ${isExpanded ? "ml-64" : "ml-16"
-          } h-screen`}
+        className={`flex-1 overflow-auto bg-background-dark transition-all duration-300 ease-in-out h-screen 
+          ml-16 md:ml-0
+        `}
       >
         {/* Header */}
         <div className="flex justify-between items-center py-2 px-4 md:px-8 lg:px-12 border-b border-border bg-background">
-          <div className="flex gap-2 flex justify-center items-center">
+          <div className="flex gap-2 justify-center items-center">
             <div className="w-[40px]">
               <img src={SlFlag} />
             </div>
-            <h1 className="text-md xl:text-md font-semibold text-primary">
+            <h1 className="text-md xl:text-md font-semibold text-primary hidden md:block">
               Sri Lanka
             </h1>
           </div>
@@ -226,7 +246,7 @@ export default function HomePage() {
             >
               <div className="flex gap-2 justify-center items-center px-3 py-2 rounded-md text-accent/95 hover:text-accent bg-accent/5 hover:bg-accent/10 border-accent/10 hover:border-accent/15 cursor-pointer border">
                 <BookOpenText size={22} />
-                <span>Learn</span>
+                <span className="hidden md:block">Learn</span>
               </div>
             </Link>
             <ShareLinkButton />
@@ -252,4 +272,4 @@ export default function HomePage() {
       </div>
     </div>
   );
-}
+}

src/pages/LandingPage/screens/LandingPage.jsx

@@ -180,7 +180,7 @@ const LandingPage = () => {
                   style={{ transform: `translateX(-${currentIndex * 100}%)` }}
                 >
                   {/* Card 1 */}
-                  <div className="min-w-full 2xl:min-h-[54vh] px-2 border rounded-2xl border-border bg-foreground/8 shadow-2xl">
+                  <div className="min-w-full 2xl:min-h-[54vh] px-2 p-5 md:p-2 border rounded-2xl border-border bg-foreground/8 shadow-2xl">
                     {/* Soft light gradient overlay for frosted effect */}
                     <div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent pointer-events-none" />
 
@@ -223,7 +223,7 @@ const LandingPage = () => {
                   </div>
 
                   {/* Card 2 */}
-                  <div className="min-w-full 2xl:min-h-[54vh]  px-2 border rounded-2xl border-border bg-foreground/8 shadow-2xl">
+                  <div className="min-w-full 2xl:min-h-[54vh] px-2 p-5 md:p-2 border rounded-2xl border-border bg-foreground/8 shadow-2xl">
                     <div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent pointer-events-none" />
 
                     <div className="rounded-2xl px-1 py-2 md:p-4 lg:p-6 transition-all duration-300 group">

src/pages/OrganizationPage/components/DepartmentTab.jsx

@@ -50,6 +50,7 @@ const DepartmentTab = ({ selectedDate, ministryId }) => {
             justifyContent: "center",
             alignItems: "center",
             height: "20vh",
+
           }}
         >
           <ClipLoader
@@ -68,11 +69,11 @@ const DepartmentTab = ({ selectedDate, ministryId }) => {
                 display: "flex",
                 flexDirection: "column",
                 alignItems: "flex-start",
-                width: "40%",
-                border: `1px solid ${colors.backgroundWhite}`,
-                p: 2,
+                width: {xs:"100%", sm:"100%", md:"40%"},
+                border: {xs:0,sm:0,md:`1px solid ${colors.backgroundWhite}`},
+                p: {xs:0,sm:0,md:2},
                 backgroundColor: colors.backgroundWhite,
-                borderRadius: "14px",
+                borderRadius: {xs:0,sm:0,md:"14px"}
               }}
             >
               <Typography
@@ -105,13 +106,32 @@ const DepartmentTab = ({ selectedDate, ministryId }) => {
                       width: "100%",
                     }}
                   >
-                    <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
-                      <ApartmentIcon sx={{ color: colors.textMuted }} />
+                    <Box sx={{ 
+                      display: "flex", 
+                      alignItems: "center", 
+                      gap: 1
+                    }}>
+                      {/* Count on small screens, Icon on larger screens */}
                       <Typography
                         sx={{
+                          display: { xs: "block", sm: "block", md: "none" },
                           fontFamily: "Poppins",
+                          fontSize: 20,
                           fontWeight: 500,
-                          color: colors.textMuted,
+                          color: colors.textPrimary,
+                        }}
+                      >
+                        {totalDepartments}
+                      </Typography>
+                      <ApartmentIcon sx={{ 
+                        color: colors.textMuted,
+                        display: { xs: "none", sm: "none", md: "block" }
+                      }} />
+                      <Typography
+                        sx={{
+                          fontFamily: "Poppins",
+                          fontWeight: 500,
+                          color: colors.textMuted
                         }}
                       >
                         Total Departments{" "}
@@ -123,8 +143,10 @@ const DepartmentTab = ({ selectedDate, ministryId }) => {
                         />
                       </Typography>
                     </Box>
+                    {/* Count on larger screens */}
                     <Typography
                       sx={{
+                        display: { xs: "none", sm: "none", md: "block" },
                         fontFamily: "Poppins",
                         fontSize: 20,
                         fontWeight: 500,
@@ -147,7 +169,22 @@ const DepartmentTab = ({ selectedDate, ministryId }) => {
                     }}
                   >
                     <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
-                      <DomainAddIcon sx={{ color: colors.textMuted }} />
+                      {/* Count on small screens, Icon on larger screens */}
+                      <Typography
+                        sx={{
+                          display: { xs: "block", sm: "block", md: "none" },
+                          fontFamily: "Poppins",
+                          fontSize: 20,
+                          fontWeight: 500,
+                          color: colors.textPrimary,
+                        }}
+                      >
+                        {newDepartments}
+                      </Typography>
+                      <DomainAddIcon sx={{ 
+                        color: colors.textMuted,
+                        display: { xs: "none", sm: "none", md: "block" }
+                      }} />
                       <Typography
                         sx={{
                           fontFamily: "Poppins",
@@ -164,8 +201,10 @@ const DepartmentTab = ({ selectedDate, ministryId }) => {
                         />
                       </Typography>
                     </Box>
+                    {/* Count on larger screens */}
                     <Typography
                       sx={{
+                        display: { xs: "none", sm: "none", md: "block" },
                         fontFamily: "Poppins",
                         fontSize: 20,
                         fontWeight: 500,
@@ -185,7 +224,8 @@ const DepartmentTab = ({ selectedDate, ministryId }) => {
               sx={{
                 display: "flex",
                 justifyContent: "space-between",
-                alignItems: "center",
+                alignItems: {xs:"flex-start", sm:"flex-start", md:"center"},
+                flexDirection: {xs:"column",sm:"column",md:"row"},
                 mt: 2,
               }}
             >
@@ -196,12 +236,15 @@ const DepartmentTab = ({ selectedDate, ministryId }) => {
                   color: colors.textPrimary,
                   fontFamily: "poppins",
                   fontWeight: 500,
+                  mb:{xs:"6px",sm:"6px",md:0}
                 }}
               >
                 Departments
               </Typography>
 
-              <Box sx={{ width: 250 }}>
+              <Box sx={{ 
+                width: {xs:200,sm:200,md:250}
+                }}>
                 <TextField
                   size="small"
                   label="Search departments"