From b1c55f24b44c105f9efbf42c0b84a6cc90acda11 Mon Sep 17 00:00:00 2001
From: Megha-Dev-19 <meghadev1901@gmail.com>
Date: Fri, 26 Jan 2024 00:16:15 +0530
Subject: [PATCH] added moderators ui

---
 .../molecule/DropDownWithSearch.jsx           | 133 +++++++++++
 src/devhub/components/molecule/Input.jsx      |   2 +-
 src/devhub/components/molecule/Pagination.jsx |   4 +-
 src/devhub/entity/moderator/Accounting.jsx    |   2 +-
 .../entity/moderator/CreatePaymentRequest.jsx | 187 ++++++++++++++--
 .../entity/moderator/CreateRecipient.jsx      | 211 ++++++++++++++++++
 src/devhub/entity/moderator/Dashboard.jsx     |  10 +-
 .../entity/moderator/ManageRecipients.jsx     | 209 ++++++++++++++++-
 src/devhub/entity/moderator/Staking.jsx       |   2 +-
 .../entity/moderator/TransactionHistory.jsx   |   1 -
 src/devhub/entity/trustee/History.jsx         |   2 +-
 11 files changed, 732 insertions(+), 31 deletions(-)
 create mode 100644 src/devhub/components/molecule/DropDownWithSearch.jsx
 create mode 100644 src/devhub/entity/moderator/CreateRecipient.jsx
 delete mode 100644 src/devhub/entity/moderator/TransactionHistory.jsx

diff --git a/src/devhub/components/molecule/DropDownWithSearch.jsx b/src/devhub/components/molecule/DropDownWithSearch.jsx
new file mode 100644
index 000000000..9313d2f8c
--- /dev/null
+++ b/src/devhub/components/molecule/DropDownWithSearch.jsx
@@ -0,0 +1,133 @@
+const { selectedValue, onChange, label, options, defaultLabel, showSearch } =
+  props;
+
+const [searchTerm, setSearchTerm] = useState("");
+const [filteredOptions, setFilteredOptions] = useState(options);
+const [isOpen, setIsOpen] = useState(false);
+const [selectedOption, setSelectedOption] = useState({
+  label:
+    options?.find((item) => item.value === selectedValue)?.label ??
+    defaultLabel,
+  value: defaultLabel,
+});
+
+const handleSearch = (event) => {
+  const searchTerm = event.target.value.toLowerCase();
+  setSearchTerm(searchTerm);
+
+  const filteredOptions = options.filter((option) =>
+    option.label.toLowerCase().includes(searchTerm)
+  );
+
+  setFilteredOptions(filteredOptions);
+};
+
+const toggleDropdown = () => {
+  setIsOpen(!isOpen);
+};
+
+const handleOptionClick = (option) => {
+  setSelectedOption(option);
+  setIsOpen(false);
+  onChange(option);
+};
+const Container = styled.div`
+  .custom-select {
+    position: relative;
+  }
+
+  .select-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius-top: 5px;
+    cursor: pointer;
+    background-color: #fff;
+  }
+
+  .options-card {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    border: 1px solid #ccc;
+    background-color: #fff;
+    padding: 0.5rem;
+    z-index: 9999;
+  }
+
+  .scroll-box {
+    max-height: 200px;
+    overflow-y: scroll;
+  }
+
+  .option {
+    padding: 10px;
+    cursor: pointer;
+    border-bottom: 1px solid #f0f0f0;
+    transition: background-color 0.3s ease;
+  }
+
+  .option:hover {
+    background-color: #f0f0f0; /* Custom hover effect color */
+  }
+
+  .option:last-child {
+    border-bottom: none;
+  }
+
+  .selected {
+    background-color: #f0f0f0;
+  }
+
+  input {
+    background-color: #f8f9fa;
+  }
+`;
+
+return (
+  <Container>
+    <label>{label}</label>
+    <div className="custom-select">
+      <div className="select-header" onClick={toggleDropdown}>
+        <div
+          className={`selected-option ${
+            selectedOption.label === defaultLabel ? "text-grey" : ""
+          }`}
+        >
+          {selectedOption.label}
+        </div>
+        <i class={`bi bi-chevron-${isOpen ? "up" : "down"}`}></i>
+      </div>
+
+      {isOpen && (
+        <div className="options-card">
+          {showSearch && (
+            <input
+              type="text"
+              className="form-control mb-2"
+              placeholder="Search options"
+              value={searchTerm}
+              onChange={handleSearch}
+            />
+          )}
+          <div className="scroll-box">
+            {filteredOptions.map((option) => (
+              <div
+                key={option.value}
+                className={`option ${
+                  selectedOption.value === option.value ? "selected" : ""
+                }`}
+                onClick={() => handleOptionClick(option)}
+              >
+                {option.label}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  </Container>
+);
diff --git a/src/devhub/components/molecule/Input.jsx b/src/devhub/components/molecule/Input.jsx
index 9aa5db5ad..923eba069 100644
--- a/src/devhub/components/molecule/Input.jsx
+++ b/src/devhub/components/molecule/Input.jsx
@@ -47,7 +47,7 @@ const TextInput = ({
   const renderedLabels = [
     (label?.length ?? 0) > 0 ? (
       <span className="d-inline-flex gap-1 text-wrap">
-        <span>{label}</span>
+        <label>{label}</label>
 
         {inputProps.required ? <span className="text-danger">*</span> : null}
       </span>
diff --git a/src/devhub/components/molecule/Pagination.jsx b/src/devhub/components/molecule/Pagination.jsx
index ed01ba1b7..f7b7786d1 100644
--- a/src/devhub/components/molecule/Pagination.jsx
+++ b/src/devhub/components/molecule/Pagination.jsx
@@ -14,8 +14,8 @@ const Pagination = styled.div`
 
   div {
     display: flex;
-    height: 40px;
-    min-width: 40px;
+    height: 30px;
+    min-width: 30px;
     padding: 12px;
     justify-content: center;
     align-items: center;
diff --git a/src/devhub/entity/moderator/Accounting.jsx b/src/devhub/entity/moderator/Accounting.jsx
index 74603496e..87a747f86 100644
--- a/src/devhub/entity/moderator/Accounting.jsx
+++ b/src/devhub/entity/moderator/Accounting.jsx
@@ -1 +1 @@
-return <div></div>;
+return <div>Accounting Page</div>;
diff --git a/src/devhub/entity/moderator/CreatePaymentRequest.jsx b/src/devhub/entity/moderator/CreatePaymentRequest.jsx
index 0713d60c6..51eef9e21 100644
--- a/src/devhub/entity/moderator/CreatePaymentRequest.jsx
+++ b/src/devhub/entity/moderator/CreatePaymentRequest.jsx
@@ -1,31 +1,178 @@
-const { useState } = require("react");
-
 const [form, setForm] = useState(null);
 
 // dropdown options
-const [fromWalletOptions, setFromWalletOptions] = useState([]);
+const [fromWalletOptions, setFromWalletOptions] = useState([
+  { label: "devhub.near", value: "devhub.near" },
+  { label: "devgovgigs.near", value: "devgovgigs.near" },
+]);
 const [proposals, setProposals] = useState([]);
-const [recipientsOptions, setReceientsOptions] = useState([]);
-const [tokensOptions, setTokenOptions] = useState([]);
+const [recipientsOptions, setReceientsOptions] = useState([
+  { label: "devhub.near", value: "devhub.near" },
+  { label: "devgovgigs.near", value: "devgovgigs.near" },
+]);
+const [tokensOptions, setTokenOptions] = useState([
+  { label: "NEAR", value: "near" },
+  { label: "USDT", value: "usdt" },
+]);
 
-return (
-  <div>
-    <h1>Create Payment Request</h1>
+const Container = styled.div`
+  margin-top: 10px;
+  font-size: 14px;
+  width: 40%;
+
+  @media screen and (max-width: 1300px) {
+    width: 60%;
+  }
+
+  @media screen and (max-width: 1000px) {
+    width: 100%;
+  }
+
+  .text-grey {
+    color: #b9b9b9 !important;
+  }
+
+  .card-custom {
+    border-radius: 5px;
+    background-color: white;
+  }
+
+  label {
+    font-weight: 600;
+    margin-bottom: 3px;
+    font-size: 15px;
+  }
+
+  .p-2 {
+    padding: 0px !important;
+  }
+
+  .green-btn {
+    background-color: #04a46e !important;
+    color: white;
+  }
+`;
+
+function onCancelClick() {}
 
-    <div>
+function onSubmitClick() {}
+
+const VerificationIconContainer = ({ isVerified, label }) => {
+  return (
+    <div className="d-flex gap-2 align-items-center">
+      {isVerified ? (
+        <img
+          src="https://ipfs.near.social/ipfs/bafkreidqveupkcc7e3rko2e67lztsqrfnjzw3ceoajyglqeomvv7xznusm"
+          height={30}
+        />
+      ) : (
+        "Need icon"
+      )}
+      <div>{label}</div>
+    </div>
+  );
+};
+
+return (
+  <Container className="d-flex gap-3 flex-column">
+    <div className="h5 bold mb-0">Create Payment Request</div>
+    <Widget
+      src={`${REPL_DEVHUB}/widget/devhub.components.molecule.DropDownWithSearch`}
+      props={{
+        selectedValue: form,
+        onChange: () => {},
+        label: "From Wallet",
+        options: fromWalletOptions,
+        showSearch: true,
+        defaultLabel: "neardevhub.near",
+      }}
+    />
+    <Widget
+      src={`${REPL_DEVHUB}/widget/devhub.components.molecule.DropDownWithSearch`}
+      props={{
+        selectedValue: form,
+        onChange: () => {},
+        label: "Choose Proposal",
+        options: proposals,
+        showSearch: true,
+        defaultLabel: "Seach proposals",
+      }}
+    />
+    <Widget
+      src={`${REPL_DEVHUB}/widget/devhub.components.molecule.DropDownWithSearch`}
+      props={{
+        selectedValue: form,
+        onChange: () => {},
+        label: "To Wallet (Recipient)",
+        options: recipientsOptions,
+        showSearch: true,
+        defaultLabel: "neardevhub.near",
+      }}
+    />
+    <div className="d-flex gap-2 flex-column">
+      <VerificationIconContainer isVerified={true} label="KYC Verified" />
+      <VerificationIconContainer
+        isVerified={true}
+        label="Test Transaction Confirmed"
+      />
+      <p className="text-grey">
+        You can add new recipients in the Manage Recipients tab.
+      </p>
+    </div>
+    <Widget
+      src={`${REPL_DEVHUB}/widget/devhub.components.molecule.DropDownWithSearch`}
+      props={{
+        selectedValue: form,
+        onChange: () => {},
+        label: "Currency",
+        options: tokensOptions,
+        showSearch: false,
+        defaultLabel: "NEAR Tokens",
+      }}
+    />
+    <Widget
+      src={`${REPL_DEVHUB}/widget/devhub.components.molecule.Input`}
+      props={{
+        className: "flex-grow-1",
+        key: `total-amount`,
+        label: "Total Amount",
+        onChange: () => {},
+        placeholder: "Enter amount",
+        value: form,
+        inputProps: {
+          type: "number",
+        },
+      }}
+    />
+    <Widget
+      src={`${REPL_DEVHUB}/widget/devhub.components.molecule.Input`}
+      props={{
+        className: "flex-grow-1",
+        key: `notes`,
+        label: "Notes",
+        onChange: () => {},
+        placeholder: "Enter memo",
+        value: form,
+      }}
+    />
+    <div className="d-flex mt-4 gap-3 justify-content-end">
+      <Widget
+        src={"${REPL_DEVHUB}/widget/devhub.components.molecule.Button"}
+        props={{
+          classNames: { root: "btn-outline-danger shadow-none border-0" },
+          label: "Cancel",
+          onClick: onCancelClick,
+        }}
+      />
       <Widget
-        src={`${REPL_DEVHUB}/widget/devhub.components.molecule.Input`}
+        src={"${REPL_DEVHUB}/widget/devhub.components.molecule.Button"}
         props={{
-          className: "flex-grow-1",
-          key: `column-${id}-title`,
-          label: "Title",
-          onChange: formUpdate({
-            path: ["payload", "columns", id, "title"],
-          }),
-          placeholder: "Enter column title",
-          value: title,
+          classNames: { root: "green-btn" },
+          disabled: false, // add checks
+          label: "Submit",
+          onClick: onSubmitClick,
         }}
       />
     </div>
-  </div>
-);
\ No newline at end of file
+  </Container>
+);
diff --git a/src/devhub/entity/moderator/CreateRecipient.jsx b/src/devhub/entity/moderator/CreateRecipient.jsx
new file mode 100644
index 000000000..a105b2ecb
--- /dev/null
+++ b/src/devhub/entity/moderator/CreateRecipient.jsx
@@ -0,0 +1,211 @@
+const [form, setForm] = useState(null);
+
+// dropdown options
+const [fromWalletOptions, setFromWalletOptions] = useState([]);
+const [selectedOption, setSelectedOption] = useState("Confirmed");
+
+const handleOptionChange = (event) => {
+  setSelectedOption(event.target.value);
+};
+
+const Container = styled.div`
+  margin-top: 10px;
+  font-size: 14px;
+  width: 40%;
+
+  @media screen and (max-width: 1300px) {
+    width: 60%;
+  }
+
+  @media screen and (max-width: 1000px) {
+    width: 100%;
+  }
+
+  .text-grey {
+    color: #b9b9b9 !important;
+  }
+
+  .card-custom {
+    border-radius: 5px;
+    background-color: white;
+  }
+
+  label {
+    font-weight: 600;
+    margin-bottom: 3px;
+    font-size: 15px;
+  }
+
+  .p-2 {
+    padding: 0px !important;
+  }
+
+  .green-btn {
+    background-color: #04a46e !important;
+    color: white;
+  }
+
+  .text-size-1 {
+    font-weight: normal;
+    font-size: 13px;
+  }
+
+  .text-dark-grey {
+    color: #818181;
+  }
+
+  .form-check-input:checked {
+    background-color: #04a46e;
+    border-color: #04a46e;
+    color: #fff;
+  }
+`;
+
+function onCancelClick() {}
+
+function onSubmitClick() {}
+
+const VerificationIconContainer = ({ isVerified, label }) => {
+  return (
+    <div className="d-flex gap-2 align-items-center">
+      {isVerified ? (
+        <img
+          src="https://ipfs.near.social/ipfs/bafkreidqveupkcc7e3rko2e67lztsqrfnjzw3ceoajyglqeomvv7xznusm"
+          height={30}
+        />
+      ) : (
+        "Need icon"
+      )}
+      <div>{label}</div>
+    </div>
+  );
+};
+
+return (
+  <Container className="d-flex gap-3 flex-column">
+    <div className="h5 bold mb-0">Create New Recipient</div>
+    <Widget
+      src={`${REPL_DEVHUB}/widget/devhub.components.molecule.Input`}
+      props={{
+        className: "flex-grow-1",
+        key: `first-name`,
+        label: "First Name",
+        onChange: () => {},
+        placeholder: "Enter first name",
+        value: form,
+      }}
+    />
+    <Widget
+      src={`${REPL_DEVHUB}/widget/devhub.components.molecule.Input`}
+      props={{
+        className: "flex-grow-1",
+        key: `last-name`,
+        label: "Last Name",
+        onChange: () => {},
+        placeholder: "Enter last name",
+        value: form,
+      }}
+    />
+    <Widget
+      src={`${REPL_DEVHUB}/widget/devhub.components.molecule.Input`}
+      props={{
+        className: "flex-grow-1",
+        key: `email`,
+        label: "Email Address",
+        onChange: () => {},
+        placeholder: "Enter email address",
+        value: form,
+      }}
+    />
+    <div>
+      <label>
+        <span>
+          Organisation (optional)
+          <div className="text-dark-grey text-size-1 mt-1">
+            If recipient is getting paid as an entity, please enter the
+            organization name. Note that KYB is required.
+          </div>
+        </span>
+      </label>
+      <input
+        className="flex-grow-1 form-control border border-2"
+        onChange={() => {}}
+        placeholder="Enter organisation"
+        value={form}
+      />
+    </div>
+
+    <Widget
+      src={`${REPL_DEVHUB}/widget/devhub.components.molecule.DropDownWithSearch`}
+      props={{
+        selectedValue: form,
+        onChange: () => {},
+        label: "Wallet Address",
+        options: fromWalletOptions,
+        showSearch: true,
+        defaultLabel: "neardevhub.near",
+      }}
+    />
+    <VerificationIconContainer isVerified={true} label="KYC Verified" />
+    <Widget
+      src={`${REPL_DEVHUB}/widget/devhub.components.molecule.Input`}
+      props={{
+        className: "flex-grow-1",
+        key: `url`,
+        label: "Test Transaction URL",
+        onChange: () => {},
+        placeholder: "Enter URL",
+        value: form,
+      }}
+    />
+    <div>
+      <label>Test Transaction</label>
+      <div>
+        <div className="form-check">
+          <input
+            type="radio"
+            className="form-check-input"
+            value="Confirmed"
+            checked={selectedOption === "Confirmed"}
+            onChange={handleOptionChange}
+          />
+          <label htmlFor="option1" className="form-check-label text-dark-grey">
+            Confirmed
+          </label>
+        </div>
+
+        <div className="form-check">
+          <input
+            type="radio"
+            className="form-check-input"
+            value="Not Confirmed"
+            checked={selectedOption === "Not Confirmed"}
+            onChange={handleOptionChange}
+          />
+          <label htmlFor="option2" className="form-check-label text-dark-grey">
+            Not Confirmed
+          </label>
+        </div>
+      </div>
+    </div>
+    <div className="d-flex mt-4 gap-3 justify-content-end">
+      <Widget
+        src={"${REPL_DEVHUB}/widget/devhub.components.molecule.Button"}
+        props={{
+          classNames: { root: "btn-outline-danger shadow-none border-0" },
+          label: "Cancel",
+          onClick: onCancelClick,
+        }}
+      />
+      <Widget
+        src={"${REPL_DEVHUB}/widget/devhub.components.molecule.Button"}
+        props={{
+          classNames: { root: "green-btn" },
+          disabled: false, // add checks
+          label: "Submit",
+          onClick: onSubmitClick,
+        }}
+      />
+    </div>
+  </Container>
+);
diff --git a/src/devhub/entity/moderator/Dashboard.jsx b/src/devhub/entity/moderator/Dashboard.jsx
index e2324f3f8..443304ba1 100644
--- a/src/devhub/entity/moderator/Dashboard.jsx
+++ b/src/devhub/entity/moderator/Dashboard.jsx
@@ -38,8 +38,10 @@ const tabs = [
   },
   {
     title: "Transaction History",
-    view: "TransactionHistory",
-    props: {},
+    view: "History",
+    props: {
+      title: "Transaction History",
+    },
   },
   {
     title: "Manage Recipients",
@@ -94,7 +96,9 @@ return (
     {currentTab && (
       <div className="w-100 h-100 mt-4" key={currentTab.title}>
         <Widget
-          src={`${REPL_DEVHUB}/widget/devhub.entity.moderator.${currentTab.view}`}
+          src={`${REPL_DEVHUB}/widget/devhub.entity.${
+            currentTab.view === "History" ? "trustee" : "moderator"
+          }.${currentTab.view}`}
           props={currentTab.props}
         />
       </div>
diff --git a/src/devhub/entity/moderator/ManageRecipients.jsx b/src/devhub/entity/moderator/ManageRecipients.jsx
index 74603496e..6b493173f 100644
--- a/src/devhub/entity/moderator/ManageRecipients.jsx
+++ b/src/devhub/entity/moderator/ManageRecipients.jsx
@@ -1 +1,208 @@
-return <div></div>;
+const treasuryDaoID = "${REPL_TREASURY_CONTRACT}";
+const resPerPage = 50;
+const [currentPage, setPage] = useState(0);
+
+const [showCreatePage, setCreatePage] = useState(false);
+
+const RecipientsData = [
+  {
+    id: 1,
+    firstName: "Megha",
+    lastName: "Goel",
+    organisation: "",
+    kycVerified: true,
+    accountId: "megha19.near",
+    testTransactionStatus: true,
+    totalTransactions: 10,
+    totalPaid: "1500",
+  },
+  {
+    id: 2,
+    firstName: "Megha",
+    lastName: "Goel",
+    organisation: "",
+    kycVerified: true,
+    accountId: "",
+    testTransactionStatus: false,
+    totalTransactions: 15,
+    totalPaid: "1000",
+  },
+];
+
+const Container = styled.div`
+  font-size: 13px;
+
+  .text-grey {
+    color: #b9b9b9 !important;
+  }
+
+  .card-custom {
+    border-radius: 5px;
+    background-color: white;
+  }
+
+  .text-size-2 {
+    font-size: 15px;
+  }
+
+  .text-dark-grey {
+    color: #687076;
+  }
+
+  .text-grey-100 {
+    background-color: #f5f5f5;
+  }
+
+  .text-underline {
+    text-decoration: underline;
+  }
+
+  td {
+    padding: 0.5rem;
+    color: inherit;
+  }
+
+  .overflow {
+    overflow: auto;
+  }
+
+  .max-w-100 {
+    max-width: 100%;
+  }
+
+  tr {
+    vertical-align: middle;
+  }
+
+  .text-red {
+    color: #dc6666;
+  }
+
+  .green-button {
+    background-color: #04a46e;
+    color: white;
+    border-color: #04a46e;
+  }
+
+  .grey-button {
+    background-color: #687076;
+    color: white;
+    border: none;
+    border-radius: 0.3rem;
+    padding-block: 0.2rem;
+    padding-inline: 0.5rem;
+  }
+`;
+
+const RecipientsComponent = () => {
+  return (
+    <tbody>
+      {RecipientsData?.map((item, index) => {
+        // USE API
+        const isReceiverkycbVerified = true;
+
+        return (
+          <tr>
+            <td>{item.id}</td>
+            <td>{item.firstName}</td>
+            <td className="text-truncate bold" style={{ maxWidth: 150 }}>
+              {item.lastName}
+            </td>
+            <td className="text-truncate bold" style={{ maxWidth: 150 }}>
+              {item.organisation ?? "-"}
+            </td>
+            <td className="text-center">
+              {isReceiverkycbVerified ? (
+                <img
+                  src="https://ipfs.near.social/ipfs/bafkreidqveupkcc7e3rko2e67lztsqrfnjzw3ceoajyglqeomvv7xznusm"
+                  height={30}
+                />
+              ) : (
+                "Need icon"
+              )}
+            </td>
+            <td className="bold">{item.accountId}</td>
+            <td className="bold">
+              {item.testTransactionStatus ? (
+                <span>Confirmed</span>
+              ) : (
+                <span className="text-red">Not Confirmed</span>
+              )}
+            </td>
+            <td className="bold text-underline">{item.totalTransactions}</td>
+            <td className="bold">
+              +{parseFloat(item.totalPaid).toLocaleString("en-US")}
+            </td>
+
+            <td>
+              <div className="d-flex gap-2 align-items-center">
+                <button className="grey-button" onClick={() => onPay(item.id)}>
+                  Edit
+                </button>
+                <button className="grey-button" onClick={() => onPay(item.id)}>
+                  Remove
+                </button>
+              </div>
+            </td>
+          </tr>
+        );
+      })}
+    </tbody>
+  );
+};
+
+if (showCreatePage) {
+  return (
+    <Widget
+      src={`${REPL_DEVHUB}/widget/devhub.entity.moderator.CreateRecipient`}
+    />
+  );
+}
+
+return (
+  <Container className="d-flex flex-column gap-4">
+    <div className="d-flex flex-row gap-2 align-items-center justify-content-between">
+      <div className="h5 bold mb-0">Manage Recipients</div>
+      <div className="d-flex gap-4 align-items-center">
+        <button className="btn btn-outline-primary d-flex gap-2 align-items-center justify-content-center p-2 px-3">
+          <i class="bi bi-sliders"></i> <div>Filters</div>
+        </button>
+        <button
+          className="btn green-button p-2 px-3"
+          onClick={() => setCreatePage(true)}
+        >
+          Create New
+        </button>
+      </div>
+    </div>
+
+    <div className="card-custom overflow p-3">
+      <table className="table">
+        <thead>
+          <tr className="text-grey">
+            <td>ID</td>
+            <td>FIRST NAME</td>
+            <td>LAST NAME</td>
+            <td>ORGANISATION</td>
+            <td>KYC/B VERIFIED</td>
+            <td>WALLET</td>
+            <td>TEST TRANSACTIONS</td>
+            <td># TRANSACTIONS</td>
+            <td>TOTAL PAID</td>
+            <td>ACTIONS</td>
+          </tr>
+        </thead>
+        <RecipientsComponent />
+      </table>
+    </div>
+    <div className="d-flex align-items-center justify-content-center">
+      <Widget
+        src={"${REPL_DEVHUB}/widget/devhub.components.molecule.Pagination"}
+        props={{
+          totalPages: 2,
+          onPageClick: (v) => setPage(v),
+        }}
+      />
+    </div>
+  </Container>
+);
diff --git a/src/devhub/entity/moderator/Staking.jsx b/src/devhub/entity/moderator/Staking.jsx
index 74603496e..2b485c3b0 100644
--- a/src/devhub/entity/moderator/Staking.jsx
+++ b/src/devhub/entity/moderator/Staking.jsx
@@ -1 +1 @@
-return <div></div>;
+return <div>Staking Page</div>;
diff --git a/src/devhub/entity/moderator/TransactionHistory.jsx b/src/devhub/entity/moderator/TransactionHistory.jsx
deleted file mode 100644
index 74603496e..000000000
--- a/src/devhub/entity/moderator/TransactionHistory.jsx
+++ /dev/null
@@ -1 +0,0 @@
-return <div></div>;
diff --git a/src/devhub/entity/trustee/History.jsx b/src/devhub/entity/trustee/History.jsx
index 1ee91d04a..b9813d5c0 100644
--- a/src/devhub/entity/trustee/History.jsx
+++ b/src/devhub/entity/trustee/History.jsx
@@ -166,7 +166,7 @@ const ProposalsComponent = () => {
 return (
   <Container className="d-flex flex-column gap-4">
     <div className="d-flex flex-row gap-2 align-items-center justify-content-between">
-      <div className="h5 bold mb-0">Payment History</div>
+      <div className="h5 bold mb-0">{props.title ?? "Payment History"}</div>
       {/* currently we don't support any filter */}
       {/* <div>
         <button className="btn btn-outline-primary d-flex gap-2 align-items-center justify-content-center p-2 px-3">