From 2ae720821e4cc364dddef0a98354d17ea58a6238 Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Thu, 8 Sep 2022 21:44:16 +0200
Subject: [PATCH] feat: add project invoicing cell.

---
 .../DataTableCells/ProjectInvoicingCell.tsx   | 47 +++++++++++++++++++
 src/components/DataTableCells/index.tsx       |  2 +
 src/containers/Entries/components.tsx         | 10 ++++
 .../ProjectDetailActionsBar.tsx               |  3 ++
 4 files changed, 62 insertions(+)
 create mode 100644 src/components/DataTableCells/ProjectInvoicingCell.tsx

diff --git a/src/components/DataTableCells/ProjectInvoicingCell.tsx b/src/components/DataTableCells/ProjectInvoicingCell.tsx
new file mode 100644
index 000000000..890d9a768
--- /dev/null
+++ b/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;
+`;
diff --git a/src/components/DataTableCells/index.tsx b/src/components/DataTableCells/index.tsx
index 02fb0ebb4..6b3ba23ee 100644
--- a/src/components/DataTableCells/index.tsx
+++ b/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,
 };
diff --git a/src/containers/Entries/components.tsx b/src/containers/Entries/components.tsx
index e5eb909ba..0213651e7 100644
--- a/src/containers/Entries/components.tsx
+++ b/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',
diff --git a/src/containers/Projects/containers/ProjectDetails/ProjectDetailActionsBar.tsx b/src/containers/Projects/containers/ProjectDetails/ProjectDetailActionsBar.tsx
index be33fc8a3..cf4254220 100644
--- a/src/containers/Projects/containers/ProjectDetails/ProjectDetailActionsBar.tsx
+++ b/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;