Moderators UI

replacements.dev.json

@@ -5,6 +5,8 @@
   "REPL_NEAR": "discom.testnet",
   "REPL_MOB": "eugenethedream",
   "REPL_EFIZ": "efiz.testnet",
+  "REPL_TREASURY_CONTRACT": "treasury.dhthomas.testnet",
+  "REPL_PROPOSAL_CONTRACT": "proposal_feature.testnet",
   "REPL_DEVS": "nearbuilders.testnet",
   "REPL_SOCIAL_CONTRACT": "v1.social08.testnet"
 }

replacements.mainnet.json

@@ -5,6 +5,8 @@
   "REPL_NEAR": "near",
   "REPL_MOB": "mob.near",
   "REPL_EFIZ": "efiz.near",
+  "REPL_TREASURY_CONTRACT": "treasurydevhub.near",
+  "REPL_PROPOSAL_CONTRACT": "proposal_feature.testnet",
   "REPL_DEVS": "devs.near",
   "REPL_SOCIAL_CONTRACT": "social.near"
 }

replacements.testnet.json

@@ -5,6 +5,8 @@
   "REPL_NEAR": "discom.testnet",
   "REPL_MOB": "eugenethedream",
   "REPL_EFIZ": "efiz.testnet",
+  "REPL_TREASURY_CONTRACT": "treasury.dhthomas.testnet",
+  "REPL_PROPOSAL_CONTRACT": "proposal_feature.testnet",
   "REPL_DEVS": "nearbuilders.testnet",
   "REPL_SOCIAL_CONTRACT": "v1.social08.testnet"
 }

src/app.jsx

@@ -61,6 +61,15 @@ function Page() {
         />
       );
     }
+    // ?page=devDaoDashboard
+    case "devDaoDashboard": {
+      return (
+        <Widget
+          src={"${REPL_DEVHUB}/widget/devhub.page.dashboard"}
+          props={passProps}
+        />
+      );
+    }
     // ?page=community
     case "community": {
       return (

src/core/lib/timeUtils.jsx

@@ -0,0 +1,24 @@
+function getRelativeTime(timestamp) {
+  const currentTimestamp = new Date().getTime();
+  const targetTimestamp = new Date(timestamp).getTime();
+
+  const differenceInMilliseconds = currentTimestamp - targetTimestamp;
+  const differenceInDays = Math.floor(
+    differenceInMilliseconds / (1000 * 60 * 60 * 24)
+  );
+  const differenceInHours = Math.floor(
+    (differenceInMilliseconds % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
+  );
+
+  if (differenceInDays > 0) {
+    return `${differenceInDays} ${differenceInDays === 1 ? "day" : "days"} ago`;
+  } else if (differenceInHours > 0) {
+    return `${differenceInHours} ${
+      differenceInHours === 1 ? "hour" : "hours"
+    } ago`;
+  } else {
+    return "Less than an hour ago";
+  }
+}
+
+return { getRelativeTime };

src/devhub/components/molecule/DropDownWithSearch.jsx

@@ -0,0 +1,148 @@
+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,
+});
+
+useEffect(() => {
+  if (selectedOption.value !== selectedValue) {
+    setSelectedOption({
+      label:
+        options?.find((item) => item.value === selectedValue)?.label ??
+        defaultLabel,
+      value: defaultLabel,
+    });
+  }
+}, [selectedValue]);
+
+useEffect(() => {
+  setFilteredOptions(options);
+}, [options]);
+
+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.value);
+};
+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>
+);

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>

src/devhub/components/molecule/Pagination.jsx

@@ -0,0 +1,97 @@
+const totalPages = props.totalPages ?? 12; // Assume you have 12 pages
+const maxVisiblePages = props.maxVisiblePages ?? 5;
+const onPageClick = props.onPageClick
+  ? props.onPageClick
+  : () => console.log("clicked");
+const pagesToShow = Math.min(totalPages, maxVisiblePages);
+const [selectedPage, setSelectedPage] = useState(props.selectedPage ?? 1);
+const totalPageSets = Math.ceil(totalPages / maxVisiblePages);
+const [currentPageSet, setCurrentPageSet] = useState(1);
+
+const Pagination = styled.div`
+  display: flex;
+  gap: 12px;
+
+  div {
+    display: flex;
+    height: 30px;
+    min-width: 30px;
+    padding: 12px;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    border-radius: 8px;
+    transition: all 300ms;
+    cursor: pointer;
+
+    /* Other/Button_text */
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+
+    &.selected,
+    &:hover {
+      background-color: #23242b;
+      color: white;
+    }
+
+    &.arrow {
+      border: 1px solid rgba(255, 255, 255, 0.2);
+    }
+
+    &.disabled {
+      cursor: not-allowed;
+    }
+  }
+`;
+
+const handlePageClick = (pageNumber) => {
+  onPageClick(pageNumber);
+};
+
+const handleArrowClick = (direction) => {
+  if (direction === "left") {
+    setCurrentPageSet(Math.max(currentPageSet - 1, 1));
+  } else {
+    setCurrentPageSet(
+      Math.min(currentPageSet + 1, Math.ceil(totalPages / maxVisiblePages))
+    );
+  }
+};
+
+const getPageNumber = (index) =>
+  (currentPageSet - 1) * maxVisiblePages + index + 1;
+
+return (
+  <Pagination>
+    <div
+      className={`arrow ${currentPageSet === 1 ? "disabled" : undefined}`}
+      onClick={() => handleArrowClick("left")}
+    >
+      <i className="bi bi-arrow-left"></i>
+    </div>
+    {Array.from({ length: pagesToShow }).map((_, index) => {
+      const pageNumber = getPageNumber(index);
+      return (
+        <div
+          key={pageNumber}
+          className={pageNumber === selectedPage ? "selected" : undefined}
+          onClick={() => handlePageClick(pageNumber)}
+        >
+          {pageNumber}
+        </div>
+      );
+    })}
+    <div
+      className={`arrow ${
+        currentPageSet === Math.ceil(totalPages / maxVisiblePages)
+          ? "disabled"
+          : undefined
+      }`}
+      onClick={() => handleArrowClick("right")}
+    >
+      <i className="bi bi-arrow-right"></i>
+    </div>
+  </Pagination>
+);

src/devhub/entity/moderator/Accounting.jsx

@@ -0,0 +1 @@
+return <div>Accounting Page</div>;