fix: homepage.

client/src/common/homepageOptions.js

@@ -1,56 +1,130 @@
-export const shortcutBox = [
+import React from 'react';
+import { FormattedMessage as T } from 'react-intl';
+
+export const accountsReceivable = [
   {
-    title: 'Request time Off',
+    sectionTitle: <T id={'accounts_receivable_a_r'} />,
-    iconColor: '#F3FEFA',
+    shortcuts: [
+      {
+        title: 'Sales invoices',
         description:
-      'Cupidatat nulla minim sit duis duis laboris. Sint exercitation.',
+          'Labore aute elit proident sit culpa. Commodo nulla veniam ullamco ullamco ut nulla pariatur eu. Esse tempor irure incididunt veniam sint excepteur quis.',
+        link: '/invoices',
       },
       {
-    title: 'Benefits',
+        title: 'Sales estimates',
-    iconColor: '#F5F3FE',
         description:
-      'Cupidatat nulla minim sit duis duis laboris. Sint exercitation.',
+          'Labore aute elit proident sit culpa. Commodo nulla veniam ullamco ullamco ut nulla pariatur eu. Esse tempor irure incididunt veniam sint excepteur quis.',
+
+        link: '/estimates',
       },
       {
-    title: 'Schedule a one-on-one',
+        title: 'Sales receipts',
-    iconColor: '#F2F9FF',
         description:
-      'Cupidatat nulla minim sit duis duis laboris. Sint exercitation.',
+          'Labore aute elit proident sit culpa. Commodo nulla veniam ullamco ullamco ut nulla pariatur eu. Esse tempor irure incididunt veniam sint excepteur quis.',
+
+        link: '/receipts',
       },
       {
-    title: 'Payroll',
+        title: 'Customers',
-    iconColor: '#FFFCED',
         description:
-      'Cupidatat nulla minim sit duis duis laboris. Sint exercitation.',
+          'Labore aute elit proident sit culpa. Commodo nulla veniam ullamco ullamco ut nulla pariatur eu. Esse tempor irure incididunt veniam sint excepteur quis.',
+
+        link: '/customers',
       },
       {
-    title: 'Submit an expense',
+        title: 'Customers payment',
-    iconColor: '#FDF1F1',
         description:
-      'Cupidatat nulla minim sit duis duis laboris. Sint exercitation.',
+          'Labore aute elit proident sit culpa. Commodo nulla veniam ullamco ullamco ut nulla pariatur eu. Esse tempor irure incididunt veniam sint excepteur quis.',
+        link: '/',
       },
-  {
+    ],
-    title: 'Training',
-    iconColor: '#EFF1FE',
-    description:
-      'Cupidatat nulla minim sit duis duis laboris. Sint exercitation.',
   },
 ];
 
-export const announcementLists = [
+export const accountsPayable = [
   {
-    title: 'Office closed on July 2nd',
+    sectionTitle: <T id={'accounts_payable_a_p'} />,
+    shortcuts: [
+      {
+        title: 'Purchase invoices',
         description:
-      'Incididunt Lorem ad sunt proident nulla exercitation consectetur reprehenderit labore qui.',
+          'Labore aute elit proident sit culpa. Commodo nulla veniam ullamco ullamco ut nulla pariatur eu. Esse tempor irure incididunt veniam sint excepteur quis.',
+
+        link: '/bills',
       },
       {
-    title: 'New Password policy ',
+        title: 'Vendors',
         description:
-      'Incididunt Lorem ad sunt proident nulla exercitation consectetur reprehenderit labore qui.',
+          'Labore aute elit proident sit culpa. Commodo nulla veniam ullamco ullamco ut nulla pariatur eu. Esse tempor irure incididunt veniam sint excepteur quis.',
+        link: '/vendors',
       },
       {
-    title: 'Office closed on July 2nd',
+        title: 'Vendors payments',
         description:
-      'Incididunt Lorem ad sunt proident nulla exercitation consectetur reprehenderit labore qui.',
+          'Labore aute elit proident sit culpa. Commodo nulla veniam ullamco ullamco ut nulla pariatur eu. Esse tempor irure incididunt veniam sint excepteur quis.',
+
+        link: '/payment-mades',
+      },
+    ],
+  },
+];
+
+export const financialAccounting = [
+  {
+    sectionTitle: <T id={'financial_accounting'} />,
+    shortcuts: [
+      {
+        title: 'Chart of accounts',
+        description:
+          'Labore aute elit proident sit culpa. Commodo nulla veniam ullamco ullamco ut nulla pariatur eu. Esse tempor irure incididunt veniam sint excepteur quis.',
+
+        link: '/accounts',
+      },
+      {
+        title: 'Manual journal',
+        description:
+          'Labore aute elit proident sit culpa. Commodo nulla veniam ullamco ullamco ut nulla pariatur eu. Esse tempor irure incididunt veniam sint excepteur quis.',
+        link: '/manual-journals',
+      },
+      {
+        title: 'Expenses',
+        description:
+          'Labore aute elit proident sit culpa. Commodo nulla veniam ullamco ullamco ut nulla pariatur eu. Esse tempor irure incididunt veniam sint excepteur quis.',
+        link: '/expenses',
+      },
+      {
+        title: 'Financial statements',
+        description:
+          'Labore aute elit proident sit culpa. Commodo nulla veniam ullamco ullamco ut nulla pariatur eu. Esse tempor irure incididunt veniam sint excepteur quis.',
+        link: '/',
+      },
+    ],
+  },
+];
+
+export const productsServices = [
+  {
+    sectionTitle: <T id={'products_services_inventory'} />,
+    shortcuts: [
+      {
+        title: 'Products & Services',
+        description:
+          'Labore aute elit proident sit culpa. Commodo nulla veniam ullamco ullamco ut nulla pariatur eu. Esse tempor irure incididunt veniam sint excepteur quis.',
+        link: '/items',
+      },
+      {
+        title: 'Products & Services Categories',
+        description:
+          'Labore aute elit proident sit culpa. Commodo nulla veniam ullamco ullamco ut nulla pariatur eu. Esse tempor irure incididunt veniam sint excepteur quis.',
+        link: '/categories',
+      },
+      {
+        title: 'Inventory Adjustments',
+        description:
+          'Labore aute elit proident sit culpa. Commodo nulla veniam ullamco ullamco ut nulla pariatur eu. Esse tempor irure incididunt veniam sint excepteur quis.',
+        link: '/inventory-adjustments',
+      },
+    ],
   },
 ];

client/src/containers/Homepage/AccountsPayableSection.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import ShortcutBoxesSection from './ShortcutBoxesSection';
+import { accountsPayable } from 'common/homepageOptions';
+
+export default function AccountsPayableSection() {
+  return <ShortcutBoxesSection section={accountsPayable} />;
+}

client/src/containers/Homepage/AccountsReceivableSection.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import ShortcutBoxesSection from './ShortcutBoxesSection';
+import { accountsReceivable } from 'common/homepageOptions';
+
+export default function AccountsReceivableSection() {
+  return <ShortcutBoxesSection section={accountsReceivable} />;
+}

client/src/containers/Homepage/FinancialAccountingSection.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import ShortcutBoxesSection from './ShortcutBoxesSection';
+import { financialAccounting } from 'common/homepageOptions';
+
+export default function FinancialAccountingSection() {
+  return <ShortcutBoxesSection section={financialAccounting} />;
+}

client/src/containers/Homepage/HomepageContent.js

@@ -1,14 +1,17 @@
 import React from 'react';
-import ShortcutBoxes from './ShortcutBoxes';
+import AccountsReceivableSection from './AccountsReceivableSection';
-import AnnouncementList from './AnnouncementList';
+import AccountsPayableSection from './AccountsPayableSection';
-
+import FinancialAccountingSection from './FinancialAccountingSection';
+import ProductsServicesSection from './ProductsServicesSection';
 import 'style/pages/HomePage/HomePage.scss';
 
 function HomepageContent() {
   return (
-    <div className={'homepage__container'}>
+    <div>
-      <ShortcutBoxes />
+      <AccountsReceivableSection />
-      <AnnouncementList />
+      <AccountsPayableSection />
+      <FinancialAccountingSection />
+      <ProductsServicesSection />
     </div>
   );
 }

client/src/containers/Homepage/ProductsServicesSection.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import ShortcutBoxesSection from './ShortcutBoxesSection';
+import { productsServices } from 'common/homepageOptions';
+
+export default function ProductsServicesSection() {
+  return <ShortcutBoxesSection section={productsServices} />;
+}

client/src/containers/Homepage/ShortcutBoxes.js

@@ -1,45 +0,0 @@
-import React from 'react';
-import { FormattedMessage as T, useIntl } from 'react-intl';
-import classNames from 'classnames';
-import { shortcutBox } from 'common/homepageOptions';
-import { Icon } from 'components';
-
-function ShortcutBox({ title, iconColor, description }) {
-  return (
-    <div className={'shortcut-box'}>
-      <div className={'shortcut-box__header'}>
-        <span
-          className={'header--icon'}
-          style={{ backgroundColor: `${iconColor}` }}
-        >
-          <Icon icon={'clock'} iconSize={24} />
-        </span>
-        <span>
-          <a href={'#'}>
-            <Icon icon={'arrow-top-right'} iconSize={24} />
-          </a>
-        </span>
-      </div>
-      <div className={'shortcut-box__title'}>{title}</div>
-      <div className={'shortcut-box__description'}>{description}</div>
-    </div>
-  );
-}
-
-function ShortcutBoxes() {
-  return (
-    <section className={'shortcut-boxes'}>
-      {shortcutBox.map(({ title, description, iconColor }) => {
-        return (
-          <ShortcutBox
-            title={title}
-            description={description}
-            iconColor={iconColor}
-          />
-        );
-      })}
-    </section>
-  );
-}
-
-export default ShortcutBoxes;

client/src/containers/Homepage/ShortcutBoxesSection.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { For } from 'components';
+
+import 'style/pages/FinancialStatements/FinancialSheets.scss';
+
+function ShortcutBox({ title, link, description }) {
+  return (
+    <div className={'financial-reports__item'}>
+      <Link className="title" to={link}>
+        {title}
+      </Link>
+      <p className="desc">{description}</p>
+    </div>
+  );
+}
+
+function ShortcutBoxes({ sectionTitle, shortcuts }) {
+  return (
+    <div className="financial-reports__section">
+      <div className="section-title">{sectionTitle}</div>
+      <div className="financial-reports__list">
+        <For render={ShortcutBox} of={shortcuts} />
+
+        {/* {shortcuts.map(({ title, link, description }) => (
+          <ShortcutBox title={title} description={description} link={link} />
+        ))} */}
+      </div>
+    </div>
+  );
+}
+
+export default function ShortcutBoxesSection({ section }) {
+  return (
+    <div className="financial-reports">
+      <For render={ShortcutBoxes} of={section} />
+    </div>
+  );
+}

client/src/lang/en/index.js

@@ -978,5 +978,8 @@ export default {
   payable_aging_summary: 'Payable Aging Summary',
   payment_receive_paper: 'Payment Receive Paper',
   specific_vendors: 'Specific Vendors',
-
+  accounts_receivable_a_r: 'Accounts Receivable A/R',
+  accounts_payable_a_p: 'Accounts Payable A/P',
+  financial_accounting: ' Financial Accounting',
+  products_services_inventory: 'Products,Services & Inventory',
 };