From 3dff8763d481be5687731d517a9fa6055a690829 Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Thu, 25 Nov 2021 15:20:44 +0200
Subject: [PATCH] feat: ability reports home page.

---
 .../FilterFinancialReports.js                 | 23 +++++++++++++++++++
 .../FinancialStatements/FinancialReports.js   | 11 ++++++---
 2 files changed, 31 insertions(+), 3 deletions(-)
 create mode 100644 src/containers/FinancialStatements/FilterFinancialReports.js

diff --git a/src/containers/FinancialStatements/FilterFinancialReports.js b/src/containers/FinancialStatements/FilterFinancialReports.js
new file mode 100644
index 000000000..4daa38501
--- /dev/null
+++ b/src/containers/FinancialStatements/FilterFinancialReports.js
@@ -0,0 +1,23 @@
+import { isEmpty } from 'lodash';
+import { useAbilityContext } from '../../hooks';
+
+function useFilterFinancialReports(financial) {
+  const ability = useAbilityContext();
+
+  const seaction = financial
+    .map((seaction) => {
+      const reports = seaction.reports.filter((report) => {
+        return ability.can(report.ability, report.subject);
+      });
+
+      return {
+        sectionTitle: seaction.sectionTitle,
+        reports,
+      };
+    })
+    .filter(({ reports }) => !isEmpty(reports));
+
+  return seaction;
+}
+
+export default useFilterFinancialReports;
diff --git a/src/containers/FinancialStatements/FinancialReports.js b/src/containers/FinancialStatements/FinancialReports.js
index 19d576f51..5f6f770a6 100644
--- a/src/containers/FinancialStatements/FinancialReports.js
+++ b/src/containers/FinancialStatements/FinancialReports.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { For } from 'components';
-
+import useFilterFinancialReports from './FilterFinancialReports';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import {
   financialReportMenus,
@@ -37,13 +37,18 @@ function FinancialReportsSection({ sectionTitle, reports }) {
  * Financial reports.
  */
 export default function FinancialReports() {
+  const financialReportMenu = useFilterFinancialReports(financialReportMenus);
+  const SalesAndPurchasesReportMenu = useFilterFinancialReports(
+    SalesAndPurchasesReportMenus,
+  );
+
   return (
     <DashboardInsider name={'financial-reports'}>
       <div class="financial-reports">
-        <For render={FinancialReportsSection} of={financialReportMenus} />
+        <For render={FinancialReportsSection} of={financialReportMenu} />
         <For
           render={FinancialReportsSection}
-          of={SalesAndPurchasesReportMenus}
+          of={SalesAndPurchasesReportMenu}
         />
       </div>
     </DashboardInsider>