From 68240328827b080a7c35608a64af67305e55258b Mon Sep 17 00:00:00 2001
From: aliraza556 <alirazaakhtar1122@gmail.com>
Date: Thu, 16 May 2024 23:05:20 +0500
Subject: [PATCH] Add Brief field to Feature screen

---
 src/pages/index.tsx                           |   8 +-
 src/pages/tickets/style.ts                    | 179 ++++++
 .../workspaceHeader/WorkspaceHeaderStyles.tsx |  15 -
 .../workspace/workspaceHeader/index.tsx       |   3 +-
 src/people/widgetViews/BriefFeature.tsx       | 164 ++++++
 src/people/widgetViews/WorkspaceMission.tsx   | 448 ++-------------
 src/store/main.ts                             | 526 +++++++++++++-----
 7 files changed, 773 insertions(+), 570 deletions(-)
 create mode 100644 src/people/widgetViews/BriefFeature.tsx

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index e4422ade..9de0c873 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -5,7 +5,7 @@ import { AppMode } from 'config';
 import { Route, Switch } from 'react-router-dom';
 import { observer } from 'mobx-react-lite';
 import WorkspaceMission from 'people/widgetViews/WorkspaceMission';
-import WorkspaceFeature from 'people/widgetViews/WorkspaceFeature';
+import BriefFeatureComponent from '../people/widgetViews/BriefFeature.tsx';
 import PeopleHeader from '../people/main/Header';
 import TokenRefresh from '../people/utils/TokenRefresh';
 import BotsBody from './bots/Body';
@@ -49,12 +49,12 @@ const modeDispatchPages: Record<AppMode, () => React.ReactElement> = {
           <Route path="/workspace/:uuid">
             <WorkspaceMission />
           </Route>
-          <Route path="/feature/:feature_uuid">
-            <WorkspaceFeature />
-          </Route>
           <Route path="/leaderboard">
             <LeaderboardPage />
           </Route>
+          <Route path="/feature/:uuid">
+            <BriefFeatureComponent />
+          </Route>
           <Route path="/admin">
             <SuperAdmin />
           </Route>
diff --git a/src/pages/tickets/style.ts b/src/pages/tickets/style.ts
index 4ad6dda2..15fa93a9 100644
--- a/src/pages/tickets/style.ts
+++ b/src/pages/tickets/style.ts
@@ -19,6 +19,185 @@ export const WorkspaceBody = styled.div`
   overflow-x: hidden;
 `;
 
+export const FeatureBody = styled.div`
+  display: flex;
+  flex-direction: column;
+  background: var(--Search-bar-background, #f2f3f5);
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+`;
+
+export const Header = styled.div`
+  height: 130px;
+  width: 65%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #fff;
+`;
+
+export const Leftheader = styled.div`
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const HeaderWrap = styled.div`
+  display: flex;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: #fff;
+`;
+
+export const DataWrap = styled.div`
+  padding: 40px 50px;
+  display: flex;
+  width: 50%;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: left;
+  justify-content: center;
+
+  @media only screen and (max-width: 900px) {
+    width: 90%;
+    padding: 30px 40px;
+  }
+
+  @media only screen and (max-width: 500px) {
+    width: 90%;
+    padding: 20px 10px;
+  }
+`;
+
+export const FieldWrap = styled.div`
+  margin-bottom: 30px;
+`;
+
+export const Label = styled.h5`
+  font-size: 1.12rem;
+  font-weight: bolder;
+`;
+
+export const Data = styled.div`
+  border: 1px solid #ccc;
+  min-height: 50px;
+  border-radius: 5px;
+  padding: 20px 30px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  white-space: pre-wrap;
+
+  .MaterialIcon {
+    font-style: normal;
+    font-weight: 900;
+    font-size: 1.4rem;
+    color: #000000;
+  }
+`;
+
+export const OptionsWrap = styled.div`
+  position: absolute;
+  right: 6px;
+  top: 4px;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  button {
+    border: 0.5px solid #000000;
+    font-size: 0.8rem;
+    font-weight: 700;
+    border-radius: 5px;
+    padding: 2px 10px;
+  }
+`;
+
+export const TextArea = styled.textarea`
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  border: 2px solid #dde1e5;
+  outline: none;
+  caret-color: #618aff;
+  color: #3c3f41;
+  font-family: 'Barlow';
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px;
+  width: 100%;
+  resize: none;
+  min-height: 5.9375rem;
+
+  ::placeholder {
+    color: #b0b7bc;
+    font-family: 'Barlow';
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+  }
+  :focus {
+    border: 2px solid #82b4ff;
+  }
+`;
+
+export const ButtonWrap = styled.div`
+  margin-left: auto;
+  margin-top: 10px;
+  display: flex;
+  gap: 15px;
+`;
+
+interface ButtonProps {
+  color?: string;
+}
+export const ActionButton = styled.button<ButtonProps>`
+  padding: 5px 20px;
+  border-radius: 5px;
+  background: ${(p: any) => {
+    if (p.color === 'primary') {
+      return 'rgb(97, 138, 255)';
+    }
+  }};
+  color: ${(p: any) => {
+    if (p.color === 'primary') {
+      return '#FFF';
+    }
+  }};
+  border: ${(p: any) => {
+    if (p.color === 'primary') {
+      return '1px solid rgb(97, 138, 255)';
+    } else {
+      return '1px solid #636363';
+    }
+  }};
+`;
+
+export const FeatureLabel = styled.p`
+  color: var(--Text-2, #3c3f41);
+  font-family: Barlow;
+  font-size: 28px;
+  font-style: normal;
+  font-weight: 700;
+  margin: 2px;
+  display: flex;
+  align-items: center;
+`;
+
+export const FeatureName = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+`;
+
 export const Backdrop = styled.div`
   position: fixed;
   z-index: 1;
diff --git a/src/pages/tickets/workspace/workspaceHeader/WorkspaceHeaderStyles.tsx b/src/pages/tickets/workspace/workspaceHeader/WorkspaceHeaderStyles.tsx
index bab407f0..ca28d2bd 100644
--- a/src/pages/tickets/workspace/workspaceHeader/WorkspaceHeaderStyles.tsx
+++ b/src/pages/tickets/workspace/workspaceHeader/WorkspaceHeaderStyles.tsx
@@ -5,15 +5,6 @@ interface styledProps {
   color?: any;
 }
 
-export const Header = styled.div`
-  height: 130px;
-  width: 65%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background: #fff;
-`;
-
 export const UrlButtonContainer = styled.div`
   width: 180px;
   display: flex;
@@ -133,12 +124,6 @@ export const FilterLabel = styled.label`
   line-height: 17px;
   letter-spacing: 0.15px;
 `;
-export const Leftheader = styled.div`
-  display: flex;
-  gap: 20px;
-  align-items: center;
-  justify-content: center;
-`;
 export const CompanyNameAndLink = styled.div`
   display: flex;
   flex-direction: column;
diff --git a/src/pages/tickets/workspace/workspaceHeader/index.tsx b/src/pages/tickets/workspace/workspaceHeader/index.tsx
index fb0f46f5..e7c83e35 100644
--- a/src/pages/tickets/workspace/workspaceHeader/index.tsx
+++ b/src/pages/tickets/workspace/workspaceHeader/index.tsx
@@ -8,6 +8,7 @@ import { WorkspaceBountyHeaderProps } from '../../../../people/interfaces.ts';
 import { SearchBar } from '../../../../components/common/index.tsx';
 import { useStores } from '../../../../store/index.tsx';
 import { userCanManageBounty, filterCount } from '../../../../helpers/index.ts';
+import { Leftheader, Header } from '../../style.ts';
 import addBounty from './Icons/addBounty.svg';
 import file from './Icons/file.svg';
 import githubIcon from './Icons/githubIcon.svg';
@@ -25,11 +26,9 @@ import {
   FillContainer,
   Filters,
   FiltersRight,
-  Header,
   ImageContainer,
   Img,
   InternalContainer,
-  Leftheader,
   NewStatusContainer,
   NumberOfBounties,
   PrimaryText,
diff --git a/src/people/widgetViews/BriefFeature.tsx b/src/people/widgetViews/BriefFeature.tsx
new file mode 100644
index 00000000..c1ce7e23
--- /dev/null
+++ b/src/people/widgetViews/BriefFeature.tsx
@@ -0,0 +1,164 @@
+import { EuiGlobalToastList, EuiLoadingSpinner } from '@elastic/eui';
+import {
+  Body,
+  FeatureBody,
+  FeatureLabel,
+  FeatureName,
+  Leftheader,
+  Header,
+  HeaderWrap,
+  DataWrap,
+  FieldWrap,
+  Label,
+  Data,
+  OptionsWrap,
+  TextArea,
+  ButtonWrap,
+  ActionButton
+} from 'pages/tickets/style';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { useStores } from 'store';
+import { Feature } from 'store/main';
+import MaterialIcon from '@material/react-material-icon';
+
+const BriefFeatureComponent = () => {
+  const { main, ui } = useStores();
+  const { uuid } = useParams<{ uuid: string }>();
+  const [featureData, setFeatureData] = useState<Feature>();
+  const [loading, setLoading] = useState(true);
+  const [displayBrief, setDidplayBrief] = useState(false);
+  const [editBrief, setEditBrief] = useState(false);
+  const [brief, setBrief] = useState(featureData?.brief);
+
+  const getFeatureData = useCallback(async () => {
+    if (!uuid) return;
+    console.log('uuid: ', uuid);
+    const featureData = await main.getUserFeatureByUuid(uuid);
+    if (!featureData) return;
+    setFeatureData(featureData);
+
+    setLoading(false);
+  }, [uuid, main]);
+
+  useEffect(() => {
+    getFeatureData();
+  }, [getFeatureData]);
+
+  const toastsEl = (
+    <EuiGlobalToastList
+      toasts={ui.toasts}
+      dismissToast={() => ui.setToasts([])}
+      toastLifeTimeMs={3000}
+    />
+  );
+
+  if (loading) {
+    return (
+      <Body style={{ justifyContent: 'center', alignItems: 'center' }}>
+        <EuiLoadingSpinner size="xl" />
+      </Body>
+    );
+  }
+
+  const editBriefActions = () => {
+    setEditBrief(!editBrief);
+    setDidplayBrief(false);
+  };
+
+  const briefChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const newValue = e.target.value;
+    if (newValue.length) {
+      setBrief(newValue);
+    }
+  };
+
+  const submitBrief = async () => {
+    const body = {
+      brief: brief ?? '',
+      uuid: featureData?.uuid ?? '',
+      workspace_uuid: featureData?.workspace_uuid ?? ''
+    };
+    await main.addOrUpdateFeature(body);
+    await getFeatureData();
+    setEditBrief(false);
+  };
+
+  return (
+    !loading && (
+      <FeatureBody>
+        <HeaderWrap>
+          <Header>
+            <Leftheader>
+              <FeatureName>
+                <FeatureLabel>{featureData?.name}</FeatureLabel>
+              </FeatureName>
+            </Leftheader>
+          </Header>
+        </HeaderWrap>
+        <DataWrap>
+          <FieldWrap>
+            <Label>Feature Brief</Label>
+            <Data>
+              <OptionsWrap>
+                <MaterialIcon
+                  icon={'more_horiz'}
+                  className="MaterialIcon"
+                  onClick={() => setDidplayBrief(!displayBrief)}
+                  data-testid="brief-option-btn"
+                />
+                <button
+                  style={{ display: displayBrief ? 'block' : 'none' }}
+                  onClick={editBriefActions}
+                  data-testid="brief-edit-btn"
+                >
+                  Edit
+                </button>
+              </OptionsWrap>
+              {!editBrief && (
+                <div
+                  dangerouslySetInnerHTML={{
+                    __html: featureData?.brief
+                      ? featureData.brief.replace(/\n/g, '<br/>')
+                      : 'No brief yet'
+                  }}
+                />
+              )}
+
+              {editBrief && (
+                <>
+                  <TextArea
+                    placeholder="Enter Brief"
+                    onChange={briefChange}
+                    value={brief ?? featureData?.brief}
+                    data-testid="brief-textarea"
+                    rows={10}
+                    cols={50}
+                  />
+                  <ButtonWrap>
+                    <ActionButton
+                      onClick={() => setEditBrief(!editBrief)}
+                      data-testid="brief-cancel-btn"
+                    >
+                      Cancel
+                    </ActionButton>
+                    <ActionButton
+                      color="primary"
+                      onClick={submitBrief}
+                      data-testid="brief-update-btn"
+                    >
+                      Update
+                    </ActionButton>
+                  </ButtonWrap>
+                </>
+              )}
+            </Data>
+          </FieldWrap>
+        </DataWrap>
+        {toastsEl}
+      </FeatureBody>
+    )
+  );
+};
+
+export default BriefFeatureComponent;
diff --git a/src/people/widgetViews/WorkspaceMission.tsx b/src/people/widgetViews/WorkspaceMission.tsx
index 8d84823f..9ad31000 100644
--- a/src/people/widgetViews/WorkspaceMission.tsx
+++ b/src/people/widgetViews/WorkspaceMission.tsx
@@ -1,31 +1,34 @@
 import { EuiGlobalToastList, EuiLoadingSpinner } from '@elastic/eui';
-import { Body, WorkspaceBody } from 'pages/tickets/style';
+import {
+  Body,
+  WorkspaceBody,
+  Leftheader,
+  Header,
+  HeaderWrap,
+  DataWrap,
+  FieldWrap,
+  Label,
+  Data,
+  OptionsWrap,
+  TextArea,
+  ButtonWrap,
+  ActionButton
+} from 'pages/tickets/style';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { useStores } from 'store';
-import { Feature, featureLimit, Workspace } from 'store/interface';
+import { Workspace } from 'store/main';
 import MaterialIcon from '@material/react-material-icon';
-import { Button, Modal } from 'components/common';
 import {
-  Leftheader,
   ImageContainer,
   CompanyNameAndLink,
   CompanyLabel,
   UrlButtonContainer,
-  UrlButton,
-  Header
+  UrlButton
 } from 'pages/tickets/workspace/workspaceHeader/WorkspaceHeaderStyles';
 import githubIcon from 'pages/tickets/workspace/workspaceHeader/Icons/githubIcon.svg';
 import websiteIcon from 'pages/tickets/workspace/workspaceHeader/Icons/websiteIcon.svg';
 import styled from 'styled-components';
-import { useIsMobile } from 'hooks';
-import { colors } from '../../config/colors';
-import paginationarrow1 from '../../pages/superadmin/header/icons/paginationarrow1.svg';
-import paginationarrow2 from '../../pages/superadmin/header/icons/paginationarrow2.svg';
-import AddFeature from './workspace/AddFeatureModal';
-import { ActionButton, RowFlex, ButtonWrap } from './workspace/style';
-
-const color = colors['light'];
 
 export const ImgText = styled.h3`
   color: #b0b7bc;
@@ -41,207 +44,6 @@ export const ImgText = styled.h3`
   margin-bottom: 0;
 `;
 
-const HeaderWrap = styled.div`
-  display: flex;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  background: #fff;
-`;
-
-const DataWrap = styled.div`
-  padding: 40px 50px;
-  display: flex;
-  width: 50%;
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  align-items: left;
-  justify-content: center;
-
-  @media only screen and (max-width: 900px) {
-    width: 90%;
-    padding: 30px 40px;
-  }
-
-  @media only screen and (max-width: 500px) {
-    width: 90%;
-    padding: 20px 10px;
-  }
-`;
-
-const FieldWrap = styled.div`
-  margin-bottom: 30px;
-`;
-
-const Label = styled.h5`
-  font-size: 1.12rem;
-  font-weight: bolder;
-`;
-
-const Data = styled.div`
-  border: 1px solid #ccc;
-  min-height: 50px;
-  border-radius: 5px;
-  padding: 20px 30px;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-
-  .MaterialIcon {
-    font-style: normal;
-    font-weight: 900;
-    font-size: 1.4rem;
-    color: #000000;
-  }
-`;
-
-const OptionsWrap = styled.div`
-  position: absolute;
-  right: 6px;
-  top: 4px;
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  button {
-    border: 0.5px solid #000000;
-    font-size: 0.8rem;
-    font-weight: 700;
-    border-radius: 5px;
-    padding: 2px 10px;
-  }
-`;
-
-const TextArea = styled.textarea`
-  padding: 0.5rem 1rem;
-  border-radius: 0.375rem;
-  border: 2px solid #dde1e5;
-  outline: none;
-  caret-color: #618aff;
-  color: #3c3f41;
-  font-family: 'Barlow';
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 20px;
-  width: 100%;
-  resize: none;
-  min-height: 5.9375rem;
-
-  ::placeholder {
-    color: #b0b7bc;
-    font-family: 'Barlow';
-    font-size: 13px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 20px;
-  }
-  :focus {
-    border: 2px solid #82b4ff;
-  }
-`;
-
-const FeaturesWrap = styled.div`
-  margin-top: 25px;
-`;
-
-const FeatureDataWrap = styled.div`
-  padding: 15px;
-  margin-bottom: 10px;
-  border: 1px solid #ccc;
-  border-radius: 5px;
-  display: flex;
-  gap: 1rem;
-`;
-
-const FeatureCount = styled.div`
-  padding: 5px;
-  width: 42px;
-  height: 42px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid #ccc;
-  font-size: 1rem;
-  font-weight: 700;
-`;
-
-const FeatureData = styled.div`
-  margin-top: 10px;
-  min-width: calc(100% - 52px - 1rem);
-  font-size: 1rem;
-  font-weight: 700;
-`;
-
-const FeatureDetails = styled.div`
-  border: 1px solid #ccc;
-  margin-top: 10px;
-  min-height: 50px;
-  min-width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
-const FeatureText = styled.p`
-  padding: 0px;
-  margin: 0px;
-`;
-
-const PaginatonSection = styled.div`
-  height: 150px;
-  flex-shrink: 0;
-  align-self: stretch;
-  border-radius: 8px;
-  padding: 1em;
-`;
-
-interface PaginationButtonsProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  active: boolean;
-}
-
-const PaginationButtons = styled.button<PaginationButtonsProps>`
-  border-radius: 3px;
-  width: 30px;
-  height: 30px;
-  flex-shrink: 0;
-  outline: none;
-  border: none;
-  text-align: center;
-  margin: 5px;
-  background: ${(props: any) => (props.active ? 'var(--Active-blue, #618AFF)' : 'white')};
-  color: ${(props: any) => (props.active ? 'white' : 'black')};
-`;
-
-const PageContainer = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-const PaginationImg = styled.img`
-  cursor: pointer;
-`;
-
-const FlexDiv = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 2px;
-
-  .euiPopover__anchor {
-    margin-top: 6px !important;
-  }
-`;
-
-const FeatureLink = styled.a`
-  text-decoration: none;
-  color: #000;
-`;
-
 const WorkspaceMission = () => {
   const { main, ui } = useStores();
   const { uuid } = useParams<{ uuid: string }>();
@@ -253,16 +55,6 @@ const WorkspaceMission = () => {
   const [displayTactics, setDidplayTactics] = useState(false);
   const [mission, setMission] = useState(workspaceData?.mission);
   const [tactics, setTactics] = useState(workspaceData?.tactics);
-  const [featureModal, setFeatureModal] = useState(false);
-  const [features, setFeatures] = useState<Feature[]>([]);
-  const [currentPage, setCurrentPage] = useState(1);
-  const [featuresCount, setFeaturesCount] = useState(0);
-  const [activeTabs, setActiveTabs] = useState<number[]>([]);
-
-  const paginationLimit = Math.floor(featuresCount / featureLimit) + 1;
-  const visibleTabs = 3;
-
-  const isMobile = useIsMobile();
 
   const getWorkspaceData = useCallback(async () => {
     if (!uuid) return;
@@ -277,46 +69,21 @@ const WorkspaceMission = () => {
     getWorkspaceData();
   }, [getWorkspaceData]);
 
-  const getFeaturesCount = useCallback(async () => {
-    if (!uuid) return;
-    const featuresCount = await main.getWorkspaceFeaturesCount(uuid);
-    if (!featuresCount) return;
-    setFeaturesCount(featuresCount);
-
-    setLoading(false);
-  }, [uuid, main]);
-
-  useEffect(() => {
-    getFeaturesCount();
-  }, [getFeaturesCount]);
-
-  const getFeatures = useCallback(async () => {
-    if (!uuid) return;
-    const features = await main.getWorkspaceFeatures(uuid, { page: currentPage });
-    if (!features) return;
-    setFeatures(features);
-    getFeaturesCount();
-
-    setLoading(false);
-  }, [uuid, main, getFeaturesCount, currentPage]);
-
-  useEffect(() => {
-    getFeatures();
-  }, [getFeatures]);
-
-  const getActiveTabs = useCallback(() => {
-    const dataNumber: number[] = [];
-    for (let i = 1; i <= Math.ceil(paginationLimit); i++) {
-      if (i > visibleTabs) break;
-      dataNumber.push(i);
-    }
-
-    setActiveTabs(dataNumber);
-  }, [paginationLimit]);
+  const toastsEl = (
+    <EuiGlobalToastList
+      toasts={ui.toasts}
+      dismissToast={() => ui.setToasts([])}
+      toastLifeTimeMs={3000}
+    />
+  );
 
-  useEffect(() => {
-    getActiveTabs();
-  }, [getActiveTabs]);
+  if (loading) {
+    return (
+      <Body style={{ justifyContent: 'center', alignItems: 'center' }}>
+        <EuiLoadingSpinner size="xl" />
+      </Body>
+    );
+  }
 
   const handleWebsiteButton = (websiteUrl: string) => {
     window.open(websiteUrl, '_blank');
@@ -369,68 +136,6 @@ const WorkspaceMission = () => {
     setEditTactics(false);
   };
 
-  const toggleFeatureModal = () => {
-    setFeatureModal(!featureModal);
-  };
-
-  const paginateNext = () => {
-    const activeTab = paginationLimit > visibleTabs;
-    const activePage = currentPage < featuresCount / featureLimit;
-    if (activePage && activeTab) {
-      const dataNumber: number[] = activeTabs;
-      let nextPage: number;
-      if (currentPage < visibleTabs) {
-        nextPage = visibleTabs + 1;
-        if (setCurrentPage) setCurrentPage(nextPage);
-      } else {
-        nextPage = currentPage + 1;
-        if (setCurrentPage) setCurrentPage(nextPage);
-      }
-      dataNumber.push(nextPage);
-      dataNumber.shift();
-    }
-  };
-
-  const paginatePrev = () => {
-    const firtsTab = activeTabs[0];
-    const lastTab = activeTabs[6];
-    if (firtsTab > 1) {
-      const dataNumber: number[] = activeTabs;
-      let nextPage: number;
-      if (lastTab > visibleTabs) {
-        nextPage = lastTab - visibleTabs;
-      } else {
-        nextPage = currentPage - 1;
-      }
-      if (setCurrentPage) setCurrentPage(currentPage - 1);
-      dataNumber.pop();
-      const newActivetabs = [nextPage, ...dataNumber];
-      setActiveTabs(newActivetabs);
-    }
-  };
-
-  const paginate = (page: number) => {
-    if (setCurrentPage) {
-      setCurrentPage(page);
-    }
-  };
-
-  const toastsEl = (
-    <EuiGlobalToastList
-      toasts={ui.toasts}
-      dismissToast={() => ui.setToasts([])}
-      toastLifeTimeMs={3000}
-    />
-  );
-
-  if (loading) {
-    return (
-      <Body style={{ justifyContent: 'center', alignItems: 'center' }}>
-        <EuiLoadingSpinner size="xl" />
-      </Body>
-    );
-  }
-
   return (
     !loading && (
       <WorkspaceBody>
@@ -502,7 +207,6 @@ const WorkspaceMission = () => {
                     <ActionButton
                       onClick={() => setEditMission(!editMission)}
                       data-testid="mission-cancel-btn"
-                      color="cancel"
                     >
                       Cancel
                     </ActionButton>
@@ -552,7 +256,6 @@ const WorkspaceMission = () => {
                     <ActionButton
                       data-testid="tactics-cancel-btn"
                       onClick={() => setEditTactics(!editTactics)}
-                      color="cancel"
                     >
                       Cancel
                     </ActionButton>
@@ -568,97 +271,8 @@ const WorkspaceMission = () => {
               )}
             </Data>
           </FieldWrap>
-          <FieldWrap>
-            <RowFlex>
-              <Label>Features</Label>
-              <Button
-                onClick={toggleFeatureModal}
-                style={{
-                  borderRadius: '5px',
-                  margin: 0,
-                  marginLeft: 'auto'
-                }}
-                dataTestId="new-feature-btn"
-                text="New Feature"
-              />
-            </RowFlex>
-            <FeaturesWrap>
-              {features &&
-                features.map((feat: Feature, i: number) => (
-                  <FeatureDataWrap key={i}>
-                    <FeatureCount>{i + 1}</FeatureCount>
-                    <FeatureData>
-                      <FeatureLink href={`/feature/${feat.uuid}`} target="_blank">
-                        {feat.name}
-                      </FeatureLink>
-                      <FeatureDetails>
-                        <FeatureText>Filter Status</FeatureText>
-                      </FeatureDetails>
-                    </FeatureData>
-                  </FeatureDataWrap>
-                ))}
-            </FeaturesWrap>
-            <PaginatonSection>
-              <FlexDiv>
-                {featuresCount > featureLimit ? (
-                  <PageContainer role="pagination">
-                    <PaginationImg
-                      src={paginationarrow1}
-                      alt="pagination arrow 1"
-                      onClick={() => paginatePrev()}
-                    />
-                    {activeTabs.map((page: number) => (
-                      <PaginationButtons
-                        data-testid={'page'}
-                        key={page}
-                        onClick={() => paginate(page)}
-                        active={page === currentPage}
-                      >
-                        {page}
-                      </PaginationButtons>
-                    ))}
-                    <PaginationImg
-                      src={paginationarrow2}
-                      alt="pagination arrow 2"
-                      onClick={() => paginateNext()}
-                    />
-                  </PageContainer>
-                ) : null}
-              </FlexDiv>
-            </PaginatonSection>
-          </FieldWrap>
         </DataWrap>
         {toastsEl}
-        <Modal
-          visible={featureModal}
-          style={{
-            height: '100%',
-            flexDirection: 'column'
-          }}
-          envStyle={{
-            marginTop: isMobile ? 64 : 0,
-            background: color.pureWhite,
-            zIndex: 20,
-            maxHeight: '100%',
-            borderRadius: '10px',
-            minWidth: isMobile ? '100%' : '25%',
-            minHeight: isMobile ? '100%' : '20%'
-          }}
-          overlayClick={toggleFeatureModal}
-          bigCloseImage={toggleFeatureModal}
-          bigCloseImageStyle={{
-            top: '-18px',
-            right: '-18px',
-            background: '#000',
-            borderRadius: '50%'
-          }}
-        >
-          <AddFeature
-            closeHandler={toggleFeatureModal}
-            getFeatures={getFeatures}
-            workspace_uuid={uuid}
-          />
-        </Modal>
       </WorkspaceBody>
     )
   );
diff --git a/src/store/main.ts b/src/store/main.ts
index 82937cb9..ca7bc6e1 100644
--- a/src/store/main.ts
+++ b/src/store/main.ts
@@ -3,49 +3,365 @@ import memo from 'memo-decorator';
 import { action, makeAutoObservable, observable } from 'mobx';
 import { persist } from 'mobx-persist';
 import api from '../api';
+import { Extras } from '../components/form/inputs/widgets/interfaces';
 import { getHostIncludingDockerHosts } from '../config/host';
 import { TribesURL } from '../config/host';
 import { randomString } from '../helpers';
 import { getUserAvatarPlaceholder } from './lib';
 import { uiStore } from './ui';
-import {
-  BountyStatus,
-  Tribe,
-  Bot,
-  QueryParams,
-  Person,
-  PersonPost,
-  PersonBounty,
-  PersonOffer,
-  ClaimOnLiquid,
-  LnAuthData,
-  LnInvoice,
-  Workspace,
-  CreateWorkspaceInput,
-  WorkspaceUser,
-  BountyRoles,
-  PaymentHistory,
-  BudgetHistory,
-  InvoiceDetails,
-  InvoiceError,
-  FilterStatusCount,
-  BudgetWithdrawSuccess,
-  BountyMetrics,
-  defaultBountyStatus,
-  defaultWorkspaceBountyStatus,
-  queryLimit,
-  orgQuerLimit,
-  paginationQueryLimit,
-  peopleQueryLimit,
-  queryLimitTribes,
-  Feature,
-  featureLimit
-} from './interface';
+
+export const queryLimitTribes = 100;
+export const queryLimit = 10;
+export const orgQuerLimit = 500;
+export const paginationQueryLimit = 20;
+export const peopleQueryLimit = 500;
 
 function makeTorSaveURL(host: string, key: string) {
   return `sphinx.chat://?action=save&host=${host}&key=${key}`;
 }
 
+export interface Tribe {
+  uuid: string;
+  name: string;
+  unique_name: string;
+  owner: string;
+  pubkey: string; // group encryption key
+  price: number;
+  img: string;
+  tags: string[];
+  description: string;
+  member_count: number;
+  last_active: number;
+  matchCount?: number; // for tag search
+}
+
+export interface Bot {
+  id?: number;
+  uuid: string;
+  name: string;
+  owner_pubkey: string;
+  unique_name: string;
+  price_per_use: number;
+  created: string;
+  updated: string;
+  unlisted: boolean;
+  deleted: boolean;
+  owner_route_hint: string;
+  owner: string;
+  pubkey: string; // group encryption key
+  price: number;
+  img: string;
+  tags: string[];
+  description: string;
+  member_count: number;
+  hide?: boolean;
+}
+
+export interface Person {
+  id: number;
+  unique_name: string;
+  owner_pubkey: string;
+  uuid: string;
+  owner_alias: string;
+  description: string;
+  img: string;
+  tags: string[];
+  pubkey?: string;
+  photo_url: string;
+  alias: string;
+  route_hint: string;
+  owner_route_hint?: string;
+  contact_key: string;
+  price_to_meet: number;
+  last_login?: number;
+  url: string;
+  verification_signature: string;
+  extras: Extras;
+  hide?: boolean;
+  commitment_fee?: number;
+  assigned_hours?: number;
+  bounty_expires?: number;
+}
+
+export interface WorkspaceUser {
+  id: number;
+  owner_pubkey: string;
+  org_uuid: string;
+  created: string;
+  updated: string;
+}
+
+export interface PersonFlex {
+  id?: number;
+  unique_name?: string;
+  owner_pubkey?: string;
+  owner_alias?: string;
+  description?: string;
+  img?: string;
+  tags?: string[];
+  pubkey?: string;
+  photo_url?: string;
+  alias?: string;
+  route_hint?: string;
+  contact_key?: string;
+  last_login?: number;
+  price_to_meet?: number;
+  url?: string;
+  verification_signature?: string;
+  extras?: Extras;
+  hide?: boolean;
+}
+
+export interface PersonPost {
+  person: PersonFlex;
+  title?: string;
+  description?: string;
+  created: number;
+}
+
+export interface PersonBounty {
+  person?: any;
+  body?: any;
+  org_uuid?: any;
+  title?: string;
+  description?: string;
+  owner_id: string;
+  created?: number;
+  show?: boolean;
+  assignee?: any;
+  wanted_type: string;
+  type?: string;
+  price?: string;
+  codingLanguage: string;
+  estimated_session_length: string;
+  bounty_expires?: string;
+  commitment_fee?: number;
+}
+
+export type WorkspaceTransactionType = 'deposit' | 'payment' | 'withdraw';
+
+export interface PaymentHistory {
+  id: number;
+  bounty_id: number;
+  amount: number;
+  workspace_uuid: string;
+  sender_name: string;
+  sender_pubkey: string;
+  sender_img: string;
+  receiver_name: string;
+  receiver_pubkey: string;
+  receiver_img: string;
+  created: string;
+  updated: string;
+  payment_type: WorkspaceTransactionType;
+  status: boolean;
+}
+
+export interface BudgetHistory {
+  id: number;
+  amount: number;
+  org_uuid: string;
+  payment_type: string;
+  created: string;
+  updated: string;
+  sender_pub_key: string;
+  sender_name: string;
+  status: boolean;
+}
+
+export interface PersonOffer {
+  person: PersonFlex;
+  title: string;
+  description: string;
+  created: number;
+}
+
+export interface Jwt {
+  jwt: string;
+}
+
+export interface QueryParams {
+  page?: number;
+  limit?: number;
+  sortBy?: string;
+  direction?: string;
+  search?: string;
+  resetPage?: boolean;
+  languages?: string;
+  org_uuid?: string;
+  provider?: string;
+  workspace?: string;
+}
+
+export interface ClaimOnLiquid {
+  asset: number;
+  to: string;
+  amount?: number;
+  memo: string;
+}
+
+export interface LnAuthData {
+  encode: string;
+  k1: string;
+}
+
+export interface LnInvoice {
+  success: boolean;
+  response: {
+    invoice: string;
+  };
+}
+
+export interface Feature {
+  id: string;
+  uuid: string;
+  workspace_uuid: string;
+  name: string;
+  brief?: string;
+  requirements?: string;
+  architecture?: string;
+  created: string;
+  updated: string;
+  created_by: string;
+  updated_by: string;
+}
+
+export interface Workspace {
+  id: string;
+  uuid: string;
+  name: string;
+  description?: string;
+  github?: string;
+  website?: string;
+  owner_pubkey: string;
+  img: string;
+  mission?: string;
+  tactics?: string;
+  created: string;
+  updated: string;
+  show: boolean;
+  bounty_count?: number;
+  budget?: number;
+  deleted?: boolean;
+}
+
+export interface CreateWorkspaceInput {
+  img: string;
+  name: string;
+  description?: string;
+  github?: string;
+  website?: string;
+}
+
+export interface CreateFeatureInput {
+  uuid: string;
+  workspace_uuid: string;
+  name?: string;
+  brief?: string;
+  requirements?: string;
+  architecture?: string;
+}
+
+export interface BountyRoles {
+  name: string;
+}
+
+export interface InvoiceDetails {
+  success: boolean;
+  response: {
+    settled: boolean;
+    payment_request: string;
+    payment_hash: string;
+    preimage: string;
+    amount: number;
+  };
+}
+
+export interface InvoiceError {
+  success: boolean;
+  error: string;
+}
+
+export interface BudgetWithdrawSuccess {
+  success: boolean;
+  response: {
+    success: boolean;
+    response: {
+      payment_request: string;
+    };
+  };
+}
+
+export interface FilterStatusCount {
+  assigned: number;
+  paid: number;
+  open: number;
+}
+
+export interface BountyMetrics {
+  bounties_posted: number;
+  bounties_paid: number;
+  bounties_assigned?: number;
+  bounties_paid_average: number;
+  sats_posted: number;
+  sats_paid: number;
+  sats_paid_percentage: number;
+  average_paid: number;
+  average_completed: number;
+  unique_hunters_paid: number;
+  new_hunters_paid: number;
+}
+
+export interface BountyStatus {
+  Open: boolean;
+  Assigned: boolean;
+  Completed: boolean;
+  Paid: boolean;
+}
+
+export const defaultBountyStatus: BountyStatus = {
+  Open: true,
+  Assigned: false,
+  Completed: false,
+  Paid: false
+};
+
+export interface WorkspaceBudget {
+  org_uuid: string;
+  current_budget: number;
+  open_budget: number;
+  open_count: number;
+  assigned_budget: number;
+  assigned_count: number;
+  completed_budget: number;
+  completed_count: number;
+}
+
+export const defaultWorkspaceBudget: WorkspaceBudget = {
+  org_uuid: '',
+  current_budget: 0,
+  open_budget: 0,
+  open_count: 0,
+  assigned_budget: 0,
+  assigned_count: 0,
+  completed_budget: 0,
+  completed_count: 0
+};
+
+export const defaultWorkspaceBountyStatus: BountyStatus = {
+  Open: false,
+  Assigned: false,
+  Paid: false,
+  Completed: false
+};
+
+export const defaultSuperAdminBountyStatus: BountyStatus = {
+  Open: false,
+  Assigned: false,
+  Completed: false,
+  Paid: false
+};
+
 export class MainStore {
   [x: string]: any;
   tribes: Tribe[] = [];
@@ -2001,6 +2317,51 @@ export class MainStore {
     }
   }
 
+  async getUserFeatureByUuid(uuid: string): Promise<Feature | undefined> {
+    try {
+      if (!uiStore.meInfo) return undefined;
+      const info = uiStore.meInfo;
+      console.log('TribesURL', TribesURL);
+      const r: any = await fetch(`${TribesURL}/features/${uuid}`, {
+        method: 'GET',
+        mode: 'cors',
+        headers: {
+          'x-jwt': info.tribe_jwt,
+          'Content-Type': 'application/json'
+        }
+      });
+
+      const data = await r.json();
+      return await data;
+    } catch (e) {
+      console.log('Error getUserFeatureByUuid', e);
+      return undefined;
+    }
+  }
+
+  @action async addOrUpdateFeature(body: CreateFeatureInput): Promise<any> {
+    try {
+      if (!uiStore.meInfo) return null;
+      const info = uiStore.meInfo;
+      const r: any = await fetch(`${TribesURL}/features`, {
+        method: 'POST',
+        mode: 'cors',
+        body: JSON.stringify({
+          ...body
+        }),
+        headers: {
+          'x-jwt': info.tribe_jwt,
+          'Content-Type': 'application/json'
+        }
+      });
+
+      return r;
+    } catch (e) {
+      console.log('Error addOrUpdateFeature', e);
+      return false;
+    }
+  }
+
   async uploadFile(body: FormData): Promise<null | Response> {
     if (!uiStore.meInfo) return null;
     const info = uiStore.meInfo;
@@ -2550,105 +2911,6 @@ export class MainStore {
     }
   }
 
-  async addWorkspaceFeature(body: { workspace_uuid: string; name: string }): Promise<any> {
-    try {
-      if (!uiStore.meInfo) return {};
-      const info = uiStore.meInfo;
-      const r: any = await fetch(`${TribesURL}/features`, {
-        method: 'POST',
-        body: JSON.stringify(body),
-        mode: 'cors',
-        headers: {
-          'x-jwt': info.tribe_jwt,
-          'Content-Type': 'application/json'
-        }
-      });
-
-      return r;
-    } catch (e) {
-      console.error('addWorkspaceFeature', e);
-    }
-  }
-
-  async getWorkspaceFeatures(uuid: string, params: QueryParams): Promise<Feature[]> {
-    try {
-      if (!uiStore.meInfo) return [];
-      const info = uiStore.meInfo;
-
-      const queryParams: QueryParams = {
-        limit: featureLimit,
-        sortBy: 'created',
-        search: '',
-        page: 1,
-        resetPage: false,
-        ...params
-      };
-
-      // if we don't pass the params, we should use previous params for invalidate query
-      const query = this.appendQueryParams(
-        `features/forworkspace/${uuid}`,
-        featureLimit,
-        queryParams
-      );
-
-      const r: any = await fetch(`${TribesURL}/${query}`, {
-        method: 'GET',
-        mode: 'cors',
-        headers: {
-          'x-jwt': info.tribe_jwt,
-          'Content-Type': 'application/json'
-        }
-      });
-
-      return r.json();
-    } catch (e) {
-      console.error('getWorkspaceFeatures', e);
-      return [];
-    }
-  }
-
-  async getWorkspaceFeaturesCount(uuid: string): Promise<number> {
-    try {
-      if (!uiStore.meInfo) return 0;
-      const info = uiStore.meInfo;
-
-      const r: any = await fetch(`${TribesURL}/features/workspace/count/${uuid}`, {
-        method: 'GET',
-        mode: 'cors',
-        headers: {
-          'x-jwt': info.tribe_jwt,
-          'Content-Type': 'application/json'
-        }
-      });
-
-      return r.json();
-    } catch (e) {
-      console.error('getWorkspaceFeaturesCount', e);
-      return 0;
-    }
-  }
-
-  async getFeaturesByUuid(uuid: string): Promise<Feature | undefined> {
-    try {
-      if (!uiStore.meInfo) return undefined;
-      const info = uiStore.meInfo;
-
-      const r: any = await fetch(`${TribesURL}/features/${uuid}`, {
-        method: 'GET',
-        mode: 'cors',
-        headers: {
-          'x-jwt': info.tribe_jwt,
-          'Content-Type': 'application/json'
-        }
-      });
-
-      return r.json();
-    } catch (e) {
-      console.error('getFeaturesByUuid', e);
-      return undefined;
-    }
-  }
-
   async getBountyMetrics(
     start_date: string,
     end_date: string,