From eaaf0b025de1f4e6e16d3f0d11e7daa0cbb954c8 Mon Sep 17 00:00:00 2001
From: Ariunzaya <91462097+ariunzayarin@users.noreply.github.com>
Date: Wed, 27 Sep 2023 21:41:01 +0800
Subject: [PATCH] fix(settings): structure (#4647)

---
 .../settings/main/components/Settings.tsx     |   2 +-
 .../settings/team/components/branch/Form.tsx  |  26 ++--
 .../team/components/branch/MainList.tsx       | 128 ++++++++++--------
 .../components/common/SettingsSideBar.tsx     |  45 ++++--
 .../team/components/department/Form.tsx       |  26 ++--
 .../team/components/department/MainList.tsx   | 125 +++++++++--------
 .../team/components/structure/Form.tsx        |  12 +-
 .../team/components/structure/Settings.tsx    |   3 +-
 .../team/components/structure/View.tsx        |  27 ++--
 .../settings/team/components/unit/Form.tsx    |  10 +-
 .../team/components/unit/MainList.tsx         |  98 ++++++++------
 .../team/containers/branch/MainList.tsx       |  10 +-
 .../team/containers/common/SettingSideBar.tsx |  80 +++++++++++
 .../team/containers/department/MainList.tsx   |   1 +
 .../team/containers/structure/Box.tsx         |   9 +-
 .../settings/team/containers/unit/Form.tsx    |   6 +-
 .../team/containers/unit/MainList.tsx         |  10 +-
 .../src/modules/settings/team/styles.ts       |  32 +++--
 .../src/components/HeaderDescription.tsx      |   2 +-
 packages/erxes-ui/src/layout/styles.ts        |   7 +-
 20 files changed, 417 insertions(+), 242 deletions(-)
 create mode 100644 packages/core-ui/src/modules/settings/team/containers/common/SettingSideBar.tsx

diff --git a/packages/core-ui/src/modules/settings/main/components/Settings.tsx b/packages/core-ui/src/modules/settings/main/components/Settings.tsx
index 3da156269bb..df566c29595 100644
--- a/packages/core-ui/src/modules/settings/main/components/Settings.tsx
+++ b/packages/core-ui/src/modules/settings/main/components/Settings.tsx
@@ -145,7 +145,7 @@ class Settings extends React.PureComponent {
             )}
             {this.renderBox(
               'Structure',
-              '/images/icons/erxes-23.svg',
+              '/images/icons/erxes-15.svg',
               '/settings/structure',
               'usersAll',
               teamPermissions
diff --git a/packages/core-ui/src/modules/settings/team/components/branch/Form.tsx b/packages/core-ui/src/modules/settings/team/components/branch/Form.tsx
index 5049fc427da..ecb2bda796f 100644
--- a/packages/core-ui/src/modules/settings/team/components/branch/Form.tsx
+++ b/packages/core-ui/src/modules/settings/team/components/branch/Form.tsx
@@ -9,7 +9,6 @@ import { __ } from 'modules/common/utils';
 import { IBranch } from '@erxes/ui/src/team/types';
 import SelectTeamMembers from '@erxes/ui/src/team/containers/SelectTeamMembers';
 import ContactInfoForm from '../common/ContactInfoForm';
-import SelectBranches from '@erxes/ui/src/team/containers/SelectBranches';
 
 type Props = {
   renderButton: (props: IButtonMutateProps) => JSX.Element;
@@ -19,7 +18,7 @@ type Props = {
 };
 
 export default function BranchForm(props: Props) {
-  const { closeModal, renderButton } = props;
+  const { closeModal, renderButton, branches } = props;
   const object = props.branch || ({} as IBranch);
 
   const [userIds, setUserIds] = useState(
@@ -75,6 +74,14 @@ export default function BranchForm(props: Props) {
   const renderContent = (formProps: IFormProps) => {
     const { values, isSubmitted } = formProps;
 
+    const generateOptions = () => {
+      return branches.map(branch => (
+        <option key={branch._id} value={branch._id}>
+          {branch.title}
+        </option>
+      ));
+    };
+
     return (
       <>
         <FormGroup>
@@ -120,13 +127,16 @@ export default function BranchForm(props: Props) {
 
         <FormGroup>
           <ControlLabel>{__('Parent')}</ControlLabel>
-          <SelectBranches
-            label="Choose parent"
+          <FormControl
+            {...formProps}
             name="parentId"
-            initialValue={parentId || ''}
-            onSelect={onChangeParent}
-            multi={false}
-          />
+            componentClass="select"
+            defaultValue={parentId || null}
+            onChange={onChangeParent}
+          >
+            <option value="" />
+            {generateOptions()}
+          </FormControl>
         </FormGroup>
         <FormGroup>
           <ControlLabel>{__('Team Members')}</ControlLabel>
diff --git a/packages/core-ui/src/modules/settings/team/components/branch/MainList.tsx b/packages/core-ui/src/modules/settings/team/components/branch/MainList.tsx
index d8cca1e0789..6a4fa2605cf 100644
--- a/packages/core-ui/src/modules/settings/team/components/branch/MainList.tsx
+++ b/packages/core-ui/src/modules/settings/team/components/branch/MainList.tsx
@@ -2,7 +2,6 @@ import {
   Button,
   ModalTrigger,
   BarItems,
-  HeaderDescription,
   FormControl,
   Table,
   Wrapper,
@@ -13,13 +12,15 @@ import {
 } from '@erxes/ui/src';
 import { BranchesMainQueryResponse, IBranch } from '@erxes/ui/src/team/types';
 import React from 'react';
-import SettingsSideBar from '../common/SettingsSideBar';
+import SettingsSideBar from '../../containers/common/SettingSideBar';
 import Form from '../../containers/branch/Form';
 import { generateTree } from '../../utils';
 import { queries } from '@erxes/ui/src/team/graphql';
 import { gql } from '@apollo/client';
 import { generatePaginationParams } from '@erxes/ui/src/utils/router';
-import { DescriptionContentRow } from '../common/DescriptionContentRow';
+import ActionButtons from '@erxes/ui/src/components/ActionButtons';
+import Tip from '@erxes/ui/src/components/Tip';
+import Icon from '@erxes/ui/src/components/Icon';
 
 type Props = {
   listQuery: BranchesMainQueryResponse;
@@ -55,8 +56,24 @@ class MainList extends React.Component<Props, State> {
     }
   ];
 
+  remove = (_id?: string) => {
+    if (_id) {
+      this.props.deleteBranches([_id], () =>
+        this.setState({ selectedItems: [] })
+      );
+    } else {
+      this.props.deleteBranches(this.state.selectedItems, () =>
+        this.setState({ selectedItems: [] })
+      );
+    }
+  };
+
   renderForm() {
-    const trigger = <Button btnStyle="success">{__('Add Branch')}</Button>;
+    const trigger = (
+      <Button btnStyle="success" icon="plus-circle">
+        {__('Add Branch')}
+      </Button>
+    );
 
     const content = ({ closeModal }) => (
       <Form
@@ -122,7 +139,16 @@ class MainList extends React.Component<Props, State> {
     const onclick = e => {
       e.stopPropagation();
     };
+
     const trigger = (
+      <Button btnStyle="link">
+        <Tip text={__('Edit')} placement="top">
+          <Icon icon="edit-3" />
+        </Tip>
+      </Button>
+    );
+
+    return (
       <tr key={branch._id}>
         <td onClick={onclick}>
           <FormControl
@@ -136,22 +162,31 @@ class MainList extends React.Component<Props, State> {
         <td>{branch?.parent?.title || ''}</td>
         <td>{__(branch.address.replace(/\n/g, ''))}</td>
         <td>{branch.userCount}</td>
+        <td>
+          <ActionButtons>
+            <ModalTrigger
+              key={branch._id}
+              title="Edit Branch"
+              content={({ closeModal }) => (
+                <Form
+                  branch={branch}
+                  closeModal={closeModal}
+                  additionalRefetchQueries={this.refetchQueries()}
+                />
+              )}
+              trigger={trigger}
+            />
+            <Tip text={__('Delete')} placement="top">
+              <Button
+                btnStyle="link"
+                onClick={() => this.remove(branch._id)}
+                icon="times-circle"
+              />
+            </Tip>
+          </ActionButtons>
+        </td>
       </tr>
     );
-    return (
-      <ModalTrigger
-        key={branch._id}
-        title="Edit Branch"
-        content={({ closeModal }) => (
-          <Form
-            branch={branch}
-            closeModal={closeModal}
-            additionalRefetchQueries={this.refetchQueries()}
-          />
-        )}
-        trigger={trigger}
-      />
-    );
   }
 
   renderContent() {
@@ -169,16 +204,6 @@ class MainList extends React.Component<Props, State> {
       this.setState({ selectedItems: [] });
     };
 
-    const generateList = () => {
-      const list = branches.map(branch => {
-        if (!branches.find(dep => dep._id === branch.parentId)) {
-          branch.parentId = null;
-        }
-        return branch;
-      });
-      return list;
-    };
-
     return (
       <Table>
         <thead>
@@ -195,10 +220,14 @@ class MainList extends React.Component<Props, State> {
             <th>{__('Parent')}</th>
             <th>{__('Address')}</th>
             <th>{__('Team member count')}</th>
+            <th>{__('Actions')}</th>
           </tr>
         </thead>
         <tbody>
-          {generateTree(generateList(), null, (branch, level) =>
+          {generateTree(branches, null, (branch, level) =>
+            this.renderRow(branch, level)
+          )}
+          {generateTree(branches, '', (branch, level) =>
             this.renderRow(branch, level)
           )}
         </tbody>
@@ -206,45 +235,31 @@ class MainList extends React.Component<Props, State> {
     );
   }
 
-  deleteBranches() {
-    const {} = this.state;
-  }
-
   render() {
-    const { listQuery, deleteBranches } = this.props;
+    const { listQuery } = this.props;
 
-    const { totalCount, totalUsersCount } = listQuery.branchesMain;
+    const { totalCount } = listQuery.branchesMain;
 
     const { selectedItems } = this.state;
 
-    const remove = () => {
-      deleteBranches(selectedItems, () => this.setState({ selectedItems: [] }));
-    };
-
     const rightActionBar = (
       <BarItems>
         {this.renderSearch()}
-        {!!selectedItems.length && (
-          <Button btnStyle="danger" onClick={remove}>
-            {__(`Remove ${selectedItems.length}`)}
-          </Button>
-        )}
         {this.renderForm()}
       </BarItems>
     );
 
-    const leftActionBar = (
-      <HeaderDescription
-        title="Branches"
-        icon="/images/actions/21.svg"
-        description=""
-        renderExtra={DescriptionContentRow({
-          label: 'branches',
-          totalCount: totalCount,
-          teamMembersCount: totalUsersCount
-        })}
-      />
+    const leftActionBar = selectedItems.length > 0 && (
+      <Button
+        btnStyle="danger"
+        size="small"
+        icon="times-circle"
+        onClick={() => this.remove()}
+      >
+        Remove
+      </Button>
     );
+
     return (
       <Wrapper
         header={
@@ -257,7 +272,7 @@ class MainList extends React.Component<Props, State> {
           />
         }
         actionBar={
-          <Wrapper.ActionBar right={rightActionBar} left={leftActionBar} />
+          <Wrapper.ActionBar left={leftActionBar} right={rightActionBar} />
         }
         content={
           <DataWithLoader
@@ -270,6 +285,7 @@ class MainList extends React.Component<Props, State> {
         }
         leftSidebar={<SettingsSideBar />}
         footer={<Pagination count={totalCount || 0} />}
+        hasBorder={true}
       />
     );
   }
diff --git a/packages/core-ui/src/modules/settings/team/components/common/SettingsSideBar.tsx b/packages/core-ui/src/modules/settings/team/components/common/SettingsSideBar.tsx
index e0c9893fcab..e946ac74bae 100644
--- a/packages/core-ui/src/modules/settings/team/components/common/SettingsSideBar.tsx
+++ b/packages/core-ui/src/modules/settings/team/components/common/SettingsSideBar.tsx
@@ -3,30 +3,47 @@ import SidebarHeader from '@erxes/ui-settings/src/common/components/SidebarHeade
 import LeftSidebar from '@erxes/ui/src/layout/components/Sidebar';
 import { SidebarList, __ } from '@erxes/ui/src';
 import { Link } from 'react-router-dom';
+import { SidebarCounter, FieldStyle } from '@erxes/ui/src/layout/styles';
 
-function ListItem(url, text) {
+function ListItem(url, text, totalCount?) {
   return (
     <li>
       <Link
         to={url}
         className={window.location.href.includes(url) ? 'active' : ''}
       >
-        {__(text)}
+        <FieldStyle>{__(text)}</FieldStyle>
+        <SidebarCounter nowrap={true}>{totalCount}</SidebarCounter>
       </Link>
     </li>
   );
 }
 
-export default function SettingsSideBar() {
-  return (
-    <LeftSidebar header={<SidebarHeader />} hasBorder>
-      <LeftSidebar.Header uppercase>{__('Structures')}</LeftSidebar.Header>
-      <SidebarList>
-        {ListItem('/settings/structure', 'Structure')}
-        {ListItem('/settings/branches', 'Branches')}
-        {ListItem('/settings/departments', 'Departments')}
-        {ListItem('/settings/units', 'Units')}
-      </SidebarList>
-    </LeftSidebar>
-  );
+type Props = {
+  branchTotalCount: number;
+  unitTotalCount: number;
+  departmentTotalCount: number;
+};
+
+export default class SettingsSideBar extends React.Component<Props> {
+  render() {
+    return (
+      <LeftSidebar header={<SidebarHeader />} hasBorder={true}>
+        <SidebarList>
+          {ListItem('/settings/structure', 'Structure')}
+          {ListItem(
+            '/settings/branches',
+            'Branches',
+            this.props.branchTotalCount
+          )}
+          {ListItem(
+            '/settings/departments',
+            'Departments',
+            this.props.departmentTotalCount
+          )}
+          {ListItem('/settings/units', 'Units', this.props.unitTotalCount)}
+        </SidebarList>
+      </LeftSidebar>
+    );
+  }
 }
diff --git a/packages/core-ui/src/modules/settings/team/components/department/Form.tsx b/packages/core-ui/src/modules/settings/team/components/department/Form.tsx
index bd873cb1ee9..898f27a1289 100644
--- a/packages/core-ui/src/modules/settings/team/components/department/Form.tsx
+++ b/packages/core-ui/src/modules/settings/team/components/department/Form.tsx
@@ -18,7 +18,7 @@ type Props = {
 };
 
 export default function DepartmentForm(props: Props) {
-  const { closeModal, renderButton } = props;
+  const { closeModal, renderButton, departments } = props;
   const object = props.department || ({} as any);
 
   const [userIds, setUserIds] = useState(
@@ -61,6 +61,14 @@ export default function DepartmentForm(props: Props) {
   const renderContent = (formProps: IFormProps) => {
     const { values, isSubmitted } = formProps;
 
+    const generateOptions = () => {
+      return departments.map(branch => (
+        <option key={branch._id} value={branch._id}>
+          {branch.title}
+        </option>
+      ));
+    };
+
     return (
       <>
         <FormGroup>
@@ -104,14 +112,16 @@ export default function DepartmentForm(props: Props) {
         </FormGroup>
         <FormGroup>
           <ControlLabel>{__('Parent')}</ControlLabel>
-          <SelectDepartments
-            label="Choose parent"
+          <FormControl
+            {...formProps}
             name="parentId"
-            onSelect={onChangeParent}
-            initialValue={parentId}
-            multi={false}
-          />
-          {/* /> */}
+            componentClass="select"
+            defaultValue={parentId || null}
+            onChange={onChangeParent}
+          >
+            <option value="" />
+            {generateOptions()}
+          </FormControl>
         </FormGroup>
         <FormGroup>
           <ControlLabel>{__('Team Members')}</ControlLabel>
diff --git a/packages/core-ui/src/modules/settings/team/components/department/MainList.tsx b/packages/core-ui/src/modules/settings/team/components/department/MainList.tsx
index 4b4ba15e1ff..e3883b4dbde 100644
--- a/packages/core-ui/src/modules/settings/team/components/department/MainList.tsx
+++ b/packages/core-ui/src/modules/settings/team/components/department/MainList.tsx
@@ -2,7 +2,6 @@ import {
   Button,
   ModalTrigger,
   BarItems,
-  HeaderDescription,
   FormControl,
   DataWithLoader,
   Wrapper,
@@ -17,12 +16,15 @@ import {
   IDepartment
 } from '@erxes/ui/src/team/types';
 import React from 'react';
-import SettingsSideBar from '../common/SettingsSideBar';
+import SettingsSideBar from '../../containers/common/SettingSideBar';
 import Form from '../../containers/department/Form';
 import { queries } from '@erxes/ui/src/team/graphql';
 import { gql } from '@apollo/client';
 import { generatePaginationParams } from '@erxes/ui/src/utils/router';
-import { DescriptionContentRow } from '../common/DescriptionContentRow';
+import Tip from '@erxes/ui/src/components/Tip';
+import Icon from '@erxes/ui/src/components/Icon';
+import ActionButtons from '@erxes/ui/src/components/ActionButtons';
+
 type Props = {
   listQuery: DepartmentsMainQueryResponse;
   queryParams: any;
@@ -56,8 +58,24 @@ class MainList extends React.Component<Props, State> {
     }
   ];
 
+  remove = (_id?: string) => {
+    if (_id) {
+      this.props.deleteDepartments([_id], () =>
+        this.setState({ selectedItems: [] })
+      );
+    } else {
+      this.props.deleteDepartments(this.state.selectedItems, () =>
+        this.setState({ selectedItems: [] })
+      );
+    }
+  };
+
   renderForm() {
-    const trigger = <Button btnStyle="success">{__('Add Department')}</Button>;
+    const trigger = (
+      <Button btnStyle="success" icon="plus-circle">
+        {__('Add Department')}
+      </Button>
+    );
 
     const content = ({ closeModal }) => (
       <Form
@@ -129,6 +147,14 @@ class MainList extends React.Component<Props, State> {
     };
 
     const trigger = (
+      <Button btnStyle="link">
+        <Tip text={__('Edit')} placement="top">
+          <Icon icon="edit-3" />
+        </Tip>
+      </Button>
+    );
+
+    return (
       <tr key={department._id}>
         <td onClick={onclick}>
           <FormControl
@@ -141,23 +167,31 @@ class MainList extends React.Component<Props, State> {
         <td>{__(department.title)}</td>
         <td>{__(department?.supervisor?.email || '-')}</td>
         <td>{department.userCount}</td>
+        <td>
+          <ActionButtons>
+            <ModalTrigger
+              key={department._id}
+              title="Edit Department"
+              content={({ closeModal }) => (
+                <Form
+                  department={department}
+                  additionalRefetchQueries={this.refetchQueries()}
+                  closeModal={closeModal}
+                />
+              )}
+              trigger={trigger}
+            />
+            <Tip text={__('Delete')} placement="top">
+              <Button
+                btnStyle="link"
+                onClick={() => this.remove(department._id)}
+                icon="times-circle"
+              />
+            </Tip>
+          </ActionButtons>
+        </td>
       </tr>
     );
-
-    return (
-      <ModalTrigger
-        key={department._id}
-        title="Edit Department"
-        content={({ closeModal }) => (
-          <Form
-            department={department}
-            additionalRefetchQueries={this.refetchQueries()}
-            closeModal={closeModal}
-          />
-        )}
-        trigger={trigger}
-      />
-    );
   }
 
   renderContent() {
@@ -174,16 +208,6 @@ class MainList extends React.Component<Props, State> {
       this.setState({ selectedItems: [] });
     };
 
-    const generateList = () => {
-      const list = departments.map(department => {
-        if (!departments.find(dep => dep._id === department.parentId)) {
-          department.parentId = null;
-        }
-        return department;
-      });
-      return list;
-    };
-
     return (
       <Table>
         <thead>
@@ -199,10 +223,14 @@ class MainList extends React.Component<Props, State> {
             <th>{__('Title')}</th>
             <th>{__('Supervisor')}</th>
             <th>{__('Team member count')}</th>
+            <th>{__('Actions')}</th>
           </tr>
         </thead>
         <tbody>
-          {generateTree(generateList(), null, (department, level) => {
+          {generateTree(departments, null, (department, level) => {
+            return this.renderRow(department, level);
+          })}
+          {generateTree(departments, '', (department, level) => {
             return this.renderRow(department, level);
           })}
         </tbody>
@@ -211,42 +239,30 @@ class MainList extends React.Component<Props, State> {
   }
 
   render() {
-    const { listQuery, deleteDepartments } = this.props;
+    const { listQuery } = this.props;
 
-    const { totalCount, totalUsersCount } = listQuery.departmentsMain;
+    const { totalCount } = listQuery.departmentsMain;
 
     const { selectedItems } = this.state;
 
-    const remove = () => {
-      deleteDepartments(selectedItems, () =>
-        this.setState({ selectedItems: [] })
-      );
-    };
-
     const rightActionBar = (
       <BarItems>
         {this.renderSearch()}
-        {!!selectedItems.length && (
-          <Button btnStyle="danger" onClick={remove}>
-            {__(`Remove ${selectedItems.length}`)}
-          </Button>
-        )}
         {this.renderForm()}
       </BarItems>
     );
 
-    const leftActionBar = (
-      <HeaderDescription
-        title="Departments"
-        icon="/images/actions/21.svg"
-        description=""
-        renderExtra={DescriptionContentRow({
-          label: 'departments',
-          totalCount: totalCount,
-          teamMembersCount: totalUsersCount
-        })}
-      />
+    const leftActionBar = selectedItems.length > 0 && (
+      <Button
+        btnStyle="danger"
+        size="small"
+        icon="times-circle"
+        onClick={() => this.remove()}
+      >
+        Remove
+      </Button>
     );
+
     return (
       <Wrapper
         header={
@@ -272,6 +288,7 @@ class MainList extends React.Component<Props, State> {
         }
         leftSidebar={<SettingsSideBar />}
         footer={<Pagination count={totalCount || 0} />}
+        hasBorder={true}
       />
     );
   }
diff --git a/packages/core-ui/src/modules/settings/team/components/structure/Form.tsx b/packages/core-ui/src/modules/settings/team/components/structure/Form.tsx
index bc9afb664bf..3e61dd5083a 100644
--- a/packages/core-ui/src/modules/settings/team/components/structure/Form.tsx
+++ b/packages/core-ui/src/modules/settings/team/components/structure/Form.tsx
@@ -11,9 +11,10 @@ import { ModalFooter } from '@erxes/ui/src/styles/main';
 import { __ } from 'modules/common/utils';
 import { IStructure } from '@erxes/ui/src/team/types';
 import SelectTeamMembers from '@erxes/ui/src/team/containers/SelectTeamMembers';
-import Box from '@erxes/ui/src/components/Box';
+import Wrapper from '@erxes/ui/src/layout/components/Wrapper';
 import Button from '@erxes/ui/src/components/Button';
 import ContactInfoForm from '../common/ContactInfoForm';
+import { Title } from '@erxes/ui-settings/src/styles';
 
 type Props = {
   renderButton: (props: IButtonMutateProps) => JSX.Element;
@@ -136,8 +137,13 @@ export default function StructureForm(props: Props) {
   };
 
   return (
-    <Box isOpen={true} title={__('Structure')} name="showStructure">
+    <>
+      <Wrapper.ActionBar
+        background="bgWhite"
+        left={<Title capitalize={true}>{__('Structure')}</Title>}
+        wideSpacing={true}
+      />
       <Form renderContent={renderContent} />
-    </Box>
+    </>
   );
 }
diff --git a/packages/core-ui/src/modules/settings/team/components/structure/Settings.tsx b/packages/core-ui/src/modules/settings/team/components/structure/Settings.tsx
index 3f50a7b2523..dbc0999a63f 100644
--- a/packages/core-ui/src/modules/settings/team/components/structure/Settings.tsx
+++ b/packages/core-ui/src/modules/settings/team/components/structure/Settings.tsx
@@ -1,7 +1,7 @@
 import { Wrapper, __ } from '@erxes/ui/src';
 import React from 'react';
 import BoxContainer from '../../containers/structure/Box';
-import SettingsSideBar from '../common/SettingsSideBar';
+import SettingsSideBar from '../../containers/common/SettingSideBar';
 
 export default function Structure() {
   return (
@@ -17,6 +17,7 @@ export default function Structure() {
       }
       content={<BoxContainer />}
       leftSidebar={<SettingsSideBar />}
+      hasBorder={true}
     />
   );
 }
diff --git a/packages/core-ui/src/modules/settings/team/components/structure/View.tsx b/packages/core-ui/src/modules/settings/team/components/structure/View.tsx
index 945d4d9d636..bf744c67408 100644
--- a/packages/core-ui/src/modules/settings/team/components/structure/View.tsx
+++ b/packages/core-ui/src/modules/settings/team/components/structure/View.tsx
@@ -3,9 +3,11 @@ import { SidebarCounter } from '@erxes/ui/src/layout/styles';
 import { IStructure } from '@erxes/ui/src/team/types';
 import { IUser } from '@erxes/ui/src/auth/types';
 import { __, readFile } from 'modules/common/utils';
-import Box from '@erxes/ui/src/components/Box';
 import Icon from '@erxes/ui/src/components/Icon';
-import { StructureList } from '../../styles';
+import { StructureList, StructureEditButton } from '../../styles';
+import { Title } from '@erxes/ui-settings/src/styles';
+import Wrapper from '@erxes/ui/src/layout/components/Wrapper';
+import _ from 'lodash';
 
 type Props = {
   structure: IStructure;
@@ -14,9 +16,9 @@ type Props = {
 
 export default function View({ structure, showEdit }: Props) {
   const edit = (
-    <a href="#settings" onClick={showEdit} tabIndex={0}>
-      <Icon icon="edit" size={8} />
-    </a>
+    <StructureEditButton>
+      <Icon icon="edit" onClick={showEdit} size={14} />
+    </StructureEditButton>
   );
 
   const renderRow = (name: string, value: any, nowrap?: boolean) => {
@@ -38,12 +40,13 @@ export default function View({ structure, showEdit }: Props) {
     : supervisor.email;
 
   return (
-    <Box
-      extraButtons={edit}
-      isOpen={true}
-      title={__('Structure')}
-      name="showStructure"
-    >
+    <>
+      <Wrapper.ActionBar
+        background="bgWhite"
+        left={<Title capitalize={true}>{__('Structure')}</Title>}
+        right={edit}
+        wideSpacing={true}
+      />
       <StructureList className="no-link">
         {renderRow('Name', title)}
         {renderRow('Description', description, true)}
@@ -63,6 +66,6 @@ export default function View({ structure, showEdit }: Props) {
           </li>
         )}
       </StructureList>
-    </Box>
+    </>
   );
 }
diff --git a/packages/core-ui/src/modules/settings/team/components/unit/Form.tsx b/packages/core-ui/src/modules/settings/team/components/unit/Form.tsx
index e718f51b229..9bcb3079ce8 100644
--- a/packages/core-ui/src/modules/settings/team/components/unit/Form.tsx
+++ b/packages/core-ui/src/modules/settings/team/components/unit/Form.tsx
@@ -80,13 +80,17 @@ export default function DepartmentForm(props: Props) {
             {...formProps}
             name="description"
             defaultValue={object.description}
-            autoFocus={true}
             componentClass="textarea"
           />
         </FormGroup>
         <FormGroup>
-          <ControlLabel>{__('Code')}</ControlLabel>
-          <FormControl {...formProps} name="code" defaultValue={object.code} />
+          <ControlLabel required={true}>{__('Code')}</ControlLabel>
+          <FormControl
+            required={true}
+            {...formProps}
+            name="code"
+            defaultValue={object.code}
+          />
         </FormGroup>
         <FormGroup>
           <ControlLabel>{__('Supervisor')}</ControlLabel>
diff --git a/packages/core-ui/src/modules/settings/team/components/unit/MainList.tsx b/packages/core-ui/src/modules/settings/team/components/unit/MainList.tsx
index 47d0db6f37d..b9a0733feba 100644
--- a/packages/core-ui/src/modules/settings/team/components/unit/MainList.tsx
+++ b/packages/core-ui/src/modules/settings/team/components/unit/MainList.tsx
@@ -8,14 +8,15 @@ import {
   Table,
   Wrapper,
   __,
-  ModalTrigger,
-  HeaderDescription
+  ModalTrigger
 } from '@erxes/ui/src';
 import { IUnit, UnitsMainQueryResponse } from '@erxes/ui/src/team/types';
 import React from 'react';
-import SettingsSideBar from '../common/SettingsSideBar';
+import SettingsSideBar from '../../containers/common/SettingSideBar';
 import Form from '../../containers/unit/Form';
-import { DescriptionContentRow } from '../common/DescriptionContentRow';
+import ActionButtons from '@erxes/ui/src/components/ActionButtons';
+import Tip from '@erxes/ui/src/components/Tip';
+import Icon from '@erxes/ui/src/components/Icon';
 
 type Props = {
   listQuery: UnitsMainQueryResponse;
@@ -40,8 +41,22 @@ class MainList extends React.Component<Props, State> {
     };
   }
 
+  remove = (_id?: string) => {
+    if (_id) {
+      this.props.deleteUnits([_id], () => this.setState({ selectedItems: [] }));
+    } else {
+      this.props.deleteUnits(this.state.selectedItems, () =>
+        this.setState({ selectedItems: [] })
+      );
+    }
+  };
+
   renderForm() {
-    const trigger = <Button btnStyle="success">{__('Add Unit')}</Button>;
+    const trigger = (
+      <Button btnStyle="success" icon="plus-circle">
+        {__('Add Unit')}
+      </Button>
+    );
 
     const content = ({ closeModal }) => <Form closeModal={closeModal} />;
 
@@ -104,6 +119,14 @@ class MainList extends React.Component<Props, State> {
     };
 
     const trigger = (
+      <Button btnStyle="link">
+        <Tip text={__('Edit')} placement="top">
+          <Icon icon="edit-3" />
+        </Tip>
+      </Button>
+    );
+
+    return (
       <tr key={unit._id}>
         <td onClick={onclick}>
           <FormControl
@@ -117,19 +140,27 @@ class MainList extends React.Component<Props, State> {
         <td>{__(unit?.supervisor?.email)}</td>
         <td>{__(unit?.department?.title || '')}</td>
         <td>{unit.userIds?.length || 0}</td>
+        <td>
+          <ActionButtons>
+            <ModalTrigger
+              key={unit._id}
+              title="Edit Unit"
+              content={({ closeModal }) => (
+                <Form closeModal={closeModal} unit={unit} />
+              )}
+              trigger={trigger}
+            />
+            <Tip text={__('Delete')} placement="top">
+              <Button
+                btnStyle="link"
+                onClick={() => this.remove(unit._id)}
+                icon="times-circle"
+              />
+            </Tip>
+          </ActionButtons>
+        </td>
       </tr>
     );
-
-    return (
-      <ModalTrigger
-        key={unit._id}
-        title="Edit Unit"
-        content={({ closeModal }) => (
-          <Form closeModal={closeModal} unit={unit} />
-        )}
-        trigger={trigger}
-      />
-    );
   }
 
   renderContent() {
@@ -164,6 +195,7 @@ class MainList extends React.Component<Props, State> {
             <th>{__('Supervisor')}</th>
             <th>{__('Department')}</th>
             <th>{__('Team member count')}</th>
+            <th>{__('Actions')}</th>
           </tr>
         </thead>
         <tbody>{(units || []).map(unit => this.renderRow(unit))}</tbody>
@@ -171,39 +203,28 @@ class MainList extends React.Component<Props, State> {
     );
   }
   render() {
-    const { listQuery, deleteUnits } = this.props;
+    const { listQuery } = this.props;
 
-    const { totalCount, totalUsersCount } = listQuery.unitsMain;
+    const { totalCount } = listQuery.unitsMain;
 
     const { selectedItems } = this.state;
 
-    const remove = () => {
-      deleteUnits(selectedItems, () => this.setState({ selectedItems: [] }));
-    };
-
     const rightActionBar = (
       <BarItems>
         {this.renderSearch()}
-        {!!selectedItems.length && (
-          <Button btnStyle="danger" onClick={remove}>
-            {__('Remove')}
-          </Button>
-        )}
         {this.renderForm()}
       </BarItems>
     );
 
-    const leftActionBar = (
-      <HeaderDescription
-        title="Units"
-        icon="/images/actions/21.svg"
-        description=""
-        renderExtra={DescriptionContentRow({
-          label: 'units',
-          totalCount: totalCount,
-          teamMembersCount: totalUsersCount
-        })}
-      />
+    const leftActionBar = selectedItems.length > 0 && (
+      <Button
+        btnStyle="danger"
+        size="small"
+        icon="times-circle"
+        onClick={() => this.remove()}
+      >
+        Remove
+      </Button>
     );
 
     return (
@@ -231,6 +252,7 @@ class MainList extends React.Component<Props, State> {
         }
         leftSidebar={<SettingsSideBar />}
         footer={<Pagination count={totalCount} />}
+        hasBorder={true}
       />
     );
   }
diff --git a/packages/core-ui/src/modules/settings/team/containers/branch/MainList.tsx b/packages/core-ui/src/modules/settings/team/containers/branch/MainList.tsx
index 68d90d6e7ba..a72290aecea 100644
--- a/packages/core-ui/src/modules/settings/team/containers/branch/MainList.tsx
+++ b/packages/core-ui/src/modules/settings/team/containers/branch/MainList.tsx
@@ -44,15 +44,7 @@ class MainList extends React.Component<FinalProps> {
           .mutate({
             mutation: gql(mutations.branchesRemove),
             variables: { ids },
-            refetchQueries: [
-              {
-                query: gql(queries.branches),
-                variables: {
-                  withoutUserFilter: true,
-                  searchValue: undefined
-                }
-              }
-            ]
+            refetchQueries: ['branchesMain']
           })
           .then(() => {
             callback();
diff --git a/packages/core-ui/src/modules/settings/team/containers/common/SettingSideBar.tsx b/packages/core-ui/src/modules/settings/team/containers/common/SettingSideBar.tsx
new file mode 100644
index 00000000000..d604848d241
--- /dev/null
+++ b/packages/core-ui/src/modules/settings/team/containers/common/SettingSideBar.tsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import * as compose from 'lodash.flowright';
+import { withProps } from '@erxes/ui/src/utils/core';
+import { graphql } from '@apollo/client/react/hoc';
+import { gql } from '@apollo/client';
+import { queries } from '@erxes/ui/src/team/graphql';
+import {
+  BranchesMainQueryResponse,
+  DepartmentsMainQueryResponse,
+  UnitsMainQueryResponse
+} from '@erxes/ui/src/team/types';
+import { EmptyState, Spinner } from '@erxes/ui/src';
+import SettingsSideBar from '../../components/common/SettingsSideBar';
+
+type FinalProps = {
+  branchListQuery: BranchesMainQueryResponse;
+  unitListQuery: UnitsMainQueryResponse;
+  departmentListQuery: DepartmentsMainQueryResponse;
+};
+
+class SettingsSideBarContainer extends React.Component<FinalProps> {
+  render() {
+    const { branchListQuery, unitListQuery, departmentListQuery } = this.props;
+
+    if (
+      branchListQuery.loading ||
+      unitListQuery.loading ||
+      departmentListQuery.loading
+    ) {
+      return <Spinner />;
+    }
+
+    if (
+      branchListQuery.error ||
+      unitListQuery.error ||
+      departmentListQuery.error
+    ) {
+      return (
+        <EmptyState image="/images/actions/5.svg" text="Something went wrong" />
+      );
+    }
+
+    return (
+      <SettingsSideBar
+        branchTotalCount={branchListQuery.branchesMain.totalCount}
+        unitTotalCount={unitListQuery.unitsMain.totalCount}
+        departmentTotalCount={departmentListQuery.departmentsMain.totalCount}
+      />
+    );
+  }
+}
+
+export default withProps<{}>(
+  compose(
+    graphql<{}>(gql(queries.branchesMain), {
+      name: 'branchListQuery',
+      options: () => ({
+        variables: {
+          withoutUserFilter: true
+        }
+      })
+    }),
+    graphql<{}>(gql(queries.unitsMain), {
+      name: 'unitListQuery',
+      options: () => ({
+        variables: {
+          withoutUserFilter: true
+        }
+      })
+    }),
+    graphql<{}>(gql(queries.departmentsMain), {
+      name: 'departmentListQuery',
+      options: () => ({
+        variables: {
+          withoutUserFilter: true
+        }
+      })
+    })
+  )(SettingsSideBarContainer)
+);
diff --git a/packages/core-ui/src/modules/settings/team/containers/department/MainList.tsx b/packages/core-ui/src/modules/settings/team/containers/department/MainList.tsx
index d7ced59db86..5934f828744 100644
--- a/packages/core-ui/src/modules/settings/team/containers/department/MainList.tsx
+++ b/packages/core-ui/src/modules/settings/team/containers/department/MainList.tsx
@@ -10,6 +10,7 @@ import MainListCompoenent from '../../components/department/MainList';
 import { Alert, confirm } from '@erxes/ui/src/utils';
 import client from '@erxes/ui/src/apolloClient';
 import { generatePaginationParams } from '@erxes/ui/src/utils/router';
+
 type Props = {
   queryParams: any;
   history: any;
diff --git a/packages/core-ui/src/modules/settings/team/containers/structure/Box.tsx b/packages/core-ui/src/modules/settings/team/containers/structure/Box.tsx
index dccbcec294f..0de4a47c395 100644
--- a/packages/core-ui/src/modules/settings/team/containers/structure/Box.tsx
+++ b/packages/core-ui/src/modules/settings/team/containers/structure/Box.tsx
@@ -5,7 +5,6 @@ import { useQuery } from '@apollo/client';
 import { queries } from '@erxes/ui/src/team/graphql';
 import StructureBox from '../../components/structure/Box';
 
-import Box from '@erxes/ui/src/components/Box';
 import Spinner from '@erxes/ui/src/components/Spinner';
 import ErrorMsg from '@erxes/ui/src/components/ErrorMsg';
 import { __ } from 'modules/common/utils';
@@ -25,11 +24,9 @@ export default function BoxContainer() {
 
   if (error) {
     return (
-      <Box isOpen={true} title={__('Structure')} name="showStructure">
-        <MenuFooter>
-          <ErrorMsg>{error.message}</ErrorMsg>
-        </MenuFooter>
-      </Box>
+      <MenuFooter>
+        <ErrorMsg>{error.message}</ErrorMsg>
+      </MenuFooter>
     );
   }
 
diff --git a/packages/core-ui/src/modules/settings/team/containers/unit/Form.tsx b/packages/core-ui/src/modules/settings/team/containers/unit/Form.tsx
index 12756aa6399..4b7d9cfb86f 100644
--- a/packages/core-ui/src/modules/settings/team/containers/unit/Form.tsx
+++ b/packages/core-ui/src/modules/settings/team/containers/unit/Form.tsx
@@ -32,11 +32,7 @@ const FormContainer = (props: Props) => {
     return (
       <ButtonMutate
         mutation={object._id ? mutations.unitsEdit : mutations.unitsAdd}
-        refetchQueries={[
-          {
-            query: gql(queries.units)
-          }
-        ]}
+        refetchQueries={['unitsMain']}
         variables={values}
         isSubmitted={isSubmitted}
         type="submit"
diff --git a/packages/core-ui/src/modules/settings/team/containers/unit/MainList.tsx b/packages/core-ui/src/modules/settings/team/containers/unit/MainList.tsx
index 0b63b20c7a4..99259991660 100644
--- a/packages/core-ui/src/modules/settings/team/containers/unit/MainList.tsx
+++ b/packages/core-ui/src/modules/settings/team/containers/unit/MainList.tsx
@@ -42,15 +42,7 @@ class MainList extends React.Component<FinalProps> {
           .mutate({
             mutation: gql(mutations.unitsRemove),
             variables: { ids },
-            refetchQueries: [
-              {
-                query: gql(queries.units),
-                variables: {
-                  withoutUserFilter: true,
-                  searchValue: undefined
-                }
-              }
-            ]
+            refetchQueries: ['unitsMain']
           })
           .then(() => {
             callback();
diff --git a/packages/core-ui/src/modules/settings/team/styles.ts b/packages/core-ui/src/modules/settings/team/styles.ts
index 82fba0a31f7..e2b6493c9dd 100644
--- a/packages/core-ui/src/modules/settings/team/styles.ts
+++ b/packages/core-ui/src/modules/settings/team/styles.ts
@@ -11,10 +11,8 @@ const ButtonContainer = styled.div`
 
 const FlexRow = styled.div`
   display: flex;
-  margin-bottom: ${dimensions.unitSpacing}px;
-  padding: 5px 30px 5px 0;
+  flex-direction: column;
   position: relative;
-  align-items: center;
 
   > label {
     margin: 0;
@@ -25,12 +23,6 @@ const FlexRow = styled.div`
   > *:first-child,
   input {
     margin-right: ${dimensions.unitSpacing}px;
-    flex: 3;
-  }
-
-  > *:nth-child(2),
-  > div {
-    flex: 2;
   }
 `;
 
@@ -111,8 +103,25 @@ const StructureList = styled(SidebarList)`
   }
 `;
 
-let DescriptionContent = styled.div`
+const StructureEditButton = styled.div`
+  cursor: pointer;
+  padding: 10px;
+  color: ${colors.textSecondary};
+
+  &:hover {
+    color: ${colors.textPrimary};
+  }
+`;
+
+const DescriptionContent = styled.div`
   text-align: center;
+  display: flex;
+
+  h4 {
+    margin-left: 8px;
+    font-size: 16px;
+    padding-bottom: 0;
+  }
 `;
 
 export {
@@ -124,5 +133,6 @@ export {
   FormTable,
   SideList,
   StructureList,
-  DescriptionContent
+  DescriptionContent,
+  StructureEditButton
 };
diff --git a/packages/erxes-ui/src/components/HeaderDescription.tsx b/packages/erxes-ui/src/components/HeaderDescription.tsx
index 9233c0bdb03..6243411168b 100644
--- a/packages/erxes-ui/src/components/HeaderDescription.tsx
+++ b/packages/erxes-ui/src/components/HeaderDescription.tsx
@@ -81,8 +81,8 @@ class HeaderDescription extends React.PureComponent<Props, State> {
           <span>
             <h4>{__(title)}</h4>
             {this.state.expand && __(description)}
+            {this.state.expand && renderExtra && renderExtra}
           </span>
-          {this.state.expand && renderExtra && renderExtra}
         </Description>
         <Button btnStyle="link" onClick={this.onClick}>
           <Tip
diff --git a/packages/erxes-ui/src/layout/styles.ts b/packages/erxes-ui/src/layout/styles.ts
index 2395072a82f..c14c87b68d2 100644
--- a/packages/erxes-ui/src/layout/styles.ts
+++ b/packages/erxes-ui/src/layout/styles.ts
@@ -127,9 +127,10 @@ const ContenFooter = styled.div`
   }
 `;
 
-const HeaderItems = styledTS<{ rightAligned?: boolean; hasFlex?: boolean }>(
-  styled.div
-)`
+const HeaderItems = styledTS<{
+  rightAligned?: boolean;
+  hasFlex?: boolean;
+}>(styled.div)`
   align-self: center;
   flex: ${props => props.hasFlex && 1};
   margin-left: ${props => props.rightAligned && 'auto'};