Merge pull request #8 from luciferreeves/main

Working demo

17 files changed, 1362 insertions, 116 deletions

diff --git a/interface/controllers/citizens.controller.js b/interface/controllers/citizens.controller.js
index b611fad..ae0204e 100644
--- a/interface/controllers/citizens.controller.js
+++ b/interface/controllers/citizens.controller.js
@@ -1,9 +1,8 @@
 const db = require("../models");
 const citizens = db.citizens;
-const {QueryTypes} = require('sequelize');
+const { QueryTypes } = require("sequelize");
 const { sequelize } = require("../models");
 
-
 // Retrieve all citizens from the database. Limit the number of citizens returned to 10.
 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  
@@ -12,7 +11,7 @@ exports.findXCitizens = (limit, offset) => {
             on c.village_id = v.village_id
             order by citizen_id limit ${limit} offset ${offset};`;
 
-  return sequelize.query(query, { type: QueryTypes.SELECT })
+  return sequelize.query(query, { type: QueryTypes.SELECT });
 };
 
 exports.getBeneficiaries = (limit, offset) => {
@@ -41,50 +40,44 @@ exports.getBeneficiaries = (limit, offset) => {
   left join nregs_transaction nt on (nm.nregs_id=nt.nregs_id)
   left join hospital_transaction ht on (cs.citizen_id = ht.citizen_id)
   group by c.citizen_id,c.first_name , c.last_name ,c.gender 
-  ,cs.job_type ,pension_schem,education_schem,agri_schem, lpg_schem,Nregs_schem,Health_schem limit ${limit} offset ${offset};`
-
-  return sequelize.query(query, { type: QueryTypes.SELECT })
+  ,cs.job_type ,pension_schem,education_schem,agri_schem, lpg_schem,Nregs_schem,Health_schem 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 })
-}
-
+  return sequelize.query(query, { type: QueryTypes.SELECT });
+};
 
-exports.deleteCitizenbyId = (citizen_id) =>{
-  return citizens.destroy({
-    where: { citizen_id }
-  })
+exports.deleteCitizenbyId = (citizen_id) => {
+  const query = `delete from citizens where citizen_id = ${citizen_id};`;
+  return sequelize.query(query, { type: QueryTypes.DELETE });
 };
 
-exports.editCitizen = (citizen_id, address, mobile_num, dob, marital_status) => {
-  return citizens.update({
-    address, mobile_num, dob, marital_status
-  }, {
-    where: {
-      citizen_id
-    }
-  });
+exports.editCitizen = (
+  citizen_id,
+  address,
+  mobile_num,
+  dob,
+  marital_status
+) => {
+  const query = `update citizens set address = '${address}', mobile_num = '${mobile_num}', dob = '${dob}', marital_status = '${marital_status}' where citizen_id = ${citizen_id};`;
+  return sequelize.query(query, { type: QueryTypes.UPDATE });
 };
 
 //Check Citizen exists or not
 exports.checkCitizenId = (citizen_id) => {
-  return citizens.findOne({
-    where: {
-      citizen_id
-    }
-  }).then(
-    citizen_id => {
+  const query = `select * from citizens where citizen_id = ${citizen_id};`;
+  return sequelize
+    .query(query, { type: QueryTypes.SELECT })
+    .then((citizen_id) => {
       if (citizen_id) {
         return true;
       }
       return false;
-    }
-  )
-}
-
+    });
+};
 
 // Get total number of male and female citizens
 exports.findGenderDistribution = () => {
@@ -98,17 +91,53 @@ exports.findGenderDistribution = () => {
   return citizens.findAll({
     group: ["gender"],
     attributes: ["gender", [db.sequelize.fn("COUNT", "gender"), "genderCount"]],
-    raw: true
+    raw: true,
   });
 };
 
-
 // add new citizen
-exports.addNewCitizen = (citizen_id, first_name, last_name, address, mobile_num, dob, gender, marital_status, disabled, disbaled_percentage, caste, village_id) => {
+exports.addNewCitizen = (
+  citizen_id,
+  first_name,
+  last_name,
+  address,
+  mobile_num,
+  dob,
+  gender,
+  marital_status,
+  disabled,
+  disbaled_percentage,
+  caste,
+  village_id
+) => {
   return citizens.create({
-    citizen_id, first_name, last_name, address, mobile_num, dob, gender, marital_status, disabled, disbaled_percentage, caste, village_id
+    citizen_id,
+    first_name,
+    last_name,
+    address,
+    mobile_num,
+    dob,
+    gender,
+    marital_status,
+    disabled,
+    disbaled_percentage,
+    caste,
+    village_id,
   });
 };
 
+exports.searchCitizens = (query, limit, offset) => {
+  const searchQuery = `SELECT * FROM citizens JOIN village_master on 
+  citizens.village_id = village_master.village_id
+  WHERE  to_tsvector(f_concat_ws(' ', first_name, last_name))
+      @@ plainto_tsquery('${query}') limit ${limit} offset ${offset};`;
+  return sequelize.query(searchQuery, { type: QueryTypes.SELECT });
+}
 
-
+exports.countSearchedCitizens = (query) => {
+  const searchQuery = `SELECT count(*) FROM citizens JOIN village_master 
+  on citizens.village_id = village_master.village_id
+  WHERE  to_tsvector(f_concat_ws(' ', first_name, last_name))
+      @@ plainto_tsquery('${query}');`;
+  return sequelize.query(searchQuery, { type: QueryTypes.SELECT });
+}
diff --git a/interface/controllers/transactions.controller.js b/interface/controllers/transactions.controller.js
new file mode 100644
index 0000000..2627a0f
--- /dev/null
+++ b/interface/controllers/transactions.controller.js
@@ -0,0 +1,65 @@
+const {QueryTypes} = require('sequelize');
+const { sequelize } = require("../models");
+
+const getAgricultureTransactions = (limit, offset) => {
+    const query = `SELECT * FROM getAggricultureDetails() limit ${limit} offset ${offset};`;
+    return sequelize.query(query, { type: QueryTypes.SELECT })
+}
+
+const getAgricultureTransactionsCount = () => {
+    const query = `SELECT count(*) as count FROM getAggricultureDetails();`;
+    return sequelize.query(query, { type: QueryTypes.SELECT })
+}
+
+const getHospitalTransactions = (limit, offset) => {
+    const query = `SELECT * FROM getHospitalDetails() limit ${limit} offset ${offset};`;
+    return sequelize.query(query, { type: QueryTypes.SELECT })
+}
+
+const getHospitalTransactionsCount = () => {
+    const query = `SELECT count(*) as count FROM getHospitalDetails();`;
+    return sequelize.query(query, { type: QueryTypes.SELECT })
+}
+
+const getLPGTransactions = (limit, offset) => {
+    const query = `SELECT * FROM getLPGDetails() limit ${limit} offset ${offset};`;
+    return sequelize.query(query, { type: QueryTypes.SELECT })
+}
+
+const getLPGTransactionsCount = () => {
+    const query = `SELECT count(*) as count FROM getLPGDetails();`;
+    return sequelize.query(query, { type: QueryTypes.SELECT })
+}
+
+const getNREGSTransactions = (limit, offset) => {
+    const query = `SELECT * FROM getNREGSDetails() limit ${limit} offset ${offset};`;
+    return sequelize.query(query, { type: QueryTypes.SELECT })
+}
+
+const getNREGSTransactionsCount = () => {
+    const query = `SELECT count(*) as count FROM getNREGSDetails();`;
+    return sequelize.query(query, { type: QueryTypes.SELECT })
+}
+
+const getPensionTransactions = (limit, offset) => {
+    const query = `SELECT * FROM getPensionDetails() limit ${limit} offset ${offset};`;
+    return sequelize.query(query, { type: QueryTypes.SELECT })
+}
+
+const getPensionTransactionsCount = () => {
+    const query = `SELECT count(*) as count FROM getPensionDetails();`;
+    return sequelize.query(query, { type: QueryTypes.SELECT })
+}
+
+module.exports = {
+    getAgricultureTransactions,
+    getAgricultureTransactionsCount,
+    getHospitalTransactions,
+    getHospitalTransactionsCount,
+    getLPGTransactions,
+    getLPGTransactionsCount,
+    getNREGSTransactions,
+    getNREGSTransactionsCount,
+    getPensionTransactions,
+    getPensionTransactionsCount
+}
diff --git a/interface/models/aggriculture_transaction.js b/interface/models/aggriculture_transaction.js
deleted file mode 100644
index e69de29..0000000
--- a/interface/models/aggriculture_transaction.js
+++ /dev/null
diff --git a/interface/public/beneficiaries.js b/interface/public/beneficiaries.js
index 4db118e..3b35e53 100644
--- a/interface/public/beneficiaries.js
+++ b/interface/public/beneficiaries.js
@@ -2,20 +2,20 @@
 const queryString = window.location.search;
 const urlParams = new URLSearchParams(queryString);
 const page = urlParams.get("page") || 1;
-const limit = urlParams.get("limit") || 10;
+const limit = urlParams.get("limit") || 100;
 const numberOfPages = Math.ceil(count / limit);
 const pagination = $(".pagination");
 const pageLeft = $('#pageLeft');
 const pageRight = $('#pageRight');
 if (page > 1) {
   pageLeft.removeClass("disabled");
-  pageLeft.attr("href", `/beneficiaries?page=${page - 1}&limit=${limit}`);
+  pageLeft.attr("href", `/beneficiaries?page=${parseInt(page) - 1}&limit=${limit}`);
 } else {
   pageLeft.addClass("disabled");
 }
 if (page < numberOfPages) {
   pageRight.removeClass("disabled");
-  pageRight.attr("href", `/beneficiaries?page=${page + 1}&limit=${limit}`);
+  pageRight.attr("href", `/beneficiaries?page=${parseInt(page) + 1}&limit=${limit}`);
 } else {
   pageRight.addClass("disabled");
 }
diff --git a/interface/public/citizens.js b/interface/public/citizens.js
index ebfcd74..ea00aa5 100644
--- a/interface/public/citizens.js
+++ b/interface/public/citizens.js
@@ -12,25 +12,26 @@ const queryString = window.location.search;
 const urlParams = new URLSearchParams(queryString);
 const page = urlParams.get("page") || 1;
 const limit = urlParams.get("limit") || 10;
+const query = urlParams.get("query") || "";
 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}`);
+  pageLeft.attr("href", `${window.location.pathname}?page=${parseInt(page) - 1}&limit=${limit}&query=${query}`);
 } else {
   pageLeft.addClass("disabled");
 }
 if (page < numberOfPages) {
   pageRight.removeClass("disabled");
-  pageRight.attr("href", `/citizens?page=${page + 1}&limit=${limit}`);
+  pageRight.attr("href", `${window.location.pathname}?page=${parseInt(page) + 1}&limit=${limit}&query=${query}`);
 } else {
   pageRight.addClass("disabled");
 }
 
 function redirectToLimit(limit) {
-  window.location.href = `/citizens?page=1&limit=${limit}`;
+  window.location.href = `${window.location.pathname}?page=1&limit=${limit}&query=${query}`;
 }
 
 addPageNumbers(numberOfPages);
@@ -49,7 +50,7 @@ function addPageNumbers(numberOfPages) {
     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("href", `${window.location.pathname}?page=${i}&limit=${limit}&query=${query}`);
       linkElement.setAttribute("id", `page${i}`);
       linkElement.classList.add("item");
       pageRight.before(linkElement);
@@ -64,7 +65,7 @@ function addPageNumbers(numberOfPages) {
     if (page > 3) {
       const firstPage = document.createElement("a");
       firstPage.innerHTML = 1;
-      firstPage.setAttribute("href", `/citizens?page=1&limit=${limit}`);
+      firstPage.setAttribute("href", `${window.location.pathname}?page=1&limit=${limit}&query=${query}`);
       firstPage.setAttribute("id", `page1`);
       firstPage.classList.add("item");
       pageLeft.after(dots);
@@ -75,7 +76,7 @@ function addPageNumbers(numberOfPages) {
     if (page != numberOfPages) {
       const lastPage = document.createElement("a");
       lastPage.innerHTML = numberOfPages;
-      lastPage.setAttribute("href", `/citizens?page=${numberOfPages}&limit=${limit}`);
+      lastPage.setAttribute("href", `${window.location.pathname}?page=${numberOfPages}&limit=${limit}&query=${query}`);
       lastPage.classList.add("item");
       pageRight.before(lastPage);
     }
@@ -85,14 +86,16 @@ function addPageNumbers(numberOfPages) {
       // Insert before pageRight
       const linkElement = document.createElement("a");
       linkElement.innerHTML = i;
-      linkElement.setAttribute("href", `/citizens?page=${i}&limit=${limit}`);
+      linkElement.setAttribute("href", `${window.location.pathname}?page=${i}&limit=${limit}&query=${query}`);
       linkElement.setAttribute("id", `page${i}`);
       linkElement.classList.add("item");
       pageRight.before(linkElement);
     }
   }
-  const currentPageElement = document.getElementById(`page${page}`);
-  currentPageElement.classList.add("active");
+  const currentPageElement = document.getElementById(`page${page}&query=${query}`);
+  try {
+    currentPageElement.classList.add("active");
+  } catch (error) {}
 }
 
 function editCitizensRecord(citizen) {
@@ -119,7 +122,7 @@ function editCitizen(event) {
     citizen_id: $("#citizen_id").html(),
   };
   $.ajax({
-    url: "/api/citizens/edit",
+    url: "/api${window.location.pathname}/edit",
     type: "POST",
     data: data,
     success: function (response) {
@@ -133,7 +136,7 @@ function editCitizen(event) {
 function deleteCitizenRecord(citizen) {
   citizen_id = JSON.parse(citizen).citizen_id;
   $.ajax({
-    url: "/api/citizens/delete",
+    url: "/api${window.location.pathname}/delete",
     type: "POST",
     data: { citizen_id },
     success: function (response) {
diff --git a/interface/routes/index.js b/interface/routes/index.js
index fd4a0d5..1068941 100644
--- a/interface/routes/index.js
+++ b/interface/routes/index.js
@@ -1,70 +1,107 @@
 const express = require("express");
 const router = express.Router();
-const dashboardController = require('../controllers/dashboard.controller');
-const citizensController = require('../controllers/citizens.controller');
-const api = require('./api');
-const citizensAPI = require('./api/citizens');
-const geographyAPI = require('./api/geography');
+const dashboardController = require("../controllers/dashboard.controller");
+const citizensController = require("../controllers/citizens.controller");
+const api = require("./api");
+const citizensAPI = require("./api/citizens");
+const geographyAPI = require("./api/geography");
+const transactionsRoute = require("./transactions");
 
 // Setup api routes
-router.use('/api', api);
-router.use('/api/citizens', citizensAPI);
-router.use('/api/geography', geographyAPI);
+router.use("/api", api);
+router.use("/api/citizens", citizensAPI);
+router.use("/api/geography", geographyAPI);
+router.use("/transactions", transactionsRoute);
 
-
-router.get('/', (req, res) => {
-    Promise.all([dashboardController.genderDist(), dashboardController.ageDist(), dashboardController.casteDist(),
-    dashboardController.maritalDist(), dashboardController.disablePercentage(), dashboardController.citizensByDistrict()]).then(results => {
-        const [genderDist, ageDist, casteDist, maritalDist, disableDist, citizenDist] = results;
-        res.render('index', {
-            title: 'Home Page',
-            genderDist,
-            ageDist,
-            casteDist,
-            maritalDist,
-            disableDist,
-            citizenDist
-        });
+router.get("/", (req, res) => {
+  Promise.all([
+    dashboardController.genderDist(),
+    dashboardController.ageDist(),
+    dashboardController.casteDist(),
+    dashboardController.maritalDist(),
+    dashboardController.disablePercentage(),
+    dashboardController.citizensByDistrict(),
+  ]).then((results) => {
+    const [
+      genderDist,
+      ageDist,
+      casteDist,
+      maritalDist,
+      disableDist,
+      citizenDist,
+    ] = results;
+    res.render("index", {
+      title: "Home Page",
+      genderDist,
+      ageDist,
+      casteDist,
+      maritalDist,
+      disableDist,
+      citizenDist,
     });
+  });
 });
 
 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 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
-    Promise.all([citizensController.findXCitizens(limit, page), citizensController.getCountOfCitizens()]).then(results => {
-        const [citizens, count] = results;
-        res.render('citizens', {
-            title: 'Citizens',
-            citizens,
-            count: count[0].count,
-        });
+  // Get the citizens from the database
+  Promise.all([
+    citizensController.findXCitizens(limit, page),
+    citizensController.getCountOfCitizens(),
+  ]).then((results) => {
+    const [citizens, count] = results;
+    res.render("citizens", {
+      title: "Citizens",
+      citizens,
+      count: count[0].count,
     });
+  });
 });
 
+router.get("/search", (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;
+  const query = req.query.query;
+
+  // Get the citizens from the database
+  Promise.all([
+    citizensController.searchCitizens(query, limit, page),
+    citizensController.countSearchedCitizens(query),
+  ]).then((results) => {
+    const [citizens, count] = results;
+    res.render("citizens", {
+      title: `Search results for "${query}"`,
+      citizens,
+      count: count[0].count,
+    });
+  });
+});
 
 router.get("/addUser", (req, res) => {
-    res.render("addUser", {
-        title: "Add User"
-        });
-    }
-);
+  res.render("addUser", {
+    title: "Add User",
+  });
+});
 
 router.get("/beneficiaries", (req, res) => {
-    const limit = parseInt(req.query.limit, 10) || 100;
-    const page = req.query.page ? (req.query.page - 1) * limit : 0;
-    Promise.all([citizensController.getBeneficiaries(limit, page), citizensController.getCountOfCitizens()]).then(results => {
-        const [beneficiaries, count] = results;        
-        res.render('beneficiaries', {
-            title: 'Beneficiaries',
-            beneficiaries,
-            count: count[0].count,
-        });
+  const limit = parseInt(req.query.limit, 10) || 100;
+  const page = req.query.page ? (req.query.page - 1) * limit : 0;
+  Promise.all([
+    citizensController.getBeneficiaries(limit, page),
+    citizensController.getCountOfCitizens(),
+  ]).then((results) => {
+    const [beneficiaries, count] = results;
+    res.render("beneficiaries", {
+      title: "Beneficiaries",
+      beneficiaries,
+      count: count[0].count,
     });
+  });
 });
 
-
 // export the router
 module.exports = router;
diff --git a/interface/routes/transactions.js b/interface/routes/transactions.js
new file mode 100644
index 0000000..751cc32
--- /dev/null
+++ b/interface/routes/transactions.js
@@ -0,0 +1,85 @@
+const express = require("express");
+const router = express.Router();
+const transactionsController = require("../controllers/transactions.controller");
+
+router.get("/agriculture", (req, res) => {
+  const limit = parseInt(req.query.limit, 10) || 100;
+  const page = req.query.page ? (req.query.page - 1) * limit : 0;
+  Promise.all([
+    transactionsController.getAgricultureTransactions(limit, page),
+    transactionsController.getAgricultureTransactionsCount(),
+  ]).then((results) => {
+    const [transactions, count] = results;
+    res.render("agriculture", {
+      title: "Agriculture Transactions",
+      transactions,
+      count: count[0].count,
+    });
+  });
+});
+
+router.get("/hospital", (req, res) => {
+  const limit = parseInt(req.query.limit, 10) || 100;
+  const page = req.query.page ? (req.query.page - 1) * limit : 0;
+  Promise.all([
+    transactionsController.getHospitalTransactions(limit, page),
+    transactionsController.getHospitalTransactionsCount(),
+  ]).then((results) => {
+    const [transactions, count] = results;
+    res.render("hospital", {
+      title: "Hospital Transactions",
+      transactions,
+      count: count[0].count,
+    });
+  });
+});
+
+router.get("/lpg", (req, res) => {
+  const limit = parseInt(req.query.limit, 10) || 100;
+  const page = req.query.page ? (req.query.page - 1) * limit : 0;
+  Promise.all([
+    transactionsController.getLPGTransactions(limit, page),
+    transactionsController.getLPGTransactionsCount(),
+  ]).then((results) => {
+    const [transactions, count] = results;
+    res.render("lpg", {
+      title: "LPG Transactions",
+      transactions,
+      count: count[0].count,
+    });
+  });
+});
+
+router.get("/nregs", (req, res) => {
+  const limit = parseInt(req.query.limit, 10) || 100;
+  const page = req.query.page ? (req.query.page - 1) * limit : 0;
+  Promise.all([
+    transactionsController.getNREGSTransactions(limit, page),
+    transactionsController.getNREGSTransactionsCount(),
+  ]).then((results) => {
+    const [transactions, count] = results;
+    res.render("nregs", {
+      title: "NREGS Transactions",
+      transactions,
+      count: count[0].count,
+    });
+  });
+});
+
+router.get("/pension", (req, res) => {
+  const limit = parseInt(req.query.limit, 10) || 100;
+  const page = req.query.page ? (req.query.page - 1) * limit : 0;
+  Promise.all([
+    transactionsController.getPensionTransactions(limit, page),
+    transactionsController.getPensionTransactionsCount(),
+  ]).then((results) => {
+    const [transactions, count] = results;
+    res.render("pension", {
+      title: "Pension Transactions",
+      transactions,
+      count: count[0].count,
+    });
+  });
+});
+
+module.exports = router;
diff --git a/interface/server.js b/interface/server.js
index 4173d2f..5736d4c 100644
--- a/interface/server.js
+++ b/interface/server.js
@@ -2,7 +2,7 @@ const express = require("express");
 const app = express();
 const cors = require("cors");
 const db = require("./models");
-db.sequelize.sync();
+// db.sequelize.sync();
 
 app.use(cors());
 app.use(express.json());
diff --git a/interface/views/agriculture.ejs b/interface/views/agriculture.ejs
new file mode 100644
index 0000000..95e3052
--- /dev/null
+++ b/interface/views/agriculture.ejs
@@ -0,0 +1,198 @@
+<!DOCTYPE html>
+<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>
+    <%- include('partials/navbar') %>
+
+    <!-- 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(100)">100</div>
+          <div class="item" onclick="redirectToLimit(250)">250</div>
+          <div class="item" onclick="redirectToLimit(500)">500</div>
+          <div class="item" onclick="redirectToLimit(1000)">1000</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="scrollY">
+      <table class="ui selectable table">
+        <thead>
+          <tr>
+            <th>First Name</th>
+            <th>Last Name</th>
+            <th>Amount Remitted</th>
+            <th>Crop</th>
+            <th>Disbursed Date</th>
+          </tr>
+        </thead>
+        <tbody>
+          <% for(var i=0; i < transactions.length; i++) { %>
+          <tr>
+            <td><%= transactions[i].first_name %></td>
+            <td><%= transactions[i].last_name %></td>
+            <td><%= transactions[i].amount_remitted %></td>
+            <td><%= transactions[i].crop %></td>
+            <td><%= transactions[i].disbursed_date %></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>
+    // 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") || 100;
+    const numberOfPages = Math.ceil(count / limit);
+    const pagination = $(".pagination");
+    const pageLeft = $("#pageLeft");
+    const pageRight = $("#pageRight");
+    if (page > 1) {
+      pageLeft.removeClass("disabled");
+      pageLeft.attr(
+        "href",
+        `/transactions/agriculture?page=${parseInt(page) - 1}&limit=${limit}`
+      );
+    } else {
+      pageLeft.addClass("disabled");
+    }
+    if (page < numberOfPages) {
+      pageRight.removeClass("disabled");
+      pageRight.attr(
+        "href",
+        `/transactions/agriculture?page=${parseInt(page) + 1}&limit=${limit}`
+      );
+    } else {
+      pageRight.addClass("disabled");
+    }
+
+    function redirectToLimit(limit) {
+      window.location.href = `/transactions/agriculture?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",
+            `/transactions/agriculture?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",
+            `/transactions/agriculture?page=1&limit=${limit}`
+          );
+          firstPage.setAttribute("id", `page1`);
+          firstPage.classList.add("item");
+          pageLeft.after(dots);
+          pageLeft.after(firstPage);
+        }
+
+        // add last page
+        if (page != numberOfPages) {
+          const lastPage = document.createElement("a");
+          lastPage.innerHTML = numberOfPages;
+          lastPage.setAttribute(
+            "href",
+            `/transactions/agriculture?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",
+            `/transactions/agriculture?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");
+    }
+  </script>
+</html>
diff --git a/interface/views/citizens.ejs b/interface/views/citizens.ejs
index 2cb4ecf..5513bc3 100644
--- a/interface/views/citizens.ejs
+++ b/interface/views/citizens.ejs
@@ -72,7 +72,7 @@
     <%- include('partials/navbar') %>
 
     <!-- Drop down for selecting limit -->
-
+    <% if(citizens.length){ %>
     <div class="ui container">
       <div class="ui floating labeled icon dropdown button">
         <i class="list icon"></i>
@@ -85,7 +85,11 @@
         </div>
       </div>
     </div>
-
+    <% } %>
+    <% if(!citizens.length){ %>
+      <h1 style="text-align: center;">No Data Found</h1>
+    <% } %>
+    <% if(citizens.length){ %>
     <div class="scrollY">
       <table class="ui selectable table">
         <thead>
@@ -154,6 +158,7 @@
         </tfoot>
       </table>
     </div>
+    <% } %>
   </body>
   <%- include('partials/scripts') %>
   <script>
diff --git a/interface/views/hospital.ejs b/interface/views/hospital.ejs
new file mode 100644
index 0000000..962c742
--- /dev/null
+++ b/interface/views/hospital.ejs
@@ -0,0 +1,198 @@
+<!DOCTYPE html>
+<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>
+    <%- include('partials/navbar') %>
+
+    <!-- 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(100)">100</div>
+          <div class="item" onclick="redirectToLimit(250)">250</div>
+          <div class="item" onclick="redirectToLimit(500)">500</div>
+          <div class="item" onclick="redirectToLimit(1000)">1000</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="scrollY">
+      <table class="ui selectable table">
+        <thead>
+          <tr>
+            <th>First Name</th>
+            <th>Last Name</th>
+            <th>Disease Category</th>
+            <th>Disease Sub Category</th>
+            <th>Amount Charged</th>
+          </tr>
+        </thead>
+        <tbody>
+          <% for(var i=0; i < transactions.length; i++) { %>
+          <tr>
+            <td><%= transactions[i].first_name %></td>
+            <td><%= transactions[i].last_name %></td>
+            <td><%= transactions[i].disease_category %></td>
+            <td><%= transactions[i].disease_sub_category %></td>
+            <td><%= transactions[i].amount_charged %></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>
+    // 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") || 100;
+    const numberOfPages = Math.ceil(count / limit);
+    const pagination = $(".pagination");
+    const pageLeft = $("#pageLeft");
+    const pageRight = $("#pageRight");
+    if (page > 1) {
+      pageLeft.removeClass("disabled");
+      pageLeft.attr(
+        "href",
+        `/transactions/hospital?page=${parseInt(page) - 1}&limit=${limit}`
+      );
+    } else {
+      pageLeft.addClass("disabled");
+    }
+    if (page < numberOfPages) {
+      pageRight.removeClass("disabled");
+      pageRight.attr(
+        "href",
+        `/transactions/hospital?page=${parseInt(page) + 1}&limit=${limit}`
+      );
+    } else {
+      pageRight.addClass("disabled");
+    }
+
+    function redirectToLimit(limit) {
+      window.location.href = `/transactions/hospital?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",
+            `/transactions/hospital?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",
+            `/transactions/hospital?page=1&limit=${limit}`
+          );
+          firstPage.setAttribute("id", `page1`);
+          firstPage.classList.add("item");
+          pageLeft.after(dots);
+          pageLeft.after(firstPage);
+        }
+
+        // add last page
+        if (page != numberOfPages) {
+          const lastPage = document.createElement("a");
+          lastPage.innerHTML = numberOfPages;
+          lastPage.setAttribute(
+            "href",
+            `/transactions/hospital?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",
+            `/transactions/hospital?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");
+    }
+  </script>
+</html>
diff --git a/interface/views/index.ejs b/interface/views/index.ejs
index eebd413..14c98d4 100644
--- a/interface/views/index.ejs
+++ b/interface/views/index.ejs
@@ -2,6 +2,11 @@
 <html lang="en">
   <head>
     <%- include('partials/head') %>
+    <style>
+      .ui.menu {
+        margin-bottom: 0;
+      }
+    </style>
   </head>
 
   <body>
@@ -38,7 +43,18 @@
       </div>
     </div>
     <%- include('partials/navbar') %>
-    <div class="ui main container segment">
+    <div class="ui inverted vertical masthead center aligned segment" style="background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('https://media-exp1.licdn.com/dms/image/C561BAQH2gmHaPvj2UA/company-background_10000/0/1622700188261?e=2147483647&v=beta&t=cANraogFmQmMwo8_3XlLnOFTNp-sHwzNk94uezmJmIk');; background-position: 0 30%; background-repeat: no-repeat; background-size: cover;">
+      <div class="ui text container" style="margin: 8rem 0px;">
+        <h1 class="ui inverted header">
+          Unified Framework for Welfare Schemes
+        </h1>
+        <h2>Demonstrating various welfare schemes under a single dashboard</h2>
+        <div class="ui huge primary button" onclick="route('/citizens')">
+          View Citizens <i class="right arrow icon"></i>
+        </div>
+      </div>
+    </div>
+    <div class="ui main container segment" style="width: 80vw">
       <div class="ui three column grid">
         <div class="column">
           <div class="ui cards" id="genderdist"></div>
@@ -155,7 +171,6 @@
     // marital dist
     const maritalDist = JSON.parse(`<%- JSON.stringify(maritalDist) %>`);
 
-    
     var x = [];
     var y = [];
     for (var i = 0; i < maritalDist.length; i++) {
@@ -225,7 +240,7 @@
       y.push(citizenDist[i].district_dist);
     }
 
-    // plot bubble chart 
+    // plot bubble chart
     var trace6 = {
       x: x,
       y: y,
@@ -242,7 +257,5 @@
     };
     var config = { responsive: true };
     Plotly.newPlot("citizendist", data, layout, config);
-
-
   </script>
 </html>
diff --git a/interface/views/lpg.ejs b/interface/views/lpg.ejs
new file mode 100644
index 0000000..b91954f
--- /dev/null
+++ b/interface/views/lpg.ejs
@@ -0,0 +1,198 @@
+<!DOCTYPE html>
+<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>
+    <%- include('partials/navbar') %>
+
+    <!-- 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(100)">100</div>
+          <div class="item" onclick="redirectToLimit(250)">250</div>
+          <div class="item" onclick="redirectToLimit(500)">500</div>
+          <div class="item" onclick="redirectToLimit(1000)">1000</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="scrollY">
+      <table class="ui selectable table">
+        <thead>
+          <tr>
+            <th>First Name</th>
+            <th>Last Name</th>
+            <th>Booking Date</th>
+            <th>Amount Paid</th>
+            <th>Amount Remitted</th>
+          </tr>
+        </thead>
+        <tbody>
+          <% for(var i=0; i < transactions.length; i++) { %>
+          <tr>
+            <td><%= transactions[i].first_name %></td>
+            <td><%= transactions[i].last_name %></td>
+            <td><%= transactions[i].booking_date %></td>
+            <td><%= transactions[i].amount_paid %></td>
+            <td><%= transactions[i].amount_remitted %></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>
+    // 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") || 100;
+    const numberOfPages = Math.ceil(count / limit);
+    const pagination = $(".pagination");
+    const pageLeft = $("#pageLeft");
+    const pageRight = $("#pageRight");
+    if (page > 1) {
+      pageLeft.removeClass("disabled");
+      pageLeft.attr(
+        "href",
+        `/transactions/lpg?page=${parseInt(page) - 1}&limit=${limit}`
+      );
+    } else {
+      pageLeft.addClass("disabled");
+    }
+    if (page < numberOfPages) {
+      pageRight.removeClass("disabled");
+      pageRight.attr(
+        "href",
+        `/transactions/lpg?page=${parseInt(page) + 1}&limit=${limit}`
+      );
+    } else {
+      pageRight.addClass("disabled");
+    }
+
+    function redirectToLimit(limit) {
+      window.location.href = `/transactions/lpg?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",
+            `/transactions/lpg?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",
+            `/transactions/lpg?page=1&limit=${limit}`
+          );
+          firstPage.setAttribute("id", `page1`);
+          firstPage.classList.add("item");
+          pageLeft.after(dots);
+          pageLeft.after(firstPage);
+        }
+
+        // add last page
+        if (page != numberOfPages) {
+          const lastPage = document.createElement("a");
+          lastPage.innerHTML = numberOfPages;
+          lastPage.setAttribute(
+            "href",
+            `/transactions/lpg?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",
+            `/transactions/lpg?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");
+    }
+  </script>
+</html>
diff --git a/interface/views/nregs.ejs b/interface/views/nregs.ejs
new file mode 100644
index 0000000..dd2a20d
--- /dev/null
+++ b/interface/views/nregs.ejs
@@ -0,0 +1,196 @@
+<!DOCTYPE html>
+<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>
+    <%- include('partials/navbar') %>
+
+    <!-- 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(100)">100</div>
+          <div class="item" onclick="redirectToLimit(250)">250</div>
+          <div class="item" onclick="redirectToLimit(500)">500</div>
+          <div class="item" onclick="redirectToLimit(1000)">1000</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="scrollY">
+      <table class="ui selectable table">
+        <thead>
+          <tr>
+            <th>First Name</th>
+            <th>Last Name</th>
+            <th>Days Attended</th>
+            <th>Amount Remitted</th>
+          </tr>
+        </thead>
+        <tbody>
+          <% for(var i=0; i < transactions.length; i++) { %>
+          <tr>
+            <td><%= transactions[i].first_name %></td>
+            <td><%= transactions[i].last_name %></td>
+            <td><%= transactions[i].days_of_attended %></td>
+            <td><%= transactions[i].amount_remitted %></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>
+    // 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") || 100;
+    const numberOfPages = Math.ceil(count / limit);
+    const pagination = $(".pagination");
+    const pageLeft = $("#pageLeft");
+    const pageRight = $("#pageRight");
+    if (page > 1) {
+      pageLeft.removeClass("disabled");
+      pageLeft.attr(
+        "href",
+        `/transactions/nregs?page=${parseInt(page) - 1}&limit=${limit}`
+      );
+    } else {
+      pageLeft.addClass("disabled");
+    }
+    if (page < numberOfPages) {
+      pageRight.removeClass("disabled");
+      pageRight.attr(
+        "href",
+        `/transactions/nregs?page=${parseInt(page) + 1}&limit=${limit}`
+      );
+    } else {
+      pageRight.addClass("disabled");
+    }
+
+    function redirectToLimit(limit) {
+      window.location.href = `/transactions/nregs?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",
+            `/transactions/nregs?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",
+            `/transactions/nregs?page=1&limit=${limit}`
+          );
+          firstPage.setAttribute("id", `page1`);
+          firstPage.classList.add("item");
+          pageLeft.after(dots);
+          pageLeft.after(firstPage);
+        }
+
+        // add last page
+        if (page != numberOfPages) {
+          const lastPage = document.createElement("a");
+          lastPage.innerHTML = numberOfPages;
+          lastPage.setAttribute(
+            "href",
+            `/transactions/nregs?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",
+            `/transactions/nregs?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");
+    }
+  </script>
+</html>
diff --git a/interface/views/partials/navbar.ejs b/interface/views/partials/navbar.ejs
index 30289d2..9585454 100644
--- a/interface/views/partials/navbar.ejs
+++ b/interface/views/partials/navbar.ejs
@@ -1,3 +1,10 @@
+<style>
+  .ui.menu {
+    position: sticky !important;
+    top: 0;
+    z-index: 2;
+  }
+</style>
 <div class="ui menu">
   <a class="item" onclick="route('/')"> Home </a>
   <div class="ui pointing dropdown link item">
@@ -5,7 +12,7 @@
     <i class="dropdown icon"></i>
     <div class="menu">
       <div class="item" onclick="route('citizens')">Citizens</div>
-      <div class="item">
+      <!-- <div class="item">
         <i class="dropdown icon"></i>
         <span class="text">Amenities</span>
         <div class="menu">
@@ -28,28 +35,36 @@
           <div class="item">State</div>
           <div class="item">Village</div>
         </div>
-      </div>
+      </div> -->
       <div class="item">
         <i class="dropdown icon"></i>
         <span class="text">Transactions</span>
         <div class="menu">
-          <div class="item">Agricultural</div>
-          <div class="item">Hospital</div>
-          <div class="item">LPG</div>
-          <div class="item">NRegs</div>
-          <div class="item">Pension</div>
+          <div class="item" onclick="route('/transactions/agriculture')">
+            Agricultural
+          </div>
+          <div class="item" onclick="route('/transactions/hospital')">
+            Hospital
+          </div>
+          <div class="item" onclick="route('/transactions/lpg')">LPG</div>
+          <div class="item" onclick="route('/transactions/nregs')">NRegs</div>
+          <div class="item" onclick="route('/transactions/pension')">
+            Pension
+          </div>
         </div>
       </div>
     </div>
   </div>
 
-  <a class="item" onclick="route('beneficiaries')"> Scheme Wise Beneficiaries </a>
+  <a class="item" onclick="route('beneficiaries')">
+    Scheme Wise Beneficiaries
+  </a>
   <a class="item" onclick="route('addUser')"> Add User </a>
 
   <div class="right menu">
     <div class="item">
       <div class="ui icon input">
-        <input type="text" placeholder="Search..." />
+        <input type="text" placeholder="Search..." id="searchInput"/>
         <i class="search link icon"></i>
       </div>
     </div>
diff --git a/interface/views/partials/scripts.ejs b/interface/views/partials/scripts.ejs
index 1f0e375..85051fa 100644
--- a/interface/views/partials/scripts.ejs
+++ b/interface/views/partials/scripts.ejs
@@ -10,4 +10,12 @@
 <script src='https://cdn.plot.ly/plotly-2.11.1.min.js'></script>
 <script>
   $(".ui.dropdown").dropdown();
+  $(document).ready(function() {
+    // listen for return key press on search input
+    $("#searchInput").keyup(function(event) {
+      if (event.keyCode === 13 && $("#searchInput").val() !== "") {
+        route("/search?query=" + $("#searchInput").val());
+      }
+    });
+  });
 </script>
\ No newline at end of file
diff --git a/interface/views/pension.ejs b/interface/views/pension.ejs
new file mode 100644
index 0000000..8cab043
--- /dev/null
+++ b/interface/views/pension.ejs
@@ -0,0 +1,196 @@
+<!DOCTYPE html>
+<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>
+    <%- include('partials/navbar') %>
+
+    <!-- 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(100)">100</div>
+          <div class="item" onclick="redirectToLimit(250)">250</div>
+          <div class="item" onclick="redirectToLimit(500)">500</div>
+          <div class="item" onclick="redirectToLimit(1000)">1000</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="scrollY">
+      <table class="ui selectable table">
+        <thead>
+          <tr>
+            <th>First Name</th>
+            <th>Last Name</th>
+            <th>Date of Disbursement</th>
+            <th>Pension Amount</th>
+          </tr>
+        </thead>
+        <tbody>
+          <% for(var i=0; i < transactions.length; i++) { %>
+          <tr>
+            <td><%= transactions[i].first_name %></td>
+            <td><%= transactions[i].last_name %></td>
+            <td><%= transactions[i].pen_date_disbursment %></td>
+            <td><%= transactions[i].pen_amount %></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>
+    // 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") || 100;
+    const numberOfPages = Math.ceil(count / limit);
+    const pagination = $(".pagination");
+    const pageLeft = $("#pageLeft");
+    const pageRight = $("#pageRight");
+    if (page > 1) {
+      pageLeft.removeClass("disabled");
+      pageLeft.attr(
+        "href",
+        `/transactions/pension?page=${parseInt(page) - 1}&limit=${limit}`
+      );
+    } else {
+      pageLeft.addClass("disabled");
+    }
+    if (page < numberOfPages) {
+      pageRight.removeClass("disabled");
+      pageRight.attr(
+        "href",
+        `/transactions/pension?page=${parseInt(page) + 1}&limit=${limit}`
+      );
+    } else {
+      pageRight.addClass("disabled");
+    }
+
+    function redirectToLimit(limit) {
+      window.location.href = `/transactions/pension?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",
+            `/transactions/pension?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",
+            `/transactions/pension?page=1&limit=${limit}`
+          );
+          firstPage.setAttribute("id", `page1`);
+          firstPage.classList.add("item");
+          pageLeft.after(dots);
+          pageLeft.after(firstPage);
+        }
+
+        // add last page
+        if (page != numberOfPages) {
+          const lastPage = document.createElement("a");
+          lastPage.innerHTML = numberOfPages;
+          lastPage.setAttribute(
+            "href",
+            `/transactions/pension?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",
+            `/transactions/pension?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");
+    }
+  </script>
+</html>