feat: optimize expense and manual journal details.

src/containers/Drawers/ExpenseDrawer/ExpenseDrawerDetails.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { Card } from 'components';
+import { CommercialDocBox } from '../../../components';
 
 import ExpenseDrawerActionBar from './ExpenseDrawerActionBar';
 import ExpenseDrawerHeader from './ExpenseDrawerHeader';
@@ -16,15 +16,13 @@ export default function ExpenseDrawerDetails() {
     <ExpenseDetailsRoot>
       <ExpenseDrawerActionBar />
 
-      <div className="expense-drawer__content">
-        <Card>
-          <ExpenseDrawerHeader />
-          <ExpenseDrawerTable />
-          <ExpenseDrawerFooter />
-        </Card>
-      </div>
+      <CommercialDocBox>
+        <ExpenseDrawerHeader />
+        <ExpenseDrawerTable />
+        <ExpenseDrawerFooter />
+      </CommercialDocBox>
     </ExpenseDetailsRoot>
   );
 }
 
-const ExpenseDetailsRoot = styled.div``;
+const ExpenseDetailsRoot = styled.div``;

src/containers/Drawers/ExpenseDrawer/ExpenseDrawerFooter.js

@@ -1,8 +1,14 @@
 import React from 'react';
-import { T } from 'components';
-import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
+import styled from 'styled-components';
 
-import { FormatNumber } from '../../../components';
+import {
+  T,
+  TotalLines,
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+} from 'components';
+import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
+import { FormatNumber, TotalLine } from '../../../components';
 
 /**
  * Footer details of expense readonly details.
@@ -11,23 +17,26 @@ export default function ExpenseDrawerFooter() {
   const { expense } = useExpenseDrawerContext();
 
   return (
-    <div className="expense-drawer__content-footer">
-      <div class="total-lines">
-        <div class="total-lines__line total-lines__line--subtotal">
-          <div class="title">
-            <T id={'expense.details.subtotal'} />
-          </div>
-          <div class="amount">
-            {<FormatNumber value={expense.total_amount} />}
-          </div>
-        </div>
-        <div class="total-lines__line total-lines__line--total">
-          <div class="title">
-            <T id={'expense.details.total'} />
-          </div>
-          <div class="amount">{expense.formatted_amount}</div>
-        </div>
-      </div>
-    </div>
+    <ExpenseDetailsFooterRoot>
+      <ExpenseTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
+        <TotalLine
+          title={<T id={'expense.details.subtotal'} />}
+          value={<FormatNumber value={expense.total_amount} />}
+          borderStyle={TotalLineBorderStyle.SingleDark}
+        />
+        <TotalLine
+          title={<T id={'expense.details.total'} />}
+          value={<FormatNumber value={expense.formatted_amount} />}
+          borderStyle={TotalLineBorderStyle.DoubleDark}
+          textStyle={TotalLineTextStyle.Bold}
+        />
+      </ExpenseTotalLines>
+    </ExpenseDetailsFooterRoot>
   );
 }
+
+export const ExpenseDetailsFooterRoot = styled.div``;
+
+export const ExpenseTotalLines = styled(TotalLines)`
+  margin-left: auto;
+`;

src/containers/Drawers/ExpenseDrawer/ExpenseDrawerHeader.js

@@ -2,65 +2,69 @@ import React from 'react';
 import moment from 'moment';
 import { defaultTo } from 'lodash';
 
-import { Row, Col, DetailItem, DetailsMenu, Money } from 'components';
-import { FormattedMessage as T } from 'components';
+import {
+  CommercialDocHeader,
+  CommercialDocTopHeader,
+  Row,
+  Col,
+  DetailItem,
+  DetailsMenu,
+  Money,
+  FormattedMessage as T,
+} from 'components';
 import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
 
 /**
  * Expense drawer content.
  */
 export default function ExpenseDrawerHeader() {
-  const {
-    expense: {
-      total_amount,
-      payment_date,
-      currency_code,
-      reference_no,
-      description,
-      published_at,
-    },
-  } = useExpenseDrawerContext();
+  const { expense } = useExpenseDrawerContext();
 
   return (
-    <div className={'expense-drawer__content-header'}>
-      <DetailsMenu>
-        <DetailItem name={'amount'} label={<T id={'full_amount'} />}>
-          <h3 class="big-number">
-            <Money amount={total_amount} currency={currency_code} />
-          </h3>
-        </DetailItem>
-      </DetailsMenu>
+    <CommercialDocHeader>
+      <CommercialDocTopHeader>
+        <DetailsMenu>
+          <DetailItem name={'amount'} label={<T id={'full_amount'} />}>
+            <h3 class="big-number">
+              <Money
+                amount={expense.total_amount}
+                currency={expense.currency_code}
+              />
+            </h3>
+          </DetailItem>
+        </DetailsMenu>
+      </CommercialDocTopHeader>
 
       <Row>
         <Col xs={6}>
           <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
             <DetailItem name={'date'} label={<T id={'date'} />}>
-              {moment(payment_date).format('YYYY MMM DD')}
-            </DetailItem>
-
-            <DetailItem name={'currency'} label={<T id={'currency'} />}>
-              {currency_code}
+              {moment(expense.payment_date).format('YYYY MMM DD')}
             </DetailItem>
 
             <DetailItem name={'reference'} label={<T id={'reference_no'} />}>
-              {defaultTo(reference_no, '-')}
+              {defaultTo(expense.reference_no, '-')}
             </DetailItem>
 
             <DetailItem label={<T id={'published_at'} />}>
-              {moment(published_at).format('YYYY MMM DD')}
+              {moment(expense.published_at).format('YYYY MMM DD')}
             </DetailItem>
           </DetailsMenu>
         </Col>
 
         <Col xs={6}>
-          <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+          <DetailsMenu
+            textAlign={'right'}
+            direction={'horizantal'}
+            minLabelSize={'180px'}
+          >
             <DetailItem label={<T id={'description'} />}>
-              {defaultTo(description, '—')}
+              {defaultTo(expense.description, '—')}
             </DetailItem>
             <DetailItem label={<T id={'created_at'} />}>2021 Aug 24</DetailItem>
           </DetailsMenu>
         </Col>
       </Row>
-    </div>
+    </CommercialDocHeader>
   );
 }

src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerDetails.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { Card } from 'components';
+import { CommercialDocBox } from '../../../components';
 
 import ManualJournalDrawerActionBar from './ManualJournalDrawerActionBar';
 import ManualJournalDrawerHeader from './ManualJournalDrawerHeader';
@@ -16,16 +16,13 @@ export default function ManualJournalDrawerDetails() {
     <ManualJournalDetailsRoot>
       <ManualJournalDrawerActionBar />
 
-      <div className="journal-drawer__content">
-        <Card>
-          <ManualJournalDrawerHeader />
-          <ManualJournalDrawerTable />
-          <ManualJournalDrawerFooter />
-        </Card>
-      </div>
+      <CommercialDocBox>
+        <ManualJournalDrawerHeader />
+        <ManualJournalDrawerTable />
+        <ManualJournalDrawerFooter />
+      </CommercialDocBox>
     </ManualJournalDetailsRoot>
   );
 }
 
-
-const ManualJournalDetailsRoot = styled.div``;
+const ManualJournalDetailsRoot = styled.div``;

src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerHeader.js

@@ -6,6 +6,8 @@ import {
   DetailsMenu,
   DetailItem,
   FormattedMessage as T,
+  CommercialDocHeader,
+  CommercialDocTopHeader,
 } from 'components';
 import { useManualJournalDrawerContext } from './ManualJournalDrawerProvider';
 
@@ -25,12 +27,14 @@ export default function ManualJournalDrawerHeader() {
   } = useManualJournalDrawerContext();
 
   return (
-    <div className={'journal-drawer__content-header'}>
-      <DetailsMenu>
-        <DetailItem name={'total'} label={<T id={'total'} />}>
-          <h3 class="big-number">{formatted_amount}</h3>
-        </DetailItem>
-      </DetailsMenu>
+    <CommercialDocHeader>
+      <CommercialDocTopHeader>
+        <DetailsMenu>
+          <DetailItem name={'total'} label={<T id={'total'} />}>
+            <h3 class="big-number">{formatted_amount}</h3>
+          </DetailItem>
+        </DetailsMenu>
+      </CommercialDocTopHeader>
 
       <Row>
         <Col xs={6}>
@@ -50,16 +54,13 @@ export default function ManualJournalDrawerHeader() {
             <DetailItem name={'currency'} label={<T id={'currency'} />}>
               {currency_code}
             </DetailItem>
+
+            <DetailItem label={<T id={'description'} />}>
+              {defaultTo(description, '—')}
+            </DetailItem>
           </DetailsMenu>
         </Col>
       </Row>
-
-      <div class="journal-drawer__content-description">
-        <b class="title">
-          <T id={'manual_journal.details.description'} />
-        </b>
-        : {defaultTo(description, '—')}
-      </div>
-    </div>
+    </CommercialDocHeader>
   );
 }