fix: logo style.

fix: page forms style.
feat: auto-fill items entries from item details.
fix: hiding dashboard copyright bar.

client/src/components/Dashboard/Dashboard.js

@@ -51,6 +51,6 @@ function Dashboard({
       <DrawersContainer />
     </DashboardLoadingIndicator>
   );
-}
+} 
 
 export default compose(withSettingsActions)(Dashboard);

client/src/components/Dashboard/DashboardContentRoute.js

@@ -1,7 +1,6 @@
-import React, { useEffect, Suspense } from 'react';
+import React from 'react';
 import { Route, Switch } from 'react-router-dom';
 import routes from 'routes/dashboard';
-
 import DashboardPage from './DashboardPage';
 
 /**
@@ -18,6 +17,7 @@ export default function DashboardContentRoute() {
             path={`${route.path}`}
           >
             <DashboardPage
+              name={route.name}
               Component={route.component}
               pageTitle={route.pageTitle}
               backLink={route.backLink}

client/src/components/Dashboard/DashboardFooter.js

@@ -6,14 +6,14 @@ import { For } from 'components';
 function FooterLinkItem({ title, link }) {
   return (
     <div class="">
-      <a href={link} target="_blank">
+      <a href={link} target="_blank" rel="noopener noreferrer">
         {title}
       </a>
     </div>
   );
 }
 
-export default function DashboardFooter({}) {
+export default function DashboardFooter() {
   return (
     <div class="dashboard__footer">
       <div class="footer-links">

client/src/components/Dashboard/DashboardPage.js

@@ -11,6 +11,7 @@ function DashboardPage({
   backLink,
   sidebarShrink,
   Component,
+  name,
 
   // #withDashboardActions
   changePageTitle,
@@ -44,6 +45,15 @@ function DashboardPage({
     };
   }, [resetSidebarPreviousExpand, sidebarShrink, setSidebarShrink]);
 
+  useEffect(() => {
+    const className = `page-${name}`;
+    name && document.body.classList.add(className);
+    
+    return () => {
+      name && document.body.classList.remove(className);
+    };
+  }, [name]);
+
   return (
     <div className={CLASSES.DASHBOARD_PAGE}>
       <Suspense fallback={''}>

client/src/components/DataTableCells/ItemsListCell.js

@@ -40,6 +40,7 @@ export default function ItemsListCell({
         purchasable={filterPurchasable}
         inputProps={{
           inputRef: (ref) => (fieldRef.current = ref),
+          placeholder: 'Enter an item...'
         }}
         openOnKeyDown={true}
         blurOnSelectClose={false}

client/src/components/DataTableCells/PercentFieldCell.js

@@ -29,6 +29,7 @@ const PercentFieldCell = ({
   return (
     <FormGroup intent={error ? Intent.DANGER : null}>
       <MoneyInputGroup
+        prefix={'%'}
         value={value}
         onChange={handleChange}
         onBlurValue={handleBlurChange}

client/src/components/Datatable/TableCell.js

@@ -1,22 +1,50 @@
 import React, { useContext } from 'react';
 import classNames from 'classnames';
 import { If } from 'components';
-import { ConditionalWrapper } from 'utils';
+import { Skeleton } from 'components';
 import TableContext from './TableContext';
+import { isCellLoading } from './utils';
 
 /**
- * Tabl cell.
+ * Table cell.
  */
 export default function TableCell({
   cell,
-  row: { depth, getToggleRowExpandedProps, isExpanded },
+  row: { index: rowIndex, depth, getToggleRowExpandedProps, isExpanded },
   index,
 }) {
   const {
-    props: { expandToggleColumn, expandColumnSpace, expandable },
+    props: {
+      expandToggleColumn,
+      expandColumnSpace,
+      expandable,
+      cellsLoading,
+      cellsLoadingCoords,
+    },
   } = useContext(TableContext);
 
   const isExpandColumn = expandToggleColumn === index;
+  const { skeletonWidthMax = 100, skeletonWidthMin = 40 } = {};
+
+  // Detarmines whether the current cell is loading.
+  const cellLoading = isCellLoading(
+    cellsLoading,
+    cellsLoadingCoords,
+    rowIndex,
+    cell.column.id,
+  );
+
+  if (cellLoading) {
+    return (
+      <div
+        {...cell.getCellProps({
+          className: classNames(cell.column.className, 'td'),
+        })}
+      >
+        <Skeleton minWidth={skeletonWidthMin} maxWidth={skeletonWidthMax} />
+      </div>
+    );
+  }
 
   return (
     <div
@@ -27,9 +55,12 @@ export default function TableCell({
       })}
     >
       <div
-        className={classNames({
-          'text-overview': cell.column.textOverview,
-        }, 'cell-inner')}
+        className={classNames(
+          {
+            'text-overview': cell.column.textOverview,
+          },
+          'cell-inner',
+        )}
         style={{
           'padding-left':
             isExpandColumn && expandable

client/src/components/Datatable/TableFooter.js

@@ -6,9 +6,13 @@ import TableContext from './TableContext';
  */
 export default function TableFooter() {
   const {
+    props: { footer },
     table: { footerGroups },
   } = useContext(TableContext);
 
+  // Can't contiunue if the footer is disabled.
+  if (!footer) { return null; }
+  
   return (
     <div class="tfooter">
       {footerGroups.map((group) => (

client/src/components/Datatable/utils.js

@@ -0,0 +1,10 @@
+export const isCellLoading = (loading, cellsCoords, rowIndex, columnId) => {
+  if (!loading) {
+    return false;
+  }
+  return !cellsCoords
+    ? true
+    : cellsCoords.some(
+        (cellCoord) => cellCoord[0] === rowIndex && cellCoord[1] === columnId,
+      );
+};

client/src/components/Postbox.js

@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+import { Collapse } from '@blueprintjs/core';
+import classNames from 'classnames';
+
+/**
+ * Postbox.
+ */
+export default function Postbox({
+  defaultOpen = true,
+  toggable = true,
+  title,
+  children,
+}) {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  // Handle the title click.
+  const handleTitleClick = () => {
+    if (toggable) {
+      setIsOpen(!isOpen);
+    }
+  };
+
+  return (
+    <div
+      class={classNames('postbox', {
+        'is-toggable': toggable,
+      })}
+    >
+      <div class="postbox__header" onClick={handleTitleClick}>
+        <h5 class="postbox__title">{title}</h5>
+
+        <span class="postbox__toggle-indicator"></span>
+      </div>
+      <div class="postbox__content">
+        <Collapse isOpen={isOpen}>
+          <div class="postbox__content-inner">{children}</div>
+        </Collapse>
+      </div>
+    </div>
+  );
+}

client/src/components/index.js

@@ -50,6 +50,7 @@ import TableFastCell from './Datatable/TableFastCell';
 import DashboardContentTable from './Dashboard/DashboardContentTable';
 import DashboardPageContent from './Dashboard/DashboardPageContent';
 import DashboardInsider from './Dashboard/DashboardInsider';
+import Postbox from './Postbox';
 
 const Hint = FieldHint;
 
@@ -105,5 +106,6 @@ export {
   ContextMenu,
   DashboardContentTable,
   DashboardPageContent,
-  DashboardInsider
+  DashboardInsider,
+  Postbox
 };