fix edit project.

`BIG-379` Add project & task dialog & projects list.

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 All notable changes to Bigcapital server-side will be in this file.
 
+## [1.7.4-rc.2] - 20-04-2022
+
+### Fixed
+ - `BIG-374` Refactoring sidebar men with ability permissions and feature control on each item.
+
 ## [1.7.3-rc.2] - 15-04-2022
 
 ### Fixed

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "bigcapital-client",
-  "version": "1.5.8",
+  "version": "1.7.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1043,17 +1043,6 @@
         "to-fast-properties": "^2.0.0"
       }
     },
-    "@blueprintjs-formik/core": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/@blueprintjs-formik/core/-/core-0.1.5.tgz",
-      "integrity": "sha512-H0aXiNMYC8RwhWR1F2O77dcRcRITijUX5we51G4AK2Vmp1yXCmNb0piN9ftsjL5vVIvIsMKWg+dfbwREmB5VWg==",
-      "requires": {
-        "lodash.get": "^4.4.2",
-        "lodash.keyby": "^4.6.0",
-        "styled-components": "^5.3.3",
-        "web-vitals": "^2.1.4"
-      }
-    },
     "@blueprintjs-formik/select": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/@blueprintjs-formik/select/-/select-0.1.4.tgz",
@@ -1980,6 +1969,16 @@
       "integrity": "sha512-MUc6zSmU3tEVnkQ78q0peeEjKWPUADMlC/t++2bI8WnAG2tvYRPIgHG8lWkXwqc8MsUF6Z2MOf+Mh5sazOmhiQ==",
       "dev": true
     },
+    "@types/hoist-non-react-statics": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "@types/http-proxy": {
       "version": "1.17.3",
       "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.3.tgz",
@@ -2240,6 +2239,25 @@
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
       "integrity": "sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw=="
     },
+    "@types/styled-components": {
+      "version": "5.1.25",
+      "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.25.tgz",
+      "integrity": "sha512-fgwl+0Pa8pdkwXRoVPP9JbqF0Ivo9llnmsm+7TCI330kbPIFd9qv1Lrhr37shf4tnxCOSu+/IgqM7uJXLWZZNQ==",
+      "dev": true,
+      "requires": {
+        "@types/hoist-non-react-statics": "*",
+        "@types/react": "*",
+        "csstype": "^3.0.2"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "3.0.11",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz",
+          "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==",
+          "dev": true
+        }
+      }
+    },
     "@types/testing-library__dom": {
       "version": "6.12.1",
       "resolved": "https://registry.npmjs.org/@types/testing-library__dom/-/testing-library__dom-6.12.1.tgz",

package.json

@@ -38,6 +38,7 @@
     "cross-env": "^7.0.2",
     "css-loader": "3.4.2",
     "deep-map-keys": "^2.0.1",
+    "deepdash": "^5.3.9",
     "dependency-graph": "^0.11.0",
     "dotenv": "8.2.0",
     "dotenv-expand": "5.1.0",
@@ -150,6 +151,7 @@
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/react-router-dom": "^5.1.8",
+    "@types/styled-components": "^5.1.25",
     "@types/yup": "^0.29.13",
     "@welldone-software/why-did-you-render": "^6.0.0-rc.1",
     "compression-webpack-plugin": "^6.1.0",

src/common/tables.js

@@ -16,7 +16,11 @@ export const TABLES = {
   CASHFLOW_Transactions: 'cashflow_transactions',
   CREDIT_NOTES: 'credit_notes',
   VENDOR_CREDITS: 'vendor_credits',
-  WAREHOUSE_TRANSFERS:'warehouse_transfers'
+  WAREHOUSE_TRANSFERS: 'warehouse_transfers',
+  PROJECTS: 'projects',
+  TIMESHEETS: 'timesheets',
+  PURCHASES: 'purchases',
+  SALES: 'sales',
 };
 
 export const TABLE_SIZE = {

src/components/Dashboard/Dashboard.js

@@ -3,7 +3,7 @@ import { Switch, Route } from 'react-router';
 
 import 'style/pages/Dashboard/Dashboard.scss';
 
-import Sidebar from 'components/Sidebar/Sidebar';
+import { Sidebar } from 'containers/Dashboard/Sidebar/Sidebar';
 import DashboardContent from 'components/Dashboard/DashboardContent';
 import DialogsContainer from 'components/DialogsContainer';
 import PreferencesPage from 'components/Preferences/PreferencesPage';

src/components/DataTable.js

@@ -197,6 +197,7 @@ export default function DataTable(props) {
 DataTable.defaultProps = {
   pagination: false,
   hidePaginationNoPages: true,
+  hideTableHeader: false,
 
   size: null,
   spinnerProps: { size: 30 },

src/components/Datatable/TableHeader.js

@@ -80,12 +80,23 @@ function TableHeaderGroup({ headerGroup }) {
 export default function TableHeader() {
   const {
     table: { headerGroups, page },
-    props: { TableHeaderSkeletonRenderer, headerLoading, progressBarLoading },
+    props: {
+      TableHeaderSkeletonRenderer,
+      headerLoading,
+      progressBarLoading,
+      hideTableHeader,
+    },
   } = useContext(TableContext);
 
+  // Can't contiunue if the thead is disabled.
+  if (hideTableHeader) {
+    return null;
+  }
+
   if (headerLoading && TableHeaderSkeletonRenderer) {
     return <TableHeaderSkeletonRenderer />;
   }
+
   return (
     <ScrollSyncPane>
       <div className="thead">

src/components/DialogsContainer.js

@@ -40,6 +40,11 @@ import BranchActivateDialog from '../containers/Dialogs/BranchActivateDialog';
 import WarehouseActivateDialog from '../containers/Dialogs/WarehouseActivateDialog';
 import CustomerOpeningBalanceDialog from '../containers/Dialogs/CustomerOpeningBalanceDialog';
 import VendorOpeningBalanceDialog from '../containers/Dialogs/VendorOpeningBalanceDialog';
+import ProjectFormDialog from '../containers/Projects/containers/ProjectFormDialog';
+import ProjectTaskFormDialog from '../containers/Projects/containers/ProjectTaskFormDialog';
+import ProjectTimeEntryFormDialog from '../containers/Projects/containers/ProjectTimeEntryFormDialog';
+import ProjectExpenseForm from '../containers/Projects/containers/ProjectExpenseForm';
+import EstimatedExpenseFormDialog from '../containers/Projects/containers/EstimatedExpenseFormDialog';
 
 /**
  * Dialogs container.
@@ -90,6 +95,11 @@ export default function DialogsContainer() {
       <WarehouseActivateDialog dialogName={'warehouse-activate'} />
       <CustomerOpeningBalanceDialog dialogName={'customer-opening-balance'} />
       <VendorOpeningBalanceDialog dialogName={'vendor-opening-balance'} />
+      <ProjectFormDialog dialogName={'project-form'} />
+      <ProjectTaskFormDialog dialogName={'project-task-form'} />
+      <ProjectTimeEntryFormDialog dialogName={'project-time-entry-form'} />
+      <ProjectExpenseForm dialogName={'project-expense-form'} />
+      <EstimatedExpenseFormDialog dialogName={'estimated-expense-form'} />
     </div>
   );
 }

src/components/FlexGrid/Flex.style.tsx

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+import { FlexProps } from './interfaces';
+
+export const FlexStyled = styled.div<FlexProps>`
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  align-items: ${({ align }) => align || 'center'};
+
+  &:after {
+    content: '';
+    max-width: ${({ col, gap = 1 }) =>
+      col && col < 12 ? `${(100 * col) / 12 - gap}%` : '100%'};
+    width: 100%;
+  }
+`;

src/components/FlexGrid/Flex.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { FlexProps } from './interfaces';
+import { FlexItem } from './FlexItem';
+import { FlexStyled } from './Flex.style';
+
+export function Flex({
+  children,
+  col = 12,
+  gap,
+  align,
+  className,
+  style,
+}: FlexProps) {
+  return (
+    <FlexStyled
+      col={col}
+      gap={gap}
+      align={align}
+      className={className}
+      style={style}
+    >
+      {children}
+      <FlexItem col={col} gap={gap} />
+    </FlexStyled>
+  );
+}

src/components/FlexGrid/FlexItem.style.tsx

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+import { ItemProps } from './interfaces';
+
+export const FlexItem = styled.div<ItemProps>`
+  width: 100%;
+  max-width: ${({ col, gap = 1 }) =>
+    col && col < 12 ? `${(100 * col) / 12 - gap}%` : '100%'};
+  ${({ marginBottom }) =>
+    marginBottom &&
+    `
+		margin-bottom: ${marginBottom}px;
+	`}
+  ${({ stretch }) =>
+    stretch &&
+    `
+    display: flex;
+    align-self: stretch;
+  `}
+`;

src/components/FlexGrid/FlexItem.tsx

@@ -0,0 +1 @@
+export * from './FlexItem.style';

src/components/FlexGrid/index.ts

@@ -0,0 +1,4 @@
+export * from './Flex.style';
+export * from './Flex';
+export * from './FlexItem.style';
+export * from './interfaces';

src/components/FlexGrid/interfaces.ts

@@ -0,0 +1,22 @@
+import { HTMLAttributes, Component, StyleHTMLAttributes } from 'react';
+
+export type Range = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+
+export interface ItemProps extends HTMLAttributes<HTMLDivElement> {
+  gap?: number;
+  col: Range;
+  marginBottom?: number;
+  stretch?: boolean;
+  as?: string | Component;
+  className?: string;
+  style?: StyleHTMLAttributes<HTMLDivElement>;
+}
+
+export interface FlexProps extends HTMLAttributes<HTMLDivElement> {
+  gap?: number;
+  align?: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
+  col?: Range;
+  className?: string;
+  style?: StyleHTMLAttributes<HTMLDivElement>;
+  as?: string | Component;
+}

src/components/Forms/BlueprintFormik.js

@@ -9,6 +9,7 @@ import {
   TextArea,
 } from '@blueprintjs-formik/core';
 import { Select, MultiSelect } from '@blueprintjs-formik/select';
+import { DateInput } from '@blueprintjs-formik/datetime';
 
 export {
   FormGroup as FFormGroup,
@@ -21,4 +22,5 @@ export {
   MultiSelect as FMultiSelect,
   EditableText as FEditableText,
   TextArea as FTextArea,
+  DateInput as FDateInput,
 };

src/components/MenuItem.js

@@ -104,7 +104,7 @@ import {
 //     textClassName?: string;
 // }
 
-export default class MenuItem extends AbstractPureComponent2 {
+export class MenuItem extends AbstractPureComponent2 {
     static get defaultProps() {
       return {
         disabled: false,

src/components/Sidebar/SidebarMenu.js

@@ -1,123 +0,0 @@
-import React from 'react';
-import { Menu, MenuDivider } from '@blueprintjs/core';
-import { useHistory, useLocation } from 'react-router-dom';
-
-import { Choose } from 'components';
-import Icon from 'components/Icon';
-import MenuItem from 'components/MenuItem';
-import { MenuItemLabel } from 'components';
-import classNames from 'classnames';
-import SidebarOverlay from 'components/SidebarOverlay';
-import { compose } from 'redux';
-import withSubscriptions from '../../containers/Subscriptions/withSubscriptions';
-
-const DEFAULT_ITEM = {
-  text: '',
-  href: '',
-};
-
-function matchPath(pathname, path, matchExact) {
-  return matchExact ? pathname === path : pathname.indexOf(path) !== -1;
-}
-
-function SidebarMenuItemSpace({ space }) {
-  return <div class="bp3-menu-spacer" style={{ height: `${space}px` }} />;
-}
-
-function SidebarMenu({ menu, isSubscriptionActive }) {
-  const history = useHistory();
-  const location = useLocation();
-
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [currentItem, setCurrentItem] = React.useState(null);
-
-  const menuItemsMapper = (list) => {
-    return list.map((item, index) => {
-      const hasChildren = Array.isArray(item.children);
-
-      const isActive =
-        (item.children
-          ? item.children.some((c) =>
-              matchPath(location.pathname, c.href, item.matchExact),
-            )
-          : item.href &&
-            matchPath(location.pathname, item.href, item.matchExact)) ||
-        currentItem === item;
-
-      const handleItemClick = () => {
-        if (item.href) {
-          history.push(item.href);
-        }
-        if (item.children && item.children.length > 0) {
-          setIsOpen(true);
-          setCurrentItem(item);
-        } else {
-          setIsOpen(false);
-        }
-      };
-
-      return (
-        <Choose>
-          <Choose.When condition={item.spacer}>
-            <SidebarMenuItemSpace space={item.spacer} />
-          </Choose.When>
-
-          <Choose.When condition={item.divider}>
-            <MenuDivider key={index} title={item.title} />
-          </Choose.When>
-
-          <Choose.When condition={item.label}>
-            <MenuItemLabel key={index} text={item.text} />
-          </Choose.When>
-
-          <Choose.Otherwise>
-            <MenuItem
-              key={index}
-              active={isActive}
-              icon={<Icon icon={item.icon} iconSize={item.iconSize} />}
-              text={item.text}
-              disabled={item.disabled}
-              dropdownType={item.dropdownType || 'collapse'}
-              caretIconSize={16}
-              onClick={handleItemClick}
-              callapseActive={!!isActive}
-              itemClassName={classNames({
-                'is-active': isActive,
-                'has-icon': !hasChildren && item.icon,
-              })}
-              hasSubmenu={hasChildren}
-            />
-          </Choose.Otherwise>
-        </Choose>
-      );
-    });
-  };
-
-  const filterItems = menu.filter(
-    (item) => isSubscriptionActive || item.enableBilling,
-  );
-  const items = menuItemsMapper(filterItems);
-
-  const handleSidebarOverlayClose = () => {
-    setIsOpen(false);
-  };
-
-  return (
-    <div>
-      <Menu className="sidebar-menu">{items}</Menu>{' '}
-      <SidebarOverlay
-        isOpen={isOpen}
-        label={currentItem?.text || ''}
-        items={currentItem?.children || []}
-        onClose={handleSidebarOverlayClose}
-      />
-    </div>
-  );
-}
-
-export default compose(
-  withSubscriptions(
-    ({ isSubscriptionActive }) => ({ isSubscriptionActive }),
-    'main',
-  ),
-)(SidebarMenu);

src/components/Sidebar/utils.js

@@ -1,48 +0,0 @@
-import sidebarMenuList from 'config/sidebarMenu';
-import { isArray, isEmpty } from 'lodash';
-import { useAbilityContext } from 'hooks/utils';
-
-export function useGetSidebarMenu() {
-  const ability = useAbilityContext();
-
-  return sidebarMenuList
-    .map((item) => {
-      const children = isArray(item.children)
-        ? item.children.filter((childItem) => {
-            return isArray(childItem.permission)
-              ? childItem.permission.some((perm) =>
-                  ability.can(perm.ability, perm.subject),
-                )
-              : childItem?.permission?.ability && childItem?.permission?.subject
-              ? ability.can(
-                  childItem.permission.ability,
-                  childItem.permission.subject,
-                )
-              : true;
-          })
-        : [];
-
-      return {
-        ...item,
-        ...(isArray(item.children)
-          ? {
-              children,
-            }
-          : {}),
-      };
-    })
-    .filter((item) => {
-      return isArray(item.permission)
-        ? item.permission.some((per) =>
-            ability.can(per.ability, per.subject),
-          )
-        : item?.permission?.ability && item?.permission?.subject
-        ? ability.can(item.permission.ability, item.permission.subject)
-        : true;
-    })
-    .filter((item) =>
-      isEmpty(item.children) && !item.href && !item.label && !item.divider
-        ? false
-        : true,
-    );
-}

src/components/SidebarOverlay/index.tsx

@@ -1,146 +0,0 @@
-import React from 'react';
-import { Overlay } from '@blueprintjs/core';
-import { Link } from 'react-router-dom';
-import SidebarOverlayContainer from './SidebarOverlayContainer';
-interface ISidebarOverlayItem {
-  text: string;
-  href: string;
-  divider?: boolean;
-  label?: boolean;
-}
-
-interface ISidebarOverlayProps {
-  isOpen: boolean;
-  items: ISidebarOverlayItem[];
-  label: string;
-  onClose: Function;
-}
-
-interface ISidebarOverlayItemProps {
-  text: string;
-  href: string;
-  onLinkClick: Function;
-}
-
-interface ISidebarOverlayItemDivider {
-  divider: boolean;
-}
-/**
- * Sidebar overlay item.
- */
-function SidebarOverlayItem({
-  text,
-  href,
-  onLinkClick,
-}: ISidebarOverlayItemProps) {
-  const handleLinkClick = () => {
-    onLinkClick && onLinkClick();
-  };
-  return (
-    <div className="sidebar-overlay__item">
-      <Link onClick={handleLinkClick} to={href}>
-        {text}
-      </Link>
-    </div>
-  );
-}
-
-interface ISidebarOverlayItemLabel {
-  text: string;
-}
-
-function SidebarOverlayLabel({ text }: ISidebarOverlayItemLabel) {
-  return <div className="sidebar-overlay__label">{text}</div>;
-}
-
-function SidebarOverlayDivider() {
-  return <div className={'sidebar-overlay__divider'}></div>;
-}
-
-/**
- * Sidebar overlay component.
- */
-export default function SidebarOverlay({
-  label,
-  isOpen: controllerdIsOpen,
-  onClose,
-  items,
-}: ISidebarOverlayProps) {
-  const [isEverOpened, setEverOpened] = React.useState(false);
-  const [isOpen, setIsOpen] = React.useState(controllerdIsOpen);
-
-  React.useEffect(() => {
-    if (
-      typeof controllerdIsOpen !== 'undefined' &&
-      isOpen !== controllerdIsOpen
-    ) {
-      setIsOpen(controllerdIsOpen);
-    }
-  }, [controllerdIsOpen, setIsOpen, isOpen]);
-
-  React.useEffect(() => {
-    if (isOpen && !isEverOpened) {
-      setEverOpened(true);
-    }
-  }, [isEverOpened, isOpen]);
-
-  if (!isEverOpened) {
-    return '';
-  }
-
-  // Handle overlay close event.
-  const handleOverlayClose = () => {
-    setIsOpen(false);
-    onClose && onClose();
-  };
-  // Handle overlay open event.
-  const handleOverlayOpen = () => {
-    setIsOpen(true);
-  };
-  // Handle sidebar item link click.
-  const handleItemClick = () => {
-    setIsOpen(false);
-    onClose && onClose();
-  };
-
-  return (
-    <Overlay
-      isOpen={isOpen}
-      portalContainer={
-        (document.querySelector('.Pane.vertical.Pane2') as HTMLElement) ||
-        document.body
-      }
-      onClose={handleOverlayClose}
-      onOpening={handleOverlayOpen}
-      transitionDuration={100}
-      backdropClassName={'sidebar-overlay-backdrop'}
-    >
-      <div className="sidebar-overlay sidebar-overlay-transition">
-        <SidebarOverlayContainer>
-          <div className="sidebar-overlay__menu">
-            {label && (
-              <>
-                <SidebarOverlayLabel text={label} />
-                <SidebarOverlayDivider />
-              </>
-            )}
-
-            {items.map((item) =>
-              item.divider ? (
-                <SidebarOverlayDivider />
-              ) : item.label ? (
-                <SidebarOverlayLabel text={item.text} />
-              ) : (
-                <SidebarOverlayItem
-                  onLinkClick={handleItemClick}
-                  text={item.text}
-                  href={item.href}
-                />
-              ),
-            )}
-          </div>
-        </SidebarOverlayContainer>
-      </div>
-    </Overlay>
-  );
-}

src/components/index.js

@@ -101,10 +101,12 @@ export * from './ExchangeRate';
 export * from './Branches';
 export * from './Warehouses';
 export * from './Currencies';
-export * from './FormTopbar'
+export * from './FormTopbar';
 export * from './Paper';
-export * from './Accounts'
+export * from './Accounts';
 export * from './DataTableCells';
+export * from './FlexGrid';
+export * from './MenuItem';
 
 const Hint = FieldHint;
 

src/containers/AlertsContainer/registered.js

@@ -23,6 +23,7 @@ import TransactionsLockingAlerts from '../TransactionsLocking/TransactionsLockin
 import WarehousesAlerts from '../Preferences/Warehouses/WarehousesAlerts';
 import WarehousesTransfersAlerts from '../WarehouseTransfers/WarehousesTransfersAlerts';
 import BranchesAlerts from '../Preferences/Branches/BranchesAlerts';
+import ProjectAlerts from '../../containers/Projects/containers/ProjectAlerts';
 
 export default [
   ...AccountsAlerts,
@@ -50,4 +51,5 @@ export default [
   ...WarehousesAlerts,
   ...WarehousesTransfersAlerts,
   ...BranchesAlerts,
+  ...ProjectAlerts,
 ];

src/containers/Dashboard/Sidebar/Sidebar.js

@@ -1,14 +1,19 @@
 import React from 'react';
 
-import SidebarContainer from 'components/Sidebar/SidebarContainer';
-import SidebarHead from 'components/Sidebar/SidebarHead';
-import SidebarMenu from 'components/Sidebar/SidebarMenu';
-import { useGetSidebarMenu } from './utils';
+import { SidebarContainer } from './SidebarContainer';
+import { SidebarHead } from './SidebarHead';
+import { SidebarMenu } from './SidebarMenu';
+import { useMainSidebarMenu } from './hooks';
+import { SidebarOverlayBinded } from '../SidebarOverlay';
 
 import 'style/containers/Dashboard/Sidebar.scss';
 
-export default function Sidebar({ dashboardContentRef }) {
-  const menu = useGetSidebarMenu();
+/**
+ * Dashboard sidebar.
+ * @returns {JSX.Element}
+ */
+export function Sidebar() {
+  const menu = useMainSidebarMenu();
 
   return (
     <SidebarContainer>
@@ -17,14 +22,14 @@ export default function Sidebar({ dashboardContentRef }) {
       <div className="sidebar__menu">
         <SidebarMenu menu={menu} />
       </div>
-
+      <SidebarOverlayBinded />
       <SidebarFooterVersion />
     </SidebarContainer>
   );
 }
 
 /**
- * Sidebar footer version. 
+ * Sidebar footer version.
  * @returns {React.JSX}
  */
 function SidebarFooterVersion() {

src/containers/Dashboard/Sidebar/SidebarContainer.js

@@ -1,19 +1,21 @@
 import React, { useEffect } from 'react';
 import { Scrollbar } from 'react-scrollbars-custom';
 import classNames from 'classnames';
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+
 import withDashboard from 'containers/Dashboard/withDashboard';
+import withSubscriptions from 'containers/Subscriptions/withSubscriptions';
 
+import { useObserveSidebarExpendedBodyclass } from './hooks';
 import { compose } from 'utils';
-import withSubscriptions from '../../containers/Subscriptions/withSubscriptions';
 
-function SidebarContainer({
+/**
+ * Sidebar container/
+ * @returns {JSX.Element}
+ */
+function SidebarContainerJSX({
   // #ownProps
   children,
 
-  // #withDashboardActions
-  toggleSidebarExpend,
-
   // #withDashboard
   sidebarExpended,
 
@@ -22,9 +24,10 @@ function SidebarContainer({
 }) {
   const sidebarScrollerRef = React.useRef();
 
-  useEffect(() => {
-    document.body.classList.toggle('has-mini-sidebar', !sidebarExpended);
+  // Toggles classname to body once sidebar expend/shrink.
+  useObserveSidebarExpendedBodyclass(sidebarExpended);
 
+  useEffect(() => {
     if (!sidebarExpended && sidebarScrollerRef.current) {
       sidebarScrollerRef.current.scrollTo({
         top: 0,
@@ -39,9 +42,9 @@ function SidebarContainer({
     }
   };
 
-  const scrollerElementRef = (ref) => {
+  const scrollerElementRef = React.useCallback((ref) => {
     sidebarScrollerRef.current = ref;
-  };
+  }, []);
 
   return (
     <div
@@ -64,8 +67,7 @@ function SidebarContainer({
   );
 }
 
-export default compose(
-  withDashboardActions,
+export const SidebarContainer = compose(
   withDashboard(({ sidebarExpended }) => ({
     sidebarExpended,
   })),
@@ -73,4 +75,4 @@ export default compose(
     ({ isSubscriptionActive }) => ({ isSubscriptionActive }),
     'main',
   ),
-)(SidebarContainer);
+)(SidebarContainerJSX);

src/containers/Dashboard/Sidebar/SidebarHead.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import { Button, Popover, Menu, Position } from '@blueprintjs/core';
-import Icon from 'components/Icon';
+
+import { Icon } from 'components';
+
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+import { useAuthenticatedAccount } from 'hooks/query';
 import { compose, firstLettersArgs } from 'utils';
-import withCurrentOrganization from '../../containers/Organization/withCurrentOrganization';
-import { useAuthenticatedAccount } from '../../hooks/query';
 
 // Popover modifiers.
 const POPOVER_MODIFIERS = {
@@ -13,7 +15,7 @@ const POPOVER_MODIFIERS = {
 /**
  * Sideabr head.
  */
-function SidebarHead({
+function SidebarHeadJSX({
   // #withCurrentOrganization
   organization,
 }) {
@@ -61,6 +63,6 @@ function SidebarHead({
   );
 }
 
-export default compose(
+export const SidebarHead = compose(
   withCurrentOrganization(({ organization }) => ({ organization })),
-)(SidebarHead);
+)(SidebarHeadJSX);

src/containers/Dashboard/Sidebar/SidebarMenu.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { Menu } from '@blueprintjs/core';
+import * as R from 'ramda';
+
+import { MenuItem, MenuItemLabel } from 'components';
+import { ISidebarMenuItemType } from 'containers/Dashboard/Sidebar/interfaces';
+import { useIsSidebarMenuItemActive } from './hooks';
+
+import withSubscriptions from 'containers/Subscriptions/withSubscriptions';
+
+/**
+ * Sidebar menu item.
+ * @returns {JSX.Element}
+ */
+function SidebarMenuItem({ item, index }) {
+  // Detarmine whether the item is active.
+  const isActive = useIsSidebarMenuItemActive(item);
+
+  return (
+    <MenuItem
+      key={index}
+      text={item.text}
+      disabled={item.disabled}
+      dropdownType={item.dropdownType || 'collapse'}
+      caretIconSize={16}
+      onClick={item.onClick}
+      active={isActive}
+      hasSubmenu={item.hasChildren}
+    />
+  );
+}
+
+SidebarMenuItem.ItemTypes = [
+  ISidebarMenuItemType.Link,
+  ISidebarMenuItemType.Overlay,
+  ISidebarMenuItemType.Dialog,
+];
+
+/**
+ * Detarmines which sidebar menu item type should display.
+ * @returns {JSX.Element}
+ */
+function SidebarMenuItemComposer({ item, index }) {
+  // Link item type.
+  return SidebarMenuItem.ItemTypes.indexOf(item.type) !== -1 ? (
+    <SidebarMenuItem item={item} index={index} />
+  ) : // Group item type.
+  item.type === ISidebarMenuItemType.Group ? (
+    <MenuItemLabel text={item.text} />
+  ) : null;
+}
+
+/**
+ * Sidebar menu.
+ * @returns {JSX.Element}
+ */
+function SidebarMenuJSX({ menu }) {
+  return (
+    <div>
+      <Menu className="sidebar-menu">
+        {menu.map((item, index) => (
+          <SidebarMenuItemComposer index={index} item={item} />
+        ))}
+      </Menu>
+    </div>
+  );
+}
+
+export const SidebarMenu = R.compose(
+  withSubscriptions(
+    ({ isSubscriptionActive }) => ({ isSubscriptionActive }),
+    'main',
+  ),
+)(SidebarMenuJSX);

src/containers/Dashboard/Sidebar/hooks.js

@@ -0,0 +1,358 @@
+import _, { isEmpty, includes } from 'lodash';
+import React from 'react';
+import * as R from 'ramda';
+import { useHistory } from 'react-router-dom';
+
+import { useAbilityContext } from 'hooks';
+import { useSidebarSubmenu, useFeatureCan } from 'hooks/state';
+import { SidebarMenu } from 'config/sidebarMenu';
+import {
+  ISidebarMenuItemType,
+  ISidebarSubscriptionAbility,
+} from './interfaces';
+import {
+  useSidebarSubmnuActions,
+  useDialogActions,
+  useSubscription,
+} from 'hooks/state';
+import { filterValuesDeep, deepdash } from 'utils';
+
+const deepDashConfig = {
+  childrenPath: 'children',
+  pathFormat: 'array',
+};
+const ingoreTypesEmpty = [
+  ISidebarMenuItemType.Group,
+  ISidebarMenuItemType.Overlay,
+];
+
+/**
+ * Removes the all overlay items from the menu to the main-sidebar.
+ * @param   {ISidebarMenuItem[]} menu
+ * @returns {ISidebarMenuItem[]}
+ */
+function removeSidebarOverlayChildren(menu) {
+  return deepdash.mapValuesDeep(
+    menu,
+    (item, key, parent, context) => {
+      if (item.type === ISidebarMenuItemType.Overlay) {
+        context.skipChildren(true);
+        return _.omit(item, ['children']);
+      }
+      return item;
+    },
+    deepDashConfig,
+  );
+}
+
+/**
+ * Retrives the main sidebar pre-menu.
+ * @returns {ISidebarMenuItem[]}
+ */
+export function getMainSidebarMenu() {
+  return R.compose(removeSidebarOverlayChildren)(SidebarMenu);
+}
+
+/**
+ * Predicates whether the sidebar item has feature ability.
+ */
+function useFilterSidebarItemFeaturePredicater() {
+  const { featureCan } = useFeatureCan();
+
+  return {
+    // Returns false if the item has `feature` prop and that feature has no ability.
+    predicate: (item) => {
+      if (item.feature && !featureCan(item.feature)) {
+        return false;
+      }
+      return true;
+    },
+  };
+}
+
+/**
+ * Predicates whether the sidebar item has permissio ability.
+ */
+function useFilterSidebarItemAbilityPredicater() {
+  const ability = useAbilityContext();
+
+  return {
+    // Retruns false if the item has `permission` prop and that permission has no ability.
+    predicate: (item) => {
+      if (
+        item.permission &&
+        !ability.can(item.permission.ability, item.permission.subject)
+      ) {
+        return false;
+      }
+      return true;
+    },
+  };
+}
+
+/**
+ * Filters the sidebar item based on the subscription state.
+ */
+function useFilterSidebarItemSubscriptionPredicater() {
+  const { isSubscriptionActive, isSubscriptionInactive } = useSubscription();
+
+  return {
+    predicate: (item) => {
+      const { subscription } = item;
+
+      if (subscription) {
+        const isActive = includes(subscription, [
+          ISidebarSubscriptionAbility.Active,
+        ])
+          ? isSubscriptionActive
+          : true;
+
+        const isInactive = includes(subscription, [
+          ISidebarSubscriptionAbility.Inactive,
+        ])
+          ? isSubscriptionInactive
+          : true;
+
+        return isActive && isInactive;
+      }
+      return true;
+    },
+  };
+}
+
+/**
+ * Filters sidebar menu items based on ability of the item permission.
+ * @param   {} menu
+ * @returns {}
+ */
+function useFilterSidebarMenuAbility(menu) {
+  const { predicate: predFeature } = useFilterSidebarItemFeaturePredicater();
+  const { predicate: predAbility } = useFilterSidebarItemAbilityPredicater();
+  const { predicate: predSubscription } =
+    useFilterSidebarItemSubscriptionPredicater();
+
+  return deepdash.filterDeep(
+    menu,
+    (item) => {
+      return predFeature(item) && predAbility(item) && predSubscription(item);
+    },
+    deepDashConfig,
+  );
+}
+
+/**
+ * Flats the sidebar menu groups.
+ * @param   {*} menu
+ * @returns {}
+ */
+function useFlatSidebarMenu(menu) {
+  return React.useMemo(() => {
+    return deepdash.mapDeep(menu, (item) => item, deepDashConfig);
+  }, [menu]);
+}
+
+/**
+ * Binds sidebar link item click action.
+ * @param   {ISidebarMenuItem} item
+ */
+function useBindSidebarItemLinkClick() {
+  const history = useHistory();
+  const { closeSidebarSubmenu } = useSidebarSubmnuActions();
+
+  // Handle sidebar item click.
+  const onClick = (item) => (event) => {
+    closeSidebarSubmenu();
+    history.push(item.href);
+  };
+  return {
+    bindOnClick: (item) => {
+      return {
+        ...item,
+        onClick: onClick(item),
+      };
+    },
+  };
+}
+
+/**
+ * Bind sidebar dialog item click action.
+ * @param   {ISidebarMenuItem} item
+ */
+function useBindSidebarItemDialogClick() {
+  const { closeSidebarSubmenu } = useSidebarSubmnuActions();
+  const { openDialog } = useDialogActions();
+
+  // Handle sidebar item click.
+  const onClick = (item) => (event) => {
+    closeSidebarSubmenu();
+    openDialog(item.dialogName, item.dialogPayload);
+  };
+  return {
+    bindOnClick: (item) => {
+      return {
+        ...item,
+        onClick: onClick(item),
+      };
+    },
+  };
+}
+
+/**
+ * Binds click action for the sidebar overlay item.
+ */
+function useBindSidebarItemOverlayClick() {
+  const { toggleSidebarSubmenu, closeSidebarSubmenu } =
+    useSidebarSubmnuActions();
+
+  // Handle sidebar item click.
+  const onClick = (item) => (event) => {
+    closeSidebarSubmenu();
+    toggleSidebarSubmenu({ submenuId: item.overlayId });
+  };
+  return {
+    bindOnClick: (item) => {
+      return {
+        ...item,
+        onClick: onClick(item),
+      };
+    },
+  };
+}
+
+/**
+ * Binds click action of the given sidebar menu for each item based on item type.
+ */
+function useBindSidebarItemClick(menu) {
+  const { bindOnClick: bindLinkClickEvt } = useBindSidebarItemLinkClick();
+  const { bindOnClick: bindOverlayClickEvt } = useBindSidebarItemOverlayClick();
+  const { bindOnClick: bindItemDialogEvt } = useBindSidebarItemDialogClick();
+
+  return React.useMemo(() => {
+    return deepdash.mapValuesDeep(
+      menu,
+      (item) => {
+        return R.compose(
+          R.when(
+            R.propSatisfies(R.equals(ISidebarMenuItemType.Link), 'type'),
+            bindLinkClickEvt,
+          ),
+          R.when(
+            R.propSatisfies(R.equals(ISidebarMenuItemType.Overlay), 'type'),
+            bindOverlayClickEvt,
+          ),
+          R.when(
+            R.propSatisfies(R.equals(ISidebarMenuItemType.Dialog), 'type'),
+            bindItemDialogEvt,
+          ),
+        )(item);
+      },
+      deepDashConfig,
+    );
+  }, [menu]);
+}
+
+/**
+ * Finds the given overlay submenu id from the menu graph.
+ * @param   {ISidebarMenuOverlayIds}
+ * @param   {ISidebarMenuItem[]} menu -
+ * @returns {ISidebarMenuItem[]}
+ */
+const findSubmenuBySubmenuId = R.curry((submenuId, menu) => {
+  const groupItem = deepdash.findDeep(
+    menu,
+    (item) => {
+      return (
+        item.type === ISidebarMenuItemType.Overlay &&
+        item.overlayId === submenuId
+      );
+    },
+    deepDashConfig,
+  );
+  return groupItem?.value?.children || [];
+});
+
+/**
+ * Retrieves the main sidebar post-menu.
+ * @returns {ISidebarMenuItem[]}
+ */
+export function useMainSidebarMenu() {
+  return R.compose(
+    useBindSidebarItemClick,
+    useFlatSidebarMenu,
+    removeSidebarOverlayChildren,
+    useAssocSidebarItemHasChildren,
+    filterSidebarItemHasNoChildren,
+    useFilterSidebarMenuAbility,
+  )(SidebarMenu);
+}
+
+/**
+ * Assoc `hasChildren` prop to sidebar menu items.
+ * @param   {ISidebarMenuItem[]} items
+ * @returns {ISidebarMenuItem[]}
+ */
+function useAssocSidebarItemHasChildren(items) {
+  return deepdash.mapValuesDeep(
+    items,
+    (item) => {
+      return {
+        ...item,
+        hasChildren: !isEmpty(item.children),
+      };
+    },
+    deepDashConfig,
+  );
+}
+
+/**
+ * Retrieves the sub-sidebar post-menu.
+ * @param   {ISidebarMenuOverlayIds} submenuId
+ * @returns {ISidebarMenuItem[]}
+ */
+export function useSubSidebarMenu(submenuId) {
+  if (!submenuId) return [];
+
+  return R.compose(
+    useBindSidebarItemClick,
+    useFlatSidebarMenu,
+    filterSidebarItemHasNoChildren,
+    useFilterSidebarMenuAbility,
+    findSubmenuBySubmenuId(submenuId),
+  )(SidebarMenu);
+}
+
+/**
+ * Observes the sidebar expending with body class.
+ * @param {boolean} sidebarExpended
+ */
+export function useObserveSidebarExpendedBodyclass(sidebarExpended) {
+  React.useEffect(() => {
+    document.body.classList.toggle('has-mini-sidebar', !sidebarExpended);
+  }, [sidebarExpended]);
+}
+
+/**
+ * Detamrines whether the given sidebar menu item is active.
+ * @returns {boolean}
+ */
+export function useIsSidebarMenuItemActive(item) {
+  const { submenuId } = useSidebarSubmenu();
+  return (
+    item.type === ISidebarMenuItemType.Overlay && submenuId === item.overlayId
+  );
+}
+
+/**
+ * Filter sidebar specific items types that have no types.
+ * @param   {ISidebarMenuItem[]} items -
+ * @returns {ISidebarMenuItem[]}
+ */
+export function filterSidebarItemHasNoChildren(items) {
+  return filterValuesDeep((item) => {
+    // If it was group item and has no children items so discard that item.
+    if (ingoreTypesEmpty.indexOf(item.type) !== -1 && isEmpty(item.children)) {
+      return false;
+    }
+    return true;
+  }, items);
+}

src/containers/Dashboard/Sidebar/interfaces.ts

@@ -2,7 +2,9 @@ export enum ISidebarMenuItemType {
   Label = 'label',
   Link = 'link',
   Group = 'group',
-  Overlay = 'overlay'
+  Overlay = 'overlay',
+  Dialog = 'dialog',
+  Drawer = 'drawer',
 }
 
 export interface ISidebarMenuItemOverlay extends ISidebarMenuItemCommon {
@@ -16,6 +18,18 @@ export interface ISidebarMenuItemLink extends ISidebarMenuItemCommon {
   matchExact?: boolean;
 }
 
+export interface ISidebarMenuItemDialog extends ISidebarMenuItemCommon {
+  type: ISidebarMenuItemType.Dialog;
+  dialogName: string;
+  dialogPayload: any;
+}
+
+export interface ISidebarMenuItemDrawer extends ISidebarMenuItemCommon {
+  type: ISidebarMenuItemType.Drawer;
+  drawerName: string;
+  drawerPayload: any;
+}
+
 export interface ISidebarMenuItemLabel extends ISidebarMenuItemCommon {
   text?: string;
   type: ISidebarMenuItemType.Label;
@@ -42,4 +56,23 @@ export type ISidebarMenuItem =
   | ISidebarMenuItemLink
   | ISidebarMenuItemLabel
   | ISidebarMenuItemGroup
-  | ISidebarMenuItemOverlay;
+  | ISidebarMenuItemOverlay
+  | ISidebarMenuItemDialog
+  | ISidebarMenuItemDrawer;
+
+export enum ISidebarMenuOverlayIds {
+  Items = 'Items',
+  Reports = 'Reports',
+  Sales = 'Sales',
+  Purchases = 'Purchases',
+  Financial = 'Financial',
+  Contacts = 'Contacts',
+  Cashflow = 'Cashflow',
+  Expenses = 'Expenses',
+  Projects = 'Projects',
+}
+
+export enum ISidebarSubscriptionAbility {
+  Expired = 'SubscriptionExpired',
+  Active = 'SubscriptionActive',
+}

src/containers/Dashboard/Sidebar/withDashboardSidebar.js

@@ -0,0 +1,13 @@
+
+import { connect } from 'react-redux';
+
+export default (mapState) => {
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      sidebarSubmenuOpen: state.dashboard.sidebarSubmenu.isOpen,
+      sidebarSubmenuId: state.dashboard.sidebarSubmenu.submenuId,
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+}

src/containers/Dashboard/Sidebar/withDashboardSidebarActions.js

@@ -0,0 +1,16 @@
+import { connect } from 'react-redux';
+import {
+  closeSidebarSubmenu,
+  openSidebarSubmenu,
+} from 'store/dashboard/dashboard.actions';
+
+const mapActionsToProps = (dispatch) => ({
+  // Opens the dashboard submenu sidebar.
+  openDashboardSidebarSubmenu: (submenuId) =>
+    dispatch(openSidebarSubmenu(submenuId)),
+
+  // Closes the dashboard submenu sidebar.
+  closeDashboardSidebarSubmenu: () => dispatch(closeSidebarSubmenu()),
+});
+
+export default connect(null, mapActionsToProps);

src/containers/Dashboard/SidebarOverlay/SidebarOverlay.tsx

@@ -0,0 +1,142 @@
+//@ts-nocheck
+import React from 'react';
+import { Overlay, OverlayProps } from '@blueprintjs/core';
+import { Link } from 'react-router-dom';
+import { SidebarOverlayContainer } from './SidebarOverlayContainer';
+import { ISidebarMenuItem, ISidebarMenuItemType } from '../Sidebar/interfaces';
+
+export interface ISidebarOverlayItem {
+  text: string;
+  href: string;
+  divider?: boolean;
+  label?: boolean;
+}
+
+export interface ISidebarOverlayProps {
+  items: ISidebarMenuItem[];
+}
+
+export interface ISidebarOverlayItemProps {
+  text: string | JSX.Element;
+  href?: string;
+  onClick?: any;
+}
+
+export interface ISidebarOverlayItemDivider {
+  divider: boolean;
+}
+
+/**
+ * Sidebar overlay item.
+ * @param   {ISidebarOverlayItemProps}
+ * @returns {JSX.Element}
+ */
+export function SidebarOverlayItemLink({
+  text,
+  href,
+  onClick,
+}: ISidebarOverlayItemProps) {
+  return (
+    <div className="sidebar-overlay__item">
+      <Link to={href} onClick={onClick}>
+        {text}
+      </Link>
+    </div>
+  );
+}
+
+export interface ISidebarOverlayItemLabel {
+  text: string;
+}
+
+/**
+ * Sidebar overlay label item.
+ * @param   {ISidebarOverlayItemLabel}
+ * @returns {JSX.Element}
+ */
+export function SidebarOverlayLabel({
+  text,
+}: ISidebarOverlayItemLabel): JSX.Element {
+  return <div className="sidebar-overlay__label">{text}</div>;
+}
+
+/**
+ * Sidebar overlay divider item.
+ * @returns {JSX.Element}
+ */
+export function SidebarOverlayDivider() {
+  return <div className={'sidebar-overlay__divider'}></div>;
+}
+
+interface SidebarOverlayItemProps {
+  item: ISidebarMenuItem;
+}
+
+/**
+ * Sidebar overlay item.
+ * @param   {SidebarOverlayItemProps} props -
+ * @returns {JSX.Element}
+ */
+function SidebarOverlayItem({ item }: SidebarOverlayItemProps) {
+  //
+  return item.type === ISidebarMenuItemType.Group ? (
+    <SidebarOverlayLabel text={item.text} />
+  ) : //
+  item.type === ISidebarMenuItemType.Link ||
+    item.type === ISidebarMenuItemType.Dialog ? (
+    <SidebarOverlayItemLink text={item.text} onClick={item.onClick} />
+  ) : null;
+}
+
+/**
+ *
+ */
+export interface ISidebarOverlayMenu {
+  items: ISidebarMenuItem[];
+}
+
+/**
+ * Sidebar overlay menu.
+ * @param   {ISidebarOverlayMenu}
+ * @returns {JSX.Element}
+ */
+function SidebarOverlayMenu({ items }: ISidebarOverlayMenu) {
+  return (
+    <div className="sidebar-overlay__menu">
+      {items.map((item) => (
+        <SidebarOverlayItem item={item} />
+      ))}
+    </div>
+  );
+}
+
+export interface SidebarOverlayProps extends OverlayProps {
+  items: ISidebarMenuItem[];
+}
+
+/**
+ * Sidebar overlay component.
+ * @param   {SidebarOverlayProps}
+ * @returns {JSX.Element}
+ */
+export function SidebarOverlay({ items, label, ...rest }: SidebarOverlayProps) {
+  return (
+    <Overlay
+      portalContainer={
+        (document.querySelector('.Pane.vertical.Pane2') as HTMLElement) ||
+        document.body
+      }
+      transitionDuration={100}
+      backdropClassName={'sidebar-overlay-backdrop'}
+      {...rest}
+    >
+      <div className="sidebar-overlay sidebar-overlay-transition">
+        <SidebarOverlayContainer>
+          {label && <SidebarOverlayLabel text={label} />}
+
+          <SidebarOverlayMenu items={items} />
+        </SidebarOverlayContainer>
+      </div>
+    </Overlay>
+  );
+}

src/containers/Dashboard/SidebarOverlay/SidebarOverlayBinded.tsx

@@ -0,0 +1,54 @@
+// @ts-nocheck
+import React from 'react';
+import * as R from 'ramda';
+
+import { SidebarOverlay } from './SidebarOverlay';
+import withDashboardSidebarActions from 'containers/Dashboard/Sidebar/withDashboardSidebarActions';
+import withDashboardSidebar from 'containers/Dashboard/Sidebar/withDashboardSidebar';
+
+import { useSubSidebarMenu } from '../Sidebar/hooks';
+
+/**
+ * Dashboard sidebar menu.
+ * @returns {JSX.Element}
+ */
+function SidebarOverlayBindedRoot({
+  // #withDashboardSidebar
+  sidebarSubmenuOpen,
+  sidebarSubmenuId,
+
+  // #withDashboardSidebarActions
+  closeDashboardSidebarSubmenu,
+}) {
+  const handleSidebarClosing = React.useCallback(() => {
+    closeDashboardSidebarSubmenu();
+  }, []);
+
+  return (
+    <SidebarOverlayBindedRouter
+      sidebarSubmenuId={sidebarSubmenuId}
+      isOpen={sidebarSubmenuOpen}
+      onClose={handleSidebarClosing}
+    />
+  );
+}
+
+/**
+ * Dashboard sidebar submenu router.
+ */
+function SidebarOverlayBindedRouter({ sidebarSubmenuId, ...rest }) {
+  const sidebarItems = useSubSidebarMenu(sidebarSubmenuId);
+
+  return <SidebarOverlay items={sidebarItems} {...rest} />;
+}
+
+/**
+ * Sidebar overlay binded with redux.
+ */
+export const SidebarOverlayBinded = R.compose(
+  withDashboardSidebar(({ sidebarSubmenuOpen, sidebarSubmenuId }) => ({
+    sidebarSubmenuOpen,
+    sidebarSubmenuId,
+  })),
+  withDashboardSidebarActions,
+)(SidebarOverlayBindedRoot);

src/containers/Dashboard/SidebarOverlay/SidebarOverlayContainer.tsx

@@ -1,14 +1,16 @@
 import React from 'react';
 import { Scrollbar } from 'react-scrollbars-custom';
 
-interface ISidebarOverlayContainerProps {
-    children: JSX.Element | JSX.Element[],
+export interface ISidebarOverlayContainerProps {
+  children: JSX.Element | JSX.Element[];
 }
 
 /**
  * Sidebar overlay container.
  */
-export default function SidebarOverlayContainer({ children }: ISidebarOverlayContainerProps) {
+export function SidebarOverlayContainer({
+  children,
+}: ISidebarOverlayContainerProps) {
   return (
     <div className={'sidebar-overlay__scroll-wrapper'}>
       <Scrollbar noDefaultStyles={true}>

src/containers/Dashboard/SidebarOverlay/index.ts

@@ -0,0 +1,3 @@
+export * from './SidebarOverlay';
+export * from './SidebarOverlayContainer';
+export * from './SidebarOverlayBinded'

src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderComparisonPanal.js

@@ -4,7 +4,7 @@ import { FastField, Field } from 'formik';
 import { FormGroup, Checkbox } from '@blueprintjs/core';
 import styled from 'styled-components';
 
-import { Row, Col, FieldHint, FormattedMessage as T } from 'components';
+import { Flex, FlexItem, FieldHint, FormattedMessage as T } from 'components';
 import {
   handlePreviousYearCheckBoxChange,
   handlePreviousYearChangeCheckboxChange,
@@ -15,11 +15,11 @@ import {
 } from './utils';
 
 /**
- * Balance sheet header - Comparison panal.
+ * Balance sheet header - Comparison panal - Comparisons fields.
  */
-export default function BalanceSheetHeaderComparisonPanal() {
+function BalanceSheetHeaderComparisonPanalFields() {
   return (
-    <BalanceSheetComparisonWrap>
+    <>
       {/**----------- Previous Year -----------*/}
       <Field name={'previousYear'} type={'checkbox'}>
         {({ form, field }) => (
@@ -33,8 +33,9 @@ export default function BalanceSheetHeaderComparisonPanal() {
           </FormGroup>
         )}
       </Field>
-      <Row>
-        <Col xs={3}>
+
+      <FlexSubFields align={'left'}>
+        <FlexItem col={6}>
           <Field name={'previousYearAmountChange'} type={'checkbox'}>
             {({ form, field }) => (
               <FormGroup labelInfo={<FieldHint />}>
@@ -48,8 +49,9 @@ export default function BalanceSheetHeaderComparisonPanal() {
               </FormGroup>
             )}
           </Field>
-        </Col>
-        <Col xs={3}>
+        </FlexItem>
+
+        <FlexItem col={6}>
           <FastField name={'previousYearPercentageChange'} type={'checkbox'}>
             {({ form, field }) => (
               <FormGroup labelInfo={<FieldHint />}>
@@ -62,8 +64,9 @@ export default function BalanceSheetHeaderComparisonPanal() {
               </FormGroup>
             )}
           </FastField>
-        </Col>
-      </Row>
+        </FlexItem>
+      </FlexSubFields>
+
       {/*------------ Previous Period -----------*/}
       <FastField name={'previousPeriod'} type={'checkbox'}>
         {({ form, field }) => (
@@ -78,8 +81,9 @@ export default function BalanceSheetHeaderComparisonPanal() {
           </FormGroup>
         )}
       </FastField>
-      <Row>
-        <Col xs={3}>
+
+      <FlexSubFields>
+        <FlexItem col={6}>
           <FastField name={'previousPeriodAmountChange'} type={'checkbox'}>
             {({ form, field }) => (
               <FormGroup labelInfo={<FieldHint />}>
@@ -93,8 +97,9 @@ export default function BalanceSheetHeaderComparisonPanal() {
               </FormGroup>
             )}
           </FastField>
-        </Col>
-        <Col xs={3}>
+        </FlexItem>
+
+        <FlexItem col={6}>
           <FastField name={'previousPeriodPercentageChange'} type={'checkbox'}>
             {({ form, field }) => (
               <FormGroup labelInfo={<FieldHint />}>
@@ -107,8 +112,8 @@ export default function BalanceSheetHeaderComparisonPanal() {
               </FormGroup>
             )}
           </FastField>
-        </Col>
-      </Row>
+        </FlexItem>
+      </FlexSubFields>
 
       {/**----------- % of Column -----------*/}
       <FastField name={'percentageOfColumn'} type={'checkbox'}>
@@ -137,19 +142,33 @@ export default function BalanceSheetHeaderComparisonPanal() {
           </FormGroup>
         )}
       </FastField>
+    </>
+  );
+}
+
+/**
+ * Balance sheet header - Comparison panal.
+ */
+export default function BalanceSheetHeaderComparisonPanal() {
+  return (
+    <BalanceSheetComparisonWrap>
+      <BalanceSheetComparisonFieldsWrap>
+        <BalanceSheetHeaderComparisonPanalFields />
+      </BalanceSheetComparisonFieldsWrap>
     </BalanceSheetComparisonWrap>
   );
 }
 
 const BalanceSheetComparisonWrap = styled.div`
-  .row {
-    margin-left: 0.15rem;
-    .col {
-      min-width: 150px !important;
-      max-width: 190px !important;
-    }
-  }
   .bp3-form-group {
     margin-bottom: 3px;
   }
 `;
+
+const FlexSubFields = styled(Flex)`
+  padding-left: 20px;
+`;
+
+const BalanceSheetComparisonFieldsWrap = styled.div`
+  width: 400px;
+`;

src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderComparisonPanel.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import { FastField, Field } from 'formik';
+import { FastField } from 'formik';
 import { FormGroup, Checkbox } from '@blueprintjs/core';
 import styled from 'styled-components';
 
-import { FormattedMessage as T } from 'components';
+import { Flex, FlexItem, FormattedMessage as T } from 'components';
 
-import { Row, Col, FieldHint } from '../../../components';
+import { FieldHint } from '../../../components';
 import {
   handlePreviousYearCheckBoxChange,
   handlePreviousPeriodCheckBoxChange,
@@ -16,11 +16,12 @@ import {
 } from './utils';
 
 /**
- * ProfitLoss sheet header -comparison panel.
+ * Profit/loss comparisons panel fields.
+ * @returns {JSX.Element}
  */
-export default function ProfitLossSheetHeaderComparisonPanel() {
+function ProfitLossComaprsionPanelFields() {
   return (
-    <ProfitLossSheetComparisonWrap>
+    <>
       {/**----------- Previous Year -----------*/}
       <FastField name={'previousYear'} type={'checkbox'}>
         {({ form, field }) => (
@@ -35,8 +36,9 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
           </FormGroup>
         )}
       </FastField>
-      <Row>
-        <Col xs={3}>
+
+      <FlexSubFields>
+        <FlexItem col={6}>
           <FastField name={'previousYearAmountChange'} type={'checkbox'}>
             {({ form, field }) => (
               <FormGroup labelInfo={<FieldHint />}>
@@ -50,8 +52,8 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
               </FormGroup>
             )}
           </FastField>
-        </Col>
-        <Col xs={3}>
+        </FlexItem>
+        <FlexItem col={6}>
           <FastField name={'previousYearPercentageChange'} type={'checkbox'}>
             {({ form, field }) => (
               <FormGroup labelInfo={<FieldHint />}>
@@ -65,8 +67,9 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
               </FormGroup>
             )}
           </FastField>
-        </Col>
-      </Row>
+        </FlexItem>
+      </FlexSubFields>
+
       {/**----------- Previous Period (PP) -----------*/}
       <FastField name={'previousPeriod'} type={'checkbox'}>
         {({ form, field }) => (
@@ -81,8 +84,9 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
           </FormGroup>
         )}
       </FastField>
-      <Row>
-        <Col xs={3}>
+
+      <FlexSubFields>
+        <FlexItem col={6}>
           <FastField name={'previousPeriodAmountChange'} type={'checkbox'}>
             {({ form, field }) => (
               <FormGroup labelInfo={<FieldHint />}>
@@ -96,8 +100,8 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
               </FormGroup>
             )}
           </FastField>
-        </Col>
-        <Col xs={3}>
+        </FlexItem>
+        <FlexItem col={6}>
           <FastField name={'previousPeriodPercentageChange'} type={'checkbox'}>
             {({ form, field }) => (
               <FormGroup labelInfo={<FieldHint />}>
@@ -111,8 +115,9 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
               </FormGroup>
             )}
           </FastField>
-        </Col>
-      </Row>
+        </FlexItem>
+      </FlexSubFields>
+
       {/**----------- % of Column -----------*/}
       <FastField name={'percentageColumn'} type={'checkbox'}>
         {({ field }) => (
@@ -126,6 +131,7 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
           </FormGroup>
         )}
       </FastField>
+
       {/**----------- % of Row -----------*/}
       <FastField name={'percentageRow'} type={'checkbox'}>
         {({ field }) => (
@@ -139,6 +145,7 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
           </FormGroup>
         )}
       </FastField>
+
       {/**----------- % of Expense -----------*/}
       <FastField name={'percentageExpense'} type={'checkbox'}>
         {({ field }) => (
@@ -152,6 +159,7 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
           </FormGroup>
         )}
       </FastField>
+
       {/**----------- % of Income -----------*/}
       <FastField name={'percentageIncome'} type={'checkbox'}>
         {({ field }) => (
@@ -165,19 +173,33 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
           </FormGroup>
         )}
       </FastField>
+    </>
+  );
+}
+
+/**
+ * ProfitLoss sheet header -comparison panel.
+ */
+export default function ProfitLossSheetHeaderComparisonPanel() {
+  return (
+    <ProfitLossSheetComparisonWrap>
+      <ProfitLossComaprsionFieldsWrap>
+        <ProfitLossComaprsionPanelFields />
+      </ProfitLossComaprsionFieldsWrap>
     </ProfitLossSheetComparisonWrap>
   );
 }
 
 const ProfitLossSheetComparisonWrap = styled.div`
-  .row {
-    margin-left: 0.15rem;
-    .col {
-      min-width: 150px !important;
-      max-width: 190px !important;
-    }
-  }
   .bp3-form-group {
     margin-bottom: 3px;
   }
 `;
+
+const FlexSubFields = styled(Flex)`
+  padding-left: 20px;
+`;
+
+const ProfitLossComaprsionFieldsWrap = styled.div`
+  max-width: 400px;
+`;

src/containers/Projects/components/ChangeTypesSelect.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { MenuItem, Button } from '@blueprintjs/core';
+import { FSelect } from '../../../components';
+
+/**
+ *
+ * @param {*}
+ * @param {*} param1
+ * @returns
+ */
+const chargeTypeItemRenderer = (item, { handleClick, modifiers, query }) => {
+  return (
+    <MenuItem
+      label={item.label}
+      key={item.name}
+      onClick={handleClick}
+      text={item.name}
+    />
+  );
+};
+
+const chargeTypeSelectProps = {
+  itemRenderer: chargeTypeItemRenderer,
+  valueAccessor: 'value',
+  labelAccessor: 'name',
+};
+
+/**
+ *
+ * @param param0
+ * @returns
+ */
+export function ChangeTypesSelect({ items, ...rest }) {
+  return (
+    <FSelect
+      {...chargeTypeSelectProps}
+      {...rest}
+      items={items}
+      input={ChargeTypeSelectButton}
+    />
+  );
+}
+/**
+ *
+ * @param param0
+ * @returns
+ */
+function ChargeTypeSelectButton({ label }) {
+  return <Button text={label} />;
+}

src/containers/Projects/components/ExpenseSelect.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { MenuItem, Button } from '@blueprintjs/core';
+import { FSelect } from 'components';
+
+/**
+ *
+ * @param query
+ * @param expense
+ * @param _index
+ * @param exactMatch
+ */
+const expenseItemPredicate = (query, expense, _index, exactMatch) => {
+  const normalizedTitle = expense.name.toLowerCase();
+  const normalizedQuery = query.toLowerCase();
+
+  if (exactMatch) {
+    return normalizedTitle === normalizedQuery;
+  } else {
+    return `${expense.name}. ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
+  }
+};
+
+/**
+ *
+ * @param expense
+ * @param param1
+ * @returns
+ */
+const expenseItemRenderer = (expense, { handleClick, modifiers, query }) => {
+  return (
+    <MenuItem
+      active={modifiers.active}
+      disabled={modifiers.disabled}
+      key={expense.id}
+      onClick={handleClick}
+      text={expense.name}
+    />
+  );
+};
+
+const expenseSelectProps = {
+  itemPredicate: expenseItemPredicate,
+  itemRenderer: expenseItemRenderer,
+  valueAccessor: 'id',
+  labelAccessor: 'name',
+};
+
+export function ExpenseSelect({ expenses, defaultText, ...rest }) {
+  return (
+    <FSelect
+      items={expenses}
+      {...expenseSelectProps}
+      {...rest}
+      input={ExpenseSelectButton}
+    />
+  );
+}
+
+function ExpenseSelectButton({ label, ...rest }) {
+  return (
+    <Button
+      text={label ? label : intl.get('choose_an_estimated_expense')}
+      {...rest}
+    />
+  );
+}

src/containers/Projects/components/FInputGroupComponent.tsx

@@ -0,0 +1,20 @@
+//@ts-nocheck
+import React from 'react';
+import { FInputGroup } from 'components';
+import { useFormikContext } from 'formik';
+
+export function FInputGroupComponent({ toField, ...props }) {
+  const { values, setFieldValue } = useFormikContext();
+  const { expenseQuantity, expenseUnitPrice } = values;
+  const total = expenseQuantity * expenseUnitPrice;
+
+  const handleBlur = () => {
+    setFieldValue(toField, total);
+  };
+
+  const inputGroupProps = {
+    onBlur: handleBlur,
+    ...props,
+  };
+  return <FInputGroup {...inputGroupProps} />;
+}

src/containers/Projects/components/ProjectsSelect.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { MenuItem, Button } from '@blueprintjs/core';
+import { FSelect } from 'components';
+
+/**
+ *
+ * @param {*} query
+ * @param {*} project
+ * @param {*} _index
+ * @param {*} exactMatch
+ * @returns
+ */
+const projectsItemPredicate = (query, project, _index, exactMatch) => {
+  const normalizedTitle = project.name.toLowerCase();
+  const normalizedQuery = query.toLowerCase();
+
+  if (exactMatch) {
+    return normalizedTitle === normalizedQuery;
+  } else {
+    return `${project.name}. ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
+  }
+};
+
+/**
+ *
+ * @param {*} project
+ * @param {*} param1
+ * @returns
+ */
+const projectsItemRenderer = (project, { handleClick, modifiers, query }) => {
+  return (
+    <MenuItem
+      active={modifiers.active}
+      disabled={modifiers.disabled}
+      key={project.id}
+      onClick={handleClick}
+      text={project.name}
+    />
+  );
+};
+
+const projectSelectProps = {
+  itemPredicate: projectsItemPredicate,
+  itemRenderer: projectsItemRenderer,
+  valueAccessor: 'id',
+  labelAccessor: 'name',
+};
+
+export function ProjectsSelect({ projects, ...rest }) {
+  return (
+    <FSelect
+      items={projects}
+      {...projectSelectProps}
+      {...rest}
+      input={ProjectSelectButton}
+    />
+  );
+}
+
+function ProjectSelectButton({ label }) {
+  return <Button text={label ? label : intl.get('find_or_choose_a_project')} />;
+}

src/containers/Projects/components/TaskSelect.tsx

@@ -0,0 +1,64 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { MenuItem, Button } from '@blueprintjs/core';
+import { FSelect } from 'components';
+
+/**
+ *
+ * @param {*} query
+ * @param {*} task
+ * @param {*} _index
+ * @param {*} exactMatch
+ * @returns
+ */
+const taskItemPredicate = (query, task, _index, exactMatch) => {
+  const normalizedTitle = task.name.toLowerCase();
+  const normalizedQuery = query.toLowerCase();
+
+  if (exactMatch) {
+    return normalizedTitle === normalizedQuery;
+  } else {
+    return `${task.name}. ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
+  }
+};
+
+/**
+ *
+ * @param {*} task
+ * @param {*} param1
+ * @returns
+ */
+const taskItemRenderer = (task, { handleClick, modifiers, query }) => {
+  return (
+    <MenuItem
+      active={modifiers.active}
+      disabled={modifiers.disabled}
+      key={task.id}
+      onClick={handleClick}
+      text={task.name}
+    />
+  );
+};
+
+const taskSelectProps = {
+  itemPredicate: taskItemPredicate,
+  itemRenderer: taskItemRenderer,
+  valueAccessor: 'id',
+  labelAccessor: 'name',
+};
+
+export function TaskSelect({ tasks, ...rest }) {
+  return (
+    <FSelect
+      items={tasks}
+      {...taskSelectProps}
+      {...rest}
+      input={TaskSelectButton}
+    />
+  );
+}
+
+function TaskSelectButton({ label }) {
+  return <Button text={label ? label : intl.get('choose_a_task')} />;
+}

src/containers/Projects/components/index.ts

@@ -0,0 +1,5 @@
+export * from './ExpenseSelect';
+export * from './ChangeTypesSelect';
+export * from './TaskSelect';
+export * from './ProjectsSelect';
+export * from './FInputGroupComponent';

src/containers/Projects/containers/EstimatedExpenseFormDialog/EstimatedExpense.schema.tsx

@@ -0,0 +1,19 @@
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+import { DATATYPES_LENGTH } from 'common/dataTypes';
+
+const Schema = Yup.object().shape({
+  estimatedExpense: Yup.number().label(
+    intl.get('estimated_expense.schema.label.estimated_expense'),
+  ),
+  quantity: Yup.number().label(
+    intl.get('estimated_expense.schema.label.quantity'),
+  ),
+  unitPrice: Yup.number().label(
+    intl.get('estimated_expense.schema.label.unit_price'),
+  ),
+  expenseTotal: Yup.number(),
+  charge: Yup.string(),
+});
+
+export const CreateEstimatedExpenseFormSchema = Schema;

src/containers/Projects/containers/EstimatedExpenseFormDialog/EstimatedExpenseForm.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Formik } from 'formik';
+import { AppToaster } from 'components';
+import { CreateEstimatedExpenseFormSchema } from './EstimatedExpense.schema';
+import EstimatedExpenseFormConent from './EstimatedExpenseFormConent';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+const defaultInitialValues = {
+  estimatedExpense: '',
+  unitPrice: '',
+  quantity: 1,
+  charge: '% markup',
+  percentage: '',
+};
+
+/**
+ * Estimated expense form dialog.
+ * @returns
+ */
+function EstimatedExpenseForm({
+  //#withDialogActions
+  closeDialog,
+}) {
+  const initialValues = {
+    ...defaultInitialValues,
+  };
+
+  // Handles the form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    // Handle request response success.
+    const onSuccess = (response) => {
+      AppToaster.show({});
+    };
+
+    // Handle request response errors.
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      setSubmitting(false);
+    };
+  };
+
+  return (
+    <Formik
+      validationSchema={CreateEstimatedExpenseFormSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+      component={EstimatedExpenseFormConent}
+    />
+  );
+}
+
+export default compose(withDialogActions)(EstimatedExpenseForm);

src/containers/Projects/containers/EstimatedExpenseFormDialog/EstimatedExpenseFormChargeFields.tsx

@@ -0,0 +1,54 @@
+//@ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Classes, ControlGroup } from '@blueprintjs/core';
+import { FFormGroup, FInputGroup, Choose } from 'components';
+import { useFormikContext } from 'formik';
+
+function PercentageFormField() {
+  return (
+    <FFormGroup
+      label={intl.get('estimated_expenses.dialog.percentage')}
+      name={'percentage'}
+    >
+      <FInputGroup name="percentage" />
+    </FFormGroup>
+  );
+}
+
+function CustomPirceField() {
+  return (
+    <ControlGroup className={Classes.FILL}>
+      <FFormGroup
+        name={'unitPrice'}
+        label={intl.get('estimated_expenses.dialog.unit_price')}
+      >
+        <FInputGroup name="unitPrice" />
+      </FFormGroup>
+      <FFormGroup
+        name={'unitPrice'}
+        label={intl.get('estimated_expenses.dialog.total')}
+      >
+        <FInputGroup name="total" />
+      </FFormGroup>
+    </ControlGroup>
+  );
+}
+
+/**
+ * estimate expense form charge fields.
+ * @returns
+ */
+export default function EstimatedExpenseFormChargeFields() {
+  const { values } = useFormikContext();
+  return (
+    <Choose>
+      <Choose.When condition={values.charge === 'markup'}>
+        <PercentageFormField />
+      </Choose.When>
+      <Choose.When condition={values.charge === 'custom_pirce'}>
+        <CustomPirceField />
+      </Choose.When>
+    </Choose>
+  );
+}

src/containers/Projects/containers/EstimatedExpenseFormDialog/EstimatedExpenseFormConent.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Form } from 'formik';
+import EstimatedExpenseFormFields from './EstimatedExpenseFormFields';
+import EstimatedExpenseFormFloatingActions from './EstimatedExpenseFormFloatingActions';
+
+/**
+ * Estimated expense form content.
+ * @returns
+ */
+export default function EstimatedExpenseFormConent() {
+  return (
+    <Form>
+      <EstimatedExpenseFormFields />
+      <EstimatedExpenseFormFloatingActions />
+    </Form>
+  );
+}

src/containers/Projects/containers/EstimatedExpenseFormDialog/EstimatedExpenseFormDialogContent.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { EstimatedExpenseFormProvider } from './EstimatedExpenseFormProvider';
+import EstimatedExpenseForm from './EstimatedExpenseForm';
+
+/**
+ * Estimate expense form dialog.
+ * @return
+ */
+export default function EstimatedExpenseFormDialogContent({
+  //#ownProps
+  dialogName,
+  estimatedExpense,
+}) {
+  return (
+    <EstimatedExpenseFormProvider
+      dialogName={dialogName}
+      estimatedExpenseId={estimatedExpense}
+    >
+      <EstimatedExpenseForm />
+    </EstimatedExpenseFormProvider>
+  );
+}

src/containers/Projects/containers/EstimatedExpenseFormDialog/EstimatedExpenseFormFields.tsx

@@ -0,0 +1,115 @@
+//@ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+import intl from 'react-intl-universal';
+import { Classes, ControlGroup } from '@blueprintjs/core';
+import classNames from 'classnames';
+import {
+  FFormGroup,
+  FInputGroup,
+  FormattedMessage as T,
+  FieldRequiredHint,
+} from 'components';
+import { ExpenseSelect, FInputGroupComponent } from '../../components';
+import { useEstimatedExpenseFormContext } from './EstimatedExpenseFormProvider';
+import EstimatedExpenseFormChargeFields from './EstimatedExpenseFormChargeFields';
+import { ChangeTypesSelect } from '../../components';
+import { expenseChargeOption } from 'containers/Projects/containers/common/modalChargeOptions';
+
+/**
+ * Estimated expense form fields.
+ * @returns
+ */
+export default function EstimatedExpenseFormFields() {
+  return (
+    <div className={Classes.DIALOG_BODY}>
+      {/*------------ Estimated Expense -----------*/}
+      <FFormGroup
+        name={'estimatedExpense'}
+        label={intl.get('estimated_expenses.dialog.estimated_expense')}
+        className={classNames('form-group--select-list', Classes.FILL)}
+      >
+        <ExpenseSelect
+          name={'estimatedExpense'}
+          popoverProps={{ minimal: true }}
+          expenses={[]}
+        />
+      </FFormGroup>
+
+      {/*------------ Quantity -----------*/}
+      <FFormGroup
+        label={intl.get('estimated_expenses.dialog.quantity')}
+        name={'quantity'}
+      >
+        <FInputGroupComponent name="quantity" />
+      </FFormGroup>
+
+      <MetaLineLabel>
+        <T id={'estimated_expenses.dialog.cost_to_you'} />
+      </MetaLineLabel>
+      {/*------------ Unit Price -----------*/}
+      <ControlGroup className={Classes.FILL}>
+        <FFormGroup
+          name={'unitPrice'}
+          label={intl.get('estimated_expenses.dialog.unit_price')}
+        >
+          <FInputGroupComponent name="unitPrice" />
+        </FFormGroup>
+        <FFormGroup
+          name={'unitPrice'}
+          label={intl.get('estimated_expenses.dialog.total')}
+        >
+          <FInputGroup name="expenseTotal" />
+        </FFormGroup>
+      </ControlGroup>
+
+      <MetaLineLabel>
+        <T id={'estimated_expenses.dialog.what_you_ll_charge'} />
+      </MetaLineLabel>
+      {/*------------ Charge -----------*/}
+      <FFormGroup
+        name={'charge'}
+        label={<T id={'estimated_expenses.dialog.charge'} />}
+        className={classNames('form-group--select-list', Classes.FILL)}
+      >
+        <ChangeTypesSelect
+          name="charge"
+          items={expenseChargeOption}
+          popoverProps={{ minimal: true }}
+          filterable={false}
+        />
+      </FFormGroup>
+      <EstimatedExpenseFormChargeFields />
+      {/*------------ Estimated Amount -----------*/}
+      <EstimatedAmountWrap>
+        <EstimatedAmountLabel>
+          <T id={'estimated_expenses.dialog.estimated_amount'} />
+        </EstimatedAmountLabel>
+        <EstimatedAmount>0.00</EstimatedAmount>
+      </EstimatedAmountWrap>
+    </div>
+  );
+}
+
+const MetaLineLabel = styled.div`
+  font-size: 14px;
+  line-height: 1.5rem;
+  font-weight: 500;
+  margin-bottom: 8px;
+`;
+
+const EstimatedAmountWrap = styled.div`
+  display: block;
+  text-align: right;
+`;
+const EstimatedAmountLabel = styled.span`
+  font-size: 14px;
+  line-height: 1.5rem;
+  opacity: 0.75;
+`;
+const EstimatedAmount = styled.span`
+  font-size: 15px;
+  font-weight: 700;
+  padding-left: 14px;
+  line-height: 2rem;
+`;

src/containers/Projects/containers/EstimatedExpenseFormDialog/EstimatedExpenseFormFloatingActions.tsx

@@ -0,0 +1,48 @@
+//@ts-nocheck
+import React from 'react';
+import { useFormikContext } from 'formik';
+import { Intent, Button, Classes } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+import { useEstimatedExpenseFormContext } from './EstimatedExpenseFormProvider';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+/**
+ * Estimated expense form floating actions.
+ * @returns
+ */
+function EstimatedExpenseFormFloatingActions({
+  // #withDialogActions
+  closeDialog,
+}) {
+  // Formik context.
+  const { isSubmitting } = useFormikContext();
+
+  // expense form dialog context.
+  const { dialogName } = useEstimatedExpenseFormContext();
+
+  // Handle close button click.
+  const handleCancelBtnClick = () => {
+    closeDialog(dialogName);
+  };
+
+  return (
+    <div className={Classes.DIALOG_FOOTER}>
+      <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+        <Button onClick={handleCancelBtnClick} style={{ minWidth: '75px' }}>
+          <T id={'cancel'} />
+        </Button>
+        <Button
+          intent={Intent.PRIMARY}
+          loading={isSubmitting}
+          style={{ minWidth: '75px' }}
+          type="submit"
+        >
+          {<T id={'save'} />}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default compose(withDialogActions)(EstimatedExpenseFormFloatingActions);

src/containers/Projects/containers/EstimatedExpenseFormDialog/EstimatedExpenseFormProvider.tsx

@@ -0,0 +1,31 @@
+//@ts-nocheck
+import React from 'react';
+import { DialogContent } from 'components';
+
+const EstimatedExpenseFormContext = React.createContext();
+
+/**
+ * Estimated expense form provider.
+ * @returns
+ */
+function EstimatedExpenseFormProvider({
+  //#OwnProps
+  dialogName,
+  estimatedExpenseId,
+  ...props
+}) {
+  // state provider.
+  const provider = {
+    dialogName,
+  };
+  return (
+    <DialogContent>
+      <EstimatedExpenseFormContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useEstimatedExpenseFormContext = () =>
+  React.useContext(EstimatedExpenseFormContext);
+
+export { EstimatedExpenseFormProvider, useEstimatedExpenseFormContext };

src/containers/Projects/containers/EstimatedExpenseFormDialog/index.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Dialog, DialogSuspense, FormattedMessage as T } from 'components';
+import withDialogRedux from 'components/DialogReduxConnect';
+import { compose } from 'utils';
+
+const EstimatedExpenseFormDialogContent = React.lazy(
+  () => import('./EstimatedExpenseFormDialogContent'),
+);
+
+/**
+ * Estimate expense form dialog.
+ * @returns
+ */
+function EstimatedExpenseFormDialog({
+  dialogName,
+  payload: { projectId = null },
+  isOpen,
+}) {
+  return (
+    <EstimateExpenseFormDialogRoot
+      name={dialogName}
+      title={<T id={'estimated_expenses.dialog.label'} />}
+      isOpen={isOpen}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      style={{ width: '400px' }}
+    >
+      <DialogSuspense>
+        <EstimatedExpenseFormDialogContent
+          dialogName={dialogName}
+          estimatedExpense={projectId}
+        />
+      </DialogSuspense>
+    </EstimateExpenseFormDialogRoot>
+  );
+}
+
+export default compose(withDialogRedux())(EstimatedExpenseFormDialog);
+
+const EstimateExpenseFormDialogRoot = styled(Dialog)`
+  .bp3-dialog-body {
+    .bp3-form-group {
+      margin-bottom: 15px;
+
+      label.bp3-label {
+        margin-bottom: 3px;
+        font-size: 13px;
+      }
+    }
+  }
+  .bp3-dialog-footer {
+    padding-top: 10px;
+  }
+`;

src/containers/Projects/containers/ProjectAlerts/ProjectDeleteAlert.tsx

@@ -0,0 +1,79 @@
+//@ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { FormattedMessage as T, FormattedHTMLMessage } from 'components';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+import { useDeleteProject } from '../../hooks';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ * Project delete alert.
+ */
+function ProjectDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { projectId },
+
+  // #withAlertActions
+  closeAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const { mutateAsync: deleteProjectMutate, isLoading } = useDeleteProject();
+
+  // handle cancel delete project alert.
+  const handleCancelDeleteAlert = () => {
+    closeAlert(name);
+  };
+
+  // handleConfirm delete project
+  const handleConfirmProjectDelete = () => {
+    deleteProjectMutate(projectId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('projects.alert.delete_message'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch(
+        ({
+          response: {
+            data: { errors },
+          },
+        }) => {},
+      )
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelDeleteAlert}
+      onConfirm={handleConfirmProjectDelete}
+      loading={isLoading}
+    >
+      <p>
+        <FormattedHTMLMessage id={'projects.alert.once_delete_this_project'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(ProjectDeleteAlert);

src/containers/Projects/containers/ProjectAlerts/index.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+
+const ProjectDeleteAlert = React.lazy(() => import('./ProjectDeleteAlert'));
+
+/**
+ * Project alerts.
+ */
+export default [{ name: 'project-delete', component: ProjectDeleteAlert }];

src/containers/Projects/containers/ProjectDetails/ProjectDetailActionsBar.tsx

@@ -0,0 +1,131 @@
+// @ts-nocheck
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import {
+  Button,
+  Classes,
+  NavbarDivider,
+  NavbarGroup,
+  Alignment,
+} from '@blueprintjs/core';
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+import {
+  Icon,
+  FormattedMessage as T,
+  DashboardRowsHeightButton,
+} from 'components';
+import { ProjectTransactionsSelect } from './components';
+import withSettings from '../../../Settings/withSettings';
+import withSettingsActions from '../../../Settings/withSettingsActions';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { projectTranslations } from './common';
+import { useProjectDetailContext } from './ProjectDetailProvider';
+import { compose } from 'utils';
+
+/**
+ * Project detail actions bar.
+ * @returns
+ */
+function ProjectDetailActionsBar({
+  // #withDialogActions
+  openDialog,
+
+  // #withSettings
+  timesheetsTableSize,
+
+  // #withSettingsActions
+  addSetting,
+}) {
+  const history = useHistory();
+  const { projectId } = useProjectDetailContext();
+
+  // Handle new transaction button click.
+  const handleNewTransactionBtnClick = ({ path }) => {
+    switch (path) {
+      case 'expense':
+        openDialog('project-expense-form', { projectId });
+        break;
+      case 'estimated_expense':
+        openDialog('estimated-expense-form', { projectId });
+    }
+  };
+
+  const handleEditProjectBtnClick = () => {
+    openDialog('project-form', {
+      projectId,
+    });
+  };
+  // Handle table row size change.
+  const handleTableRowSizeChange = (size) => {
+    addSetting('timesheets', 'tableSize', size) &&
+      addSetting('sales', 'tableSize', size) &&
+      addSetting('purchases', 'tableSize', size);
+  };
+
+  const handleTimeEntryBtnClick = () => {
+    openDialog('project-time-entry-form', {
+      projectId,
+    });
+  };
+
+  // Handle the refresh button click.
+  const handleRefreshBtnClick = () => {};
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <ProjectTransactionsSelect
+          transactions={projectTranslations}
+          onItemSelect={handleNewTransactionBtnClick}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'time-24'} iconSize={16} />}
+          text={<T id={'projcet_details.action.time_entry'} />}
+          onClick={handleTimeEntryBtnClick}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="pen-18" />}
+          text={<T id={'projcet_details.action.edit_project'} />}
+          onClick={handleEditProjectBtnClick}
+        />
+        <NavbarDivider />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'print-16'} iconSize={'16'} />}
+          text={<T id={'print'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'file-import-16'} />}
+          text={<T id={'import'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
+          text={<T id={'export'} />}
+        />
+        <NavbarDivider />
+        <DashboardRowsHeightButton
+          initialValue={timesheetsTableSize}
+          onChange={handleTableRowSizeChange}
+        />
+      </NavbarGroup>
+      <NavbarGroup align={Alignment.RIGHT}>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="refresh-16" iconSize={14} />}
+          onClick={handleRefreshBtnClick}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+export default compose(
+  withDialogActions,
+  withSettingsActions,
+  withSettings(({ timesheetsSettings }) => ({
+    timesheetsTableSize: timesheetsSettings?.tableSize,
+  })),
+)(ProjectDetailActionsBar);

src/containers/Projects/containers/ProjectDetails/ProjectDetailProvider.tsx

@@ -0,0 +1,29 @@
+// @ts-nocheck
+import React from 'react';
+import DashboardInsider from '../../../../components/Dashboard/DashboardInsider';
+
+const ProjectDetailContext = React.createContext();
+
+/**
+ * Project detail provider.
+ * @returns
+ */
+function ProjectDetailProvider({
+  projectId,
+  // #ownProps
+  ...props
+}) {
+  // State provider.
+  const provider = {
+    projectId,
+  };
+  return (
+    <DashboardInsider class="timesheets">
+      <ProjectDetailContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const useProjectDetailContext = () => React.useContext(ProjectDetailContext);
+
+export { ProjectDetailProvider, useProjectDetailContext };

src/containers/Projects/containers/ProjectDetails/ProjectDetailTabs.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import styled from 'styled-components';
+import intl from 'react-intl-universal';
+import { Tabs, Tab } from '@blueprintjs/core';
+import ProjectTimeSheets from './ProjectTimeSheets';
+import ProjectPurchasesTable from './ProjectPurchasesTable';
+import ProjectSalesTable from './ProjectSalesTable';
+
+/**
+ * Project detail tabs.
+ * @returns
+ */
+export default function ProjectDetailTabs() {
+  return (
+    <ProjectTabsContent>
+      <Tabs
+        animate={true}
+        large={true}
+        renderActiveTabPanelOnly={true}
+        defaultSelectedTabId={'purchases'}
+      >
+        <Tab id="overview" title={intl.get('project_details.label.overview')} />
+        <Tab
+          id="timesheet"
+          title={intl.get('project_details.label.timesheet')}
+          panel={<ProjectTimeSheets />}
+        />
+        <Tab
+          id="purchases"
+          title={intl.get('project_details.label.purchases')}
+          panel={<ProjectPurchasesTable />}
+        />
+        <Tab
+          id="sales"
+          title={intl.get('project_details.label.sales')}
+          panel={<ProjectSalesTable />}
+        />
+        <Tab id="journals" title={intl.get('project_details.label.journals')} />
+      </Tabs>
+    </ProjectTabsContent>
+  );
+}
+
+const ProjectTabsContent = styled.div`
+  .bp3-tabs {
+    .bp3-tab-list {
+      padding: 0 20px;
+      background-color: #fff;
+      border-bottom: 1px solid #d2dce2;
+
+      > *:not(:last-child) {
+        margin-right: 0;
+      }
+
+      &.bp3-large > .bp3-tab {
+        font-size: 15px;
+        font-weight: 400;
+        color: #7f8596;
+        margin: 0 0.9rem;
+
+        &[aria-selected='true'],
+        &:not([aria-disabled='true']):hover {
+          color: #0052cc;
+        }
+      }
+      .bp3-tab-indicator-wrapper .bp3-tab-indicator {
+        height: 2px;
+        bottom: -2px;
+      }
+    }
+    .bp3-tab-panel {
+      /* margin: 20px 32px; */
+      /* margin: 20px; */
+      /* margin-top: 20px;
+      margin-bottom: 20px;
+      padding: 0 25px; */
+    }
+  }
+`;

src/containers/Projects/containers/ProjectDetails/ProjectPurchasesTable/ProjectPurchasesTable.tsx

@@ -0,0 +1,57 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+import { DataTable } from 'components';
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
+import { TABLES } from 'common/tables';
+import { useMemorizedColumnsWidths } from 'hooks';
+import { ActionMenu } from './components';
+import { useProjectPurchasesColumns } from './hooks';
+import withSettings from '../../../../Settings/withSettings';
+
+import { compose } from 'utils';
+
+/**
+ * Project Purchases DataTable.
+ * @returns
+ */
+function ProjectPurchasesTableRoot({
+  // #withSettings
+  purchasesTableSize,
+}) {
+  // Retrieve purchases table columns.
+  const columns = useProjectPurchasesColumns();
+
+  // Handle delete purchase.
+  const handleDeletePurchase = () => {};
+
+  // Local storage memorizing columns widths.
+  const [initialColumnsWidths, , handleColumnResizing] =
+    useMemorizedColumnsWidths(TABLES.PURCHASES);
+
+  return (
+    <DataTable
+      columns={columns}
+      data={[]}
+      manualSortBy={true}
+      selectionColumn={true}
+      noInitialFetch={true}
+      sticky={true}
+      ContextMenu={ActionMenu}
+      TableLoadingRenderer={TableSkeletonRows}
+      TableHeaderSkeletonRenderer={TableSkeletonHeader}
+      initialColumnsWidths={initialColumnsWidths}
+      onColumnResizing={handleColumnResizing}
+      size={purchasesTableSize}
+      payload={{
+        onDelete: handleDeletePurchase,
+      }}
+    />
+  );
+}
+export const ProjectPurchasesTable = compose(
+  withSettings(({ purchasesSettings }) => ({
+    purchasesTableSize: purchasesSettings?.tableSize,
+  })),
+)(ProjectPurchasesTableRoot);

src/containers/Projects/containers/ProjectDetails/ProjectPurchasesTable/components.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Icon } from 'components';
+import { Menu, MenuItem, Intent } from '@blueprintjs/core';
+import { safeCallback } from 'utils';
+
+/**
+ * Table actions cell.
+ */
+export function ActionMenu({ payload: { onDelete }, row: { original } }) {
+  return (
+    <Menu>
+      <MenuItem
+        text={intl.get('purchases.action.delete')}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+        icon={<Icon icon="trash-16" iconSize={16} />}
+      />
+    </Menu>
+  );
+}

src/containers/Projects/containers/ProjectDetails/ProjectPurchasesTable/hooks.ts

@@ -0,0 +1,73 @@
+import { useMemo } from 'react';
+import intl from 'react-intl-universal';
+import clsx from 'classnames';
+import { CLASSES } from 'common/classes';
+import { FormatDateCell } from 'components';
+
+export function useProjectPurchasesColumns() {
+  return useMemo(
+    () => [
+      {
+        id: 'date',
+        Header: intl.get('purchases.column.date'),
+        accessor: 'date',
+        Cell: FormatDateCell,
+        width: 120,
+        className: 'date',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'type',
+        Header: intl.get('purchases.column.type'),
+        accessor: 'type',
+        width: 120,
+        className: 'type',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'transaction_no',
+        Header: intl.get('purchases.column.transaction_no'),
+        accessor: 'transaction_no',
+        width: 120,
+      },
+      {
+        id: 'due_date',
+        Header: intl.get('purchases.column.due_date'),
+        accessor: 'due_date',
+        Cell: FormatDateCell,
+        width: 120,
+        className: 'due_date',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'balance',
+        Header: intl.get('purchases.column.balance'),
+        accessor: 'balance',
+        width: 120,
+        clickable: true,
+        align: 'right',
+        className: clsx(CLASSES.FONT_BOLD),
+      },
+      {
+        id: 'total',
+        Header: intl.get('purchases.column.total'),
+        accessor: 'total',
+        align: 'right',
+        width: 120,
+        className: clsx(CLASSES.FONT_BOLD),
+      },
+      {
+        id: 'status',
+        Header: intl.get('purchases.column.status'),
+        accessor: 'status',
+        width: 120,
+        className: 'status',
+        clickable: true,
+      },
+    ],
+    [],
+  );
+}

src/containers/Projects/containers/ProjectDetails/ProjectPurchasesTable/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import styled from 'styled-components';
+import { ProjectPurchasesTable } from './ProjectPurchasesTable';
+import { DashboardContentTable } from 'components';
+
+/**
+ *
+ * @returns
+ */
+export default function ProjectPurchasesTableRoot() {
+  return (
+    <DashboardContentTable>
+      <ProjectPurchasesTable />
+    </DashboardContentTable>
+  );
+}

src/containers/Projects/containers/ProjectDetails/ProjectSalesTable/ProjectSalesTable.tsx

@@ -0,0 +1,56 @@
+//@ts-nocheck
+import React from 'react';
+import { DataTable } from 'components';
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
+import { TABLES } from 'common/tables';
+import { useMemorizedColumnsWidths } from 'hooks';
+import { ActionMenu } from './components';
+import { useProjectSalesColumns } from './hooks';
+import withSettings from '../../../../Settings/withSettings';
+
+import { compose } from 'utils';
+
+/**
+ * Porject sales datatable.
+ * @returns
+ */
+function ProjectSalesTableRoot({
+  // #withSettings
+  salesTableSize,
+}) {
+  // Retrieve project sales table columns.
+  const columns = useProjectSalesColumns();
+
+  // Handle delete sale.
+  const handleDeleteSale = () => {};
+
+  // Local storage memorizing columns widths.
+  const [initialColumnsWidths, , handleColumnResizing] =
+    useMemorizedColumnsWidths(TABLES.SALES);
+
+  return (
+    <DataTable
+      columns={columns}
+      data={[]}
+      manualSortBy={true}
+      selectionColumn={true}
+      noInitialFetch={true}
+      sticky={true}
+      ContextMenu={ActionMenu}
+      TableLoadingRenderer={TableSkeletonRows}
+      TableHeaderSkeletonRenderer={TableSkeletonHeader}
+      initialColumnsWidths={initialColumnsWidths}
+      onColumnResizing={handleColumnResizing}
+      size={salesTableSize}
+      payload={{
+        onDelete: handleDeleteSale,
+      }}
+    />
+  );
+}
+export const ProjectSalesTable = compose(
+  withSettings(({ salesSettings }) => ({
+    salesTableSize: salesSettings?.tableSize,
+  })),
+)(ProjectSalesTableRoot);

src/containers/Projects/containers/ProjectDetails/ProjectSalesTable/components.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+
+import { FormatDateCell, Icon, FormattedMessage as T } from 'components';
+import { Menu, MenuItem, Intent } from '@blueprintjs/core';
+import { safeCallback } from 'utils';
+
+/**
+ * Table actions cell.
+ */
+export function ActionMenu({ payload: { onDelete }, row: { original } }) {
+  return (
+    <Menu>
+      <MenuItem
+        text={intl.get('sales.action.delete')}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+        icon={<Icon icon="trash-16" iconSize={16} />}
+      />
+    </Menu>
+  );
+}

src/containers/Projects/containers/ProjectDetails/ProjectSalesTable/hooks.ts

@@ -0,0 +1,73 @@
+import { useMemo } from 'react';
+import intl from 'react-intl-universal';
+import clsx from 'classnames';
+import { CLASSES } from 'common/classes';
+import { FormatDateCell } from 'components';
+
+export function useProjectSalesColumns() {
+  return useMemo(
+    () => [
+      {
+        id: 'date',
+        Header: intl.get('sales.column.date'),
+        accessor: 'date',
+        Cell: FormatDateCell,
+        width: 120,
+        className: 'date',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'type',
+        Header: intl.get('sales.column.type'),
+        accessor: 'type',
+        width: 120,
+        className: 'type',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'transaction_no',
+        Header: intl.get('sales.column.transaction_no'),
+        accessor: 'transaction_no',
+        width: 120,
+      },
+      {
+        id: 'due_date',
+        Header: intl.get('sales.column.due_date'),
+        accessor: 'due_date',
+        Cell: FormatDateCell,
+        width: 120,
+        className: 'due_date',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'balance',
+        Header: intl.get('sales.column.balance'),
+        accessor: 'balance',
+        width: 120,
+        clickable: true,
+        align: 'right',
+        className: clsx(CLASSES.FONT_BOLD),
+      },
+      {
+        id: 'total',
+        Header: intl.get('sales.column.total'),
+        accessor: 'total',
+        align: 'right',
+        width: 120,
+        className: clsx(CLASSES.FONT_BOLD),
+      },
+      {
+        id: 'status',
+        Header: intl.get('sales.column.status'),
+        accessor: 'status',
+        width: 120,
+        className: 'status',
+        clickable: true,
+      },
+    ],
+    [],
+  );
+}

src/containers/Projects/containers/ProjectDetails/ProjectSalesTable/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import styled from 'styled-components';
+import { ProjectSalesTable } from './ProjectSalesTable';
+import { DashboardContentTable } from 'components';
+
+/**
+ * Project Sales Table.
+ * @returns
+ */
+export default function ProjectSalesTableRoot() {
+  return (
+    <ProjectSalesContentTable>
+      <ProjectSalesTable />
+    </ProjectSalesContentTable>
+  );
+}
+
+const ProjectSalesContentTable = styled(DashboardContentTable)``;

src/containers/Projects/containers/ProjectDetails/ProjectTimeSheets/ProjectTimesheetsHeader.tsx

@@ -0,0 +1,41 @@
+//@ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import styled from 'styled-components';
+import { Intent } from '@blueprintjs/core';
+import { FormatDate } from 'components';
+import {
+  DetailFinancialCard,
+  DetailFinancialSection,
+  FinancialProgressBar,
+  FinancialCardText,
+} from '../components';
+import { calculateStatus } from 'utils';
+
+/**
+ * Project Timesheets header
+ * @returns
+ */
+export function ProjectTimesheetsHeader() {
+  return (
+    <DetailFinancialSection>
+      <DetailFinancialCard label={'Project estimate'} value={'3.14'} />
+      <DetailFinancialCard label={'Invoiced'} value={'0.00'}>
+        <FinancialCardText>0% of project estimate</FinancialCardText>
+        <FinancialProgressBar intent={Intent.NONE} value={0} />
+      </DetailFinancialCard>
+      <DetailFinancialCard label={'Time & Expenses'} value={'0.00'}>
+        <FinancialCardText>0% of project estimate</FinancialCardText>
+        <FinancialProgressBar intent={Intent.NONE} value={0} />
+      </DetailFinancialCard>
+
+      <DetailFinancialCard label={'To be invoiced'} value={'3.14'} />
+      <DetailFinancialCard
+        label={'Deadline'}
+        value={<FormatDate value={'2022-06-08T22:00:00.000Z'} />}
+      >
+        <FinancialCardText>4 days to go</FinancialCardText>
+      </DetailFinancialCard>
+    </DetailFinancialSection>
+  );
+}

src/containers/Projects/containers/ProjectDetails/ProjectTimeSheets/ProjectTimesheetsTable.tsx

@@ -0,0 +1,104 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+import { DataTable } from 'components';
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
+import { ActionsMenu } from './components';
+import { useProjectTimesheetColumns } from './hooks';
+import { TABLES } from 'common/tables';
+import { useMemorizedColumnsWidths } from 'hooks';
+import withSettings from '../../../../Settings/withSettings';
+
+import { compose } from 'utils';
+
+
+/**
+ * Timesheet DataTable.
+ * @returns
+ */
+function ProjectTimesheetsTableRoot({
+  // #withSettings
+  timesheetsTableSize,
+}) {
+  // Retrieve project timesheet table columns.
+  const columns = useProjectTimesheetColumns();
+
+  // Handle delete timesheet.
+  const handleDeleteTimesheet = () => {};
+
+  // Local storage memorizing columns widths.
+  const [initialColumnsWidths, , handleColumnResizing] =
+    useMemorizedColumnsWidths(TABLES.TIMESHEETS);
+
+  return (
+    <ProjectTimesheetDataTable
+      columns={columns}
+      data={[]}
+      manualSortBy={true}
+      noInitialFetch={true}
+      sticky={true}
+      hideTableHeader={true}
+      ContextMenu={ActionsMenu}
+      TableLoadingRenderer={TableSkeletonRows}
+      TableHeaderSkeletonRenderer={TableSkeletonHeader}
+      initialColumnsWidths={initialColumnsWidths}
+      onColumnResizing={handleColumnResizing}
+      size={timesheetsTableSize}
+      payload={{
+        onDelete: handleDeleteTimesheet,
+      }}
+    />
+  );
+}
+export const ProjectTimesheetsTable = compose(
+  withSettings(({ timesheetsSettings }) => ({
+    timesheetsTableSize: timesheetsSettings?.tableSize,
+  })),
+)(ProjectTimesheetsTableRoot);
+
+const ProjectTimesheetDataTable = styled(DataTable)`
+  .table {
+    .thead .tr .th {
+      .resizer {
+        display: none;
+      }
+    }
+
+    .tbody {
+      .tr .td {
+      }
+
+      .avatar.td {
+        .cell-inner {
+          .avatar {
+            display: inline-block;
+            background: #adbcc9;
+            border-radius: 50%;
+            text-align: center;
+            font-weight: 400;
+            color: #fff;
+
+            &[data-size='medium'] {
+              height: 30px;
+              width: 30px;
+              line-height: 30px;
+              font-size: 14px;
+            }
+            &[data-size='small'] {
+              height: 25px;
+              width: 25px;
+              line-height: 25px;
+              font-size: 12px;
+            }
+          }
+        }
+      }
+    }
+  }
+  .table-size--small {
+    .tbody .tr {
+      height: 45px;
+    }
+  }
+`;

src/containers/Projects/containers/ProjectDetails/ProjectTimeSheets/components.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import styled from 'styled-components';
+import { FormatDate, Icon } from 'components';
+import { Menu, MenuItem, Intent } from '@blueprintjs/core';
+import { safeCallback, firstLettersArgs } from 'utils';
+
+/**
+ * Table actions cell.
+ */
+export function ActionsMenu({
+  payload: { onDelete, onViewDetails },
+  row: { original },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        text={intl.get('timesheets.actions.delete_timesheet')}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+        icon={<Icon icon="trash-16" iconSize={16} />}
+      />
+    </Menu>
+  );
+}
+
+/**
+ * Avatar cell.
+ */
+export const AvatarCell = ({ row: { original }, size }) => (
+  <span className="avatar" data-size={size}>
+    {firstLettersArgs(original?.display_name, original?.name)}
+  </span>
+);
+
+/**
+ * Timesheet accessor.
+ */
+export const TimesheetAccessor = (timesheet) => (
+  <React.Fragment>
+    <TimesheetHeader>
+      <TimesheetTitle>{timesheet.display_name}</TimesheetTitle>
+      <TimesheetSubTitle>{timesheet.name}</TimesheetSubTitle>
+    </TimesheetHeader>
+    <TimesheetContent>
+      <FormatDate value={timesheet.date} />
+      <TimesheetDescription>{timesheet.description}</TimesheetDescription>
+    </TimesheetContent>
+  </React.Fragment>
+);
+
+const TimesheetHeader = styled.div`
+  display: flex;
+  align-items: baseline;
+  flex-flow: wrap;
+`;
+const TimesheetTitle = styled.span`
+  font-weight: 500;
+  margin-right: 12px;
+  line-height: 1.5rem;
+`;
+
+const TimesheetSubTitle = styled.span``;
+const TimesheetContent = styled.div`
+  display: block;
+  white-space: nowrap;
+  font-size: 13px;
+  opacity: 0.75;
+  margin-bottom: 0.1rem;
+  line-height: 1.2rem;
+`;
+
+const TimesheetDescription = styled.span`
+  &::before {
+    content: '•';
+    margin: 0.3rem;
+  }
+`;

src/containers/Projects/containers/ProjectDetails/ProjectTimeSheets/hooks.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { AvatarCell, TimesheetAccessor } from './components';
+
+/**
+ * Retrieve project timesheet list columns.
+ */
+export function useProjectTimesheetColumns() {
+  return React.useMemo(
+    () => [
+      {
+        id: 'avatar',
+        Header: '',
+        Cell: AvatarCell,
+        className: 'avatar',
+        width: 45,
+        disableResizing: true,
+        disableSortBy: true,
+        clickable: true,
+      },
+      {
+        id: 'name',
+        Header: 'Header',
+        accessor: TimesheetAccessor,
+        width: 100,
+        className: 'name',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'duration',
+        Header: '',
+        accessor: 'duration',
+        width: 100,
+        className: 'duration',
+        align: 'right',
+        clickable: true,
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+}

src/containers/Projects/containers/ProjectDetails/ProjectTimeSheets/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { ProjectTimesheetsTable } from './ProjectTimesheetsTable';
+import { ProjectTimesheetsHeader } from './ProjectTimesheetsHeader';
+
+/**
+ * Project Timesheets.
+ * @returns
+ */
+export default function ProjectTimeSheets() {
+  return (
+    <React.Fragment>
+      <ProjectTimesheetsHeader />
+      <ProjectTimesheetTableCard>
+        <ProjectTimesheetsTable />
+      </ProjectTimesheetTableCard>
+    </React.Fragment>
+  );
+}
+
+const ProjectTimesheetTableCard = styled.div`
+  margin: 22px 32px;
+  border: 1px solid #c8cad0;
+  border-radius: 3px;
+  background: #fff;
+`;

src/containers/Projects/containers/ProjectDetails/common.ts

@@ -0,0 +1,9 @@
+import intl from 'react-intl-universal';
+
+export const projectTranslations = [
+  { name: intl.get('project_details.new_expenses'), path: 'expense' },
+  {
+    name: intl.get('project_details.new_estimated_expenses'),
+    path: 'estimated_expense',
+  },
+];

src/containers/Projects/containers/ProjectDetails/components/FinancialSection.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import styled from 'styled-components';
+import { ProgressBar } from '@blueprintjs/core';
+
+export function DetailFinancialSection({ children }) {
+  return <FinancialSectionWrap>{children}</FinancialSectionWrap>;
+}
+
+export function DetailFinancialCard({ label, value, children }) {
+  return (
+    <React.Fragment>
+      <FinancialSectionCard>
+        <FinancialSectionCardContent>
+          <FinancialCardTitle>{label}</FinancialCardTitle>
+          <FinancialCardValue>{value}</FinancialCardValue>
+          {children}
+        </FinancialSectionCardContent>
+      </FinancialSectionCard>
+    </React.Fragment>
+  );
+}
+export const FinancialDescription = ({ childern }) => {
+  return <FinancialCardText>{childern}</FinancialCardText>;
+};
+
+export const FinancialProgressBar = ({ ...rest }) => {
+  return <FinancialCardProgressBar animate={false} stripes={false} {...rest} />;
+};
+
+const FinancialSectionWrap = styled.div`
+  display: flex;
+  margin: 22px 32px;
+  gap: 10px;
+`;
+
+const FinancialSectionCard = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 1;
+  border-radius: 3px;
+  width: 230px;
+  height: 116px;
+  background-color: #fff;
+  border: 1px solid #c8cad0; // #000a1e33 #f0f0f0
+`;
+
+const FinancialSectionCardContent = styled.div`
+  margin: 16px;
+`;
+
+const FinancialCardWrap = styled.div``;
+
+const FinancialCardTitle = styled.div`
+  font-size: 15px;
+  color: #000;
+  white-space: nowrap;
+  font-weight: 400;
+  line-height: 1.5rem;
+`;
+const FinancialCardValue = styled.div`
+  font-size: 21px;
+  line-height: 2rem;
+  font-weight: 700;
+`;
+
+const FinancialCardStatus = styled.div``;
+
+export const FinancialCardText = styled.div`
+  font-size: 13px;
+  line-height: 1.5rem;
+`;
+export const FinancialCardProgressBar = styled(ProgressBar)`
+  &.bp3-progress-bar {
+    height: 3px;
+    &,
+    .bp3-progress-meter {
+      border-radius: 0;
+    }
+  }
+`;

src/containers/Projects/containers/ProjectDetails/components/ProjectTransactionsSelect.tsx

@@ -0,0 +1,60 @@
+//@ts-nocheck
+import React from 'react';
+import {
+  MenuItem,
+  Button,
+  Position,
+  PopoverInteractionKind,
+} from '@blueprintjs/core';
+import { Select } from '@blueprintjs/select';
+import { Icon, FormattedMessage as T } from 'components';
+
+/**
+ *
+ * @param {*} film
+ * @param {*} param1
+ * @returns
+ */
+const projectTransactionItemRenderer = (
+  transaction,
+  { handleClick, modifiers, query },
+) => {
+  return (
+    <MenuItem
+      disabled={modifiers.disabled}
+      key={transaction.path}
+      onClick={handleClick}
+      text={transaction.name}
+    />
+  );
+};
+
+const projectTransactionSelectProps = {
+  itemRenderer: projectTransactionItemRenderer,
+  filterable: false,
+  popoverProps: {
+    minimal: true,
+    position: Position.BOTTOM_LEFT,
+    interactionKind: PopoverInteractionKind.CLICK,
+    modifiers: {
+      offset: { offset: '0, 4' },
+    },
+  },
+};
+
+/**
+ * Project transactions select
+ * @param
+ * @returns
+ */
+export function ProjectTransactionsSelect({ transactions, ...rest }) {
+  return (
+    <Select {...projectTransactionSelectProps} items={transactions} {...rest}>
+      <Button
+        minimal={true}
+        icon={<Icon icon={'plus'} />}
+        text={<T id={'projcet_details.action.new_transaction'} />}
+      />
+    </Select>
+  );
+}

src/containers/Projects/containers/ProjectDetails/components/index.tsx

@@ -0,0 +1,2 @@
+export * from './ProjectTransactionsSelect';
+export * from './FinancialSection';

src/containers/Projects/containers/ProjectDetails/index.tsx

@@ -0,0 +1,37 @@
+//@ts-nocheck
+import React, { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import ProjectDetailActionsBar from './ProjectDetailActionsBar';
+import ProjectDetailTabs from './ProjectDetailTabs';
+import { DashboardPageContent } from 'components';
+import { ProjectDetailProvider } from './ProjectDetailProvider';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import { compose } from 'utils';
+
+/**
+ * Project tabs.
+ * @returns
+ */
+function ProjectTabs({
+  // #withDashboardActions
+  changePageTitle,
+}) {
+  const {
+    state: { projectName, projectId },
+  } = useLocation();
+
+  useEffect(() => {
+    changePageTitle(projectName);
+  }, [changePageTitle, projectName]);
+
+  return (
+    <ProjectDetailProvider projectId={projectId}>
+      <ProjectDetailActionsBar />
+      <DashboardPageContent>
+        <ProjectDetailTabs />
+      </DashboardPageContent>
+    </ProjectDetailProvider>
+  );
+}
+
+export default compose(withDashboardActions)(ProjectTabs);

src/containers/Projects/containers/ProjectExpenseForm/ProjectExpenseForm.schema.tsx

@@ -0,0 +1,23 @@
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+import { DATATYPES_LENGTH } from 'common/dataTypes';
+
+const Schema = Yup.object().shape({
+  expenseName: Yup.string().label(
+    intl.get('project_expense.schema.label.expense_name'),
+  ),
+  estimatedExpense: Yup.number().label(
+    intl.get('project_expense.schema.label.estimated_expense'),
+  ),
+  expemseDate: Yup.date(),
+  expenseQuantity: Yup.number().label(
+    intl.get('project_expense.schema.label.quantity'),
+  ),
+  expenseUnitPrice: Yup.number().label(
+    intl.get('project_expense.schema.label.unitPrice'),
+  ),
+  expenseTotal: Yup.number(),
+  expenseCharge: Yup.string(),
+});
+
+export const CreateProjectExpenseFormSchema = Schema;

src/containers/Projects/containers/ProjectExpenseForm/ProjectExpenseForm.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import moment from 'moment';
+import intl from 'react-intl-universal';
+import { Formik } from 'formik';
+import { AppToaster } from 'components';
+import { CreateProjectExpenseFormSchema } from './ProjectExpenseForm.schema';
+import ProjectExpenseFormContent from './ProjectExpenseFormContent';
+import { useProjectExpenseFormContext } from './ProjectExpenseFormProvider';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+import { compose } from 'utils';
+
+const defaultInitialValues = {
+  expenseName: '',
+  estimatedExpense: '',
+  expemseDate: moment(new Date()).format('YYYY-MM-DD'),
+  expenseUnitPrice: '',
+  expenseQuantity: 1,
+  expenseCharge: '% markup',
+  percentage: '',
+  expenseTotal: '',
+};
+
+/**
+ * Project expense form.
+ * @returns
+ */
+function ProjectExpenseForm({
+  //#withDialogActions
+  closeDialog,
+}) {
+  const initialValues = {
+    ...defaultInitialValues,
+  };
+
+  // Handles the form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    const form = {};
+
+    // Handle request response success.
+    const onSuccess = (response) => {
+      AppToaster.show({});
+    };
+
+    // Handle request response errors.
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      setSubmitting(false);
+    };
+  };
+  return (
+    <Formik
+      validationSchema={CreateProjectExpenseFormSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+      component={ProjectExpenseFormContent}
+    />
+  );
+}
+
+export default compose(withDialogActions)(ProjectExpenseForm);

src/containers/Projects/containers/ProjectExpenseForm/ProjectExpenseFormChargeFields.tsx

@@ -0,0 +1,55 @@
+//@ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Classes, ControlGroup } from '@blueprintjs/core';
+import { FFormGroup, FInputGroup, Choose } from 'components';
+import { useFormikContext } from 'formik';
+
+function PercentageFormField() {
+  return (
+    <FFormGroup
+      label={intl.get('expenses.dialog.percentage')}
+      name={'percentage'}
+    >
+      <FInputGroup name="percentage" />
+    </FFormGroup>
+  );
+}
+
+function CustomPirceField() {
+  return (
+    <ControlGroup className={Classes.FILL}>
+      <FFormGroup
+        name={'expenseUnitPrice'}
+        label={intl.get('expenses.dialog.unit_price')}
+      >
+        <FInputGroup name="expenseUnitPrice" />
+      </FFormGroup>
+      <FFormGroup
+        name={'expenseTotal'}
+        label={intl.get('expenses.dialog.total')}
+      >
+        <FInputGroup name="expenseTotal" />
+      </FFormGroup>
+    </ControlGroup>
+  );
+}
+
+/**
+ * Expense form charge fields.
+ * @returns
+ */
+export default function ExpenseFormChargeFields() {
+  const { values } = useFormikContext();
+
+  return (
+    <Choose>
+      <Choose.When condition={values.expenseCharge === 'markup'}>
+        <PercentageFormField />
+      </Choose.When>
+      <Choose.When condition={values.expenseCharge === 'custom_pirce'}>
+        <CustomPirceField />
+      </Choose.When>
+    </Choose>
+  );
+}

src/containers/Projects/containers/ProjectExpenseForm/ProjectExpenseFormContent.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Form } from 'formik';
+import ProjectExpenseFormFields from './ProjectExpenseFormFields';
+import ProjectExpneseFormFloatingActions from './ProjectExpneseFormFloatingActions';
+
+/**
+ * Expense form content.
+ * @returns
+ */
+export default function ProjectExpenseFormContent() {
+  return (
+    <Form>
+      <ProjectExpenseFormFields />
+      <ProjectExpneseFormFloatingActions />
+    </Form>
+  );
+}

src/containers/Projects/containers/ProjectExpenseForm/ProjectExpenseFormDialogContent.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ProjectExpenseFormProvider } from './ProjectExpenseFormProvider';
+import ProjectExpenseForm from './ProjectExpenseForm';
+
+/**
+ * Project expense form dialog content.
+ * @returns
+ */
+export default function ProjectExpenseFormDialogContent({
+  // #ownProps
+  dialogName,
+  expense,
+}) {
+  return (
+    <ProjectExpenseFormProvider dialogName={dialogName} expenseId={expense}>
+      <ProjectExpenseForm />
+    </ProjectExpenseFormProvider>
+  );
+}

src/containers/Projects/containers/ProjectExpenseForm/ProjectExpenseFormFields.tsx

@@ -0,0 +1,145 @@
+//@ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+import intl from 'react-intl-universal';
+import { Classes, Position, ControlGroup } from '@blueprintjs/core';
+import { CLASSES } from 'common/classes';
+import classNames from 'classnames';
+import {
+  FFormGroup,
+  FInputGroup,
+  FDateInput,
+  FormattedMessage as T,
+} from 'components';
+import { ExpenseSelect, FInputGroupComponent } from '../../components';
+import ExpenseFormChargeFields from './ProjectExpenseFormChargeFields';
+import { momentFormatter } from 'utils';
+import { useProjectExpenseFormContext } from './ProjectExpenseFormProvider';
+import { ChangeTypesSelect } from '../../components';
+import { expenseChargeOption } from 'containers/Projects/containers/common/modalChargeOptions';
+
+/**
+ * Project expense form fields.
+ * @returns
+ */
+export default function ProjectExpenseFormFields() {
+  return (
+    <div className={Classes.DIALOG_BODY}>
+      {/*------------ Expense Name -----------*/}
+      <FFormGroup
+        label={intl.get('project_expense.dialog.expense_name')}
+        name={'expenseName'}
+      >
+        <FInputGroup name="expenseName" />
+      </FFormGroup>
+      {/*------------ Track to Expense -----------*/}
+      <FFormGroup
+        name={'estimatedExpense'}
+        label={intl.get('project_expense.dialog.track_expense')}
+        className={classNames('form-group--select-list', Classes.FILL)}
+      >
+        <ExpenseSelect
+          name={'estimatedExpense'}
+          popoverProps={{ minimal: true }}
+          expenses={[{ id: 1, name: 'Expense 1' }]}
+        />
+      </FFormGroup>
+
+      {/*------------ Extimated Date -----------*/}
+      <FFormGroup
+        label={intl.get('project_expense.dialog.expense_date')}
+        name={'expemseDate'}
+        className={classNames(CLASSES.FILL, 'form-group--date')}
+      >
+        <FDateInput
+          {...momentFormatter('YYYY/MM/DD')}
+          name="expemseDate"
+          formatDate={(date) => date.toLocaleString()}
+          popoverProps={{
+            position: Position.BOTTOM,
+            minimal: true,
+          }}
+        />
+      </FFormGroup>
+      {/*------------ Quantity -----------*/}
+      <FFormGroup
+        label={intl.get('project_expense.dialog.quantity')}
+        name={'expenseQuantity'}
+      >
+        <FInputGroupComponent name="expenseQuantity" />
+      </FFormGroup>
+
+      <MetaLineLabel>
+        <T id={'project_expense.dialog.cost_to_you'} />
+      </MetaLineLabel>
+      {/*------------ Unit Price -----------*/}
+      <ControlGroup className={Classes.FILL}>
+        <FFormGroup
+          name={'unitPrice'}
+          label={intl.get('project_expense.dialog.unit_price')}
+        >
+          <FInputGroupComponent name="expenseUnitPrice" />
+        </FFormGroup>
+        <FFormGroup
+          name={'expenseTotal'}
+          label={intl.get('project_expense.dialog.expense_total')}
+        >
+          <FInputGroup name="expenseTotal" />
+        </FFormGroup>
+      </ControlGroup>
+
+      <MetaLineLabel>
+        <T id={'project_expense.dialog.what_you_ll_charge'} />
+      </MetaLineLabel>
+      {/*------------ Charge -----------*/}
+      <FFormGroup
+        name={'expenseCharge'}
+        label={<T id={'project_expense.dialog.charge'} />}
+        className={classNames('form-group--select-list', Classes.FILL)}
+      >
+        <ChangeTypesSelect
+          name="expenseCharge"
+          items={expenseChargeOption}
+          popoverProps={{ minimal: true }}
+          filterable={false}
+        />
+      </FFormGroup>
+
+      {/*------------ Charge Fields -----------*/}
+      <ExpenseFormChargeFields />
+
+      {/*------------ Total -----------*/}
+      <ExpenseTotalBase>
+        <ExpenseTotalLabel>
+          <T id={'project_expense.dialog.total'} />
+        </ExpenseTotalLabel>
+        <ExpenseTotal>0.00</ExpenseTotal>
+      </ExpenseTotalBase>
+    </div>
+  );
+}
+
+const MetaLineLabel = styled.div`
+  font-size: 14px;
+  line-height: 1.5rem;
+  font-weight: 500;
+  margin-bottom: 8px;
+`;
+
+const ExpenseTotalBase = styled.div`
+  display: block;
+  text-align: right;
+`;
+
+const ExpenseTotalLabel = styled.div`
+  font-size: 14px;
+  line-height: 1.5rem;
+  opacity: 0.75;
+`;
+
+const ExpenseTotal = styled.div`
+  font-size: 15px;
+  font-weight: 700;
+  padding-left: 14px;
+  line-height: 2rem;
+`;

src/containers/Projects/containers/ProjectExpenseForm/ProjectExpenseFormProvider.tsx

@@ -0,0 +1,30 @@
+//@ts-nocheck
+import React from 'react';
+import { DialogContent } from 'components';
+
+const ProjectExpenseFormContext = React.createContext();
+
+/**
+ * Project expense form provider.
+ * @returns
+ */
+function ProjectExpenseFormProvider({
+  //#OwnProps
+  dialogName,
+  expenseId,
+  ...props
+}) {
+  // state provider.
+  const provider = {
+    dialogName,
+  };
+
+  return (
+    <DialogContent>
+      <ProjectExpenseFormContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useProjectExpenseFormContext = () => React.useContext(ProjectExpenseFormContext);
+export { ProjectExpenseFormProvider, useProjectExpenseFormContext };

src/containers/Projects/containers/ProjectExpenseForm/ProjectExpneseFormFloatingActions.tsx

@@ -0,0 +1,44 @@
+//@ts-nocheck
+import React from 'react';
+import { useFormikContext } from 'formik';
+import { Intent, Button, Classes } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+import { useProjectExpenseFormContext } from './ProjectExpenseFormProvider';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+function ProjectExpneseFormFloatingActions({
+  // #withDialogActions
+  closeDialog,
+}) {
+  // Formik context.
+  const { isSubmitting } = useFormikContext();
+
+  // expense form dialog context.
+  const { dialogName } = useProjectExpenseFormContext();
+
+  // Handle close button click.
+  const handleCancelBtnClick = () => {
+    closeDialog(dialogName);
+  };
+
+  return (
+    <div className={Classes.DIALOG_FOOTER}>
+      <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+        <Button onClick={handleCancelBtnClick} style={{ minWidth: '75px' }}>
+          <T id={'cancel'} />
+        </Button>
+        <Button
+          intent={Intent.PRIMARY}
+          loading={isSubmitting}
+          style={{ minWidth: '75px' }}
+          type="submit"
+        >
+          {<T id={'save'} />}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default compose(withDialogActions)(ProjectExpneseFormFloatingActions);

src/containers/Projects/containers/ProjectExpenseForm/index.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Dialog, DialogSuspense, FormattedMessage as T } from 'components';
+import withDialogRedux from 'components/DialogReduxConnect';
+import { compose } from 'utils';
+
+const ProjectExpenseFormeDialogContent = React.lazy(
+  () => import('./ProjectExpenseFormDialogContent'),
+);
+
+/**
+ * Project expense form dialog.
+ * @returns
+ */
+function ProjectExpenseFormDialog({
+  dialogName,
+  payload: { projectId = null },
+  isOpen,
+}) {
+  return (
+    <ProjectExpenseFormDialogRoot
+      name={dialogName}
+      title={<T id={'project_expense.dialog.label'} />}
+      isOpen={isOpen}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      style={{ width: '400px' }}
+    >
+      <DialogSuspense>
+        <ProjectExpenseFormeDialogContent
+          dialogName={dialogName}
+          expense={projectId}
+        />
+      </DialogSuspense>
+    </ProjectExpenseFormDialogRoot>
+  );
+}
+
+export default compose(withDialogRedux())(ProjectExpenseFormDialog);
+
+const ProjectExpenseFormDialogRoot = styled(Dialog)`
+  .bp3-dialog-body {
+    .bp3-form-group {
+      margin-bottom: 15px;
+
+      label.bp3-label {
+        margin-bottom: 3px;
+        font-size: 13px;
+      }
+    }
+  }
+  .bp3-dialog-footer {
+    padding-top: 10px;
+  }
+`;

src/containers/Projects/containers/ProjectFormDialog/ProjectForm.schema.tsx

@@ -0,0 +1,20 @@
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+
+const Schema = Yup.object().shape({
+  contact_id: Yup.string().label(intl.get('project.schema.label.contact')),
+  name: Yup.string()
+    .label(intl.get('project.schema.label.project_name'))
+    .required(),
+  deadline: Yup.date()
+    .label(intl.get('project.schema.label.deadline'))
+    .required(),
+  published: Yup.boolean().label(
+    intl.get('project.schema.label.project_state'),
+  ),
+  cost_estimate: Yup.number().label(
+    intl.get('project.schema.label.project_cost'),
+  ),
+});
+
+export const CreateProjectFormSchema = Schema;

src/containers/Projects/containers/ProjectFormDialog/ProjectForm.tsx

@@ -0,0 +1,92 @@
+// @ts-nocheck
+import React from 'react';
+import moment from 'moment';
+import intl from 'react-intl-universal';
+import { Formik } from 'formik';
+import { Intent } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+import ProjectFormContent from './ProjectFormContent';
+import { CreateProjectFormSchema } from './ProjectForm.schema';
+import { useProjectFormContext } from './ProjectFormProvider';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+import { compose, transformToForm } from 'utils';
+
+const defaultInitialValues = {
+  contact_id: '',
+  name: '',
+  deadline: moment(new Date()).format('YYYY-MM-DD'),
+  published: false,
+  cost_estimate: '',
+};
+
+/**
+ * Project form
+ * @returns
+ */
+function ProjectForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  // project form dialog context.
+  const {
+    dialogName,
+    project,
+    isNewMode,
+    projectId,
+    createProjectMutate,
+    editProjectMutate,
+  } = useProjectFormContext();
+
+  // Initial form values
+  const initialValues = {
+    ...defaultInitialValues,
+    ...transformToForm(project, defaultInitialValues),
+  };
+
+  // Handles the form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    setSubmitting(true);
+    const form = { ...values };
+
+    // Handle request response success.
+    const onSuccess = (response) => {
+      AppToaster.show({
+        message: intl.get(
+          isNewMode
+            ? 'projects.dialog.success_message'
+            : 'projects.dialog.edit_success_message',
+        ),
+
+        intent: Intent.SUCCESS,
+      });
+      closeDialog(dialogName);
+    };
+
+    // Handle request response errors.
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      setSubmitting(false);
+    };
+
+    if (isNewMode) {
+      createProjectMutate(form).then(onSuccess).catch(onError);
+    } else {
+      editProjectMutate([projectId, form]).then(onSuccess).catch(onError);
+    }
+  };
+
+  return (
+    <Formik
+      validationSchema={CreateProjectFormSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+      component={ProjectFormContent}
+    />
+  );
+}
+
+export default compose(withDialogActions)(ProjectForm);

src/containers/Projects/containers/ProjectFormDialog/ProjectFormContent.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Form } from 'formik';
+
+import ProjectFormFields from './ProjectFormFields';
+import ProjectFormFloatingActions from './ProjectFormFloatingActions';
+
+/**
+ * Project form content.
+ */
+export default function ProjectFormContent() {
+  return (
+    <Form>
+      <ProjectFormFields />
+      <ProjectFormFloatingActions />
+    </Form>
+  );
+}

src/containers/Projects/containers/ProjectFormDialog/ProjectFormDialogContent.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { ProjectFormProvider } from './ProjectFormProvider';
+import ProjectForm from './ProjectForm';
+
+/**
+ * Project form dialog content.
+ * @returns {ReactNode}
+ */
+export default function ProjectFormDialogContent({
+  // #ownProps
+  dialogName,
+  project,
+}) {
+  return (
+    <ProjectFormProvider projectId={project} dialogName={dialogName}>
+      <ProjectForm />
+    </ProjectFormProvider>
+  );
+}

src/containers/Projects/containers/ProjectFormDialog/ProjectFormFields.tsx

@@ -0,0 +1,116 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { useFormikContext } from 'formik';
+
+import { Classes, Position, FormGroup, ControlGroup } from '@blueprintjs/core';
+import { FastField } from 'formik';
+import { CLASSES } from 'common/classes';
+import classNames from 'classnames';
+import {
+  FFormGroup,
+  FInputGroup,
+  FCheckbox,
+  FDateInput,
+  FMoneyInputGroup,
+  InputPrependText,
+  FormattedMessage as T,
+  FieldRequiredHint,
+  CustomerSelectField,
+} from 'components';
+import {
+  inputIntent,
+  momentFormatter,
+  tansformDateValue,
+  handleDateChange,
+} from 'utils';
+import { useProjectFormContext } from './ProjectFormProvider';
+
+/**
+ * Project form fields.
+ * @returns
+ */
+function ProjectFormFields() {
+  // project form dialog context.
+  const { customers } = useProjectFormContext();
+
+  // Formik context.
+  const { values } = useFormikContext();
+
+  return (
+    <div className={Classes.DIALOG_BODY}>
+      {/*------------ Contact -----------*/}
+      <FastField name={'contact_id'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={intl.get('projects.dialog.contact')}
+            labelInfo={<FieldRequiredHint />}
+            className={classNames('form-group--select-list', Classes.FILL)}
+            intent={inputIntent({ error, touched })}
+          >
+            <CustomerSelectField
+              contacts={customers}
+              selectedContactId={value}
+              defaultSelectText={'Select Contact Account'}
+              onContactSelected={(customer) => {
+                form.setFieldValue('contact_id', customer.id);
+              }}
+              allowCreate={true}
+              popoverFill={true}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+      {/*------------ Project Name -----------*/}
+      <FFormGroup
+        label={intl.get('projects.dialog.project_name')}
+        name={'name'}
+        labelInfo={<FieldRequiredHint />}
+      >
+        <FInputGroup name="name" />
+      </FFormGroup>
+      {/*------------ DeadLine -----------*/}
+      <FFormGroup
+        label={intl.get('projects.dialog.deadline')}
+        name={'deadline'}
+        className={classNames(CLASSES.FILL, 'form-group--date')}
+      >
+        <FDateInput
+          {...momentFormatter('YYYY/MM/DD')}
+          name="deadline"
+          formatDate={(date) => date.toLocaleString()}
+          popoverProps={{
+            position: Position.BOTTOM,
+            minimal: true,
+          }}
+        />
+      </FFormGroup>
+
+      {/*------------ CheckBox -----------*/}
+      <FFormGroup name={'published'}>
+        <FCheckbox
+          name="published"
+          label={intl.get('projects.dialog.calculator_expenses')}
+        />
+      </FFormGroup>
+      {/*------------ Cost Estimate -----------*/}
+      <FFormGroup
+        name={'cost_estimate'}
+        label={intl.get('projects.dialog.cost_estimate')}
+        labelInfo={<FieldRequiredHint />}
+      >
+        <ControlGroup>
+          <InputPrependText text={'USD'} />
+          <FMoneyInputGroup
+            disabled={values.published}
+            name={'cost_estimate'}
+            allowDecimals={true}
+            allowNegativeValue={true}
+          />
+        </ControlGroup>
+      </FFormGroup>
+    </div>
+  );
+}
+
+export default ProjectFormFields;

src/containers/Projects/containers/ProjectFormDialog/ProjectFormFloatingActions.tsx

@@ -0,0 +1,48 @@
+// @ts-nocheck
+import React from 'react';
+import { useFormikContext } from 'formik';
+import { Intent, Button, Classes } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+import { useProjectFormContext } from './ProjectFormProvider';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+/**
+ * Project form floating actions.
+ * @returns
+ */
+function ProjectFormFloatingActions({
+  // #withDialogActions
+  closeDialog,
+}) {
+  // Formik context.
+  const { isSubmitting } = useFormikContext();
+
+  // project form dialog context.
+  const { dialogName } = useProjectFormContext();
+
+  // Handle close button click.
+  const handleCancelBtnClick = () => {
+    closeDialog(dialogName);
+  };
+
+  return (
+    <div className={Classes.DIALOG_FOOTER}>
+      <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+        <Button onClick={handleCancelBtnClick} style={{ minWidth: '85px' }}>
+          <T id={'cancel'} />
+        </Button>
+        <Button
+          intent={Intent.PRIMARY}
+          loading={isSubmitting}
+          style={{ minWidth: '75px' }}
+          type="submit"
+        >
+          <T id={'projects.label.create'} />
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default compose(withDialogActions)(ProjectFormFloatingActions);

src/containers/Projects/containers/ProjectFormDialog/ProjectFormProvider.tsx

@@ -0,0 +1,56 @@
+// @ts-nocheck
+import React from 'react';
+import { useCustomers } from 'hooks/query';
+import { useCreateProject, useEditProject, useProject } from '../../hooks';
+import { DialogContent } from 'components';
+
+const ProjectFormContext = React.createContext();
+
+/**
+ * Project form provider.
+ * @returns
+ */
+function ProjectFormProvider({
+  // #ownProps
+  dialogName,
+  projectId,
+  ...props
+}) {
+  // Create and edit project mutations.
+  const { mutateAsync: createProjectMutate } = useCreateProject();
+  const { mutateAsync: editProjectMutate } = useEditProject();
+
+  // Handle fetch project detail.
+  const { data: project, isLoading: isProjectLoading } = useProject(projectId, {
+    enabled: !!projectId,
+  });
+
+  // Handle fetch customers data table or list
+  const {
+    data: { customers },
+    isLoading: isCustomersLoading,
+  } = useCustomers({ page_size: 10000 });
+
+  const isNewMode = !projectId;
+
+  // State provider.
+  const provider = {
+    customers,
+    dialogName,
+    project,
+    projectId,
+    isNewMode,
+    createProjectMutate,
+    editProjectMutate,
+  };
+
+  return (
+    <DialogContent isLoading={isCustomersLoading || isProjectLoading}>
+      <ProjectFormContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useProjectFormContext = () => React.useContext(ProjectFormContext);
+
+export { ProjectFormProvider, useProjectFormContext };

src/containers/Projects/containers/ProjectFormDialog/index.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Dialog, DialogSuspense, FormattedMessage as T } from 'components';
+import withDialogRedux from 'components/DialogReduxConnect';
+import { compose } from 'utils';
+
+const ProjectDialogContent = React.lazy(
+  () => import('./ProjectFormDialogContent'),
+);
+
+/**
+ * Project form dialog.
+ * @returns
+ */
+function ProjectFormDialog({
+  dialogName,
+  payload: { projectId = null, action },
+  isOpen,
+}) {
+  return (
+    <ProjectFormDialogRoot
+      name={dialogName}
+      title={
+        action === 'edit' ? (
+          <T id="projects.dialog.edit_project" />
+        ) : (
+          <T id={'projects.dialog.new_project'} />
+        )
+      }
+      isOpen={isOpen}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      style={{ width: '400px' }}
+    >
+      <DialogSuspense>
+        <ProjectDialogContent dialogName={dialogName} project={projectId} />
+      </DialogSuspense>
+    </ProjectFormDialogRoot>
+  );
+}
+
+export default compose(withDialogRedux())(ProjectFormDialog);
+
+const ProjectFormDialogRoot = styled(Dialog)`
+  .bp3-dialog-body {
+    .bp3-form-group {
+      margin-bottom: 15px;
+      margin-top: 15px;
+
+      label.bp3-label {
+        margin-bottom: 3px;
+        font-size: 13px;
+      }
+    }
+  }
+  .bp3-dialog-footer {
+    padding-top: 10px;
+  }
+`;

src/containers/Projects/containers/ProjectTaskFormDialog/ProjectTaskForm.schema.tsx

@@ -0,0 +1,16 @@
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+import { DATATYPES_LENGTH } from 'common/dataTypes';
+
+const Schema = Yup.object().shape({
+  taskName: Yup.string()
+    .label(intl.get('task.schema.label.task_name'))
+    .required(),
+  taskHouse: Yup.string().label(intl.get('task.schema.label.task_house')),
+  taskCharge: Yup.string()
+    .label(intl.get('task.schema.label.charge'))
+    .required(),
+  taskamount: Yup.number().label(intl.get('task.schema.label.amount')),
+});
+
+export const CreateProjectTaskFormSchema = Schema;

src/containers/Projects/containers/ProjectTaskFormDialog/ProjectTaskForm.tsx

@@ -0,0 +1,62 @@
+//@ts-nocheck
+import React from 'react';
+import { Formik } from 'formik';
+import { CreateProjectTaskFormSchema } from './ProjectTaskForm.schema';
+import { useProjectTaskFormContext } from './ProjectTaskFormProvider';
+import { AppToaster } from 'components';
+import ProjectTaskFormContent from './ProjectTaskFormContent';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+import { compose } from 'utils';
+
+const defaultInitialValues = {
+  taskName: '',
+  taskHouse: '00:00',
+  taskCharge: 'hourly_rate',
+  taskamount: '',
+};
+
+/**
+ * Project task form.
+ * @returns
+ */
+function ProjectTaskForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  // task form dialog context.
+  const { dialogName } = useProjectTaskFormContext();
+
+  // Initial form values
+  const initialValues = {
+    ...defaultInitialValues,
+  };
+
+  // Handles the form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    const form = {};
+
+    // Handle request response success.
+    const onSuccess = (response) => {};
+
+    // Handle request response errors.
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      setSubmitting(false);
+    };
+  };
+
+  return (
+    <Formik
+      validationSchema={CreateProjectTaskFormSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+      component={ProjectTaskFormContent}
+    />
+  );
+}
+
+export default compose(withDialogActions)(ProjectTaskForm);

src/containers/Projects/containers/ProjectTaskFormDialog/ProjectTaskFormContent.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Form } from 'formik';
+import ProjectTaskFormFields from './ProjectTaskFormFields';
+import ProjectTaskFormFloatingActions from './ProjectTaskFormFloatingActions';
+
+/**
+ * Task form content.
+ * @returns
+ */
+export default function TaskFormContent() {
+  return (
+    <Form>
+      <ProjectTaskFormFields />
+      <ProjectTaskFormFloatingActions />
+    </Form>
+  );
+}

src/containers/Projects/containers/ProjectTaskFormDialog/ProjectTaskFormDialogContent.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ProjectTaskFormProvider } from './ProjectTaskFormProvider';
+import ProjectTaskForm from './ProjectTaskForm';
+
+/**
+ * Project task form dialog content.
+ */
+export default function ProjectTaskFormDialogContent({
+  // #ownProps
+  dialogName,
+  task,
+}) {
+  return (
+    <ProjectTaskFormProvider taskId={task} dialogName={dialogName}>
+      <ProjectTaskForm />
+    </ProjectTaskFormProvider>
+  );
+}

src/containers/Projects/containers/ProjectTaskFormDialog/ProjectTaskFormFields.tsx

@@ -0,0 +1,92 @@
+//@ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+import { useFormikContext } from 'formik';
+import { Classes, ControlGroup } from '@blueprintjs/core';
+import {
+  FFormGroup,
+  FInputGroup,
+  Col,
+  Row,
+  FormattedMessage as T,
+} from 'components';
+import { taskChargeOptions } from 'containers/Projects/containers/common/modalChargeOptions';
+import { ChangeTypesSelect } from '../../components';
+
+/**
+ * Project task form fields.
+ * @returns
+ */
+function ProjectTaskFormFields() {
+  // Formik context.
+  const { values } = useFormikContext();
+
+  return (
+    <div className={Classes.DIALOG_BODY}>
+      {/*------------ Task Name -----------*/}
+      <FFormGroup label={<T id={'project_task.dialog.task_name'} />} name={'taskName'}>
+        <FInputGroup name="taskName" />
+      </FFormGroup>
+      {/*------------ Estimated Hours -----------*/}
+      <Row>
+        <Col xs={4}>
+          <FFormGroup
+            label={<T id={'project_task.dialog.estimated_hours'} />}
+            name={'taskHouse'}
+          >
+            <FInputGroup name="taskHouse" />
+          </FFormGroup>
+        </Col>
+        {/*------------ Charge -----------*/}
+        <Col xs={8}>
+          <FFormGroup
+            name={'taskCharge'}
+            className={'form-group--select-list'}
+            label={<T id={'project_task.dialog.charge'} />}
+          >
+            <ControlGroup>
+              <ChangeTypesSelect
+                name="taskCharge"
+                items={taskChargeOptions}
+                popoverProps={{ minimal: true }}
+                filterable={false}
+              />
+              <FInputGroup
+                name="taskamount"
+                disabled={values?.taskCharge === 'Non-chargeable'}
+              />
+            </ControlGroup>
+          </FFormGroup>
+        </Col>
+      </Row>
+      {/*------------ Estimated Amount -----------*/}
+      <EstimatedAmountBase>
+        <EstimatedAmountContent>
+          <T id={'project_task.dialog.estimated_amount'} />
+          <EstimateAmount>0.00</EstimateAmount>
+        </EstimatedAmountContent>
+      </EstimatedAmountBase>
+    </div>
+  );
+}
+
+export default ProjectTaskFormFields;
+
+const EstimatedAmountBase = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  font-size: 14px;
+  line-height: 1.5rem;
+  opacity: 0.75;
+`;
+
+const EstimatedAmountContent = styled.span`
+  background-color: #fffdf5;
+  padding: 0.1rem 0;
+`;
+
+const EstimateAmount = styled.span`
+  font-size: 15px;
+  font-weight: 700;
+  margin-left: 10px;
+`;

src/containers/Projects/containers/ProjectTaskFormDialog/ProjectTaskFormFloatingActions.tsx

@@ -0,0 +1,48 @@
+// @ts-nocheck
+import React from 'react';
+import { useFormikContext } from 'formik';
+import { Intent, Button, Classes } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+import { useProjectTaskFormContext } from './ProjectTaskFormProvider';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+/**
+ * Task form floating actions.
+ * @returns
+ */
+function ProjectTaskFormFloatingActions({
+  // #withDialogActions
+  closeDialog,
+}) {
+  // Formik context.
+  const { isSubmitting } = useFormikContext();
+
+  // Task form dialog context.
+  const { dialogName } = useProjectTaskFormContext();
+
+  // Handle close button click.
+  const handleCancelBtnClick = () => {
+    closeDialog(dialogName);
+  };
+
+  return (
+    <div className={Classes.DIALOG_FOOTER}>
+      <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+        <Button onClick={handleCancelBtnClick} style={{ minWidth: '75px' }}>
+          <T id={'cancel'} />
+        </Button>
+        <Button
+          intent={Intent.PRIMARY}
+          loading={isSubmitting}
+          style={{ minWidth: '75px' }}
+          type="submit"
+        >
+          {<T id={'save'} />}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default compose(withDialogActions)(ProjectTaskFormFloatingActions);

src/containers/Projects/containers/ProjectTaskFormDialog/ProjectTaskFormProvider.tsx

@@ -0,0 +1,32 @@
+//@ts-nocheck
+import React from 'react';
+import { DialogContent } from 'components';
+
+const ProjectTaskFormContext = React.createContext();
+
+/**
+ * Project task form provider.
+ * @returns
+ */
+function ProjectTaskFormProvider({
+  // #ownProps
+  dialogName,
+  taskId,
+  ...props
+}) {
+  // State provider.
+  const provider = {
+    dialogName,
+  };
+
+  return (
+    <DialogContent>
+      <ProjectTaskFormContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useProjectTaskFormContext = () =>
+  React.useContext(ProjectTaskFormContext);
+
+export { ProjectTaskFormProvider, useProjectTaskFormContext };

src/containers/Projects/containers/ProjectTaskFormDialog/index.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import styled from 'styled-components';
+import intl from 'react-intl-universal';
+import { Dialog, DialogSuspense, FormattedMessage as T } from 'components';
+import withDialogRedux from 'components/DialogReduxConnect';
+import { compose } from 'utils';
+
+const ProjectTaskFormDialogContent = React.lazy(
+  () => import('./ProjectTaskFormDialogContent'),
+);
+
+/**
+ * Project task form dialog.
+ * @returns
+ */
+function ProjectTaskFormDialog({
+  dialogName,
+  payload: { taskId = null },
+  isOpen,
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={intl.get('project_task.dialog.new_task')}
+      isOpen={isOpen}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      style={{ width: '500px' }}
+    >
+      <DialogSuspense>
+        <ProjectTaskFormDialogContent dialogName={dialogName} task={taskId} />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+export default compose(withDialogRedux())(ProjectTaskFormDialog);