saeloun · supriya3105 · Jul 6, 2022 · Jun 28, 2022 · Jun 28, 2022 · Jun 28, 2022
diff --git a/app/javascript/src/apis/reports/clientRevenue.ts b/app/javascript/src/apis/reports/clientRevenue.ts
@@ -0,0 +1,9 @@
+import axios from "axios";
+
+const path = "/reports/client_revenues/";
+
+const get = () => axios.get(`${path}`);
+
+const reports = { get };
+
+export default reports;
diff --git a/app/javascript/src/components/Reports/Header/NavigationFilter.tsx b/app/javascript/src/components/Reports/Header/NavigationFilter.tsx
@@ -1,21 +1,12 @@
 import React, { Fragment } from "react";
 import { X } from "phosphor-react";
+import { getReports } from "./fetchReport";
 import { useEntry } from "../context/EntryContext";
 
 const NavigationFilter = () => {
   const { revenueByClientReport, currentReport, timeEntryReport } = useEntry();
-  const getReport = (currentReport) => {
-    switch (currentReport) {
-      case "RevenueByClientReport":
-        return revenueByClientReport;
-      case "TimeEntryReport":
-        return timeEntryReport;
-      default:
-        break;
-    }
-  };
 
-  const selectedReport = getReport(currentReport);
+  const selectedReport = getReports({ currentReport, timeEntryReport, revenueByClientReport });
 
   const filterHtml = (value, key, filterKey) => (
     <li key={key} className="flex px-2 mr-4 py-1 rounded-xl tracking-widest font-semibold px-1 text-xs tracking-widest bg-miru-gray-400 text-miru-dark-purple-1000">

diff --git a/app/javascript/src/components/Reports/Header/fetchReport.tsx b/app/javascript/src/components/Reports/Header/fetchReport.tsx
@@ -0,0 +1,10 @@
+export const getReports = ({ currentReport, timeEntryReport, revenueByClientReport }) => {
+  switch (currentReport) {
+    case "RevenueByClientReport":
+      return revenueByClientReport;
+    case "TimeEntryReport":
+      return timeEntryReport;
+    default:
+      break;
+  }
+};
diff --git a/app/javascript/src/components/Reports/Header/index.tsx b/app/javascript/src/components/Reports/Header/index.tsx
@@ -11,6 +11,7 @@ import {
   Share,
   X
 } from "phosphor-react";
+import { getReports } from "./fetchReport";
 import NavigationFilter from "./NavigationFilter";
 import { useEntry } from "../context/EntryContext";
 
@@ -25,18 +26,8 @@ const Header = ({
   type
 }) => {
   const { timeEntryReport, revenueByClientReport, currentReport } = useEntry();
-  const getReport = (currentReport) => {
-    switch (currentReport) {
-      case "RevenueByClientReport":
-        return revenueByClientReport;
-      case "TimeEntryReport":
-        return timeEntryReport;
-      default:
-        break;
-    }
-  };
 
-  const selectedReport = getReport(currentReport);
+  const selectedReport = getReports({ currentReport, timeEntryReport, revenueByClientReport });
 
   const [showExportOptions, setShowExportOptions] = useState<boolean>(false);
 

diff --git a/app/javascript/src/components/Reports/api/revenueByClient.ts b/app/javascript/src/components/Reports/api/revenueByClient.ts
@@ -0,0 +1,14 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import reports from "apis/reports/clientRevenue";
+
+const getReportData = async ({ selectedFilter, setClientList, setNavFilters, setFilterVisibilty, setSummary, setCurrency }) => {
+
+  const res = await reports.get();
+  setClientList(res.data.clients);
+  setCurrency(res.data.currency);
+  setSummary(res.data.summary);
+  setNavFilters(true);
+  setFilterVisibilty(false);
+};
+
+export default getReportData;
diff --git a/app/javascript/src/components/Reports/context/RevenueByClientContext.tsx b/app/javascript/src/components/Reports/context/RevenueByClientContext.tsx
@@ -11,7 +11,14 @@ const RevenueByClientReportContext =  {
     to: ""
   },
   filterCounter: 0,
-    handleRemoveSingleFilter: (key, value) => { }, //eslint-disable-line
+  clientList: [],
+  currency: "",
+  summary: {
+    totalPaidAmount: 0,
+    totalUnpaidAmount: 0,
+    totalRevenue: 0
+  },
+  handleRemoveSingleFilter: (key, value) => { }, //eslint-disable-line
 };
 
 export default RevenueByClientReportContext;
diff --git a/app/javascript/src/components/Reports/reportList/index.tsx b/app/javascript/src/components/Reports/reportList/index.tsx
@@ -30,7 +30,7 @@ const listDetails = [{
   title: "Revenue by client",
   description: "A detailed report of revenue from each client.",
   url: "revenue-by-client",
-  show: false
+  show: true
 }];
 
 const ReportsList = () => (

diff --git a/app/javascript/src/components/Reports/revenueByClient/Container/TableRow.tsx b/app/javascript/src/components/Reports/revenueByClient/Container/TableRow.tsx
@@ -5,9 +5,9 @@ import { RevenueByClients } from "../interface";
 const TableRow = ({
   id,
   name,
-  unpaidAmt,
-  paidAmt,
-  total
+  unpaidAmount,
+  paidAmount,
+  totalAmount
 }: RevenueByClients) => (
 
   <tr key={id} className="flex flex-row items-center">
@@ -17,15 +17,15 @@ const TableRow = ({
       </p>
     </td>
     <td className="w-2/5 px-6 py-4 text-left text-base font-normal text-miru-dark-purple-1000 whitespace-pre-wrap">
-      {unpaidAmt}
+      {unpaidAmount}
     </td>
     <td className="w-1/5 px-6 py-4 text-left whitespace-nowrap">
       <p className="font-normal	 text-base text-miru-dark-purple-1000">
-        {paidAmt}
+        {paidAmount}
       </p>
     </td>
     <td className="w-1/5 pl-6 py-4 text-xl text-right whitespace-nowrap font-bold text-miru-dark-purple-1000">
-      {total}
+      {totalAmount}
     </td>
   </tr>
 );

diff --git a/app/javascript/src/components/Reports/revenueByClient/Container/index.tsx b/app/javascript/src/components/Reports/revenueByClient/Container/index.tsx
@@ -1,5 +1,8 @@
 import React, { Fragment } from "react";
 import TotalHeader from "common/TotalHeader";
+import { useEntry } from "components/Reports/context/EntryContext";
+import { cashFormatter } from "helpers/cashFormater";
+import { currencySymbol } from "helpers/currencySymbol";
 import TableRow from "./TableRow";
 
 const TableHeader = () => (
@@ -34,42 +37,34 @@ const TableHeader = () => (
 );
 
 const Container = () => {
-  const dumRep = [{
-    "name": "Neflix",
-    "unpaidAmt": "$446.41",
-    "paidAmt": "$60113",
-    "total": "$655.29"
-  }];
+  const { revenueByClientReport } = useEntry();
 
-  const getEntryList = (entries) =>
-    entries.map((timeEntry, index) => (
-      <TableRow key={`${timeEntry.client}-${index}`} {...timeEntry} />
-    ));
+  const currencySymb = currencySymbol(revenueByClientReport.currency);
 
   return (
     <Fragment>
       <TotalHeader
         firstTitle={"TOTAL UNPAID AMOUNT"}
-        firstAmount={"$35.5K"}
+        firstAmount={`${currencySymb}${cashFormatter(revenueByClientReport.summary.totalUnpaidAmount)}`}
         secondTitle={"TOTAL PAID AMOUNT"}
-        secondAmount={"$35.5K"}
+        secondAmount={`${currencySymb}${cashFormatter(revenueByClientReport.summary.totalPaidAmount)}`}
         thirdTitle={"TOTAL REVENUE"}
-        thirdAmount={"$71.0K"}
+        thirdAmount={`${currencySymb}${cashFormatter(revenueByClientReport.summary.totalRevenue)}`}
       />
       <div>
       </div>
-      {
-        dumRep.map((report, index) => (
-          <Fragment key={index}>
-            <table className="min-w-full divide-y divide-gray-200 mt-4">
-              <TableHeader />
-              <tbody className="bg-white divide-y divide-gray-200">
-                {dumRep.length > 0 && getEntryList(dumRep)}
-              </tbody>
-            </table>
-          </Fragment>
-        ))
-      }
+      <table className="min-w-full divide-y divide-gray-200 mt-4">
+        <TableHeader />
+        <tbody className="bg-white divide-y divide-gray-200">
+          {
+            revenueByClientReport.clientList.map((report, index) => (
+              <Fragment key={index}>
+                <TableRow key={"index"} {...report} />
+              </Fragment>
+            ))
+          }
+        </tbody>
+      </table>
     </Fragment>
   );
 };

diff --git a/app/javascript/src/components/Reports/revenueByClient/index.tsx b/app/javascript/src/components/Reports/revenueByClient/index.tsx
@@ -5,17 +5,17 @@ import { sendGAPageView } from "utils/googleAnalytics";
 import Container from "./Container";
 
 import Filters from "./Filters";
-import { getQuarter } from "./Filters/filterOptions";
+import { RevenueByClients } from "./interface";
+import getReportData from "../api/revenueByClient";
 import EntryContext from "../context/EntryContext";
 
 import TimeEntryReportContext from "../context/TimeEntryReportContext";
 import Header from "../Header";
 
 const RevenueByClientReport = () => {
-
   const filterIntialValues = {
-    dateRange: { label: getQuarter(true), value: "this_quarter" },
-    clients: []
+    dateRange: { label: "All", value: "" },
+    clients: [{ label: "All Clients", value: "" }]
   };
 
   const [filterOptions, getFilterOptions] = useState({ clients: [] }); //eslint-disable-line
@@ -25,6 +25,13 @@ const RevenueByClientReport = () => {
   const [filterCounter, setFilterCounter] = useState(0);
   const [dateRange, setDateRange] = useState({ from: "", to: "" });
   const [selectedInput, setSelectedInput] = useState("from-input");
+  const [clientList, setClientList] = useState<Array<RevenueByClients>>([]);
+  const [currency, setCurrency] = useState("");
+  const [summary, setSummary] = useState({
+    totalPaidAmount: 0,
+    totalUnpaidAmount: 0,
+    totalRevenue: 0
+  });
 
   useEffect(() => {
     sendGAPageView();
@@ -62,28 +69,30 @@ const RevenueByClientReport = () => {
 
   useEffect(() => {
     updateFilterCounter();
-    setNavFilters(true);
-    setFilterVisibilty(false);
+    getReportData({ selectedFilter, setClientList, setNavFilters, setFilterVisibilty, setSummary, setCurrency });
   }, [selectedFilter]);
 
   const contextValues = {
     timeEntryReport: TimeEntryReportContext,
     revenueByClientReport: {
       filterOptions: {
-        clients: [{ label: "Microsoft", value: 1 }, { label: "Flipkart", value: 2 }]
+        clients: [{ label: "All Clients", value: "" }]
       },
       selectedFilter: selectedFilter,
       customDateFilter: {
         from: dateRange.from,
         to: dateRange.to
       },
       filterCounter: filterCounter,
+      clientList: clientList,
       handleRemoveSingleFilter: handleRemoveSingleFilter, //eslint-disable-line
+      currency: currency,
+      summary: summary
     },
     currentReport: "RevenueByClientReport"
   };
 
-  const handleApplyFilter = async (filters) => {
+  const handleApplyFilter = (filters) => {
     setSelectedFilter(filters);
   };
 

diff --git a/app/javascript/src/components/Reports/revenueByClient/interface.ts b/app/javascript/src/components/Reports/revenueByClient/interface.ts
@@ -1,7 +1,7 @@
 export interface RevenueByClients {
   id: number;
   name: string,
-  unpaidAmt: string,
-  paidAmt: string,
-  total: string,
+  unpaidAmount: string,
+  paidAmount: string,
+  totalAmount: string,
 }