feat: optimize expense and manual journal details status.

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>
+  );
+}