feat: Quick New Dropdown.

client/src/common/quickNewOptions.js

@@ -0,0 +1,8 @@
+export default [
+  { id: 'invoices', name: 'Sale invoice' },
+  { id: 'Purchase invoice', name: 'Purchase invoice' },
+  { id: 'manual-journals', name: 'Manual journal' },
+  { id: 'expenses', name: 'Expense' },
+  { id: 'customers', name: 'Customer' },
+  { id: 'vendors', name: 'Vendor' },
+];

client/src/components/Dashboard/DashboardTopbar.js

@@ -19,7 +19,7 @@ import { Icon, Hint, If } from 'components';
 import withSearch from 'containers/GeneralSearch/withSearch';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withDashboard from 'containers/Dashboard/withDashboard';
-
+import QuickNewDropdown from 'containers/QuickNewDropdown/QuickNewDropdown';
 import { compose } from 'utils';
 
 function DashboardTopbar({
@@ -48,6 +48,7 @@ function DashboardTopbar({
     toggleSidebarExpend();
     recordSidebarPreviousExpand();
   };
+
   return (
     <div class="dashboard__topbar">
       <div class="dashboard__topbar-left">
@@ -128,11 +129,7 @@ function DashboardTopbar({
               icon={<Icon icon={'search-24'} iconSize={20} />}
               text={<T id={'quick_find'} />}
             />
-            <Button
+            <QuickNewDropdown/>
-              className={Classes.MINIMAL}
-              icon={<Icon icon={'plus-24'} iconSize={20} />}
-              text={<T id={'quick_new'} />}
-            />
             <Tooltip
               content={<T id={'notifications'} />}
               position={Position.BOTTOM}
@@ -165,7 +162,7 @@ export default compose(
     pageTitle,
     pageSubtitle,
     editViewId,
-    sidebarExpended
+    sidebarExpended,
   })),
   withDashboardActions,
 )(DashboardTopbar);

client/src/containers/QuickNewDropdown/QuickNewDropdown.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import ListSelect from 'components/ListSelect';
+import { FormattedMessage as T } from 'react-intl';
+import { useHistory } from 'react-router-dom';
+import { Icon } from 'components';
+import { Position } from '@blueprintjs/core';
+import quickNewOptions from 'common/quickNewOptions';
+
+/**
+ * Quick New Dropdown.
+ */
+function QuickNewDropdown() {
+  const history = useHistory();
+
+  const handleClickQuickNew = ({ id }) => {
+    history.push(`/${id}`);
+  };
+
+  return (
+    <ListSelect
+      items={quickNewOptions}
+      onItemSelect={(type) => handleClickQuickNew(type)}
+      textProp={'name'}
+      filterable={false}
+      popoverProps={{ minimal: false, position: Position.BOTTOM }}
+      defaultText={'Select'}
+      buttonProps={{
+        text: <T id={'quick_new'} />,
+        icon: <Icon icon={'plus-24'} iconSize={20} />,
+        minimal: true,
+      }}
+      className={'form-group-quick-new-downDrop'}
+    />
+  );
+}
+
+export default QuickNewDropdown;

client/src/lang/en/index.js

@@ -160,7 +160,7 @@ export default {
   new_conditional: '+ New Conditional',
   chart_of_accounts: 'Chart of Accounts',
   exchange_rate_details: 'Exchange Rate Details',
-  exchange_rate_list: 'Exchange Rate List',
+  exchange_rates_list: 'Exchange Rates List',
   manual_journals: 'Manual Journals',
   edit_expense_details: 'Edit Expense Details',
   expenses_list: 'Expenses List',
@@ -595,13 +595,13 @@ export default {
   delete_estimate: 'Delete Estimate',
   new_estimate: 'New Estimate',
   customer_name_: 'Customer name',
-  estimate_date_: 'Estismate date',
+  estimate_date_: 'Estimate date',
   expiration_date_: 'Expiration date',
   estimate_number_: 'Estimate number',
   discount: 'Discount %',
   quantity: 'Quantity',
   rate: 'Rate',
-  estimate_list: 'Estimate List',
+  estimates_list: 'Estimates List',
   estimate_number: 'Estimate Number',
   product_and_service: 'Product/Service',
   the_estimate_has_been_successfully_edited:
@@ -612,7 +612,7 @@ export default {
     'The estimate has been successfully deleted.',
   once_delete_this_estimate_you_will_able_to_restore_it: `Once you delete this estimate, you won\'t be able to restore it later. Are you sure you want to delete this estimate?`,
   cannot_be_zero_or_empty: 'cannot be zero or empty.',
-  invocies: 'Invoices',
+  invoices: 'Invoices',
   invoices_list: 'Invoices List',
   invoice_date: 'Invoice Date',
   due_date: 'Due Date',
@@ -638,7 +638,7 @@ export default {
   the_invoice_has_been_successfully_deleted:
     'The invoice has been successfully deleted.',
   once_delete_this_invoice_you_will_able_to_restore_it: `Once you delete this invoice, you won\'t be able to restore it later. Are you sure you want to delete this invoice?`,
-  receipt_list: 'Receipt List',
+  receipts_list: 'Receipts List',
   receipts: 'Receipts',
   receipt: 'Receipt #',
   receipt_date_: 'Receipt date',
@@ -661,7 +661,7 @@ export default {
     'The receipt #{number}  has been successfully edited.',
   the_receipt_has_been_successfully_deleted:
     'The receipt has been successfully deleted.',
-  bill_list: 'Bill List',
+  bills_list: 'Bills List',
   bills: 'Bills',
   accept: 'Accept',
   vendor_name: 'Vendor Name',
@@ -686,7 +686,7 @@ export default {
   deposit_to: 'Deposit to',
   edit_payment_receive: 'Edit Payment Receive',
   delete_payment_receive: 'Delete Payment Receive',
-  payment_Receive_list: 'Payment Receive List',
+  payment_Receives_list: 'Payment Receives List',
   payment_receive: 'Payment Receive',
   new_payment_receive: 'New Payment Receive',
   payment_receives: 'Payment Receives',

client/src/style/pages/Dashboard/Dashboard.scss

@@ -16,7 +16,8 @@
     &-left {
       display: flex;
     }
-    &-actions {}
+    &-actions {
+    }
     &-sidebar-toggle {
       display: flex;
       align-items: center;
@@ -59,6 +60,15 @@
       .bp3-navbar-divider {
         margin: 0 8px;
       }
+
+      .form-group-quick-new-downDrop {
+        .bp3-popover-target .bp3-button {
+          color: #1552c8;
+        }
+        .bp3-button::after {
+          content: none;
+        }
+      }
     }
 
     &-user {
@@ -403,7 +413,6 @@
 }
 
 .tabs--dashboard-views {
-
   .#{$ns}-tab {
     color: #5b606d;
     font-size: 14px;