@layerfi/components 0.1.6 → 0.1.7

package/dist/esm/index.js

@@ -4034,7 +4034,7 @@ var MOCK_DATA = [
   {
     name: "Account",
     account: "4321",
-    amount: 4400020620
+    amount: 801.91
   }
 ];
 var useLinkedAccounts = () => {
@@ -4098,7 +4098,63 @@ var LinkedAccounts = () => {
 import React65, { createContext as createContext2 } from "react";
 
 // src/hooks/useProfitAndLoss/useProfitAndLoss.tsx
-import { useState as useState12 } from "react";
+import { useMemo as useMemo3, useState as useState12 } from "react";
+
+// src/utils/profitAndLossUtils.ts
+var doesLineItemQualifies = (item) => {
+  return !(item.is_contra || item.value === void 0 || item.value === null || isNaN(item.value) || item.value === -Infinity || item.value === Infinity || item.value < 0);
+};
+var collectSubItems = (type, item) => {
+  if (!item) {
+    return [];
+  }
+  const items = [];
+  item?.line_items?.forEach((item2) => {
+    if (doesLineItemQualifies(item2)) {
+      items.push({
+        name: item2.name,
+        display_name: item2.display_name,
+        value: Math.abs(item2.value || 0),
+        // @TODO - confirm that's safe to do this
+        type
+      });
+    }
+  });
+  return items;
+};
+var collectExpensesItems = (data) => {
+  const cogs = collectSubItems("Cost of Goods Sold", data.cost_of_goods_sold);
+  const expenses = collectSubItems("Operating Expenses", data.expenses);
+  const taxes = collectSubItems("Taxes & Licenses", data.taxes);
+  return [].concat(cogs).concat(expenses).concat(taxes);
+};
+var collectRevenueItems = (data) => {
+  const income = collectSubItems("Income", data.income);
+  return [].concat(income);
+};
+var humanizeTitle = (sidebarView) => {
+  switch (sidebarView) {
+    case "expenses":
+      return "Expenses";
+    case "revenue":
+      return "Revenue";
+    default:
+      return "Profit & Loss";
+  }
+};
+var applyShare = (items, total) => {
+  return items.map((item) => {
+    if (total === 0) {
+      return item;
+    }
+    return {
+      ...item,
+      share: item.value / total
+    };
+  });
+};
+
+// src/hooks/useProfitAndLoss/useProfitAndLoss.tsx
 import { startOfMonth, endOfMonth, formatISO } from "date-fns";
 import useSWR4 from "swr";
 var useProfitAndLoss = ({
@@ -4117,6 +4173,11 @@ var useProfitAndLoss = ({
   const [endDate, setEndDate] = useState12(
     initialEndDate || endOfMonth(Date.now())
   );
+  const [filters, setFilters] = useState12({
+    expenses: void 0,
+    revenue: void 0
+  });
+  const [sidebarScope, setSidebarScope] = useState12("expenses");
   const {
     data: rawData,
     isLoading,
@@ -4139,6 +4200,43 @@ var useProfitAndLoss = ({
     })
   );
   const { data, error } = rawData || {};
+  const { filteredData, filteredTotal } = useMemo3(() => {
+    if (!data) {
+      return { filteredData: [], filteredTotal: void 0 };
+    }
+    const items = sidebarScope === "revenue" ? collectRevenueItems(data) : collectExpensesItems(data);
+    const filtered = items.map((x) => {
+      if (sidebarScope && filters[sidebarScope]?.types && filters[sidebarScope].types.length > 0 && !filters[sidebarScope]?.types?.includes(x.type)) {
+        return {
+          ...x,
+          hidden: true
+        };
+      }
+      return x;
+    });
+    const sorted = filtered.sort((a, b) => {
+      switch (filters[sidebarScope ?? "expenses"]?.sortBy) {
+        case "category":
+          if (filters[sidebarScope ?? "expenses"]?.sortDirection === "asc") {
+            return a.display_name.localeCompare(b.display_name);
+          }
+          return b.display_name.localeCompare(a.display_name);
+        case "type":
+          if (filters[sidebarScope ?? "expenses"]?.sortDirection === "asc") {
+            return a.type.localeCompare(b.type);
+          }
+          return b.type.localeCompare(a.type);
+        default:
+          if (filters[sidebarScope ?? "expenses"]?.sortDirection === "asc") {
+            return a.value - b.value;
+          }
+          return b.value - a.value;
+      }
+    });
+    const total = sorted.filter((x) => !x.hidden).reduce((x, { value }) => x + value, 0);
+    const withShare = applyShare(sorted, total);
+    return { filteredData: withShare, filteredTotal: total };
+  }, [data, startDate, filters, sidebarScope]);
   const changeDateRange = ({
     startDate: newStartDate,
     endDate: newEndDate
@@ -4149,22 +4247,80 @@ var useProfitAndLoss = ({
   const refetch = () => {
     mutate();
   };
+  const sortBy = (scope, field, direction) => {
+    setFilters({
+      ...filters,
+      [scope]: {
+        ...filters[scope],
+        sortBy: field,
+        sortDirection: direction ?? filters[scope]?.sortDirection === "desc" ? "asc" : "desc"
+      }
+    });
+  };
+  const setFilterTypes = (scope, types) => {
+    setFilters({
+      ...filters,
+      [scope]: {
+        ...filters[scope],
+        types
+      }
+    });
+  };
   return {
     data,
+    filteredData,
+    filteredTotal,
     isLoading,
     isValidating,
     error: error || rawError,
     dateRange: { startDate, endDate },
     refetch,
-    changeDateRange
+    changeDateRange,
+    sidebarScope,
+    setSidebarScope,
+    sortBy,
+    filters,
+    setFilterTypes
   };
 };
 
 // src/components/ProfitAndLossChart/ProfitAndLossChart.tsx
-import React59, { useContext as useContext2, useMemo as useMemo3, useState as useState13 } from "react";
+import React59, { useContext as useContext2, useMemo as useMemo4, useState as useState13 } from "react";
 
 // src/utils/format.ts
 var capitalizeFirstLetter = (text) => text.charAt(0).toUpperCase() + text.slice(1);
+var formatPercent = (value, options) => {
+  if (!value && value !== 0) {
+    return;
+  }
+  const val = value * 100;
+  let defaultOptions = {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0
+  };
+  if (Math.abs(val) < 10) {
+    defaultOptions = {
+      minimumFractionDigits: 1,
+      maximumFractionDigits: 1
+    };
+  }
+  if (Math.abs(val) < 1) {
+    defaultOptions = {
+      minimumFractionDigits: 1,
+      maximumFractionDigits: 1
+    };
+  }
+  if (val === 0) {
+    defaultOptions = {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0
+    };
+  }
+  return val.toLocaleString("en-US", {
+    ...defaultOptions,
+    ...options
+  });
+};
 
 // src/components/ProfitAndLossChart/Indicator.tsx
 import React58, { useEffect as useEffect8 } from "react";
@@ -4342,7 +4498,7 @@ var ProfitAndLossChart = () => {
       }
     );
   };
-  const data = useMemo3(
+  const data = useMemo4(
     () => monthData.map(summarizePnL),
     [
       startSelectionMonth,
@@ -4523,34 +4679,64 @@ var SkeletonLoader = ({
 };
 
 // src/components/ProfitAndLossSummaries/ProfitAndLossSummaries.tsx
+import classNames22 from "classnames";
 var ProfitAndLossSummaries = ({
   vertical,
   revenueLabel = "Revenue"
 }) => {
-  const { data: storedData, isLoading } = useContext4(ProfitAndLoss.Context);
+  const {
+    data: storedData,
+    isLoading,
+    setSidebarScope,
+    sidebarScope
+  } = useContext4(ProfitAndLoss.Context);
   const data = storedData ? storedData : { income: { value: NaN }, net_profit: NaN };
-  const incomeDirectionClass = (data.income.value ?? NaN) < 0 ? "Layer__profit-and-loss-summaries__amount--negative" : "Layer__profit-and-loss-summaries__amount--pasitive";
-  const expensesDirectionClass = (data?.income?.value ?? NaN) - data.net_profit < 0 ? "Layer__profit-and-loss-summaries__amount--negative" : "Layer__profit-and-loss-summaries__amount--pasitive";
-  const netProfitDirectionClass = data.net_profit < 0 ? "Layer__profit-and-loss-summaries__amount--negative" : "Layer__profit-and-loss-summaries__amount--pasitive";
+  const incomeDirectionClass = (data.income.value ?? NaN) < 0 ? "Layer__profit-and-loss-summaries__amount--negative" : "Layer__profit-and-loss-summaries__amount--positive";
+  const expensesDirectionClass = (data?.income?.value ?? NaN) - data.net_profit < 0 ? "Layer__profit-and-loss-summaries__amount--negative" : "Layer__profit-and-loss-summaries__amount--positive";
+  const netProfitDirectionClass = data.net_profit < 0 ? "Layer__profit-and-loss-summaries__amount--negative" : "Layer__profit-and-loss-summaries__amount--positive";
   return /* @__PURE__ */ React62.createElement(
     "div",
     {
       className: `Layer__profit-and-loss-summaries ${vertical ? "flex-col" : ""}`
     },
-    /* @__PURE__ */ React62.createElement("div", { className: "Layer__profit-and-loss-summaries__summary Layer__profit-and-loss-summaries__summary--income" }, /* @__PURE__ */ React62.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, revenueLabel), isLoading || storedData === void 0 ? /* @__PURE__ */ React62.createElement("div", { className: "Layer__profit-and-loss-summaries__loader" }, /* @__PURE__ */ React62.createElement(SkeletonLoader, null)) : /* @__PURE__ */ React62.createElement(
-      "span",
+    /* @__PURE__ */ React62.createElement(
+      "div",
       {
-        className: `Layer__profit-and-loss-summaries__amount ${incomeDirectionClass}`
+        className: classNames22(
+          "Layer__profit-and-loss-summaries__summary Layer__actionable",
+          "Layer__profit-and-loss-summaries__summary--income",
+          sidebarScope === "revenue" ? "active" : ""
+        ),
+        onClick: () => setSidebarScope("revenue")
       },
-      centsToDollars(Math.abs(data?.income?.value ?? NaN))
-    )),
-    /* @__PURE__ */ React62.createElement("div", { className: "Layer__profit-and-loss-summaries__summary Layer__profit-and-loss-summaries__summary--expenses" }, /* @__PURE__ */ React62.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Expenses"), isLoading || storedData === void 0 ? /* @__PURE__ */ React62.createElement("div", { className: "Layer__profit-and-loss-summaries__loader" }, /* @__PURE__ */ React62.createElement(SkeletonLoader, { className: "Layer__profit-and-loss-summaries__loader" })) : /* @__PURE__ */ React62.createElement(
-      "span",
+      /* @__PURE__ */ React62.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, revenueLabel),
+      isLoading || storedData === void 0 ? /* @__PURE__ */ React62.createElement("div", { className: "Layer__profit-and-loss-summaries__loader" }, /* @__PURE__ */ React62.createElement(SkeletonLoader, null)) : /* @__PURE__ */ React62.createElement(
+        "span",
+        {
+          className: `Layer__profit-and-loss-summaries__amount ${incomeDirectionClass}`
+        },
+        centsToDollars(Math.abs(data?.income?.value ?? NaN))
+      )
+    ),
+    /* @__PURE__ */ React62.createElement(
+      "div",
       {
-        className: `Layer__profit-and-loss-summaries__amount ${expensesDirectionClass}`
+        className: classNames22(
+          "Layer__profit-and-loss-summaries__summary Layer__actionable",
+          "Layer__profit-and-loss-summaries__summary--expenses",
+          sidebarScope === "expenses" ? "active" : ""
+        ),
+        onClick: () => setSidebarScope("expenses")
       },
-      centsToDollars(Math.abs((data.income.value ?? 0) - data.net_profit))
-    )),
+      /* @__PURE__ */ React62.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Expenses"),
+      isLoading || storedData === void 0 ? /* @__PURE__ */ React62.createElement("div", { className: "Layer__profit-and-loss-summaries__loader" }, /* @__PURE__ */ React62.createElement(SkeletonLoader, { className: "Layer__profit-and-loss-summaries__loader" })) : /* @__PURE__ */ React62.createElement(
+        "span",
+        {
+          className: `Layer__profit-and-loss-summaries__amount ${expensesDirectionClass}`
+        },
+        centsToDollars(Math.abs((data.income.value ?? 0) - data.net_profit))
+      )
+    ),
     /* @__PURE__ */ React62.createElement("div", { className: "Layer__profit-and-loss-summaries__summary Layer__profit-and-loss-summaries__summary--net-profit" }, /* @__PURE__ */ React62.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Net Profit"), isLoading || storedData === void 0 ? /* @__PURE__ */ React62.createElement("div", { className: "Layer__profit-and-loss-summaries__loader" }, /* @__PURE__ */ React62.createElement(SkeletonLoader, { className: "Layer__profit-and-loss-summaries__loader" })) : /* @__PURE__ */ React62.createElement(
       "span",
       {
@@ -4772,6 +4958,8 @@ var ProfitAndLossTable = ({ lockExpanded }) => {
 import { endOfMonth as endOfMonth4, startOfMonth as startOfMonth4 } from "date-fns";
 var PNLContext = createContext2({
   data: void 0,
+  filteredData: [],
+  filteredTotal: void 0,
   isLoading: true,
   isValidating: false,
   error: void 0,
@@ -4782,6 +4970,17 @@ var PNLContext = createContext2({
   changeDateRange: () => {
   },
   refetch: () => {
+  },
+  sidebarScope: void 0,
+  setSidebarScope: () => {
+  },
+  sortBy: () => {
+  },
+  setFilterTypes: () => {
+  },
+  filters: {
+    expenses: void 0,
+    revenue: void 0
   }
 });
 var ProfitAndLoss = ({ children, tagFilter, reportingBasis }) => {
@@ -4795,20 +4994,473 @@ ProfitAndLoss.Summaries = ProfitAndLossSummaries;
 ProfitAndLoss.Table = ProfitAndLossTable;
 
 // src/components/ProfitAndLossView/ProfitAndLossView.tsx
-import React66, { useContext as useContext6 } from "react";
+import React69, { useContext as useContext7 } from "react";
+
+// src/components/ProfitAndLossDetailedCharts/ProfitAndLossDetailedCharts.tsx
+import React68, { useContext as useContext6, useMemo as useMemo5, useState as useState15 } from "react";
+import Select3 from "react-select";
+
+// src/icons/SortArrows.tsx
+import * as React66 from "react";
+var SortArrows = ({ size = 13, ...props }) => /* @__PURE__ */ React66.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 12 13",
+    fill: "none",
+    ...props,
+    width: size,
+    height: size
+  },
+  /* @__PURE__ */ React66.createElement("g", { "clip-path": "url(#clip0_1758_75388)" }, /* @__PURE__ */ React66.createElement(
+    "path",
+    {
+      d: "M1.33325 8.5L3.99992 11.1667L6.66659 8.5",
+      stroke: "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      className: "desc-arrow"
+    }
+  ), /* @__PURE__ */ React66.createElement(
+    "path",
+    {
+      d: "M4 2.5L4 11.1667",
+      stroke: "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      className: "desc-arrow"
+    }
+  ), /* @__PURE__ */ React66.createElement(
+    "path",
+    {
+      d: "M5.99988 5.16602L8.66654 2.49935L11.3332 5.16602",
+      stroke: "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      className: "asc-arrow"
+    }
+  ), /* @__PURE__ */ React66.createElement(
+    "path",
+    {
+      d: "M8.66663 11.166L8.66663 2.49935",
+      stroke: "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      className: "asc-arrow"
+    }
+  )),
+  /* @__PURE__ */ React66.createElement("defs", null, /* @__PURE__ */ React66.createElement("clipPath", { id: "clip0_1758_75388" }, /* @__PURE__ */ React66.createElement(
+    "rect",
+    {
+      width: "12",
+      height: "12",
+      fill: "white",
+      transform: "translate(0 0.5)"
+    }
+  )))
+);
+var SortArrows_default = SortArrows;
+
+// src/icons/X.tsx
+import * as React67 from "react";
+var X = ({ size = 18, ...props }) => /* @__PURE__ */ React67.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 18 18",
+    fill: "none",
+    ...props,
+    width: size,
+    height: size
+  },
+  /* @__PURE__ */ React67.createElement(
+    "path",
+    {
+      d: "M13.5 4.5L4.5 13.5",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ React67.createElement(
+    "path",
+    {
+      d: "M4.5 4.5L13.5 13.5",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  )
+);
+var X_default = X;
+
+// src/components/ProfitAndLossDetailedCharts/ProfitAndLossDetailedCharts.tsx
+import classNames23 from "classnames";
+import { format as format6 } from "date-fns";
+import {
+  PieChart,
+  Pie,
+  Cell as Cell2,
+  ResponsiveContainer as ResponsiveContainer2,
+  Label,
+  Text as ChartText
+} from "recharts";
+var INACTIVE_OPACITY_LEVELS = [0.85, 0.7, 0.66, 0.55, 0.4, 0.33, 0.25, 0.15];
+var DEFAULT_CHART_COLORS = [
+  {
+    color: "#7417B3",
+    opacity: 1
+  },
+  {
+    color: "#7417B3",
+    opacity: 0.8
+  },
+  {
+    color: "#7417B3",
+    opacity: 0.6
+  },
+  {
+    color: "#7417B3",
+    opacity: 0.4
+  },
+  {
+    color: "#7417B3",
+    opacity: 0.2
+  },
+  {
+    color: "#7417B3",
+    opacity: 0.1
+  },
+  {
+    color: "#006A80",
+    opacity: 1
+  },
+  {
+    color: "#006A80",
+    opacity: 0.8
+  },
+  {
+    color: "#006A80",
+    opacity: 0.6
+  },
+  {
+    color: "#006A80",
+    opacity: 0.4
+  },
+  {
+    color: "#006A80",
+    opacity: 0.2
+  },
+  {
+    color: "#006A80",
+    opacity: 0.1
+  },
+  {
+    color: "#009930",
+    opacity: 1
+  },
+  {
+    color: "#009930",
+    opacity: 0.8
+  },
+  {
+    color: "#009930",
+    opacity: 0.6
+  },
+  {
+    color: "#009930",
+    opacity: 0.4
+  },
+  {
+    color: "#009930",
+    opacity: 0.2
+  },
+  {
+    color: "#009930",
+    opacity: 0.1
+  }
+];
+var ProfitAndLossDetailedCharts = () => {
+  const {
+    data,
+    filteredData,
+    filteredTotal,
+    sortBy,
+    filters,
+    isLoading,
+    dateRange,
+    sidebarScope,
+    setSidebarScope,
+    setFilterTypes
+  } = useContext6(ProfitAndLoss.Context);
+  const [hoveredItem, setHoveredItem] = useState15();
+  const chartData = useMemo5(() => {
+    if (!filteredData) {
+      return [];
+    }
+    return filteredData.map((x) => {
+      if (x.hidden) {
+        return {
+          name: x.display_name,
+          value: 0
+        };
+      }
+      return {
+        name: x.display_name,
+        value: x.value
+      };
+    });
+  }, [filteredData]);
+  const buildColClass = (column) => {
+    return classNames23(
+      "Layer__sortable-col",
+      sidebarScope && filters[sidebarScope]?.sortBy === column ? `sort--${(sidebarScope && filters[sidebarScope]?.sortDirection) ?? "desc"}` : ""
+    );
+  };
+  return /* @__PURE__ */ React68.createElement(
+    "div",
+    {
+      className: classNames23(
+        "Layer__profit-and-loss__side-panel",
+        sidebarScope && "open"
+      )
+    },
+    /* @__PURE__ */ React68.createElement("div", { className: "Layer__profit-and-loss-detailed-charts" }, /* @__PURE__ */ React68.createElement("header", null, /* @__PURE__ */ React68.createElement("div", { className: "Layer__profit-and-loss-detailed-charts__head" }, /* @__PURE__ */ React68.createElement(Text, { size: "lg" /* lg */, weight: "bold" /* bold */, className: "title" }, humanizeTitle(sidebarScope)), /* @__PURE__ */ React68.createElement(Text, { size: "sm" /* sm */, className: "date" }, format6(dateRange.startDate, "LLLL, y"))), /* @__PURE__ */ React68.createElement(
+      Button,
+      {
+        rightIcon: /* @__PURE__ */ React68.createElement(X_default, null),
+        iconOnly: true,
+        onClick: () => setSidebarScope(void 0),
+        variant: "secondary" /* secondary */
+      }
+    )), /* @__PURE__ */ React68.createElement("div", { className: "chart-container" }, /* @__PURE__ */ React68.createElement(ResponsiveContainer2, null, /* @__PURE__ */ React68.createElement(PieChart, null, /* @__PURE__ */ React68.createElement(
+      Pie,
+      {
+        data: chartData,
+        dataKey: "value",
+        nameKey: "name",
+        cx: "50%",
+        cy: "50%",
+        innerRadius: 105,
+        outerRadius: 120,
+        paddingAngle: 0.5,
+        fill: "#8884d8"
+      },
+      chartData.map((entry, index) => {
+        const colorConfig = DEFAULT_CHART_COLORS[index % DEFAULT_CHART_COLORS.length];
+        let fill = colorConfig.color;
+        let opacity = colorConfig.opacity;
+        let active = true;
+        if (hoveredItem && entry.name !== hoveredItem) {
+          active = false;
+          fill = void 0;
+          opacity = INACTIVE_OPACITY_LEVELS[index % INACTIVE_OPACITY_LEVELS.length];
+        }
+        return /* @__PURE__ */ React68.createElement(
+          Cell2,
+          {
+            key: `cell-${index}`,
+            className: `Layer__profit-and-loss-detailed-charts__pie ${hoveredItem && active ? "active" : "inactive"}`,
+            style: { fill },
+            opacity,
+            onMouseEnter: () => setHoveredItem(entry.name),
+            onMouseLeave: () => setHoveredItem(void 0)
+          }
+        );
+      }),
+      /* @__PURE__ */ React68.createElement(
+        Label,
+        {
+          position: "center",
+          value: "Total",
+          className: "pie-center-label-title",
+          content: (props) => {
+            const { cx, cy } = props.viewBox ?? {
+              cx: 0,
+              cy: 0
+            };
+            const positioningProps = {
+              x: cx,
+              y: (cy || 0) - 15,
+              textAnchor: "middle",
+              verticalAnchor: "middle"
+            };
+            let text = "Total";
+            if (hoveredItem) {
+              text = hoveredItem;
+            }
+            return /* @__PURE__ */ React68.createElement(
+              ChartText,
+              {
+                ...positioningProps,
+                className: "pie-center-label__title"
+              },
+              text
+            );
+          }
+        }
+      ),
+      /* @__PURE__ */ React68.createElement(
+        Label,
+        {
+          position: "center",
+          value: "Total",
+          className: "pie-center-label-title",
+          content: (props) => {
+            const { cx, cy } = props.viewBox ?? {
+              cx: 0,
+              cy: 0
+            };
+            const positioningProps = {
+              x: cx,
+              y: (cy || 0) + 5,
+              textAnchor: "middle",
+              verticalAnchor: "middle"
+            };
+            let value = filteredTotal;
+            if (hoveredItem) {
+              value = filteredData.find(
+                (x) => x.display_name === hoveredItem
+              )?.value;
+            }
+            return /* @__PURE__ */ React68.createElement(
+              ChartText,
+              {
+                ...positioningProps,
+                className: "pie-center-label__value"
+              },
+              `$${centsToDollars(value)}`
+            );
+          }
+        }
+      ),
+      /* @__PURE__ */ React68.createElement(
+        Label,
+        {
+          position: "center",
+          value: "Total",
+          className: "pie-center-label-title",
+          content: (props) => {
+            const { cx, cy } = props.viewBox ?? {
+              cx: 0,
+              cy: 0
+            };
+            const positioningProps = {
+              x: cx,
+              y: (cy || 0) + 25,
+              height: 20,
+              textAnchor: "middle",
+              verticalAnchor: "middle"
+            };
+            if (hoveredItem) {
+              return /* @__PURE__ */ React68.createElement(
+                ChartText,
+                {
+                  ...positioningProps,
+                  className: "pie-center-label__share"
+                },
+                `${formatPercent(
+                  filteredData.find(
+                    (x) => x.display_name === hoveredItem
+                  )?.share
+                )}%`
+              );
+            }
+            return;
+          }
+        }
+      )
+    )))), /* @__PURE__ */ React68.createElement("div", { className: "filters" }, /* @__PURE__ */ React68.createElement(Text, { size: "sm" /* sm */, className: "Layer__label" }, "Filters"), /* @__PURE__ */ React68.createElement(
+      Select3,
+      {
+        className: "type-select",
+        classNamePrefix: "Layer__select",
+        value: sidebarScope && filters[sidebarScope]?.types ? sidebarScope && filters[sidebarScope]?.types?.map((x) => ({
+          value: x,
+          label: x
+        })) : [],
+        isMulti: true,
+        isClearable: false,
+        options: [...new Set(filteredData?.map((x) => x.type))].map((x) => ({
+          label: x,
+          value: x
+        })),
+        onChange: (selected) => {
+          setFilterTypes(
+            sidebarScope ?? "expenses",
+            selected.map((x) => x.value)
+          );
+        }
+      }
+    )), /* @__PURE__ */ React68.createElement("div", { className: "details-container" }, /* @__PURE__ */ React68.createElement("div", { className: "table" }, /* @__PURE__ */ React68.createElement("table", null, /* @__PURE__ */ React68.createElement("thead", null, /* @__PURE__ */ React68.createElement("tr", null, /* @__PURE__ */ React68.createElement(
+      "th",
+      {
+        className: buildColClass("category"),
+        onClick: () => sortBy(sidebarScope ?? "expenses", "category")
+      },
+      "Expense/Sale ",
+      /* @__PURE__ */ React68.createElement(SortArrows_default, { className: "Layer__sort-arrows" })
+    ), /* @__PURE__ */ React68.createElement(
+      "th",
+      {
+        className: buildColClass("type"),
+        onClick: () => sortBy(sidebarScope ?? "expenses", "type")
+      },
+      "Type ",
+      /* @__PURE__ */ React68.createElement(SortArrows_default, { className: "Layer__sort-arrows" })
+    ), /* @__PURE__ */ React68.createElement("th", null), /* @__PURE__ */ React68.createElement(
+      "th",
+      {
+        className: buildColClass("value"),
+        onClick: () => sortBy(sidebarScope ?? "expenses", "value")
+      },
+      "Value ",
+      /* @__PURE__ */ React68.createElement(SortArrows_default, { className: "Layer__sort-arrows" })
+    ))), /* @__PURE__ */ React68.createElement("tbody", null, filteredData.filter((x) => !x.hidden).map((item, idx) => {
+      const colorConfig = DEFAULT_CHART_COLORS[idx % DEFAULT_CHART_COLORS.length];
+      return /* @__PURE__ */ React68.createElement(
+        "tr",
+        {
+          key: `pl-side-table-item-${idx}`,
+          className: classNames23(
+            "Layer__profit-and-loss-detailed-table__row",
+            hoveredItem && hoveredItem !== item.display_name ? "inactive" : ""
+          ),
+          onMouseEnter: () => setHoveredItem(item.display_name),
+          onMouseLeave: () => setHoveredItem(void 0)
+        },
+        /* @__PURE__ */ React68.createElement("td", { className: "category-col" }, item.display_name),
+        /* @__PURE__ */ React68.createElement("td", { className: "type-col" }, item.type),
+        /* @__PURE__ */ React68.createElement("td", { className: "value-col" }, "$", centsToDollars(item.value)),
+        /* @__PURE__ */ React68.createElement("td", { className: "share-col" }, /* @__PURE__ */ React68.createElement("span", { className: "share-cell-content" }, formatPercent(item.share), "%", /* @__PURE__ */ React68.createElement(
+          "div",
+          {
+            className: "share-icon",
+            style: {
+              background: colorConfig.color,
+              opacity: colorConfig.opacity
+            }
+          }
+        )))
+      );
+    }))))))
+  );
+};
+
+// src/components/ProfitAndLossView/ProfitAndLossView.tsx
 var COMPONENT_NAME3 = "profit-and-loss";
 var ProfitAndLossView = (props) => {
-  return /* @__PURE__ */ React66.createElement(Container, { name: COMPONENT_NAME3 }, /* @__PURE__ */ React66.createElement(Header, { className: `Layer__${COMPONENT_NAME3}__header` }, /* @__PURE__ */ React66.createElement(Heading, { className: "Layer__bank-transactions__title" }, "Profit & Loss")), /* @__PURE__ */ React66.createElement(ProfitAndLoss, null, /* @__PURE__ */ React66.createElement(Components, { ...props })));
+  return /* @__PURE__ */ React69.createElement(Container, { name: COMPONENT_NAME3 }, /* @__PURE__ */ React69.createElement(ProfitAndLoss, null, /* @__PURE__ */ React69.createElement("div", { className: `Layer__${COMPONENT_NAME3}__main-panel` }, /* @__PURE__ */ React69.createElement(Header, { className: `Layer__${COMPONENT_NAME3}__header` }, /* @__PURE__ */ React69.createElement(Heading, { className: "Layer__bank-transactions__title" }, "Profit & Loss")), /* @__PURE__ */ React69.createElement(Components, { ...props })), props.showDetailedCharts !== false && /* @__PURE__ */ React69.createElement(ProfitAndLossDetailedCharts, null)));
 };
 var Components = ({
   hideChart = false,
   hideTable = false
 }) => {
-  const { error, isLoading, isValidating, refetch } = useContext6(
+  const { error, isLoading, isValidating, refetch } = useContext7(
     ProfitAndLoss.Context
   );
   if (!isLoading && error) {
-    return /* @__PURE__ */ React66.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React66.createElement(
+    return /* @__PURE__ */ React69.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React69.createElement(
       DataState,
       {
         status: "failed" /* failed */,
@@ -4819,24 +5471,24 @@ var Components = ({
       }
     ));
   }
-  return /* @__PURE__ */ React66.createElement(React66.Fragment, null, !hideChart && /* @__PURE__ */ React66.createElement("div", { className: `Layer__${COMPONENT_NAME3}__chart_with_summaries` }, /* @__PURE__ */ React66.createElement(
+  return /* @__PURE__ */ React69.createElement(React69.Fragment, null, !hideChart && /* @__PURE__ */ React69.createElement("div", { className: `Layer__${COMPONENT_NAME3}__chart_with_summaries` }, /* @__PURE__ */ React69.createElement(
     "div",
     {
       className: `Layer__${COMPONENT_NAME3}__chart_with_summaries__summary-col`
     },
-    /* @__PURE__ */ React66.createElement(ProfitAndLoss.DatePicker, null),
-    /* @__PURE__ */ React66.createElement(ProfitAndLoss.Summaries, { vertical: true })
-  ), /* @__PURE__ */ React66.createElement(
+    /* @__PURE__ */ React69.createElement(ProfitAndLoss.DatePicker, null),
+    /* @__PURE__ */ React69.createElement(ProfitAndLoss.Summaries, { vertical: true })
+  ), /* @__PURE__ */ React69.createElement(
     "div",
     {
       className: `Layer__${COMPONENT_NAME3}__chart_with_summaries__chart-col`
     },
-    /* @__PURE__ */ React66.createElement(ProfitAndLoss.Chart, null)
-  )), !hideTable && /* @__PURE__ */ React66.createElement(ProfitAndLoss.Table, null));
+    /* @__PURE__ */ React69.createElement(ProfitAndLoss.Chart, null)
+  )), !hideTable && /* @__PURE__ */ React69.createElement(ProfitAndLoss.Table, null));
 };
 
 // src/providers/LayerProvider/LayerProvider.tsx
-import React67, { useReducer, useEffect as useEffect9 } from "react";
+import React70, { useReducer, useEffect as useEffect9 } from "react";
 import { add as add2, isBefore } from "date-fns";
 import useSWR5, { SWRConfig } from "swr";
 var reducer = (state, action) => {
@@ -4951,11 +5603,11 @@ var LayerProvider = ({
     }
     return;
   };
-  return /* @__PURE__ */ React67.createElement(SWRConfig, { value: defaultSWRConfig }, /* @__PURE__ */ React67.createElement(LayerContext.Provider, { value: { ...state, setTheme, getColor } }, children));
+  return /* @__PURE__ */ React70.createElement(SWRConfig, { value: defaultSWRConfig }, /* @__PURE__ */ React70.createElement(LayerContext.Provider, { value: { ...state, setTheme, getColor } }, children));
 };
 
 // src/components/ChartOfAccounts/ChartOfAccounts.tsx
-import React70, { useState as useState16 } from "react";
+import React73, { useState as useState17 } from "react";
 
 // src/hooks/useChartOfAccounts/useChartOfAccounts.tsx
 import useSWR6 from "swr";
@@ -4975,21 +5627,21 @@ var useChartOfAccounts = () => {
 };
 
 // src/components/ChartOfAccountsNewForm/ChartOfAccountsNewForm.tsx
-import React68, { useMemo as useMemo4, useState as useState15 } from "react";
-import Select3 from "react-select";
+import React71, { useMemo as useMemo6, useState as useState16 } from "react";
+import Select4 from "react-select";
 var flattenAccounts = (accounts) => accounts.flatMap((a) => [a, flattenAccounts(a.subAccounts || [])]).flat().filter((id) => id);
 var ChartOfAccountsNewForm = () => {
   const { data, create: createAccount2 } = useChartOfAccounts();
-  const accountOptions = useMemo4(
+  const accountOptions = useMemo6(
     () => flattenAccounts(data?.accounts || []).sort(
       (a, b) => a?.name && b?.name ? a.name.localeCompare(b.name) : 0
     ),
     [data?.accounts?.length]
   );
-  const [name, setName] = useState15("");
-  const [description, setDescription] = useState15("");
-  const [normality, setNormality] = useState15("DEBIT" /* DEBIT */);
-  const [parentAccount, setParentAccount] = useState15(
+  const [name, setName] = useState16("");
+  const [description, setDescription] = useState16("");
+  const [normality, setNormality] = useState16("DEBIT" /* DEBIT */);
+  const [parentAccount, setParentAccount] = useState16(
     data?.accounts[0]
   );
   const save = () => {
@@ -5003,22 +5655,22 @@ var ChartOfAccountsNewForm = () => {
       description
     });
   };
-  return /* @__PURE__ */ React68.createElement("div", { className: "Layer__chart-of-accounts-new-form" }, /* @__PURE__ */ React68.createElement("div", { className: "Layer__chart-of-accounts-new-form__field" }, /* @__PURE__ */ React68.createElement("span", null, "Name"), /* @__PURE__ */ React68.createElement(
+  return /* @__PURE__ */ React71.createElement("div", { className: "Layer__chart-of-accounts-new-form" }, /* @__PURE__ */ React71.createElement("div", { className: "Layer__chart-of-accounts-new-form__field" }, /* @__PURE__ */ React71.createElement("span", null, "Name"), /* @__PURE__ */ React71.createElement(
     "input",
     {
       name: "name",
       value: name,
       onChange: (event) => setName(event.target.value)
     }
-  )), /* @__PURE__ */ React68.createElement("div", { className: "Layer__chart-of-accounts-new-form__field" }, /* @__PURE__ */ React68.createElement("span", null, "Description"), /* @__PURE__ */ React68.createElement(
+  )), /* @__PURE__ */ React71.createElement("div", { className: "Layer__chart-of-accounts-new-form__field" }, /* @__PURE__ */ React71.createElement("span", null, "Description"), /* @__PURE__ */ React71.createElement(
     "input",
     {
       name: "description",
       value: description,
       onChange: (event) => setDescription(event.target.value)
     }
-  )), /* @__PURE__ */ React68.createElement("div", { className: "Layer__chart-of-accounts-new-form__field" }, /* @__PURE__ */ React68.createElement("span", null, "Normality"), /* @__PURE__ */ React68.createElement(
-    Select3,
+  )), /* @__PURE__ */ React71.createElement("div", { className: "Layer__chart-of-accounts-new-form__field" }, /* @__PURE__ */ React71.createElement("span", null, "Normality"), /* @__PURE__ */ React71.createElement(
+    Select4,
     {
       isSearchable: false,
       onChange: (value) => value && setNormality(value.value),
@@ -5027,8 +5679,8 @@ var ChartOfAccountsNewForm = () => {
         { label: "Debit", value: "DEBIT" /* DEBIT */ }
       ]
     }
-  )), /* @__PURE__ */ React68.createElement("div", { className: "Layer__chart-of-accounts-new-form__field" }, /* @__PURE__ */ React68.createElement("span", null, "Parent Account"), /* @__PURE__ */ React68.createElement(
-    Select3,
+  )), /* @__PURE__ */ React71.createElement("div", { className: "Layer__chart-of-accounts-new-form__field" }, /* @__PURE__ */ React71.createElement("span", null, "Parent Account"), /* @__PURE__ */ React71.createElement(
+    Select4,
     {
       isSearchable: true,
       value: parentAccount,
@@ -5037,49 +5689,49 @@ var ChartOfAccountsNewForm = () => {
       getOptionValue: (a) => a.id,
       options: accountOptions
     }
-  )), /* @__PURE__ */ React68.createElement("div", { className: "Layer__chart-of-accounts-new-form__field Layer__chart-of-accounts-new-form__field--actions" }, /* @__PURE__ */ React68.createElement("button", { onClick: save }, "Save")));
+  )), /* @__PURE__ */ React71.createElement("div", { className: "Layer__chart-of-accounts-new-form__field Layer__chart-of-accounts-new-form__field--actions" }, /* @__PURE__ */ React71.createElement("button", { onClick: save }, "Save")));
 };
 
 // src/components/ChartOfAccountsRow/ChartOfAccountsRow.tsx
-import React69 from "react";
+import React72 from "react";
 var ChartOfAccountsRow = ({ account, depth = 0 }) => {
-  const classNames22 = [
+  const classNames24 = [
     "Layer__chart-of-accounts-row__table-cell",
     depth > 0 && `Layer__chart-of-accounts-row__table-cell--depth-${depth}`
   ];
-  const className = classNames22.filter((id) => id).join(" ");
+  const className = classNames24.filter((id) => id).join(" ");
   const amountClassName = account.balance < 0 ? "Layer__chart-of-accounts-row__table-cell--amount-negative" : "Layer__chart-of-accounts-row__table-cell--amount-positive";
-  return /* @__PURE__ */ React69.createElement(React69.Fragment, null, /* @__PURE__ */ React69.createElement(
+  return /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement(
     "div",
     {
       className: `${className} Layer__chart-of-accounts-row__table-cell--name`
     },
     account.name
-  ), /* @__PURE__ */ React69.createElement(
+  ), /* @__PURE__ */ React72.createElement(
     "div",
     {
       className: `${className} Layer__chart-of-accounts-row__table-cell--type`
     },
     "Assets"
-  ), /* @__PURE__ */ React69.createElement(
+  ), /* @__PURE__ */ React72.createElement(
     "div",
     {
       className: `${className} Layer__chart-of-accounts-row__table-cell--subtype`
     },
     "Cash"
-  ), /* @__PURE__ */ React69.createElement(
+  ), /* @__PURE__ */ React72.createElement(
     "div",
     {
       className: `${className} Layer__chart-of-accounts-row__table-cell--balance ${amountClassName}`
     },
     centsToDollars(Math.abs(account.balance || 0))
-  ), /* @__PURE__ */ React69.createElement(
+  ), /* @__PURE__ */ React72.createElement(
     "div",
     {
       className: `${className} Layer__chart-of-accounts-row__table-cell--actions`
     },
-    /* @__PURE__ */ React69.createElement("button", { className: "Layer__chart-of-accounts-row__view-entries-button" }, "View Entries")
-  ), (account.subAccounts || []).map((subAccount) => /* @__PURE__ */ React69.createElement(
+    /* @__PURE__ */ React72.createElement("button", { className: "Layer__chart-of-accounts-row__view-entries-button" }, "View Entries")
+  ), (account.subAccounts || []).map((subAccount) => /* @__PURE__ */ React72.createElement(
     ChartOfAccountsRow,
     {
       key: subAccount.id,
@@ -5092,15 +5744,15 @@ var ChartOfAccountsRow = ({ account, depth = 0 }) => {
 // src/components/ChartOfAccounts/ChartOfAccounts.tsx
 var ChartOfAccounts = () => {
   const { data, isLoading } = useChartOfAccounts();
-  const [showingForm, setShowingForm] = useState16(false);
-  return /* @__PURE__ */ React70.createElement("div", { className: "Layer__component Layer__chart-of-accounts" }, !data || isLoading ? "Loading." : /* @__PURE__ */ React70.createElement(React70.Fragment, null, /* @__PURE__ */ React70.createElement("div", { className: "Layer__chart-of-accounts__header" }, /* @__PURE__ */ React70.createElement("h2", { className: "Layer__chart-of-accounts__title" }, "Chart of Accounts"), /* @__PURE__ */ React70.createElement("div", { className: "Layer__chart-of-accounts__actions" }, /* @__PURE__ */ React70.createElement("button", { className: "Layer__chart-of-accounts__download-button" }, /* @__PURE__ */ React70.createElement(DownloadCloud_default, null), "Download"), /* @__PURE__ */ React70.createElement(
+  const [showingForm, setShowingForm] = useState17(false);
+  return /* @__PURE__ */ React73.createElement("div", { className: "Layer__component Layer__chart-of-accounts" }, !data || isLoading ? "Loading." : /* @__PURE__ */ React73.createElement(React73.Fragment, null, /* @__PURE__ */ React73.createElement("div", { className: "Layer__chart-of-accounts__header" }, /* @__PURE__ */ React73.createElement("h2", { className: "Layer__chart-of-accounts__title" }, "Chart of Accounts"), /* @__PURE__ */ React73.createElement("div", { className: "Layer__chart-of-accounts__actions" }, /* @__PURE__ */ React73.createElement("button", { className: "Layer__chart-of-accounts__download-button" }, /* @__PURE__ */ React73.createElement(DownloadCloud_default, null), "Download"), /* @__PURE__ */ React73.createElement(
     "button",
     {
       className: "Layer__chart-of-accounts__edit-accounts-button",
       onClick: () => setShowingForm(!showingForm)
     },
     "Edit Accounts"
-  ))), showingForm && /* @__PURE__ */ React70.createElement(ChartOfAccountsNewForm, null), /* @__PURE__ */ React70.createElement("div", { className: "Layer__chart-of-accounts__table" }, /* @__PURE__ */ React70.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header" }, "Name"), /* @__PURE__ */ React70.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header" }, "Type"), /* @__PURE__ */ React70.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header" }, "Sub-Type"), /* @__PURE__ */ React70.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header Layer__chart-of-accounts__table-cell--header-balance" }, "Balance"), /* @__PURE__ */ React70.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header" }), data.accounts.map((account) => /* @__PURE__ */ React70.createElement(
+  ))), showingForm && /* @__PURE__ */ React73.createElement(ChartOfAccountsNewForm, null), /* @__PURE__ */ React73.createElement("div", { className: "Layer__chart-of-accounts__table" }, /* @__PURE__ */ React73.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header" }, "Name"), /* @__PURE__ */ React73.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header" }, "Type"), /* @__PURE__ */ React73.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header" }, "Sub-Type"), /* @__PURE__ */ React73.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header Layer__chart-of-accounts__table-cell--header-balance" }, "Balance"), /* @__PURE__ */ React73.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header" }), data.accounts.map((account) => /* @__PURE__ */ React73.createElement(
     ChartOfAccountsRow,
     {
       key: account.id,