feat: drawer.

client/src/components/Drawer/Drawer.js

@@ -2,11 +2,18 @@ import React from 'react';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { Position, Drawer } from '@blueprintjs/core';
 
-export default function ({ children, isOpen, isClose, drawerProps }) {
+export default function ({
+  title = <T id={'view_paper'} />,
+  children,
+  isOpen,
+  isClose,
+  drawerProps,
+}) {
+  
   return (
     <Drawer
       isOpen={isOpen}
-      title={<T id={'view_paper'} />}
+      title={title}
       position={Position.RIGHT}
       canOutsideClickClose={true}
       canEscapeKeyClose={true}

client/src/components/Drawer/DrawerSuspense.js

@@ -1,6 +1,14 @@
 import React, { Suspense } from 'react';
-import { Spinner } from '@blueprintjs/core';
+import { Spinner, Classes } from '@blueprintjs/core';
+
+function LoadingContent() {
+  return (
+    <div className={Classes.DRAWER_BODY}>
+      <Spinner size={30} />
+    </div>
+  );
+}
 
 export default function DrawerSuspense({ children }) {
-  return <Suspense fallback={<Spinner size={30} />}>{children}</Suspense>;
+  return <Suspense fallback={<LoadingContent />}>{children}</Suspense>;
 }

client/src/components/DrawersContainer.js

@@ -3,6 +3,9 @@ import EstimateDrawer from 'containers/Sales/Estimates/EstimateDetails/EstimateD
 import InvoiceDrawer from 'containers/Sales/Invoices/InvoiceDetails/InvoiceDrawer';
 import ReceiptDrawer from 'containers/Sales/Receipts/ReceiptDetails/ReceiptDrawer';
 import PaymentReceiveDrawer from 'containers/Sales/PaymentReceives/PaymentDetails/PaymentReceiveDrawer';
+import AccountDrawer from 'containers/Drawers/AccountDrawer';
+import ManualJournalDrawer from 'containers/Drawers/ManualJournalDrawer';
+import ExpenseDrawer from 'containers/Drawers/ExpenseDrawer';
 
 export default function DrawersContainer() {
   return (
@@ -11,6 +14,9 @@ export default function DrawersContainer() {
       <InvoiceDrawer name={'invoice-drawer'} />
       <ReceiptDrawer name={'receipt-drawer'} />
       <PaymentReceiveDrawer name={'payment-receive-drawer'} />
+      <AccountDrawer name={'account-drawer'} />
+      <ManualJournalDrawer name={'journal-drawer'} />
+      <ExpenseDrawer name={'expense-drawer'} />
     </div>
   );
 }

client/src/lang/en/index.js

@@ -1049,5 +1049,12 @@ export default {
   asset_value: 'Asset value',
   average: 'Average',
   inventory_valuation: 'Inventory valuation',
-  payable_accounts_should_assign_with_vendors: 'Payable accounts should assign with vendors.'
+  payable_accounts_should_assign_with_vendors:
+    'Payable accounts should assign with vendors.',
+  account_paper: 'Account Paper',
+  transaction_date: 'Transaction date',
+  transaction_type: 'Transaction type',
+  running_balance: 'Running Balance',
+  account_normal:'Account normal',
+  published_at:'Published at',
 };

client/src/static/json/icons.js

@@ -437,4 +437,11 @@ export default {
     ],
     viewBox: '0 0 24 24',
   },
+
+  'trash-18': {
+    path: [
+      'M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM8 9h8v10H8V9zm7.5-5l-1-1h-5l-1 1H5v2h14V4z',
+    ],
+    viewBox: '0 0 24 24',
+  },
 };

client/src/style/components/Drawer/ViewDetails.scss

@@ -0,0 +1,117 @@
+.journal-drawer,
+.expense-drawer {
+  background: #f5f5f5;
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    margin: 15px;
+    padding: 15px;
+    border: 1px solid #d2dce2;
+    box-shadow: 1px 1px #fbf8f8;
+    background-color: #ffffff;
+    min-height: 508px;
+
+    &--header {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: flex-start;
+      margin: 15px 0 20px;
+      font-size: 14px;
+      // color: #333333;
+      color: #666666;
+      > div {
+        flex-grow: 1;
+        span {
+          display: block;
+          color: #666666;
+          font-weight: 500;
+          margin: 10px 0;
+        }
+      }
+      .info {
+        flex: 0 1 25%;
+        padding-left: 2%;
+        margin: 10px 0;
+      }
+      .balance {
+        font-size: 26px;
+        font-weight: 500;
+        color: #0f1118;
+      }
+    }
+
+    &--table {
+      flex-grow: 1;
+      flex-shrink: 0;
+      .table {
+        color: #666666;
+        font-size: 14px;
+        .thead .tr .th .resizer {
+          display: none;
+        }
+        .thead .th {
+          color: #222222;
+          border-bottom: 1px solid #000000;
+        }
+        .thead .th,
+        .tbody .tr .td {
+          background: transparent;
+          padding: 0.8rem 0.5rem;
+        }
+      }
+      .desc {
+        margin: 20px 0 60px;
+
+        // margin: 20px 0;
+        > b {
+          color: #2f2f2f;
+        }
+      }
+    }
+
+    &--footer {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      color: #666666;
+      .wrapper > div {
+        display: flex;
+        border-top: 1px solid #000000;
+        border-bottom: 1px solid #000000;
+        padding: 0.2rem;
+        span,
+        p {
+          margin: 10px 50px 5px 0px;
+        }
+        span {
+          color: #333333;
+          flex-grow: 1;
+          font-weight: 500;
+        }
+      }
+    }
+  }
+}
+
+.bp3-drawer.bp3-position-right {
+  bottom: 0;
+  right: 0;
+  top: 0;
+  overflow: auto;
+  height: 100%;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  .bp3-drawer-header {
+    margin-bottom: 2px;
+    box-shadow: (0, 0, 0);
+    background-color: #6a7993;
+    .bp3-heading,
+    .bp3-icon {
+      color: white;
+    }
+  }
+}