@layerfi/components 0.1.18 → 0.1.19

package/dist/esm/index.js

@@ -6923,7 +6923,7 @@ var SkeletonLoader = ({
 import React82 from "react";
 import { PieChart as PieChart2, Pie as Pie2, Cell as Cell3 } from "recharts";
 var MiniChart = ({ data }) => {
-  return /* @__PURE__ */ React82.createElement(PieChart2, { width: 48, height: 48, className: "mini-chart" }, /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React82.createElement(PieChart2, { width: 52, height: 52, className: "mini-chart" }, /* @__PURE__ */ React82.createElement(
     Pie2,
     {
       data,
@@ -6933,7 +6933,7 @@ var MiniChart = ({ data }) => {
       cy: "50%",
       innerRadius: 10,
       outerRadius: 16,
-      paddingAngle: 0.2,
+      paddingAngle: 0.4,
       fill: "#8884d8",
       width: 24,
       height: 24,
@@ -8579,7 +8579,7 @@ var ChartOfAccountsTable = ({
               !expandAll || expandAll === "collapsed" ? "expanded" : "collapsed"
             )
           },
-          !expandAll || expandAll === "collapsed" ? "Expand all rows" : "Collpase all rows"
+          !expandAll || expandAll === "collapsed" ? "Expand all rows" : "Collapse all rows"
         )) : null,
         /* @__PURE__ */ React96.createElement("div", { className: "Layer__header__actions-col" }, /* @__PURE__ */ React96.createElement(
           Button,
@@ -10423,7 +10423,7 @@ var OnboardingContent = ({
 };
 
 // src/views/AccountingOverview/AccountingOverview.tsx
-import React127 from "react";
+import React127, { useState as useState36 } from "react";
 
 // src/components/TransactionToReviewCard/TransactionToReviewCard.tsx
 import React124, { useEffect as useEffect22, useMemo as useMemo15, useState as useState35 } from "react";
@@ -10571,11 +10571,13 @@ var View3 = ({ title, children, headerControls }) => {
 };
 
 // src/views/AccountingOverview/AccountingOverview.tsx
+import classNames43 from "classnames";
 var AccountingOverview = ({
   title = "Accounting overview",
   enableOnboarding = false,
   onTransactionsToReviewClick
 }) => {
+  const [pnlToggle, setPnlToggle] = useState36("revenue");
   return /* @__PURE__ */ React127.createElement(ProfitAndLoss, { asContainer: false }, /* @__PURE__ */ React127.createElement(View3, { title, headerControls: /* @__PURE__ */ React127.createElement(ProfitAndLoss.DatePicker, null) }, enableOnboarding && /* @__PURE__ */ React127.createElement(Onboarding, null), /* @__PURE__ */ React127.createElement("div", { className: "Layer__accounting-overview__summaries-row" }, /* @__PURE__ */ React127.createElement(ProfitAndLoss.Summaries, { actionable: false }), /* @__PURE__ */ React127.createElement(TransactionToReviewCard, { onClick: onTransactionsToReviewClick })), /* @__PURE__ */ React127.createElement(
     Container,
     {
@@ -10585,7 +10587,42 @@ var AccountingOverview = ({
     },
     /* @__PURE__ */ React127.createElement(Header, null, /* @__PURE__ */ React127.createElement(Heading, { size: "secondary" /* secondary */ }, "Profit & Loss")),
     /* @__PURE__ */ React127.createElement(ProfitAndLoss.Chart, null)
-  ), /* @__PURE__ */ React127.createElement("div", { className: "accounting-overview-profit-and-loss-charts" }, /* @__PURE__ */ React127.createElement(Container, { name: "accounting-overview-profit-and-loss-chart" }, /* @__PURE__ */ React127.createElement(ProfitAndLoss.DetailedCharts, { scope: "revenue", hideClose: true })), /* @__PURE__ */ React127.createElement(Container, { name: "accounting-overview-profit-and-loss-chart" }, /* @__PURE__ */ React127.createElement(ProfitAndLoss.DetailedCharts, { scope: "expenses", hideClose: true })))));
+  ), /* @__PURE__ */ React127.createElement("div", { className: "accounting-overview-profit-and-loss-charts" }, /* @__PURE__ */ React127.createElement(
+    Toggle,
+    {
+      name: "pnl-detailed-charts",
+      options: [
+        {
+          value: "revenue",
+          label: "Revenue"
+        },
+        {
+          value: "expenses",
+          label: "Expenses"
+        }
+      ],
+      selected: pnlToggle,
+      onChange: (e) => setPnlToggle(e.target.value)
+    }
+  ), /* @__PURE__ */ React127.createElement(
+    Container,
+    {
+      name: classNames43(
+        "accounting-overview-profit-and-loss-chart",
+        pnlToggle !== "revenue" && "accounting-overview-profit-and-loss-chart--hidden"
+      )
+    },
+    /* @__PURE__ */ React127.createElement(ProfitAndLoss.DetailedCharts, { scope: "revenue", hideClose: true })
+  ), /* @__PURE__ */ React127.createElement(
+    Container,
+    {
+      name: classNames43(
+        "accounting-overview-profit-and-loss-chart",
+        pnlToggle !== "expenses" && "accounting-overview-profit-and-loss-chart--hidden"
+      )
+    },
+    /* @__PURE__ */ React127.createElement(ProfitAndLoss.DetailedCharts, { scope: "expenses", hideClose: true })
+  ))));
 };
 
 // src/views/BankTransactionsWithLinkedAccounts/BankTransactionsWithLinkedAccounts.tsx
@@ -10642,11 +10679,11 @@ var ReportsPanel = ({ containerRef }) => {
 };
 
 // src/views/GeneralLedger/GeneralLedger.tsx
-import React130, { useState as useState36 } from "react";
+import React130, { useState as useState37 } from "react";
 var GeneralLedgerView = ({
   title = "General Ledger"
 }) => {
-  const [activeTab, setActiveTab] = useState36("chartOfAccounts");
+  const [activeTab, setActiveTab] = useState37("chartOfAccounts");
   return /* @__PURE__ */ React130.createElement(ProfitAndLoss, { asContainer: false }, /* @__PURE__ */ React130.createElement(View3, { title }, /* @__PURE__ */ React130.createElement(
     Toggle,
     {