feat: optimize expense and manual journal details status.

src/containers/Accounting/JournalsLanding/components.js

@@ -101,13 +101,13 @@ export const StatusAccessor = (row) => {
   return (
     <Choose>
       <Choose.When condition={!!row.is_published}>
-        <Tag minimal={true}>
+        <Tag minimal={true} round={true}>
           <T id={'published'} />
         </Tag>
       </Choose.When>
 
       <Choose.Otherwise>
-        <Tag minimal={true} intent={Intent.WARNING}>
+        <Tag minimal={true} intent={Intent.WARNING} round={true}>
           <T id={'draft'} />
         </Tag>
       </Choose.Otherwise>

src/containers/Drawers/ExpenseDrawer/ExpenseDrawerHeader.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import moment from 'moment';
 import { defaultTo } from 'lodash';
+import styled from 'styled-components';
 
 import {
   CommercialDocHeader,
@@ -13,6 +14,7 @@ import {
   FormattedMessage as T,
 } from 'components';
 import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
+import { ExpenseDetailsStatus } from './components';
 
 /**
  * Expense drawer content.
@@ -32,6 +34,10 @@ export default function ExpenseDrawerHeader() {
               />
             </h3>
           </DetailItem>
+
+          <StatusDetailItem>
+            <ExpenseDetailsStatus expense={expense} />
+          </StatusDetailItem>
         </DetailsMenu>
       </CommercialDocTopHeader>
 
@@ -68,3 +74,10 @@ export default function ExpenseDrawerHeader() {
     </CommercialDocHeader>
   );
 }
+
+const StatusDetailItem = styled(DetailItem)`
+  width: 50%;
+  text-align: right;
+  position: relative;
+  top: -5px;
+`;

src/containers/Drawers/ExpenseDrawer/components.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Tag, Intent } from '@blueprintjs/core';
+
+import { T } from 'components';
+
+/**
+ * Expense details status.
+ * @returns {React.JSX}
+ */
+export function ExpenseDetailsStatus({ expense }) {
+  return expense.is_published ? (
+    <Tag round={true} minimal={true}>
+      <T id={'published'} />
+    </Tag>
+  ) : (
+    <Tag round={true} intent={Intent.WARNING}>
+      <T id={'draft'} />
+    </Tag>
+  );
+}

src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerHeader.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import { defaultTo } from 'lodash';
+import styled from 'styled-components';
+
 import {
   Row,
   Col,
@@ -9,30 +11,26 @@ import {
   CommercialDocHeader,
   CommercialDocTopHeader,
 } from 'components';
+import { ManualJournalDetailsStatus } from './utils';
 import { useManualJournalDrawerContext } from './ManualJournalDrawerProvider';
 
 /**
  * Manual journal details header.
  */
 export default function ManualJournalDrawerHeader() {
-  const {
+  const { manualJournal } = useManualJournalDrawerContext();
-    manualJournal: {
-      formatted_amount,
-      journal_type,
-      journal_number,
-      reference,
-      currency_code,
-      description,
-    },
-  } = useManualJournalDrawerContext();
 
   return (
     <CommercialDocHeader>
       <CommercialDocTopHeader>
         <DetailsMenu>
           <DetailItem name={'total'} label={<T id={'total'} />}>
-            <h3 class="big-number">{formatted_amount}</h3>
+            <h3 class="big-number">{manualJournal.formatted_amount}</h3>
           </DetailItem>
+
+          <StatusDetailItem>
+            <ManualJournalDetailsStatus manualJournal={manualJournal} />
+          </StatusDetailItem>
         </DetailsMenu>
       </CommercialDocTopHeader>
 
@@ -40,23 +38,23 @@ export default function ManualJournalDrawerHeader() {
         <Col xs={6}>
           <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
             <DetailItem name={'journal-type'} label={<T id={'journal_type'} />}>
-              {journal_type}
+              {manualJournal.journal_type}
             </DetailItem>
 
             <DetailItem name={'journal-number'} label={<T id={'journal_no'} />}>
-              {journal_number}
+              {manualJournal.journal_number}
             </DetailItem>
 
             <DetailItem name={'reference-no'} label={<T id={'reference_no'} />}>
-              {defaultTo(reference, '-')}
+              {defaultTo(manualJournal.reference, '-')}
             </DetailItem>
 
             <DetailItem name={'currency'} label={<T id={'currency'} />}>
-              {currency_code}
+              {manualJournal.currency_code}
             </DetailItem>
 
             <DetailItem label={<T id={'description'} />}>
-              {defaultTo(description, '—')}
+              {defaultTo(manualJournal.description, '—')}
             </DetailItem>
           </DetailsMenu>
         </Col>
@@ -64,3 +62,10 @@ export default function ManualJournalDrawerHeader() {
     </CommercialDocHeader>
   );
 }
+
+const StatusDetailItem = styled(DetailItem)`
+  width: 50%;
+  text-align: right;
+  position: relative;
+  top: -5px;
+`;

src/containers/Drawers/ManualJournalDrawer/utils.js

@@ -1,8 +1,8 @@
 import intl from 'react-intl-universal';
 import React from 'react';
-import { Classes, Tooltip, Position } from '@blueprintjs/core';
+import { Tag, Intent, Classes, Tooltip, Position } from '@blueprintjs/core';
 
-import { FormatNumberCell, If, Icon } from '../../../components';
+import { T, Choose, FormatNumberCell, If, Icon } from '../../../components';
 
 /**
  * Note column accessor.
@@ -22,6 +22,27 @@ export function NoteAccessor(row) {
   );
 }
 
+/**
+ * Publish column accessor.
+ */
+export function ManualJournalDetailsStatus({ manualJournal }) {
+  return (
+    <Choose>
+      <Choose.When condition={!!manualJournal.is_published}>
+        <Tag minimal={true} round={true}>
+          <T id={'published'} />
+        </Tag>
+      </Choose.When>
+
+      <Choose.Otherwise>
+        <Tag intent={Intent.WARNING} round={true}>
+          <T id={'draft'} />
+        </Tag>
+      </Choose.Otherwise>
+    </Choose>
+  );
+}
+
 /**
  * Retrieve read-only manual journal entries columns.
  */