added moderators ui

NEAR-DevHub · Jan 25, 2024 · b1c55f2 · b1c55f2
1 parent fc7fb47
commit b1c55f2
Show file tree

Hide file tree

Showing 11 changed files with 732 additions and 31 deletions.
diff --git a/src/devhub/components/molecule/DropDownWithSearch.jsx 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
@@ -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
@@ -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
@@ -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
@@ -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>
-);
+  </Container>
+);
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		return <div></div>;
		return <div>Accounting Page</div>;