From e030b6edfd3193733148126f92dc5873acd6ff50 Mon Sep 17 00:00:00 2001
From: rahul_g <rahul_g@tekditechnologies.com>
Date: Mon, 22 Jul 2024 12:20:05 +0530
Subject: [PATCH 1/3] fixed label issue on block component

---
 src/pages/block.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/pages/block.tsx b/src/pages/block.tsx
index 4165b65b..a66ff0e8 100644
--- a/src/pages/block.tsx
+++ b/src/pages/block.tsx
@@ -145,7 +145,12 @@ const Block: React.FC = () => {
         <Box sx={{ minWidth: 240, display: "flex", gap: 5 }}>
           <Box sx={{ minWidth: 240 }}>
             <FormControl sx={{ minWidth: 240 }}>
-              <InputLabel id="state-select-label">States</InputLabel>
+              <InputLabel
+                sx={{ backgroundColor: "#F7F7F7", padding: "2px 8px" }}
+                id="state-select-label"
+              >
+                States
+              </InputLabel>
               <Select
                 labelId="state-select-label"
                 id="state-select"
@@ -166,7 +171,12 @@ const Block: React.FC = () => {
           </Box>
           <Box sx={{ minWidth: 240 }}>
             <FormControl sx={{ minWidth: 240 }}>
-              <InputLabel id="district-select-label">Districts</InputLabel>
+              <InputLabel
+                sx={{ backgroundColor: "#F7F7F7", padding: "2px 8px" }}
+                id="district-select-label"
+              >
+                Districts
+              </InputLabel>
               <Select
                 labelId="district-select-label"
                 id="district-select"

From 4205d8c540541aa4345df98b8c523872f42dc18e Mon Sep 17 00:00:00 2001
From: rahul_g <rahul_g@tekditechnologies.com>
Date: Mon, 22 Jul 2024 14:39:19 +0530
Subject: [PATCH 2/3] added responsiveness to the master

---
 src/pages/block.tsx    | 24 +++++++++++++++++++-----
 src/pages/district.tsx | 20 +++++++++++++++-----
 2 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/src/pages/block.tsx b/src/pages/block.tsx
index a66ff0e8..92e38786 100644
--- a/src/pages/block.tsx
+++ b/src/pages/block.tsx
@@ -11,6 +11,7 @@ import MenuItem from "@mui/material/MenuItem";
 import Select, { SelectChangeEvent } from "@mui/material/Select";
 import PageSizeSelector from "@/components/PageSelector";
 import { useTranslation } from "next-i18next";
+import { useMediaQuery } from "@mui/material";
 
 // Static Data
 const staticStateData = [
@@ -38,6 +39,8 @@ const Block: React.FC = () => {
   const [pageSize, setPageSize] = useState<number>(10);
   const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc");
   const [selectedFilter, setSelectedFilter] = useState("All");
+  const isMobile = useMediaQuery("(max-width:600px)");
+  const isMediumScreen = useMediaQuery("(max-width:986px)");
 
   const columns = useMemo(
     () => [
@@ -142,9 +145,20 @@ const Block: React.FC = () => {
   return (
     <React.Fragment>
       <HeaderComponent {...userProps}>
-        <Box sx={{ minWidth: 240, display: "flex", gap: 5 }}>
-          <Box sx={{ minWidth: 240 }}>
-            <FormControl sx={{ minWidth: 240 }}>
+        <Box
+          sx={{
+            display: "flex",
+            justifyContent: "center",
+            gap: 5,
+            "@media (max-width: 580px)": {
+              marginTop: 10,
+              flexDirection: "column",
+              alignItems: "center",
+            },
+          }}
+        >
+          <Box sx={{ width: "100%" }}>
+            <FormControl sx={{ width: "100%" }}>
               <InputLabel
                 sx={{ backgroundColor: "#F7F7F7", padding: "2px 8px" }}
                 id="state-select-label"
@@ -169,8 +183,8 @@ const Block: React.FC = () => {
               </Select>
             </FormControl>
           </Box>
-          <Box sx={{ minWidth: 240 }}>
-            <FormControl sx={{ minWidth: 240 }}>
+          <Box sx={{ width: "100%" }}>
+            <FormControl sx={{ width: "100%" }}>
               <InputLabel
                 sx={{ backgroundColor: "#F7F7F7", padding: "2px 8px" }}
                 id="district-select-label"
diff --git a/src/pages/district.tsx b/src/pages/district.tsx
index 7b81bf8f..58702f45 100644
--- a/src/pages/district.tsx
+++ b/src/pages/district.tsx
@@ -83,7 +83,7 @@ const District: React.FC = () => {
       setSelectedState(selectedState);
       try {
         const data = await getDistrictList(selectedState);
-        setDistrictData(data.result || []); 
+        setDistrictData(data.result || []);
         setSelectedDistrict(data.result[0]?.label || "-");
       } catch (error) {
         console.error("Error fetching district data", error);
@@ -118,11 +118,11 @@ const District: React.FC = () => {
     const fetchStateData = async () => {
       try {
         const data = await getStateList();
-        setStateData(data.result || []); 
+        setStateData(data.result || []);
         const initialSelectedState = data.result[0]?.value || "";
         setSelectedState(initialSelectedState);
         const districtData = await getDistrictList(initialSelectedState);
-        setDistrictData(districtData.result || []); 
+        setDistrictData(districtData.result || []);
         setSelectedDistrict(districtData.result[0]?.label || "-");
       } catch (error) {
         console.error("Error fetching state data", error);
@@ -168,8 +168,18 @@ const District: React.FC = () => {
   return (
     <React.Fragment>
       <HeaderComponent {...userProps}>
-        <Box sx={{ minWidth: 240 }}>
-          <FormControl sx={{ minWidth: 240 }}>
+        <Box
+          sx={{
+            minWidth: 240,
+            "@media (max-width: 580px)": {
+              marginTop: 3,
+              marginBottom: 3,
+              flexDirection: "column",
+              alignItems: "center",
+            },
+          }}
+        >
+          <FormControl sx={{ minWidth: 340 }}>
             <InputLabel id="state-select-label">States</InputLabel>
             <Select
               labelId="state-select-label"

From fdd8adddc7c5c2902d69e3fcc49c0729fca538f7 Mon Sep 17 00:00:00 2001
From: rahul_g <rahul_g@tekditechnologies.com>
Date: Mon, 22 Jul 2024 14:45:03 +0530
Subject: [PATCH 3/3] margin changes for responsive design

---
 src/pages/block.tsx    | 1 +
 src/pages/district.tsx | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/pages/block.tsx b/src/pages/block.tsx
index 92e38786..2b00925b 100644
--- a/src/pages/block.tsx
+++ b/src/pages/block.tsx
@@ -150,6 +150,7 @@ const Block: React.FC = () => {
             display: "flex",
             justifyContent: "center",
             gap: 5,
+            marginTop: 2,
             "@media (max-width: 580px)": {
               marginTop: 10,
               flexDirection: "column",
diff --git a/src/pages/district.tsx b/src/pages/district.tsx
index 58702f45..593afad9 100644
--- a/src/pages/district.tsx
+++ b/src/pages/district.tsx
@@ -171,6 +171,7 @@ const District: React.FC = () => {
         <Box
           sx={{
             minWidth: 240,
+            marginTop: 2,
             "@media (max-width: 580px)": {
               marginTop: 3,
               marginBottom: 3,