Merge pull request #6 from luciferreeves/main

wowowow

14 files changed, 669 insertions, 395 deletions

diff --git a/interface/controllers/citizens.controller.js b/interface/controllers/citizens.controller.js
index 0e45a13..3bec103 100644
--- a/interface/controllers/citizens.controller.js
+++ b/interface/controllers/citizens.controller.js
@@ -5,23 +5,26 @@ const { sequelize } = require("../models");
 
 
 // Retrieve all citizens from the database. Limit the number of citizens returned to 10.
-exports.findXCitizens = () => {
-  query = `select c.citizen_id, c.first_name, c.last_name, c.address, c.mobile_num, c.dob, c.gender, c.marital_status, c.village_id, v.village_name  
+exports.findXCitizens = (limit, offset) => {
+  const query = `select c.citizen_id, c.first_name, c.last_name, c.address, c.mobile_num, c.dob, c.gender, c.marital_status, c.village_id, v.village_name  
             from citizens c
             join village_master v
             on c.village_id = v.village_id
-            order by citizen_id limit 10;`;
+            order by citizen_id limit ${limit} offset ${offset};`;
 
   return sequelize.query(query, { type: QueryTypes.SELECT })
 };
 
+exports.getCountOfCitizens = () => {
+  const query = `select count(*) as count from citizens;`;
+  return sequelize.query(query, { type: QueryTypes.SELECT })
+}
 
-exports.deleteCitizenbyId = (citizen_id) =>{
 
+exports.deleteCitizenbyId = (citizen_id) =>{
   return citizens.destroy({
     where: { citizen_id }
   })
-
 };
 
 exports.editCitizen = (citizen_id, address, mobile_num, dob, marital_status) => {
diff --git a/interface/controllers/district.controller.js b/interface/controllers/district.controller.js
index 5b21530..468d5fb 100644
--- a/interface/controllers/district.controller.js
+++ b/interface/controllers/district.controller.js
@@ -10,10 +10,10 @@ exports.allDistricts = () => {
 
 exports.allDistrictsByStateId = (state_id) => {
     const query =`SELECT * FROM district_master WHERE state_id = ${state_id}`;
-    return db.sequelize.query(query, { type: db.sequelize.QueryTypes.SELECT });
+    return db.sequelize.query(query, { type: db.sequelize.QueryTypes.SELECT }).then(districts => {
+        if (districts) {
+            return districts;
+        }
+        return null;
+    });
 };
-
-
-
-
-
diff --git a/interface/controllers/mandal.controller.js b/interface/controllers/mandal.controller.js
index 43842fe..5e4d287 100644
--- a/interface/controllers/mandal.controller.js
+++ b/interface/controllers/mandal.controller.js
@@ -11,6 +11,10 @@ exports.allMandals = () => {
 
 exports.allMandalsByDistrictId = (district_id) => {
     const query =`SELECT * FROM mandal_master WHERE district_id = ${district_id}`;
-    return db.sequelize.query(query, { type: db.sequelize.QueryTypes.SELECT });
-    
+    return db.sequelize.query(query, { type: db.sequelize.QueryTypes.SELECT }).then(mandals => {
+        if (mandals) {
+            return mandals;
+        }
+        return null;
+    });
 };
diff --git a/interface/controllers/state.controller.js b/interface/controllers/state.controller.js
index 1a3a4ed..95bff0d 100644
--- a/interface/controllers/state.controller.js
+++ b/interface/controllers/state.controller.js
@@ -4,10 +4,5 @@ const state = db.state_master;
 // function to get all states
 exports.allStates = () => {
     const query = "SELECT * FROM state_master";
-    return db.sequelize.query(query, { type: db.sequelize.QueryTypes.SELECT });
-    
+    return db.sequelize.query(query, { type: db.sequelize.QueryTypes.SELECT });    
 };
-
-
-
-
diff --git a/interface/controllers/village.controller.js b/interface/controllers/village.controller.js
index 0a488d4..95372fa 100644
--- a/interface/controllers/village.controller.js
+++ b/interface/controllers/village.controller.js
@@ -11,8 +11,10 @@ exports.allVillages = () => {
 
 exports.allVillagesByMandalId = (mandal_id) => {
     const query =`SELECT * FROM village_master WHERE mandal_id = ${mandal_id}`;
-    return db.sequelize.query(query, { type: db.sequelize.QueryTypes.SELECT });
-    
+    return db.sequelize.query(query, { type: db.sequelize.QueryTypes.SELECT }).then(villages => {
+        if (villages) {
+            return villages;
+        }
+        return null;
+    });
 };
-
-
diff --git a/interface/public/adduser.js b/interface/public/adduser.js
new file mode 100644
index 0000000..bee96f6
--- /dev/null
+++ b/interface/public/adduser.js
@@ -0,0 +1,291 @@
+$("#citizenForm").form({
+  on: "blur",
+  inline: true,
+  fields: {
+    citizen_id: {
+      identifier: "citizen_id",
+      rules: [
+        {
+          type: "empty",
+          prompt: "Please enter a citizen id",
+        },
+      ],
+    },
+    first_name: {
+      identifier: "first_name",
+      rules: [
+        {
+          type: "empty",
+          prompt: "Please enter a first name",
+        },
+      ],
+    },
+    last_name: {
+      identifier: "last_name",
+      rules: [
+        {
+          type: "empty",
+          prompt: "Please enter a last name",
+        },
+      ],
+    },
+    address: {
+      identifier: "address",
+      rules: [
+        {
+          type: "empty",
+          prompt: "Please enter a address",
+        },
+      ],
+    },
+    mobile_number: {
+      identifier: "mobile_number",
+      rules: [
+        {
+          type: "empty",
+          prompt: "Please enter a mobile number",
+        },
+        {
+          type: "number",
+          prompt: "Please enter a valid mobile number",
+        },
+        {
+          type: "minLength[10]",
+          prompt: "Please enter a valid mobile number",
+        },
+      ],
+    },
+    dob: {
+      identifier: "dob",
+      rules: [
+        {
+          type: "empty",
+          prompt: "Please enter a date of birth",
+        },
+      ],
+    },
+    state: {
+      identifier: "state",
+      rules: [
+        {
+          type: "empty",
+          prompt: "Please select a state",
+        },
+      ],
+    },
+    district: {
+      identifier: "district",
+      rules: [
+        {
+          type: "empty",
+          prompt: "Please select a district",
+        },
+      ],
+    },
+    mandal: {
+      identifier: "mandal",
+      rules: [
+        {
+          type: "empty",
+          prompt: "Please select a mandal",
+        },
+      ],
+    },
+    village: {
+      identifier: "village",
+      rules: [
+        {
+          type: "empty",
+          prompt: "Please select a village",
+        },
+      ],
+    },
+  },
+});
+
+//gereate random data with Upper case letter with seven digit number
+function generateCitizenId() {
+  var text = "";
+  var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+  var possible2 = "0123456789";
+  text += possible.charAt(Math.floor(Math.random() * possible.length));
+  for (var i = 0; i < 7; i++)
+    text += possible2.charAt(Math.floor(Math.random() * possible2.length));
+
+  //validate user name with database
+  fetch("/api/citizens/validate", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ citizen_id: text }),
+  }).then((res) => {
+    if (res.status == 200) {
+      document.getElementById("citizen_id").value = text;
+    } else {
+      generateCitizenId();
+    }
+  });
+}
+
+generateCitizenId();
+
+//get all states
+fetch("/api/geography/states", {
+  method: "GET",
+  headers: { "Content-Type": "application/json" },
+})
+  .then((res) => res.json())
+  .then((data) => {
+    var state = document.getElementById("state");
+    // set the first option to be the default disabled option
+    var disabledOption = document.createElement("option");
+    disabledOption.text = "Select State";
+    disabledOption.value = "undefined";
+    disabledOption.disabled = true;
+    disabledOption.selected = true;
+    $(state).dropdown("set selected", disabledOption.value);
+
+    state.add(disabledOption);
+
+    for (var i = 0; i < data.length; i++) {
+      var option = document.createElement("option");
+      option.value = data[i].state_id;
+      option.text = data[i].state_name;
+      state.add(option);
+    }
+  });
+
+//get all districts
+document.getElementById("state").addEventListener("change", function () {
+  var state_id = document.getElementById("state").value;
+  fetch("/api/geography/districts/" + state_id, {
+    method: "GET",
+    headers: { "Content-Type": "application/json" },
+  })
+    .then((res) => res.json())
+    .then((data) => {
+      var district = document.getElementById("district");
+      district.innerHTML = "";
+      var disabledOption = document.createElement("option");
+      disabledOption.text = "Select District";
+      disabledOption.value = "undefined";
+      disabledOption.disabled = true;
+      disabledOption.selected = true;
+      $(district).dropdown("set selected", disabledOption.value);
+
+      district.add(disabledOption);
+
+      for (var i = 0; i < data.length; i++) {
+        var option = document.createElement("option");
+        option.value = data[i].district_id;
+        option.text = data[i].district_name;
+        district.add(option);
+      }
+    }).catch((err) => {
+        alert(err);
+    });
+});
+
+//get all mandals
+document.getElementById("district").addEventListener("change", function () {
+  var district_id = document.getElementById("district").value;
+  fetch("/api/geography/mandals/" + district_id, {
+    method: "GET",
+    headers: { "Content-Type": "application/json" },
+  })
+    .then((res) => res.json())
+    .then((data) => {
+      var mandal = document.getElementById("mandal");
+      mandal.innerHTML = "";
+      var disabledOption = document.createElement("option");
+      disabledOption.text = "Select Mandal";
+      disabledOption.value = "undefined";
+      disabledOption.disabled = true;
+      disabledOption.selected = true;
+      $(mandal).dropdown("set selected", disabledOption.value);
+      mandal.add(disabledOption);
+
+      for (var i = 0; i < data.length; i++) {
+        var option = document.createElement("option");
+        option.value = data[i].mandal_id;
+        option.text = data[i].mandal_name;
+        mandal.add(option);
+      }
+    }).catch((err) => {
+        alert(err);
+    });
+});
+
+//get all villages
+document.getElementById("mandal").addEventListener("change", function () {
+  var mandal_id = document.getElementById("mandal").value;
+  fetch("/api/geography/villages/" + mandal_id, {
+    method: "GET",
+    headers: { "Content-Type": "application/json" },
+  })
+    .then((res) => res.json())
+    .then((data) => {
+      var village = document.getElementById("village");
+      village.innerHTML = "";
+      var disabledOption = document.createElement("option");
+      disabledOption.text = "Select Village";
+      disabledOption.value = "undefined";
+      disabledOption.disabled = true;
+      disabledOption.selected = true;
+      $(village).dropdown("set selected", disabledOption.value);
+      village.add(disabledOption);
+
+      for (var i = 0; i < data.length; i++) {
+        var option = document.createElement("option");
+        option.value = data[i].village_id;
+        option.text = data[i].village_name;
+        village.add(option);
+      }
+    }).catch((err) => {
+        alert(err);
+    });
+});
+
+function addCitizen(event) {
+  event.preventDefault();
+  if ($("#citizenForm form").form("is valid")) {
+    var formData = {
+      citizen_id: document.getElementById("citizen_id").value,
+      first_name: document.getElementById("first_name").value,
+      middle_name: document.getElementById("middle_name").value,
+      last_name: document.getElementById("last_name").value,
+      address: document.getElementById("address").value,
+      mobile_num: '+91-' + document.getElementById("mobile_number").value,
+      dob: document.getElementById("dob").value,
+      gender: document.getElementById("gender").value,
+      marital_status: document.getElementById("marital_status").value,
+      disabled: document.getElementById("disabled").value,
+      disbaled_percentage: document.getElementById("disbaled_percentage").value ?? 0,
+      caste: document.getElementById("caste").value,
+      village_id: document.getElementById("village").value,
+    };
+
+    fetch("/api/citizens/addnewcitizen", {
+      method: "POST",
+      body: JSON.stringify(formData),
+      headers: { "Content-Type": "application/json" },
+    })
+      .then((res) => res.json())
+      .then((data) => {
+        if (data.message == "Citizen added successfully") {
+          window.location.href = "/citizens";
+        } else {
+          console.log(data.message);
+          alert(data.message);
+        }
+      });
+  }
+}
+
+document.getElementById("add_citizen").addEventListener("click", addCitizen);
+document.getElementById("disabled").addEventListener("change", function () {
+  if (document.getElementById("disabled").value == "yes") {
+    document.getElementById("disbaled_percentage").disabled = false;
+  } else {
+    document.getElementById("disbaled_percentage").disabled = true;
+  }
+});
diff --git a/interface/public/citizens.js b/interface/public/citizens.js
index 540bf72..10a226f 100644
--- a/interface/public/citizens.js
+++ b/interface/public/citizens.js
@@ -7,6 +7,93 @@ $(".ui.form").form({
   },
 });
 
+// Get current page and limit query parameter
+const queryString = window.location.search;
+const urlParams = new URLSearchParams(queryString);
+const page = urlParams.get("page") || 1;
+const limit = urlParams.get("limit") || 10;
+const numberOfPages = Math.ceil(count / limit);
+const pagination = $(".pagination");
+const pageLeft = $('#pageLeft');
+const pageRight = $('#pageRight');
+if (page > 1) {
+  pageLeft.removeClass("disabled");
+  pageLeft.attr("href", `/citizens?page=${page - 1}&limit=${limit}`);
+} else {
+  pageLeft.addClass("disabled");
+}
+if (page < numberOfPages) {
+  pageRight.removeClass("disabled");
+  pageRight.attr("href", `/citizens?page=${page + 1}&limit=${limit}`);
+} else {
+  pageRight.addClass("disabled");
+}
+
+function redirectToLimit(limit) {
+  window.location.href = `/citizens?page=1&limit=${limit}`;
+}
+
+addPageNumbers(numberOfPages);
+
+function addPageNumbers(numberOfPages) {
+  // Add page numbers from current page to 2 pages before and 2 pages after, if there are more than 5 pages
+  if (numberOfPages > 5) {
+    let startingPoint = page - 2;
+    if (page < 3) {
+      startingPoint = 1;
+    } else if (page > numberOfPages - 2) {
+      startingPoint = numberOfPages - 4;
+    } else {
+      startingPoint = page - 2;
+    }
+    for (let i = startingPoint; i < startingPoint + 5; i++) {
+      const linkElement = document.createElement("a");
+      linkElement.innerHTML = i;
+      linkElement.setAttribute("href", `/citizens?page=${i}&limit=${limit}`);
+      linkElement.setAttribute("id", `page${i}`);
+      linkElement.classList.add("item");
+      pageRight.before(linkElement);
+    }
+      // add dots
+    const dots = document.createElement("a");
+    dots.innerHTML = "...";
+    dots.classList.add("item");
+    pageRight.before(dots);
+
+    // add first page if page > 3
+    if (page > 3) {
+      const firstPage = document.createElement("a");
+      firstPage.innerHTML = 1;
+      firstPage.setAttribute("href", `/citizens?page=1&limit=${limit}`);
+      firstPage.setAttribute("id", `page1`);
+      firstPage.classList.add("item");
+      pageRight.before(firstPage);
+    }
+
+    // add last page
+    if (page != numberOfPages) {
+      const lastPage = document.createElement("a");
+      lastPage.innerHTML = numberOfPages;
+      lastPage.setAttribute("href", `/citizens?page=${numberOfPages}&limit=${limit}`);
+      lastPage.classList.add("item");
+      pageRight.before(lastPage);
+    }
+  } else {
+    // add page numbers
+    for (let i = 1; i <= numberOfPages; i++) {
+      // Insert before pageRight
+      const linkElement = document.createElement("a");
+      linkElement.innerHTML = i;
+      linkElement.setAttribute("href", `/citizens?page=${i}&limit=${limit}`);
+      linkElement.setAttribute("id", `page${i}`);
+      linkElement.classList.add("item");
+      pageRight.before(linkElement);
+    }
+  }
+  const currentPageElement = document.getElementById(`page${page}`);
+  currentPageElement.classList.add("active");
+}
+
 function editCitizensRecord(citizen) {
   citizen = JSON.parse(citizen);
   $(".edit.modal").modal("show");
@@ -14,7 +101,7 @@ function editCitizensRecord(citizen) {
   $("#mobile_number").val(citizen.mobile_num);
   $("#dob").val(citizen.dob);
   $("#marital_status").val(citizen.marital_status);
-  $('#marital_status').dropdown('set selected', citizen.marital_status);
+  $("#marital_status").dropdown("set selected", citizen.marital_status);
   $("#citizen_id").html(citizen.citizen_id);
 }
 
@@ -51,10 +138,6 @@ function deleteCitizenRecord(citizen) {
     success: function (response) {
       console.log(response);
       location.reload();
-    }
+    },
   });
-
-  
 }
-
-
diff --git a/interface/routes/api/citizens.js b/interface/routes/api/citizens.js
index 40e0c16..c6c6425 100644
--- a/interface/routes/api/citizens.js
+++ b/interface/routes/api/citizens.js
@@ -3,78 +3,119 @@ const router = express.Router();
 
 const citizensController = require("../../controllers/citizens.controller");
 
-router.post('/edit', (req, res) => {
-    const { citizen_id, address, mobile_num, dob, marital_status } = req.body;
-    if (!citizen_id || !address || !mobile_num || !dob || !marital_status) {
-        res.status(400).json({ message: "Please fill in all fields" });
-    } else {
-        citizensController.editCitizen(citizen_id, address, mobile_num, dob, marital_status)
-            .then(() => {
-                res.status(200).json({ message: "Citizen updated successfully" });
-            })
-            .catch((err) => {
-                res.status(400).json({ message: err });
-            });
-    }
+router.get('/count', (req, res) => {
+  citizensController.getCountOfCitizens().then(count => {
+    res.json({ count });
+  });
 });
 
-
-router.post('/delete', (req, res) => {
-    const { citizen_id } = req.body;
-    if (!citizen_id) {
-        res.status(400).json({ message: "Please fill in all fields" });
-    } else {
-        citizensController.deleteCitizenbyId(citizen_id)
-            .then(() => {
-                res.status(200).json({ message: "Citizen deleted successfully" });
-            })
-            .catch((err) => {
-                res.status(400).json({ message: err });
-            });
-    }
-} );
-
-
-router.post('/validate', (req, res) => {
-    const { citizen_id } = req.body;
-    if (!citizen_id) {
-        res.status(400).json({ message: "Please fill in all fields" });
-    } else {
-        citizensController.checkCitizenId(citizen_id)
-            .then(( isValid ) => {
-                res.status(200).json({ isValid: !isValid });
-            }       
-    )
-    .catch((err) => {
-                res.status(400).json({ message: err });
-            });
-    }
+router.post("/edit", (req, res) => {
+  const { citizen_id, address, mobile_num, dob, marital_status } = req.body;
+  if (!citizen_id || !address || !mobile_num || !dob || !marital_status) {
+    res.status(400).json({ message: "Please fill in all fields" });
+  } else {
+    citizensController
+      .editCitizen(citizen_id, address, mobile_num, dob, marital_status)
+      .then(() => {
+        res.status(200).json({ message: "Citizen updated successfully" });
+      })
+      .catch((err) => {
+        res.status(400).json({ message: err });
+      });
+  }
 });
 
-
-router.post('/addnewcitizen', (req, res) => {
-    const { citizen_id, first_name, last_name, address, mobile_num, dob, gender, marital_status, disabled, disbaled_percentage, caste, village_id} = req.body;
-
-    if(!citizen_id && !first_name && !last_name && !address && !mobile_num && !dob && !gender && !marital_status && !disabled && !caste && !village_id){
-
-        res.status(400).json({ message: "Please fill in all fields" });
-
-    }else{
-        citizensController.addNewCitizen(citizen_id, first_name, last_name, address, mobile_num, dob, gender, marital_status, disabled, disbaled_percentage, caste, village_id).then(() => {
-            res.status(200).json({ message: "Citizen added successfully" });
-        }).catch((err) => {
-            res.status(400).json({ message: err });
-        });
-    }
-
+router.post("/delete", (req, res) => {
+  const { citizen_id } = req.body;
+  if (!citizen_id) {
+    res.status(400).json({ message: "Please fill in all fields" });
+  } else {
+    citizensController
+      .deleteCitizenbyId(citizen_id)
+      .then(() => {
+        res.status(200).json({ message: "Citizen deleted successfully" });
+      })
+      .catch((err) => {
+        res.status(400).json({ message: err });
+      });
+  }
 });
 
+router.post("/validate", (req, res) => {
+  const { citizen_id } = req.body;
+  if (!citizen_id) {
+    res.status(400).json({ message: "Please fill in all fields" });
+  } else {
+    citizensController
+      .checkCitizenId(citizen_id)
+      .then((isValid) => {
+        res.status(200).json({ isValid: !isValid });
+      })
+      .catch((err) => {
+        res.status(400).json({ message: err });
+      });
+  }
+});
 
+router.post("/addnewcitizen", (req, res) => {
+  let {
+    citizen_id,
+    first_name,
+    middle_name,
+    last_name,
+    address,
+    mobile_num,
+    dob,
+    gender,
+    marital_status,
+    disabled,
+    disbaled_percentage,
+    caste,
+    village_id,
+  } = req.body;
+
+  if (!disbaled_percentage) {
+    disbaled_percentage = 0.0;
+  }
+
+  if (
+    !citizen_id ||
+    !first_name ||
+    !last_name ||
+    !address ||
+    !mobile_num ||
+    !dob ||
+    !gender ||
+    !marital_status ||
+    !disabled ||
+    !caste ||
+    !village_id
+  ) {
+    res.status(400).json({ message: "Please fill in all fields" });
+  } else {
+    citizensController
+      .addNewCitizen(
+        citizen_id,
+        first_name,
+        last_name,
+        address,
+        mobile_num,
+        dob,
+        gender,
+        marital_status,
+        disabled,
+        disbaled_percentage,
+        caste,
+        village_id
+      )
+      .then(() => {
+        res.status(200).json({ message: "Citizen added successfully" });
+      })
+      .catch((err) => {
+        console.log(err);
+        res.status(400).json({ message: err });
+      });
+  }
+});
 
-
-
-    
-
-
-
-module.exports = router;
\ No newline at end of file
+module.exports = router;
diff --git a/interface/routes/api/geography.js b/interface/routes/api/geography.js
index 4667db8..58e3b84 100644
--- a/interface/routes/api/geography.js
+++ b/interface/routes/api/geography.js
@@ -9,27 +9,38 @@ const districtController = require("../../controllers/district.controller");
 router.get("/states", (req, res) => {
     stateController.allStates().then(states => {
         res.send(states);        
-        });
-
+    });
 });
 
 router.get("/districts/:state_id", (req, res) => {
     const state_id = req.params.state_id;
     districtController.allDistrictsByStateId(state_id).then(districts => {
-        res.send(districts);
+        if (districts) {
+            res.send(districts);
+        } else {
+            res.status(400).json({ message: "No districts found" });
+        }
     });
 });
 router.get("/mandals/:district_id", (req, res) => {
     const district_id = req.params.district_id;
     mandalController.allMandalsByDistrictId(district_id).then(mandals => {
-        res.send(mandals);
+        if (mandals) {
+            res.send(mandals);
+        } else {
+            res.status(400).json({ message: "No mandals found" });
+        }
     });
 });
 
 router.get("/villages/:mandal_id", (req, res) => {
     const mandal_id = req.params.mandal_id;
     villageController.allVillagesByMandalId(mandal_id).then(villages => {
-        res.send(villages);
+        if (villages) {
+            res.send(villages);
+        } else {
+            res.status(400).json({ message: "No villages found" });
+        }
     });
 });
 
diff --git a/interface/routes/api/index.js b/interface/routes/api/index.js
index f21720b..b8ae7ca 100644
--- a/interface/routes/api/index.js
+++ b/interface/routes/api/index.js
@@ -64,7 +64,7 @@ router.post("/login", (req, res) => {
         payload,
         process.env.JWT_SECRET,
         {
-          expiresIn: 3600,
+          expiresIn: 60 * 60 * 24 * 7,
         },
         (err, token) => {
           if (err) throw err;
diff --git a/interface/routes/index.js b/interface/routes/index.js
index b99abbf..c75c2c0 100644
--- a/interface/routes/index.js
+++ b/interface/routes/index.js
@@ -22,11 +22,17 @@ router.get('/', (req, res) => {
 });
 
 router.get("/citizens", (req, res) => {
+    // Get the limit and offset from the query string
+    const limit = parseInt(req.query.limit, 10) || 10;
+    const page = req.query.page ? (req.query.page - 1) * limit : 0;
+
     // Get the citizens from the database
-    citizensController.findXCitizens().then(citizens => {
-        res.render("citizens", {
-            citizens: citizens,
-            title: "Citizens Data"
+    Promise.all([citizensController.findXCitizens(limit, page), citizensController.getCountOfCitizens()]).then(results => {
+        const [citizens, count] = results;
+        res.render('citizens', {
+            title: 'Citizens',
+            citizens,
+            count: count[0].count,
         });
     });
 });
diff --git a/interface/views/adduser.ejs b/interface/views/adduser.ejs
index 5b21d72..8d1b4d0 100644
--- a/interface/views/adduser.ejs
+++ b/interface/views/adduser.ejs
@@ -3,17 +3,11 @@
   <head>
     <%- include('partials/head') %>
   </head>
-
    <body>
-        
     <%- include('partials/navbar') %>
-
-
-    
     <div class="ui container segment" >
-        <h1 style="text-align: center;">Add New Citizen</h1>
-
-    <form class="ui form" method="post" onsubmit="addCitizen(event)" >
+      <h1 style="text-align: center;">Add New Citizen</h1>
+      <form class="ui form" method="post" onsubmit="addCitizen(event)" id="citizenForm">
         <div class="field">
             <label>Citizen ID</label>
             <input
@@ -34,6 +28,15 @@
               id="first_name">
           </div>
           <div class="field">
+            <label>Middle Name</label>
+            <input
+              placeholder="Middle Name"
+              name="middle_name"
+              type="text"
+              autocomplete="off"
+              id="middle_name">
+          </div>
+          <div class="field">
             <label>Last Name</label>
             <input
               placeholder="Last Name"
@@ -66,16 +69,23 @@
           <input type="date" name="dob" placeholder="DOB" id="dob" />
         </div>
         <div class="field">
+          <label>Gender</label>
+          <select class="ui dropdown" id="gender">
+            <option value="M" selected>Male</option>
+            <option value="F">Female</option>
+          </select>
+        </div>
+        <div class="field">
           <label>Marital Status</label>
           <select class="ui dropdown" id="marital_status">
-            <option value="M">Married</option>
+            <option value="M" selected>Married</option>
             <option value="UM">Unmarried</option>
           </select>
         </div>
         <div class = "field">
           <label>Disabled</label>
             <select class="ui dropdown" id="disabled">
-                <option value="Yes">Yes</option>
+                <option value="Yes" selected>Yes</option>
                 <option value="No">No</option>
             </select>
         </div>
@@ -91,7 +101,7 @@
         <div class="field">
           <label>Caste</label>
           <select class="ui dropdown" id="caste">
-            <option value="OC" >OC</option>
+            <option value="OC" selected>OC</option>
             <option value="SC">SC</option>
             <option value="ST">ST</option>
             <option value="BC">BC</option>
@@ -128,222 +138,6 @@
   </body>
   <%- include('partials/scripts') %>
 
-  <script>
-    //gereate random data with Upper case letter with seven digit number
-    function generateCitizenId() {
-        var text = "";
-        var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
-        var possible2 = "0123456789";
-        text += possible.charAt(Math.floor(Math.random() * possible.length));
-        for (var i = 0; i < 7; i++)
-
-            text += possible2.charAt(Math.floor(Math.random() * possible2.length));
-        
-        //validate user name with database
-        fetch("/api/citizens/validate", {
-            method: "POST",
-            headers: {'Content-Type': 'application/json'}, 
-            body: JSON.stringify({citizen_id: text})
-            }).then(res => {
-                if(res.status == 200){
-                    document.getElementById("citizen_id").value = text;
-                }
-                else{
-                    generateCitizenId();
-                }
-        });
-
-    }
-    
-    generateCitizenId();
-
-    //get all states
-    fetch("/api/geography/states", {
-        method: "GET",
-        headers: {'Content-Type': 'application/json'}
-        }).then(res => res.json()).then(data => {
-            var state = document.getElementById("state");
-            // set the first option to be the default disabled option
-            var disabledOption = document.createElement("option");
-            disabledOption.text = "Select State";
-            disabledOption.value = "undefined";
-            disabledOption.disabled = true;
-            disabledOption.selected = true;
-            $(state).dropdown('set selected', disabledOption.value);
-
-            state.add(disabledOption);
-
-            for(var i = 0; i < data.length; i++){
-                var option = document.createElement("option");
-                option.value = data[i].state_id;
-                option.text = data[i].state_name;
-                state.add(option);
-            }
-        });
-
-    //get all districts
-    document.getElementById("state").addEventListener("change", function(){
-        var state_id = document.getElementById("state").value;
-        fetch("/api/geography/districts/" + state_id, {
-            method: "GET",
-            headers: {'Content-Type': 'application/json'}
-            }).then(res => res.json()).then(data => {
-                var district = document.getElementById("district");
-                district.innerHTML = "";
-                var disabledOption = document.createElement("option");
-                disabledOption.text = "Select District";
-                disabledOption.value = "undefined";
-                disabledOption.disabled = true;
-                disabledOption.selected = true;
-                $(district).dropdown('set selected', disabledOption.value);
-
-                district.add(disabledOption);
-
-                for(var i = 0; i < data.length; i++){
-                    var option = document.createElement("option");
-                    option.value = data[i].district_id;
-                    option.text = data[i].district_name;
-                    district.add(option);
-                }
-            });
-    });
-
-    //get all mandals
-    document.getElementById("district").addEventListener("change", function(){
-        var district_id = document.getElementById("district").value;
-        fetch("/api/geography/mandals/" + district_id, {
-            method: "GET",
-            headers: {'Content-Type': 'application/json'}
-            }).then(res => res.json()).then(data => {
-                var mandal = document.getElementById("mandal");
-                mandal.innerHTML = "";
-                var disabledOption = document.createElement("option");
-                disabledOption.text = "Select Mandal";
-                disabledOption.value = "undefined";
-                disabledOption.disabled = true;
-                disabledOption.selected = true;
-                $(mandal).dropdown('set selected', disabledOption.value);
-                mandal.add(disabledOption);
-
-                
-                for(var i = 0; i < data.length; i++){
-                    var option = document.createElement("option");
-                    option.value = data[i].mandal_id;
-                    option.text = data[i].mandal_name;
-                    mandal.add(option);
-                }
-            });
-    });
-
-    //get all villages
-    document.getElementById("mandal").addEventListener("change", function(){
-        var mandal_id = document.getElementById("mandal").value;
-        fetch("/api/geography/villages/" + mandal_id, {
-            method: "GET",
-            headers: {'Content-Type': 'application/json'}
-            }).then(res => res.json()).then(data => {
-                var village = document.getElementById("village");
-                village.innerHTML = "";
-                var disabledOption = document.createElement("option");
-                disabledOption.text = "Select Village";
-                disabledOption.value = "undefined";
-                disabledOption.disabled = true;
-                disabledOption.selected = true;
-                $(village).dropdown('set selected', disabledOption.value);
-                village.add(disabledOption);
-
-                for(var i = 0; i < data.length; i++){
-                    var option = document.createElement("option");
-                    option.value = data[i].village_id;
-                    option.text = data[i].village_name;
-                    village.add(option);
-                }
-            });
-    });
-
-
-    $(".ui.form").form({
-    fields: {
-        first_name: "empty",
-        last_name: "empty",
-        address: "empty",
-        mobile_number: {
-            identifier: "mobile_number",
-            rules: [
-                {
-                    type: "length[10]",
-                    prompt: "Please enter a valid mobile number"
-                }
-            ]
-        },
-        dob: "empty",
-        marital_status: "empty",
-        disabled: "empty",
-        caste: "empty",
-        state: "empty",
-        district: "empty",
-        mandal: "empty",
-        village: "empty"
-    },
-    });
-
-    function checkMobileNumber(mobile_number){
-        var mobile_number = document.getElementById("mobile_number").value;
-        if(mobile_number.length != 10){
-           return false;
-        }
-        return true;
-    }
-
-    function addCitizen(event){
-        event.preventDefault();
-
-        if($(".ui.form").form("is valid")){
-            var formData = {
-                first_name: document.getElementById("first_name").value,
-                last_name: document.getElementById("last_name").value,
-                address: document.getElementById("address").value,
-                mobile_number: document.getElementById("mobile_number").value,
-                
-                dob: document.getElementById("dob").value,
-                marital_status: document.getElementById("marital_status").value,
-                disabled: document.getElementById("disabled").value,
-                disbaled_percentage: document.getElementById("disbaled_percentage").value,
-                caste: document.getElementById("caste").value,
-                village_id: document.getElementById("village").value,
-                citizen_id: document.getElementById("citizen_id").value
-            };
-
-            fetch("/api/citizens/addnewcitizen", {
-                method: "POST",
-                body: formData
-                }).then(res => res.json()).then(data => {
-                    if(data.status == "success"){
-                        window.location.href = "/citizens";
-                    }
-                    else{
-                        $(".ui.error.message").html(data.message);
-                    }
-            });
-        }
-
-    }
-
-    
-
-
-    document.getElementById("add_citizen").addEventListener("click", addCitizen);
-
-    document.getElementById("disabled").addEventListener("change", function(){
-        if(document.getElementById("disabled").value == "yes"){
-            document.getElementById("disbaled_percentage").disabled = false;
-        }
-        else{
-            document.getElementById("disbaled_percentage").disabled = true;
-        }
-    });
-
-
-</script>
+  <script src="/adduser.js"></script>
 
 </html>
diff --git a/interface/views/citizens.ejs b/interface/views/citizens.ejs
index 0e703b2..2cb4ecf 100644
--- a/interface/views/citizens.ejs
+++ b/interface/views/citizens.ejs
@@ -2,6 +2,26 @@
 <html lang="en">
   <head>
     <%- include('partials/head') %>
+    <style>
+      .ui.menu {
+        margin-top: 0;
+      }
+      .scrollY {
+        max-height: calc(100vh - 8rem);
+        margin-top: 1rem;
+        overflow-y: scroll;
+      }
+      .ui.table thead tr:first-child > th {
+        position: sticky !important;
+        top: 0;
+        z-index: 2;
+      }
+      .ui.table tfoot tr:first-child > th {
+        position: sticky !important;
+        bottom: 0;
+        z-index: 2;
+      }
+    </style>
   </head>
 
   <body>
@@ -13,7 +33,6 @@
         style="border: none; box-shadow: none"
       >
         <form class="ui form" method="post" onsubmit="editCitizen(event)">
-          
           <div class="field">
             <label>Address</label>
             <input
@@ -51,69 +70,94 @@
     </div>
 
     <%- include('partials/navbar') %>
-    <table class="ui selectable table">
-      <thead>
-        <tr>
-          <!-- <th>Citizen ID</th> -->
-          <th>First Name</th>
-          <!-- <th>Middle Name</th> -->
-          <th>Last Name</th>
-          <th>Address</th>
-          <th>Mobile Number</th>
-          <th>Date of Birth</th>
-          <th>Gender</th>
-          <th>Marital Status</th>
-          <!-- <th>Disabled</th>
-          <th>Disabled Percentage</th> -->
-          <!-- <th>Caste</th> -->
-          <th>Village Name</th>
-          <th></th>
-        </tr>
-      </thead>
-      <tbody>
-        <% for(var i=0; i < citizens.length; i++) { %>
-        <tr>
-          <!-- <td><%= citizens[i].citizen_id %></td> -->
-          <td><%= citizens[i].first_name %></td>
-          <!-- <td>
-            <%= citizens[i].middle_name ? citizens[i].middle_name : '-' %>
-          </td> -->
-          <td><%= citizens[i].last_name %></td>
-          <td><%= citizens[i].address %></td>
-          <td><%= citizens[i].mobile_num %></td>
-          <td><%= citizens[i].dob %></td>
-          <td><%= citizens[i].gender %></td>
-          <td><%= citizens[i].marital_status %></td>
-          <!-- <td><%= citizens[i].disabled %></td> -->
-          <!-- <td><%= citizens[i].disbaled_percentage %></td> -->
-          <!-- <td><%= citizens[i].caste %></td> -->
-          <td><%= citizens[i].village_name %></td>
-          <td>
-            <div class="ui teal buttons">
-              <div
-                class="ui button"
-                onclick="editCitizensRecord('<%=JSON.stringify(citizens[i])%>')"
-              >
-                Edit
-              </div>
-              <div class="ui floating dropdown icon button">
-                <i class="dropdown icon"></i>
-                <div class="menu">
-                  <div
-                    class="item"
-                    onclick="deleteCitizenRecord('<%= JSON.stringify(citizens[i])%>')"
-                  >
-                    <i class="delete icon"></i> Delete
+
+    <!-- Drop down for selecting limit -->
+
+    <div class="ui container">
+      <div class="ui floating labeled icon dropdown button">
+        <i class="list icon"></i>
+        <span class="text">Items</span>
+        <div class="menu">
+          <div class="item" onclick="redirectToLimit(10)">10</div>
+          <div class="item" onclick="redirectToLimit(25)">25</div>
+          <div class="item" onclick="redirectToLimit(50)">50</div>
+          <div class="item" onclick="redirectToLimit(100)">100</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="scrollY">
+      <table class="ui selectable table">
+        <thead>
+          <tr>
+            <th>First Name</th>
+            <th>Last Name</th>
+            <th>Address</th>
+            <th>Mobile Number</th>
+            <th>Date of Birth</th>
+            <th>Gender</th>
+            <th>Marital Status</th>
+            <th>Village Name</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          <% for(var i=0; i < citizens.length; i++) { %>
+          <tr>
+            <td><%= citizens[i].first_name %></td>
+            <td><%= citizens[i].last_name %></td>
+            <td><%= citizens[i].address %></td>
+            <td><%= citizens[i].mobile_num %></td>
+            <td><%= citizens[i].dob %></td>
+            <td><%= citizens[i].gender %></td>
+            <td><%= citizens[i].marital_status %></td>
+            <td><%= citizens[i].village_name %></td>
+            <td>
+              <div class="ui teal buttons">
+                <div
+                  class="ui button"
+                  onclick="editCitizensRecord('<%=JSON.stringify(citizens[i])%>')"
+                >
+                  Edit
+                </div>
+                <div class="ui floating dropdown icon button">
+                  <i class="dropdown icon"></i>
+                  <div class="menu">
+                    <div
+                      class="item"
+                      onclick="deleteCitizenRecord('<%= JSON.stringify(citizens[i])%>')"
+                    >
+                      <i class="delete icon"></i> Delete
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </td>
-        </tr>
-        <% } %>
-      </tbody>
-    </table>
+            </td>
+          </tr>
+          <% } %>
+        </tbody>
+        <!-- Display a pagination -->
+        <tfoot>
+          <tr>
+            <th colspan="9">
+              <div class="ui right floated pagination menu">
+                <a class="icon item" id="pageLeft">
+                  <i class="left chevron disabled icon"></i>
+                </a>
+
+                <a class="icon item" id="pageRight">
+                  <i class="right chevron disabled icon"></i>
+                </a>
+              </div>
+            </th>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
   </body>
   <%- include('partials/scripts') %>
+  <script>
+    const count = "<%= count %>";
+  </script>
   <script src="/citizens.js"></script>
 </html>
diff --git a/interface/views/partials/navbar.ejs b/interface/views/partials/navbar.ejs
index 440497a..967cbcb 100644
--- a/interface/views/partials/navbar.ejs
+++ b/interface/views/partials/navbar.ejs
@@ -1,5 +1,5 @@
 <div class="ui menu">
-  <a class="item"> Home </a>
+  <a class="item" onclick="route('/')"> Home </a>
   <div class="ui pointing dropdown link item">
     <span class="text">View Data</span>
     <i class="dropdown icon"></i>