feat: add transaction select.

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

@@ -1,5 +1,6 @@
 // @ts-nocheck
 import React from 'react';
+import { useHistory } from 'react-router-dom';
 import {
   Button,
   Classes,
@@ -13,6 +14,7 @@ import {
   FormattedMessage as T,
   DashboardRowsHeightButton,
 } from 'components';
+import { TransactionSelect } from './components';
 import withSettings from '../../../Settings/withSettings';
 import withSettingsActions from '../../../Settings/withSettingsActions';
 import withDialogActions from 'containers/Dialog/withDialogActions';
@@ -33,10 +35,13 @@ function ProjectDetailActionsBar({
   // #withSettingsActions
   addSetting,
 }) {
+  const history = useHistory();
   const { projectId } = useProjectDetailContext();
 
   // Handle new transaction button click.
-  const handleNewTransactionBtnClick = () => {};
+  const handleNewTransactionBtnClick = ({ path }) => {
+    history.push(`/${path}`);
+  };
 
   const handleEditProjectBtnClick = () => {
     openDialog('project-form', {
@@ -60,11 +65,12 @@ function ProjectDetailActionsBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon={'plus'} />}
-          text={<T id={'projcet_details.action.new_transaction'} />}
-          onClick={handleNewTransactionBtnClick}
+        <TransactionSelect
+          transactions={[
+            { name: 'Invoice', path: 'invoices/new' },
+            { name: 'Expenses', path: 'expenses/new' },
+          ]}
+          onItemSelect={handleNewTransactionBtnClick}
         />
         <Button
           className={Classes.MINIMAL}

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

@@ -27,14 +27,14 @@ export const FinancialProgressBar = ({ ...rest }) => {
   return <FinancialCardProgressBar animate={false} stripes={false} {...rest} />;
 };
 
-export const FinancialSectionWrap = styled.div`
+const FinancialSectionWrap = styled.div`
   display: flex;
   flex-wrap: wrap;
   margin: 20px 20px 20px;
   gap: 10px;
 `;
 
-export const FinancialSectionCard = styled.div`
+const FinancialSectionCard = styled.div`
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
@@ -45,27 +45,27 @@ export const FinancialSectionCard = styled.div`
   border: 1px solid #c8cad0; // #000a1e33 #f0f0f0
 `;
 
-export const FinancialSectionCardContent = styled.div`
+const FinancialSectionCardContent = styled.div`
   margin: 16px;
   /* flex-direction: column; */
 `;
 
-export const FinancialCardWrap = styled.div``;
+const FinancialCardWrap = styled.div``;
 
-export const FinancialCardTitle = styled.div`
+const FinancialCardTitle = styled.div`
   font-size: 15px;
   color: #000;
   white-space: nowrap;
   font-weight: 400;
   line-height: 1.5rem;
 `;
-export const FinancialCardValue = styled.div`
+const FinancialCardValue = styled.div`
   font-size: 21px;
   line-height: 2rem;
   font-weight: 700;
 `;
 
-export const FinancialCardStatus = styled.div``;
+const FinancialCardStatus = styled.div``;
 
 export const FinancialCardText = styled.div`
   font-size: 13px;

src/containers/Projects/containers/ProjectDetails/components/TransactionSelect.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 transactionItemRenderer = (
+  transaction,
+  { handleClick, modifiers, query },
+) => {
+  return (
+    <MenuItem
+      disabled={modifiers.disabled}
+      key={transaction.path}
+      onClick={handleClick}
+      text={transaction.name}
+    />
+  );
+};
+
+const transactionSelectProps = {
+  itemRenderer: transactionItemRenderer,
+  filterable: false,
+  popoverProps: {
+    minimal: true,
+    position: Position.BOTTOM_LEFT,
+    interactionKind: PopoverInteractionKind.CLICK,
+    modifiers: {
+      offset: { offset: '0, 4' },
+    },
+  },
+};
+
+/**
+ *
+ * @param
+ * @returns
+ */
+export function TransactionSelect({ transactions, ...rest }) {
+  return (
+    <Select {...transactionSelectProps} 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

@@ -1,2 +1,3 @@
 export * from './ProjectSelect';
+export * from './TransactionSelect';
 export * from './FinancialSection';