@mx-cartographer/experiences 6.21.2-alpha.al1 → 6.21.2-alpha.al2

package/dist/index.es.js

@@ -20805,52 +20805,46 @@ const $C = (e) => e.reduce((i, a) => {
   }
 ), hf = T(
   ({ onListItemClick: e, transactions: n }) => {
-    const i = _a(), { visibleListItems: a, collapsedListItems: o } = g.useMemo(() => {
-      const h = i.sortCategoriesList(n);
-      return {
-        visibleListItems: h.slice(0, 5),
-        collapsedListItems: h.slice(5)
-      };
-    }, [i, n]), [r, s] = g.useState(!1), c = {
+    const { visibleListItems: i, collapsedListItems: a } = _a(), [o, r] = g.useState(!1), s = {
       categories: "Categories"
-    }, d = (h) => n.filter((m) => m.category_guid === h), _ = ({ guid: h, name: m, amount: p }, f, E) => {
-      const y = a.length + (r ? o.length : 0), x = (E === o ? a.length + f : f) === y - 1, v = d(h), w = {
-        guid: h,
-        name: m,
-        amount: p,
-        transactions: v,
-        transactionCount: v.length
+    }, c = (u) => n.filter((h) => h.category_guid === u), d = ({ guid: u, name: h, amount: m }, p, f) => {
+      const E = i.length + (o ? a.length : 0), S = (f === a ? i.length + p : p) === E - 1, x = c(u), v = {
+        guid: u,
+        name: h,
+        amount: m,
+        transactions: x,
+        transactionCount: x.length
       };
       return /* @__PURE__ */ l(g.Fragment, { children: [
         /* @__PURE__ */ t(
           Qc,
           {
-            amount: p,
-            guid: h,
-            name: m,
-            onClick: () => e(w),
-            transactionCount: v.length
+            amount: m,
+            guid: u,
+            name: h,
+            onClick: x.length > 0 ? () => e(v) : void 0,
+            transactionCount: x.length
           }
         ),
-        /* @__PURE__ */ t(H, { sx: { ml: x ? 24 : 68 } })
-      ] }, h);
-    }, u = () => {
-      s(!r);
+        /* @__PURE__ */ t(H, { sx: { ml: S ? 24 : 68 } })
+      ] }, u);
+    }, _ = () => {
+      r(!o);
     };
     return /* @__PURE__ */ t(b, { sx: { pb: 48, width: "100%" }, children: /* @__PURE__ */ l(ae, { children: [
-      /* @__PURE__ */ t(b, { sx: { pb: 4, pt: 16, px: 24 }, children: /* @__PURE__ */ t(st, { children: c.categories }) }),
-      a.map((h, m) => _(h, m, a)),
+      /* @__PURE__ */ t(b, { sx: { pb: 4, pt: 16, px: 24 }, children: /* @__PURE__ */ t(st, { children: s.categories }) }),
+      i.map((u, h) => d(u, h, i)),
       /* @__PURE__ */ t(
         Kn,
         {
-          in: r,
+          in: o,
           sx: { "&.MuiCollapse-root .MuiListItemButton-root": { paddingLeft: 24 } },
-          children: o.map(
-            (h, m) => _(h, m, o)
+          children: a.map(
+            (u, h) => d(u, h, a)
           )
         }
       ),
-      o.length > 0 && /* @__PURE__ */ t(uf, { isExpanded: r, onClick: u })
+      a.length > 0 && /* @__PURE__ */ t(uf, { isExpanded: o, onClick: _ })
     ] }) });
   }
 );
@@ -22792,7 +22786,7 @@ const Li = g.createContext(null), yf = ({
     close_category_details: "Close category details",
     transaction: "Transaction",
     transactions: "Transactions"
-  }, a = () => n ? n.isIncome ? i.category_income : i.category_spending : "", o = () => {
+  }, a = () => n ? n.isIncome ? i.category_income : i.category_spending : "", o = ` ${n?.transactionCount === 1 ? i.transaction : i.transactions} (${n?.transactionCount})`, r = () => {
     e?.();
   };
   return /* @__PURE__ */ t(
@@ -22800,16 +22794,37 @@ const Li = g.createContext(null), yf = ({
     {
       ariaLabelClose: i.close_category_details,
       isOpen: !!n,
-      onClose: o,
+      onClose: r,
       title: a(),
-      children: /* @__PURE__ */ t(b, { sx: { border: "2px solid red", alignItems: "flex-start", pt: 16 }, children: n && /* @__PURE__ */ t(
-        Qc,
-        {
-          amount: n.amount,
-          guid: n.guid,
-          name: n.name
-        }
-      ) })
+      children: /* @__PURE__ */ t(b, { sx: { alignItems: "center", pt: 16 }, children: n && /* @__PURE__ */ l(g.Fragment, { children: [
+        /* @__PURE__ */ t(
+          Qc,
+          {
+            amount: n.amount,
+            guid: n.guid,
+            name: n.name
+          }
+        ),
+        /* @__PURE__ */ t(b, { sx: { alignItems: "center", height: 265, p: 24, pt: 12, width: "100%" } }),
+        /* @__PURE__ */ l(
+          b,
+          {
+            sx: {
+              alignItems: "flex-start",
+              alignSelf: "stretch",
+              flexDirection: "row",
+              justifyContent: "space-between",
+              pb: 12,
+              pt: 16,
+              px: 24
+            },
+            children: [
+              /* @__PURE__ */ t(C, { bold: !0, variant: "body1", children: o }),
+              /* @__PURE__ */ t(C, { bold: !0, children: "Export CSV" })
+            ]
+          }
+        )
+      ] }) })
     }
   );
 }), $f = (e, n) => {
@@ -23028,17 +23043,11 @@ class e0 {
   setSelectedCategoryData = (n) => {
     this.selectedCategoryData = n;
   };
-  sortCategoriesList = (n = []) => !this.detailedCategories || this.detailedCategories.length === 0 ? [] : this.detailedCategories.map((i) => {
-    const a = i.monthlyAmounts.reduce((r, s) => r + (s.amount || 0), 0), o = n.filter(
-      (r) => r.category_guid === i.guid
-    );
-    return {
-      guid: i.guid,
-      name: i.name,
-      amount: a,
-      hasTransactions: o.length > 0
-    };
-  }).filter((i) => i.hasTransactions && i.amount !== 0).sort((i, a) => a.amount - i.amount).map(({ guid: i, name: a, amount: o }) => ({ guid: i, name: a, amount: o }));
+  sortCategoriesList = () => !this.detailedCategories || this.detailedCategories.length === 0 ? [] : this.detailedCategories.map((n) => ({
+    guid: n.guid,
+    name: n.name,
+    amount: n.monthlyAmounts.reduce((i, a) => i + (a.amount || 0), 0)
+  })).filter((n) => n.amount !== 0).sort((n, i) => i.amount - n.amount);
   get detailedCategories() {
     return this.globalStore.categoryStore.detailedCategories;
   }