From 1150cb48da65818202bf36f96683cdfe9596abd9 Mon Sep 17 00:00:00 2001
From: elforjani3 <elforjani3@gmail.com>
Date: Mon, 23 Aug 2021 19:31:02 +0200
Subject: [PATCH] feat: content & item detail.

---
 client/src/components/Details/index.js        | 17 +----
 client/src/components/DrawersContainer.js     |  4 +
 .../Alerts/Customers/CustomerDeleteAlert.js   |  6 +-
 .../Alerts/Vendors/VendorDeleteAlert.js       |  6 +-
 .../CustomersLanding/CustomersTable.js        | 16 +++-
 .../Customers/CustomersLanding/components.js  | 10 ++-
 .../ContactDetailDrawer/ContactDetail.js      | 18 +++++
 .../ContactDetailActionsBar.js                | 73 +++++++++++++++++++
 .../ContactDetailDrawerContent.js             | 20 +++++
 .../ContactDetailDrawerProvider.js            | 36 +++++++++
 .../ContactDetailDrawer/ContactDetailList.js  | 48 ++++++++++++
 .../Drawers/ContactDetailDrawer/index.js      | 30 ++++++++
 .../Drawers/ItemDetailDrawer/ItemDetail.js    | 21 ++++++
 .../ItemDetailDrawer/ItemDetailActionsBar.js  | 71 ++++++++++++++++++
 .../ItemDetailDrawerContent.js                | 20 +++++
 .../ItemDetailDrawerProvider.js               | 32 ++++++++
 .../ItemDetailDrawer/ItemDetailList.js        | 49 +++++++++++++
 .../Drawers/ItemDetailDrawer/index.js         | 29 ++++++++
 client/src/containers/Items/ItemsDataTable.js | 11 +++
 client/src/containers/Items/components.js     |  5 +-
 .../Vendors/VendorsLanding/VendorsTable.js    | 16 +++-
 .../Vendors/VendorsLanding/components.js      | 10 ++-
 client/src/lang/en/index.json                 |  3 +-
 client/src/style/components/Details.scss      | 16 ++--
 .../Drawers/ViewDetail/ViewDetail.scss        |  4 +
 25 files changed, 535 insertions(+), 36 deletions(-)
 create mode 100644 client/src/containers/Drawers/ContactDetailDrawer/ContactDetail.js
 create mode 100644 client/src/containers/Drawers/ContactDetailDrawer/ContactDetailActionsBar.js
 create mode 100644 client/src/containers/Drawers/ContactDetailDrawer/ContactDetailDrawerContent.js
 create mode 100644 client/src/containers/Drawers/ContactDetailDrawer/ContactDetailDrawerProvider.js
 create mode 100644 client/src/containers/Drawers/ContactDetailDrawer/ContactDetailList.js
 create mode 100644 client/src/containers/Drawers/ContactDetailDrawer/index.js
 create mode 100644 client/src/containers/Drawers/ItemDetailDrawer/ItemDetail.js
 create mode 100644 client/src/containers/Drawers/ItemDetailDrawer/ItemDetailActionsBar.js
 create mode 100644 client/src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerContent.js
 create mode 100644 client/src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerProvider.js
 create mode 100644 client/src/containers/Drawers/ItemDetailDrawer/ItemDetailList.js
 create mode 100644 client/src/containers/Drawers/ItemDetailDrawer/index.js

diff --git a/client/src/components/Details/index.js b/client/src/components/Details/index.js
index c96252136..e427336ee 100644
--- a/client/src/components/Details/index.js
+++ b/client/src/components/Details/index.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import classNames from 'classnames';
-import { Col, Row } from 'components';
 
 import 'style/components/Details.scss';
 
@@ -22,7 +21,7 @@ export function DetailsMenu({ children, vertical = false }) {
 /**
  * Detail item vertical .
  */
-export function DetailItemVER({ label, children }) {
+export function DetailItem({ label, children }) {
   return (
     <div class="detail-item">
       <div class="detail-item__label">{label}</div>
@@ -30,17 +29,3 @@ export function DetailItemVER({ label, children }) {
     </div>
   );
 }
-
-/**
- * Detail item horizontal .
- */
-export function DetailItemHOR({ label, children }) {
-  return (
-    <Row>
-      <Col className="label" xs={3}>
-        {label}
-      </Col>
-      <Col xs={3}>{children}</Col>
-    </Row>
-  );
-}
diff --git a/client/src/components/DrawersContainer.js b/client/src/components/DrawersContainer.js
index acc556105..83af86bcd 100644
--- a/client/src/components/DrawersContainer.js
+++ b/client/src/components/DrawersContainer.js
@@ -12,6 +12,8 @@ import ReceiptDetailDrawer from 'containers/Drawers/ReceiptDetailDrawer';
 import PaymentReceiveDetailDrawer from 'containers/Drawers/PaymentReceiveDetailDrawer';
 import PaymentMadeDetailDrawer from 'containers/Drawers/PaymentMadeDetailDrawer';
 import EstimateDetailDrawer from '../containers/Drawers/EstimateDetailDrawer';
+import ItemDetailDrawer from '../containers/Drawers/ItemDetailDrawer';
+import ContactDetailDrawer from '../containers/Drawers/ContactDetailDrawer';
 
 export default function DrawersContainer() {
   return (
@@ -29,6 +31,8 @@ export default function DrawersContainer() {
       <ReceiptDetailDrawer name={'receipt-detail-drawer'} />
       <PaymentReceiveDetailDrawer name={'payment-receive-detail-drawer'} />
       <PaymentMadeDetailDrawer name={'payment-made-detail-drawer'} />
+      <ItemDetailDrawer name={'item-detail-drawer'} />
+      <ContactDetailDrawer name={'contact-detail-drawer'} />
     </div>
   );
 }
diff --git a/client/src/containers/Alerts/Customers/CustomerDeleteAlert.js b/client/src/containers/Alerts/Customers/CustomerDeleteAlert.js
index 2b826a9d7..3be974cd6 100644
--- a/client/src/containers/Alerts/Customers/CustomerDeleteAlert.js
+++ b/client/src/containers/Alerts/Customers/CustomerDeleteAlert.js
@@ -20,7 +20,7 @@ function CustomerDeleteAlert({
 
   // #withAlertStoreConnect
   isOpen,
-  payload: { customerId },
+  payload: { contactId },
 
   // #withAlertActions
   closeAlert,
@@ -38,7 +38,7 @@ function CustomerDeleteAlert({
 
   // handle confirm delete customer.
   const handleConfirmDeleteCustomer = useCallback(() => {
-    deleteCustomerMutate(customerId)
+    deleteCustomerMutate(contactId)
       .then(() => {
         AppToaster.show({
           message: intl.get('the_customer_has_been_deleted_successfully'),
@@ -51,7 +51,7 @@ function CustomerDeleteAlert({
       .finally(() => {
         closeAlert(name);
       });
-  }, [deleteCustomerMutate, customerId, closeAlert, name]);
+  }, [deleteCustomerMutate, contactId, closeAlert, name]);
 
   return (
     <Alert
diff --git a/client/src/containers/Alerts/Vendors/VendorDeleteAlert.js b/client/src/containers/Alerts/Vendors/VendorDeleteAlert.js
index fa8e3098f..b087d8985 100644
--- a/client/src/containers/Alerts/Vendors/VendorDeleteAlert.js
+++ b/client/src/containers/Alerts/Vendors/VendorDeleteAlert.js
@@ -20,7 +20,7 @@ function VendorDeleteAlert({
 
   // #withAlertStoreConnect
   isOpen,
-  payload: { vendorId },
+  payload: { contactId },
 
   // #withAlertActions
   closeAlert,
@@ -35,7 +35,7 @@ function VendorDeleteAlert({
 
   // Handle confirm delete vendor.
   const handleConfirmDeleteVendor = useCallback(() => {
-    deleteVendorMutate(vendorId)
+    deleteVendorMutate(contactId)
       .then(() => {
         AppToaster.show({
           message: intl.get('the_vendor_has_been_deleted_successfully'),
@@ -54,7 +54,7 @@ function VendorDeleteAlert({
       .finally(() => {
         closeAlert(name);
       });
-  }, [deleteVendorMutate, name, closeAlert, vendorId]);
+  }, [deleteVendorMutate, name, closeAlert, contactId]);
 
   return (
     <Alert
diff --git a/client/src/containers/Customers/CustomersLanding/CustomersTable.js b/client/src/containers/Customers/CustomersLanding/CustomersTable.js
index cef76a13a..741570929 100644
--- a/client/src/containers/Customers/CustomersLanding/CustomersTable.js
+++ b/client/src/containers/Customers/CustomersLanding/CustomersTable.js
@@ -11,6 +11,7 @@ import withCustomers from './withCustomers';
 import withCustomersActions from './withCustomersActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDialogActions from 'containers/Dialog/withDialogActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
 import { useCustomersListContext } from './CustomersListProvider';
 import { ActionsMenu, useCustomersTableColumns } from './components';
@@ -29,6 +30,10 @@ function CustomersTable({
 
   // #withAlerts
   openAlert,
+
+  // #withDrawerActions
+  openDrawer,
+
   // #withDialogActions
   openDialog,
 }) {
@@ -59,8 +64,8 @@ function CustomersTable({
   );
 
   // Handles the customer delete action.
-  const handleCustomerDelete = (customer) => {
-    openAlert('customer-delete', { customerId: customer.id });
+  const handleCustomerDelete = ({ id }) => {
+    openAlert('customer-delete', { contactId: id });
   };
 
   // Handle the customer edit action.
@@ -85,6 +90,11 @@ function CustomersTable({
     openAlert('contact-activate', { contactId: id, service: contact_service });
   };
 
+  // Handle view detail contact.
+  const handleViewDetailCustomer = ({ id }) => {
+    openDrawer('contact-detail-drawer', { contactId: id });
+  };
+
   if (isEmptyStatus) {
     return <CustomersEmptyStatus />;
   }
@@ -117,6 +127,7 @@ function CustomersTable({
         onDuplicate: handleContactDuplicate,
         onInactivate: handleInactiveCustomer,
         onActivate: handleActivateCustomer,
+        onViewDetails: handleViewDetailCustomer,
       }}
       ContextMenu={ActionsMenu}
     />
@@ -127,5 +138,6 @@ export default compose(
   withAlertsActions,
   withDialogActions,
   withCustomersActions,
+  withDrawerActions,
   withCustomers(({ customersTableState }) => ({ customersTableState })),
 )(CustomersTable);
diff --git a/client/src/containers/Customers/CustomersLanding/components.js b/client/src/containers/Customers/CustomersLanding/components.js
index 2c29c2112..8b23d3bbd 100644
--- a/client/src/containers/Customers/CustomersLanding/components.js
+++ b/client/src/containers/Customers/CustomersLanding/components.js
@@ -18,13 +18,21 @@ import intl from 'react-intl-universal';
  */
 export function ActionsMenu({
   row: { original },
-  payload: { onEdit, onDelete, onDuplicate, onInactivate, onActivate },
+  payload: {
+    onEdit,
+    onDelete,
+    onDuplicate,
+    onInactivate,
+    onActivate,
+    onViewDetails,
+  },
 }) {
   return (
     <Menu>
       <MenuItem
         icon={<Icon icon="reader-18" />}
         text={intl.get('view_details')}
+        onClick={safeCallback(onViewDetails, original)}
       />
       <MenuDivider />
       <MenuItem
diff --git a/client/src/containers/Drawers/ContactDetailDrawer/ContactDetail.js b/client/src/containers/Drawers/ContactDetailDrawer/ContactDetail.js
new file mode 100644
index 000000000..8bee3ef31
--- /dev/null
+++ b/client/src/containers/Drawers/ContactDetailDrawer/ContactDetail.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import ContactDetailActionsBar from './ContactDetailActionsBar';
+import ContactDetailList from './ContactDetailList';
+import { Card } from 'components';
+
+/**
+ * contact detail.
+ */
+export default function ContactDetail() {
+  return (
+    <div className="view-detail-drawer">
+      <ContactDetailActionsBar />
+      <Card>
+        <ContactDetailList />
+      </Card>
+    </div>
+  );
+}
diff --git a/client/src/containers/Drawers/ContactDetailDrawer/ContactDetailActionsBar.js b/client/src/containers/Drawers/ContactDetailDrawer/ContactDetailActionsBar.js
new file mode 100644
index 000000000..7c4feb564
--- /dev/null
+++ b/client/src/containers/Drawers/ContactDetailDrawer/ContactDetailActionsBar.js
@@ -0,0 +1,73 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { useHistory } from 'react-router-dom';
+import {
+  Button,
+  NavbarGroup,
+  Classes,
+  NavbarDivider,
+  Intent,
+} from '@blueprintjs/core';
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+
+import { useContactDetailDrawerContext } from './ContactDetailDrawerProvider';
+
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { Icon, FormattedMessage as T } from 'components';
+
+import { safeCallback, compose } from 'utils';
+
+function ContactDetailActionsBar({
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const { contact, contactId } = useContactDetailDrawerContext();
+  const history = useHistory();
+
+  // Handle edit contact.
+  const onEditContact = () => {
+    return contactId
+      ? (history.push(`/${contact?.contact_service}s/${contactId}/edit`),
+        closeDrawer('contact-detail-drawer'))
+      : null;
+  };
+
+  // Handle delete contact.
+  const onDeleteContact = () => {
+    return contactId
+      ? (openAlert(`${contact?.contact_service}-delete`, { contactId }),
+        closeDrawer('contact-detail-drawer'))
+      : null;
+  };
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('edit_contact', { name: contact?.contact_service })}
+          onClick={safeCallback(onEditContact)}
+        />
+        <NavbarDivider />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'trash-16'} iconSize={16} />}
+          text={<T id={'delete'} />}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDeleteContact)}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+export default compose(
+  withDrawerActions,
+  withAlertsActions,
+)(ContactDetailActionsBar);
diff --git a/client/src/containers/Drawers/ContactDetailDrawer/ContactDetailDrawerContent.js b/client/src/containers/Drawers/ContactDetailDrawer/ContactDetailDrawerContent.js
new file mode 100644
index 000000000..04d44cff7
--- /dev/null
+++ b/client/src/containers/Drawers/ContactDetailDrawer/ContactDetailDrawerContent.js
@@ -0,0 +1,20 @@
+import React from 'react';
+
+import ContactDetail from './ContactDetail';
+import { ContactDetailDrawerProvider } from './ContactDetailDrawerProvider';
+
+import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
+
+/**
+ * Contact detail drawer content.
+ */
+export default function ContactDetailDrawerContent({
+  // #ownProp
+  contact,
+}) {
+  return (
+    <ContactDetailDrawerProvider contactId={contact}>
+      <ContactDetail />
+    </ContactDetailDrawerProvider>
+  );
+}
diff --git a/client/src/containers/Drawers/ContactDetailDrawer/ContactDetailDrawerProvider.js b/client/src/containers/Drawers/ContactDetailDrawer/ContactDetailDrawerProvider.js
new file mode 100644
index 000000000..250ec40e1
--- /dev/null
+++ b/client/src/containers/Drawers/ContactDetailDrawer/ContactDetailDrawerProvider.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import { DrawerHeaderContent, DashboardInsider } from 'components';
+import { useContact } from 'hooks/query';
+
+const ContactDetailDrawerContext = React.createContext();
+
+/**
+ * Contact detail provider.
+ */
+function ContactDetailDrawerProvider({ contactId, ...props }) {
+  // Handle fetch contact duplicate details.
+  const { data: contact, isLoading: isContactLoading } = useContact(contactId, {
+    enabled: !!contactId,
+  });
+  //provider.
+  const provider = {
+    contact,
+    contactId,
+  };
+
+  return (
+    <DashboardInsider loading={isContactLoading}>
+      <DrawerHeaderContent
+        name="contact-detail-drawer"
+        title={contact?.display_name}
+      />
+
+      <ContactDetailDrawerContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const useContactDetailDrawerContext = () =>
+  React.useContext(ContactDetailDrawerContext);
+
+export { ContactDetailDrawerProvider, useContactDetailDrawerContext };
diff --git a/client/src/containers/Drawers/ContactDetailDrawer/ContactDetailList.js b/client/src/containers/Drawers/ContactDetailDrawer/ContactDetailList.js
new file mode 100644
index 000000000..f8c868990
--- /dev/null
+++ b/client/src/containers/Drawers/ContactDetailDrawer/ContactDetailList.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import { Money } from 'components';
+import intl from 'react-intl-universal';
+import { useContactDetailDrawerContext } from './ContactDetailDrawerProvider';
+import { DetailItem } from '../../../components/Details';
+
+export default function ContactDetailList({}) {
+  const { contact } = useContactDetailDrawerContext();
+
+  return (
+    <div className="details-menu">
+      <div className="details-menu--vertical">
+        <DetailItem
+          label={intl.get('display_name')}
+          children={contact.display_name}
+        />
+        <DetailItem
+          label={intl.get('balance')}
+          children={
+            <Money
+              amount={contact?.balance}
+              currency={contact?.currency_code}
+            />
+          }
+        />
+      </div>
+      <div className="details-menu--horizontal">
+        <DetailItem
+          label={intl.get('closing_balance')}
+          children={
+            <Money
+              amount={contact.closing_balance}
+              currency={contact?.currency_code}
+            />
+          }
+        />
+        <DetailItem
+          label={intl.get('contact_type')}
+          children={contact.contact_type}
+        />
+        <DetailItem
+          label={intl.get('email')}
+          children={contact.email ? contact.email : '--'}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/containers/Drawers/ContactDetailDrawer/index.js b/client/src/containers/Drawers/ContactDetailDrawer/index.js
new file mode 100644
index 000000000..9a7fd2c9a
--- /dev/null
+++ b/client/src/containers/Drawers/ContactDetailDrawer/index.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import { Drawer, DrawerSuspense } from 'components';
+import withDrawers from 'containers/Drawer/withDrawers';
+
+import { compose } from 'utils';
+
+const ContactDetailDrawerContent = React.lazy(() =>
+  import('./ContactDetailDrawerContent'),
+);
+
+/**
+ * Contact detail drawer.
+ */
+function ContactDetailDrawer({
+  name,
+
+  // #withDrawer
+  isOpen,
+  payload: { contactId },
+}) {
+  return (
+    <Drawer isOpen={isOpen} name={name} size={'750px'}>
+      <DrawerSuspense>
+        <ContactDetailDrawerContent contact={contactId} />
+      </DrawerSuspense>
+    </Drawer>
+  );
+}
+
+export default compose(withDrawers())(ContactDetailDrawer);
diff --git a/client/src/containers/Drawers/ItemDetailDrawer/ItemDetail.js b/client/src/containers/Drawers/ItemDetailDrawer/ItemDetail.js
new file mode 100644
index 000000000..b30f45100
--- /dev/null
+++ b/client/src/containers/Drawers/ItemDetailDrawer/ItemDetail.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import { useItemDetailDrawerContext } from './ItemDetailDrawerProvider';
+import ItemDetailActionsBar from './ItemDetailActionsBar';
+import ItemDetailList from './ItemDetailList';
+import { Card } from 'components';
+
+/**
+ * Item detail.
+ */
+export default function ItemDetail() {
+  const { itemId, item } = useItemDetailDrawerContext();
+
+  return (
+    <div className="view-detail-drawer">
+      <ItemDetailActionsBar itemId={itemId} />
+      <Card>
+        <ItemDetailList item={item} />
+      </Card>
+    </div>
+  );
+}
diff --git a/client/src/containers/Drawers/ItemDetailDrawer/ItemDetailActionsBar.js b/client/src/containers/Drawers/ItemDetailDrawer/ItemDetailActionsBar.js
new file mode 100644
index 000000000..2aa23f2b4
--- /dev/null
+++ b/client/src/containers/Drawers/ItemDetailDrawer/ItemDetailActionsBar.js
@@ -0,0 +1,71 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import {
+  Button,
+  NavbarGroup,
+  Classes,
+  NavbarDivider,
+  Intent,
+} from '@blueprintjs/core';
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { Icon, FormattedMessage as T } from 'components';
+
+import { safeCallback, compose } from 'utils';
+
+function ItemDetailActionsBar({
+  itemId,
+
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const history = useHistory();
+
+  // Handle edit item.
+  const onEditItem = () => {
+    return itemId
+      ? (history.push(`/items/${itemId}/edit`),
+        closeDrawer('item-detail-drawer'))
+      : null;
+  };
+
+  // Handle delete item.
+  const onDeleteItem = () => {
+    return itemId
+      ? (openAlert('item-delete', { itemId }),
+        closeDrawer('item-detail-drawer'))
+      : null;
+  };
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="pen-18" />}
+          text={<T id={'edit_item'} />}
+          onClick={safeCallback(onEditItem)}
+        />
+        <NavbarDivider />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'trash-16'} iconSize={16} />}
+          text={<T id={'delete'} />}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDeleteItem)}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+export default compose(
+  withDrawerActions,
+  withAlertsActions,
+)(ItemDetailActionsBar);
diff --git a/client/src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerContent.js b/client/src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerContent.js
new file mode 100644
index 000000000..91531126b
--- /dev/null
+++ b/client/src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerContent.js
@@ -0,0 +1,20 @@
+import React from 'react';
+
+import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
+
+import ItemDetail from './ItemDetail';
+import { ItemDetailDrawerProvider } from './ItemDetailDrawerProvider';
+
+/**
+ * Item detail drawer content.
+ */
+export default function ItemDetailDrawerContent({
+  // #ownProp
+  item,
+}) {
+  return (
+    <ItemDetailDrawerProvider itemId={item}>
+      <ItemDetail />
+    </ItemDetailDrawerProvider>
+  );
+}
diff --git a/client/src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerProvider.js b/client/src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerProvider.js
new file mode 100644
index 000000000..e05796f04
--- /dev/null
+++ b/client/src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerProvider.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import { DrawerHeaderContent, DashboardInsider } from 'components';
+import { useItem } from 'hooks/query';
+
+const ItemDetailDrawerContext = React.createContext();
+
+/**
+ * Item detail provider
+ */
+function ItemDetailDrawerProvider({ itemId, ...props }) {
+  // Fetches the given item detail.
+  const { isLoading: isItemLoading, data: item } = useItem(itemId, {
+    enabled: !!itemId,
+  });
+
+  //provider.
+  const provider = {
+    item,
+    itemId,
+  };
+
+  return (
+    <DashboardInsider loading={isItemLoading}>
+      <DrawerHeaderContent name="item-detail-drawer" title={item?.name} />
+      <ItemDetailDrawerContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+const useItemDetailDrawerContext = () =>
+  React.useContext(ItemDetailDrawerContext);
+
+export { ItemDetailDrawerProvider, useItemDetailDrawerContext };
diff --git a/client/src/containers/Drawers/ItemDetailDrawer/ItemDetailList.js b/client/src/containers/Drawers/ItemDetailDrawer/ItemDetailList.js
new file mode 100644
index 000000000..0e8e12493
--- /dev/null
+++ b/client/src/containers/Drawers/ItemDetailDrawer/ItemDetailList.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+
+import { DetailItem } from '../../../components/Details';
+
+export default function ItemDetailList({
+  item: {
+    name,
+    code,
+    type,
+    category,
+    sell_price_formatted,
+    cost_price_formatted,
+    cost_account,
+    sell_account,
+  },
+}) {
+  return (
+    <div className="details-menu">
+      <div className="details-menu--vertical">
+        <DetailItem label={intl.get('item_name')} children={name} />
+        <DetailItem label={intl.get('item_code')} children={code} />
+        <DetailItem
+          label={intl.get('sell_price')}
+          children={sell_price_formatted}
+        />
+        <DetailItem
+          label={intl.get('cost_price')}
+          children={cost_price_formatted}
+        />
+      </div>
+      <div className="details-menu--horizontal">
+        <DetailItem label={intl.get('item_type')} children={type} />
+        <DetailItem
+          label={intl.get('category_name')}
+          children={category?.name ? category?.name : '--'}
+        />
+        <DetailItem
+          label={intl.get('cost_account_id')}
+          children={cost_account?.name}
+        />
+        <DetailItem
+          label={intl.get('sell_account_id')}
+          children={sell_account?.name}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/containers/Drawers/ItemDetailDrawer/index.js b/client/src/containers/Drawers/ItemDetailDrawer/index.js
new file mode 100644
index 000000000..0a52423bb
--- /dev/null
+++ b/client/src/containers/Drawers/ItemDetailDrawer/index.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Drawer, DrawerSuspense } from 'components';
+import withDrawers from 'containers/Drawer/withDrawers';
+
+import { compose } from 'utils';
+
+const ItemDetailDrawerContent = React.lazy(() =>
+  import('./ItemDetailDrawerContent'),
+);
+
+/**
+ * Item Detail drawer.
+ */
+function ItemDetailDrawer({
+  name,
+
+  // #withDrawer
+  isOpen,
+  payload: { itemId },
+}) {
+  return (
+    <Drawer isOpen={isOpen} name={name} size={'750px'}>
+      <DrawerSuspense>
+        <ItemDetailDrawerContent item={itemId} />
+      </DrawerSuspense>
+    </Drawer>
+  );
+}
+export default compose(withDrawers())(ItemDetailDrawer);
diff --git a/client/src/containers/Items/ItemsDataTable.js b/client/src/containers/Items/ItemsDataTable.js
index f352bcc34..62847e127 100644
--- a/client/src/containers/Items/ItemsDataTable.js
+++ b/client/src/containers/Items/ItemsDataTable.js
@@ -12,6 +12,7 @@ import withItems from 'containers/Items/withItems';
 import withItemsActions from 'containers/Items/withItemsActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDialogActions from 'containers/Dialog/withDialogActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
 import { useItemsListContext } from './ItemsListProvider';
 import { useItemsTableColumns, ItemsActionMenuList } from './components';
@@ -30,6 +31,9 @@ function ItemsDataTable({
   // #withAlertsActions
   openAlert,
 
+  // #withDrawerActions
+  openDrawer,
+
   // #withItems
   itemsTableState,
 
@@ -93,6 +97,11 @@ function ItemsDataTable({
     history.push(`/items/new?duplicate=${id}`, { action: id });
   };
 
+  // Handle view detail item.
+  const handleViewDetailItem = ({ id }) => {
+    openDrawer('item-detail-drawer', { itemId: id });
+  };
+
   // Cannot continue in case the items has empty status.
   if (isEmptyStatus) {
     return <ItemsEmptyStatus />;
@@ -129,6 +138,7 @@ function ItemsDataTable({
         onActivateItem: handleActivateItem,
         onMakeAdjustment: handleMakeAdjustment,
         onDuplicate: handleDuplicate,
+        onViewDetails: handleViewDetailItem,
       }}
       noResults={<T id={'there_is_no_items_in_the_table_yet'} />}
       {...tableProps}
@@ -139,6 +149,7 @@ function ItemsDataTable({
 export default compose(
   withItemsActions,
   withAlertsActions,
+  withDrawerActions,
   withDialogActions,
   withItems(({ itemsTableState }) => ({ itemsTableState })),
 )(ItemsDataTable);
diff --git a/client/src/containers/Items/components.js b/client/src/containers/Items/components.js
index 361f23342..37b4df40b 100644
--- a/client/src/containers/Items/components.js
+++ b/client/src/containers/Items/components.js
@@ -10,7 +10,7 @@ import {
   Popover,
 } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
-import {  FormattedMessage as T } from 'components';
+import { FormattedMessage as T } from 'components';
 import { isNumber } from 'lodash';
 import { Icon, Money, If } from 'components';
 import { isBlank, safeCallback } from 'utils';
@@ -80,14 +80,15 @@ export function ItemsActionMenuList({
     onMakeAdjustment,
     onDeleteItem,
     onDuplicate,
+    onViewDetails,
   },
 }) {
-  
   return (
     <Menu>
       <MenuItem
         icon={<Icon icon="reader-18" />}
         text={<T id={'view_details'} />}
+        onClick={safeCallback(onViewDetails, original)}
       />
       <MenuDivider />
       <MenuItem
diff --git a/client/src/containers/Vendors/VendorsLanding/VendorsTable.js b/client/src/containers/Vendors/VendorsLanding/VendorsTable.js
index d11299213..ed9b6e8dd 100644
--- a/client/src/containers/Vendors/VendorsLanding/VendorsTable.js
+++ b/client/src/containers/Vendors/VendorsLanding/VendorsTable.js
@@ -12,6 +12,7 @@ import withVendorsActions from './withVendorsActions';
 import withVendors from './withVendors';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDialogActions from 'containers/Dialog/withDialogActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
 import { compose } from 'utils';
 import { ActionsMenu, useVendorsTableColumns } from './components';
@@ -28,6 +29,10 @@ function VendorsTable({
 
   // #withAlertsActions
   openAlert,
+
+  // #withDrawerActions
+  openDrawer,
+
   // #withDialogActions
   openDialog,
 }) {
@@ -66,7 +71,7 @@ function VendorsTable({
 
   // Handle click delete vendor.
   const handleDeleteVendor = ({ id }) => {
-    openAlert('vendor-delete', { vendorId: id });
+    openAlert('vendor-delete', { contactId: id });
   };
 
   // Handle contact duplicate .
@@ -75,6 +80,12 @@ function VendorsTable({
       contactId: id,
     });
   };
+
+  // Handle view detail item.
+  const handleViewDetailVendor = ({ id }) => {
+    openDrawer('contact-detail-drawer', { contactId: id });
+  };
+  
   // Handle fetch data once the page index, size or sort by of the table change.
   const handleFetchData = React.useCallback(
     ({ pageSize, pageIndex, sortBy }) => {
@@ -119,6 +130,7 @@ function VendorsTable({
         onDuplicate: handleContactDuplicate,
         onInactivate: handleInactiveVendor,
         onActivate: handleActivateVendor,
+        onViewDetails: handleViewDetailVendor,
       }}
     />
   );
@@ -128,5 +140,7 @@ export default compose(
   withVendorsActions,
   withAlertsActions,
   withDialogActions,
+  withDrawerActions,
+
   withVendors(({ vendorsTableState }) => ({ vendorsTableState })),
 )(VendorsTable);
diff --git a/client/src/containers/Vendors/VendorsLanding/components.js b/client/src/containers/Vendors/VendorsLanding/components.js
index d7f78824f..30646f94b 100644
--- a/client/src/containers/Vendors/VendorsLanding/components.js
+++ b/client/src/containers/Vendors/VendorsLanding/components.js
@@ -17,13 +17,21 @@ import { safeCallback, firstLettersArgs } from 'utils';
  */
 export function ActionsMenu({
   row: { original },
-  payload: { onEdit, onDelete, onDuplicate, onInactivate, onActivate },
+  payload: {
+    onEdit,
+    onDelete,
+    onDuplicate,
+    onInactivate,
+    onActivate,
+    onViewDetails,
+  },
 }) {
   return (
     <Menu>
       <MenuItem
         icon={<Icon icon="reader-18" />}
         text={intl.get('view_details')}
+        onClick={safeCallback(onViewDetails, original)}
       />
       <MenuDivider />
       <MenuItem
diff --git a/client/src/lang/en/index.json b/client/src/lang/en/index.json
index 6b176f026..0216ab24f 100644
--- a/client/src/lang/en/index.json
+++ b/client/src/lang/en/index.json
@@ -1208,5 +1208,6 @@
   "pdf_preview.preview.button": "Preview",
   "invoice_preview.dialog.title": "Invoice PDF Preview",
   "estimate_preview.dialog.title":"Estimate PDF Preview",
-  "receipt_preview.dialog.title":"Receipt PDF Preview"
+  "receipt_preview.dialog.title":"Receipt PDF Preview",
+  "edit_contact":"Edit {name}"
 }
\ No newline at end of file
diff --git a/client/src/style/components/Details.scss b/client/src/style/components/Details.scss
index bd91be366..25fcf9f53 100644
--- a/client/src/style/components/Details.scss
+++ b/client/src/style/components/Details.scss
@@ -1,6 +1,5 @@
 .details-menu {
   margin: 15px;
-  border: 1px solid #d2dce2;
 
   &--vertical {
     display: flex;
@@ -8,7 +7,7 @@
     justify-content: flex-start;
     padding: 10px;
     margin-bottom: 15px;
-    // border-bottom: 1px solid #d2dce2;
+    border-bottom: 1px solid #d2dce2;
   }
 
   &--horizontal {
@@ -17,9 +16,14 @@
     line-height: 30px;
     padding: 10px;
 
-    .label {
-      color: #666666;
-      font-weight: 500;
+    .detail-item {
+      display: flex;
+      align-items: center;
+      &__label {
+        flex-basis: 25%;
+        color: #666666;
+        font-weight: 500;
+      }
     }
   }
 
@@ -27,7 +31,7 @@
   }
 
   .detail-item {
-    flex: 1;
+    flex: 0 0 25%;
     line-height: 1.3rem;
     &__label {
       color: #666666;
diff --git a/client/src/style/components/Drawers/ViewDetail/ViewDetail.scss b/client/src/style/components/Drawers/ViewDetail/ViewDetail.scss
index 4c92d13d1..aa5acbfc7 100644
--- a/client/src/style/components/Drawers/ViewDetail/ViewDetail.scss
+++ b/client/src/style/components/Drawers/ViewDetail/ViewDetail.scss
@@ -61,4 +61,8 @@
       }
     }
   }
+
+  .card {
+    margin: 15px;
+  }
 }