chrone: sperate client and server to different repos.

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

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

src/containers/Homepage/AnnouncementList.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import classNames from 'classnames';
+
+import { announcementLists } from 'common/homepageOptions';
+
+function AnnouncementBox({ title, description }) {
+  return (
+    <div className={'announcement-box'}>
+      <div className={'announcement-box__title'}>{title}</div>
+      <div className={'announcement-box__description'}>{description}</div>
+    </div>
+  );
+}
+
+function AnnouncementList() {
+  return (
+    <section className={'announcements-list'}>
+      <div className={'announcements-list__title'}>Announcement</div>
+
+      {announcementLists.map(({ title, description }) => (
+        <AnnouncementBox title={title} description={description} />
+      ))}
+
+      <a href={'#'} className={'btn-view-all'}>
+        <T id={'view_all'} />
+      </a>
+    </section>
+  );
+}
+
+export default AnnouncementList;

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

src/containers/Homepage/Homepage.js

@@ -0,0 +1,35 @@
+import React, { useEffect } from 'react';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+
+import HomepageContent from './HomepageContent';
+
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withCurrentOrganization from '../Organization/withCurrentOrganization';
+
+import { compose } from 'utils';
+
+/**
+ * Dashboard homepage.
+ */
+function DashboardHomepage({
+  // #withDashboardActions
+  changePageTitle,
+
+  // #withCurrentOrganization
+  organization,
+}) {
+  useEffect(() => {
+    changePageTitle(organization.name);
+  }, [organization.name, changePageTitle]);
+
+  return (
+    <DashboardInsider name="homepage">
+      <HomepageContent />
+    </DashboardInsider>
+  );
+}
+
+export default compose(
+  withDashboardActions,
+  withCurrentOrganization(({ organization }) => ({ organization })),
+)(DashboardHomepage);

src/containers/Homepage/HomepageContent.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import AccountsReceivableSection from './AccountsReceivableSection';
+import AccountsPayableSection from './AccountsPayableSection';
+import FinancialAccountingSection from './FinancialAccountingSection';
+import ProductsServicesSection from './ProductsServicesSection';
+import 'style/pages/HomePage/HomePage.scss';
+
+function HomepageContent() {
+  return (
+    <div className="financial-reports">
+      <AccountsReceivableSection />
+      <AccountsPayableSection />
+      <FinancialAccountingSection />
+      <ProductsServicesSection />
+    </div>
+  );
+}
+
+export default HomepageContent;

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

src/containers/Homepage/ShortcutBoxesSection.js

@@ -0,0 +1,31 @@
+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} />
+      </div>
+    </div>
+  );
+}
+
+export default function ShortcutBoxesSection({ section }) {
+  return <For render={ShortcutBoxes} of={section} />;
+}