feat: add project invoicing cell.

src/components/DataTableCells/ProjectInvoicingCell.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Popover2 } from '@blueprintjs/popover2';
+import { Button } from '@blueprintjs/core';
+import { CellType } from '@/constants';
+import {
+  Icon,
+  FormattedMessage as T,
+  ButtonLink,
+  DetailsMenu,
+  DetailItem,
+  FormatDate,
+} from '@/components';
+
+/**
+ * @return
+ */
+export function ProjectInvoicingCell({}) {
+  const content = (
+    <ProjectInvoicingContent>
+      <DetailsMenu direction={'vertical'}>
+        <DetailItem label={'Type'}>
+          <ButtonLink>Expense</ButtonLink>
+        </DetailItem>
+        <DetailItem label={'Transaction No.'}>EXP-1000</DetailItem>
+        <DetailItem label={'Date'}>2022-02-02</DetailItem>
+        <DetailItem label={'Amount'}>$1000.00</DetailItem>
+      </DetailsMenu>
+    </ProjectInvoicingContent>
+  );
+  return (
+    <Popover2 content={content}>
+      <Button
+        icon={<Icon icon={'info'} iconSize={14} />}
+        className="m12"
+        minimal={true}
+      />
+    </Popover2>
+  );
+}
+
+ProjectInvoicingCell.cellType = CellType.Button;
+
+const ProjectInvoicingContent = styled.div`
+  width: 450px;
+  padding: 7px 12px;
+`;

src/components/DataTableCells/index.tsx

@@ -11,6 +11,7 @@ import SwitchFieldCell from './SwitchFieldCell';
 import TextAreaCell from './TextAreaCell';
 import BranchesListFieldCell from './BranchesListFieldCell';
 import { ProjectsListFieldCell } from './ProjectsListFieldCell';
+import { ProjectInvoicingCell } from './ProjectInvoicingCell';
 import { TextOverviewTooltipCell } from './TextOverviewTooltipCell';
 
 export {
@@ -28,5 +29,6 @@ export {
   TextAreaCell,
   BranchesListFieldCell,
   ProjectsListFieldCell,
+  ProjectInvoicingCell,
   TextOverviewTooltipCell,
 };

src/containers/Entries/components.tsx

@@ -13,6 +13,7 @@ import {
   PercentFieldCell,
   NumericInputCell,
   CheckBoxFieldCell,
+  ProjectInvoicingCell,
 } from '@/components/DataTableCells';
 
 /**
@@ -152,6 +153,15 @@ export function useEditableItemsEntriesColumns({ landedCost }) {
             },
           ]
         : []),
+      {
+        Header: '',
+        accessor: 'invoicing',
+        Cell: ProjectInvoicingCell,
+        disableSortBy: true,
+        disableResizing: true,
+        width: 45,
+        align: Align.Center,
+      },
       {
         Header: '',
         accessor: 'action',

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

@@ -40,6 +40,9 @@ function ProjectDetailActionsBar({
   // Handle new transaction button click.
   const handleNewTransactionBtnClick = ({ path }) => {
     switch (path) {
+      case 'invoincing':
+        openDialog('project-invoicing-form');
+        break;
       case 'expense':
         openDialog('project-expense-form', { projectId });
         break;