re-structure to monorepo.

packages/webapp/src/containers/Homepage/AccountsPayableSection.tsx

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

packages/webapp/src/containers/Homepage/AccountsReceivableSection.tsx

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

packages/webapp/src/containers/Homepage/FinancialAccountingSection.tsx

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

packages/webapp/src/containers/Homepage/Homepage.tsx

@@ -0,0 +1,36 @@
+// @ts-nocheck
+import React, { useEffect } from 'react';
+import { DashboardInsider } from '@/components/Dashboard';
+
+import HomepageContent from './HomepageContent';
+
+import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
+import withCurrentOrganization from '@/containers/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);

packages/webapp/src/containers/Homepage/HomepageContent.tsx

@@ -0,0 +1,20 @@
+// @ts-nocheck
+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;

packages/webapp/src/containers/Homepage/ProductsServicesSection.tsx

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

packages/webapp/src/containers/Homepage/ShortcutBoxesSection.tsx

@@ -0,0 +1,34 @@
+// @ts-nocheck
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { For } from '@/components';
+
+import '@/style/pages/FinancialStatements/FinancialSheets.scss';
+import { useFilterShortcutBoxesSection } from './components';
+
+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 }) {
+  const BoxSection = useFilterShortcutBoxesSection(section);
+  return <For render={ShortcutBoxes} of={BoxSection} />;
+}

packages/webapp/src/containers/Homepage/components.tsx

@@ -0,0 +1,19 @@
+// @ts-nocheck
+import { isEmpty } from 'lodash';
+import { useAbilityContext } from '@/hooks';
+
+export const useFilterShortcutBoxesSection = (section) => {
+  const ability = useAbilityContext();
+
+  return section
+    .map(({ sectionTitle, shortcuts }) => {
+      const shortcut = shortcuts.filter((shortcuts) => {
+        return ability.can(shortcuts.ability, shortcuts.subject);
+      });
+      return {
+        sectionTitle: sectionTitle,
+        shortcuts: shortcut,
+      };
+    })
+    .filter(({ shortcuts }) => !isEmpty(shortcuts));
+};