@mx-cartographer/experiences 9.2.4-alpha.al5 → 9.3.0-alph.bb2

package/dist/budgets/components/budgetdetails/BudgetDetails.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BudgetDetails.es.js","names":[],"sources":["../../../../src/budgets/components/budgetdetails/BudgetDetails.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Button from '@mui/material/Button'\nimport Stack from '@mui/material/Stack'\nimport Tab from '@mui/material/Tab'\nimport Tabs from '@mui/material/Tabs'\n\nimport { Icon } from '@mxenabled/mxui'\n\nimport {\n  Drawer,\n  useAppConfig,\n  useBudgetsStore,\n  useGlobalCopyStore,\n  useScreenSize,\n  useTransactionStore,\n} from '../../../common'\nimport { type DetailedBudget } from '../../../core'\nimport { exportTransactionsToCSV } from '../../../core/utils/TransactionUtils'\n\nimport { TransactionDetails, TransactionList } from '../../../transactions'\n\nimport { Header } from './Header'\nimport { SubBudgetList } from './SubBudgetList'\n\ninterface BudgetDetailsProps {\n  budget: DetailedBudget\n}\n\nexport const BudgetDetails: React.FC<BudgetDetailsProps> = observer(({ budget }) => {\n  const { is_mobile_webview } = useAppConfig()\n  const { setAlert } = useBudgetsStore()\n  const { budgets: copy, common: commonCopy, transactions: transactionCopy } = useGlobalCopyStore()\n  const { isDesktop, isSmallTablet, isTablet } = useScreenSize()\n  const {\n    sortedTransactions: transactions,\n    sortedTransactionsWithSplits,\n    tags,\n  } = useTransactionStore()\n\n  const [selectedTab, setSelectedTab] = React.useState(0)\n  const [transactionGuid, setTransactionGuid] = React.useState('')\n\n  const transaction = React.useMemo(\n    () => transactions.find((t) => t.guid === transactionGuid),\n    [transactionGuid, transactions],\n  )\n\n  const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {\n    setSelectedTab(newValue)\n  }\n\n  const handleExportToCsv = () => {\n    exportTransactionsToCSV(sortedTransactionsWithSplits, tags)\n    setAlert(copy.alert_csv_downloaded)\n  }\n\n  const shouldShowExportButton =\n    transactions.length > 0 && !is_mobile_webview && (isDesktop || (isTablet && !isSmallTablet))\n\n  return (\n    <Stack gap={24}>\n      <Header budget={budget} />\n\n      <Stack>\n        <Tabs\n          onChange={handleTabChange}\n          sx={{ width: '100%' }}\n          textColor=\"primary\"\n          value={selectedTab}\n          variant=\"fullWidth\"\n        >\n          <Tab label={copy.details_transactions_tab} />\n          <Tab label={copy.details_subbudgets_tab} />\n        </Tabs>\n        {selectedTab === 0 && (\n          <Stack>\n            {shouldShowExportButton && (\n              <Stack direction=\"row\" justifyContent=\"right\" mb={-24} mr={8} mt={8} zIndex={1}>\n                <Button\n                  onClick={handleExportToCsv}\n                  startIcon={<Icon name=\"ios_share\" />}\n                  variant=\"text\"\n                >\n                  {transactionCopy.export_csv_btn}\n                </Button>\n              </Stack>\n            )}\n            <TransactionList height=\"100%\" onClick={setTransactionGuid} />\n          </Stack>\n        )}\n        {selectedTab === 1 && <SubBudgetList budget={budget} />}\n\n        <Drawer\n          ariaLabelClose={commonCopy.close_aria}\n          isOpen={Boolean(transaction)}\n          onClose={() => setTransactionGuid('')}\n          title={copy.details_transaction_drawer}\n        >\n          {transaction && <TransactionDetails transaction={transaction} />}\n        </Drawer>\n      </Stack>\n    </Stack>\n  )\n})\n"],"mappings":";;;;;;;;;;;;;;;;AA8BA,IAAa,KAA8C,EAAA,CAAU,EAAE,QAAA,EAAA,MAAa;AAClF,QAAM,EAAE,mBAAA,EAAA,IAAsB,EAAa,GACrC,EAAE,UAAA,EAAA,IAAa,EAAgB,GAC/B,EAAE,SAAS,GAAM,QAAQ,GAAY,cAAc,EAAA,IAAoB,EAAmB,GAC1F,EAAE,WAAA,GAAW,eAAA,GAAe,UAAA,EAAA,IAAa,EAAc,GACvD,EACJ,oBAAoB,GACpB,8BAAA,GACA,MAAA,EAAA,IACE,EAAoB,GAElB,CAAC,GAAa,CAAA,IAAkB,EAAM,SAAS,CAAC,GAChD,CAAC,GAAiB,CAAA,IAAsB,EAAM,SAAS,EAAE,GAEzD,IAAc,EAAM,QAAA,MAClB,EAAa,KAAA,CAAM,MAAM,EAAE,SAAS,CAAe,GACzD,CAAC,GAAiB,CAAY,CAChC,GAEM,IAAA,CAAmB,GAA8B,MAAqB;AAC1E,IAAA,EAAe,CAAQ;AAAA,EACzB,GAEM,IAAA,MAA0B;AAC9B,IAAA,EAAwB,GAA8B,CAAI,GAC1D,EAAS,EAAK,oBAAoB;AAAA,EACpC,GAEM,IACJ,EAAa,SAAS,KAAK,CAAC,MAAsB,KAAc,KAAY,CAAC;AAE/E,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,KAAK;AAAA,cAAZ,CACE,gBAAA,EAAC,GAAD,EAAgB,QAAA,EAAS,CAAA,GAEzB,gBAAA,EAAC,GAAD,EAAA,UAAA;AAAA,MACE,gBAAA,EAAC,GAAD;AAAA,QACE,UAAU;AAAA,QACV,IAAI,EAAE,OAAO,OAAO;AAAA,QACpB,WAAU;AAAA,QACV,OAAO;AAAA,QACP,SAAQ;AAAA,kBALV,CAOE,gBAAA,EAAC,GAAD,EAAK,OAAO,EAAK,yBAA2B,CAAA,GAC5C,gBAAA,EAAC,GAAD,EAAK,OAAO,EAAK,uBAAyB,CAAA,CACtC;AAAA;MACL,MAAgB,KACf,gBAAA,EAAC,GAAD,EAAA,UAAA,CACG,KACC,gBAAA,EAAC,GAAD;AAAA,QAAO,WAAU;AAAA,QAAM,gBAAe;AAAA,QAAQ,IAAI;AAAA,QAAK,IAAI;AAAA,QAAG,IAAI;AAAA,QAAG,QAAQ;AAAA,kBAC3E,gBAAA,EAAC,GAAD;AAAA,UACE,SAAS;AAAA,UACT,WAAW,gBAAA,EAAC,GAAD,EAAM,MAAK,YAAa,CAAA;AAAA,UACnC,SAAQ;AAAA,oBAEP,EAAgB;AAAA,QACX,CAAA;AAAA,MACH,CAAA,GAET,gBAAA,EAAC,GAAD;AAAA,QAAiB,QAAO;AAAA,QAAO,SAAS;AAAA,MAAqB,CAAA,CACxD,EAAA,CAAA;AAAA,MAER,MAAgB,KAAK,gBAAA,EAAC,GAAD,EAAuB,QAAA,EAAS,CAAA;AAAA,MAEtD,gBAAA,EAAC,GAAD;AAAA,QACE,gBAAgB,EAAW;AAAA,QAC3B,QAAQ,EAAQ;AAAA,QAChB,SAAA,MAAe,EAAmB,EAAE;AAAA,QACpC,OAAO,EAAK;AAAA,kBAEX,KAAe,gBAAA,EAAC,GAAD,EAAiC,aAAA,EAAc,CAAA;AAAA,MACzD,CAAA;AAAA,IACH,EAAA,CAAA,CACF;AAAA;AAEX,CAAC"}

package/dist/budgets/components/budgetdetails/Header.es.js

@@ -0,0 +1,48 @@
+import p from "../../../common/components/charts/StatusBar.es.js";
+import { formatCurrency as t } from "../../../core/utils/NumberFormatting.es.js";
+import "react";
+import s from "@mui/material/Stack";
+import { CategoryIcon as l, Text as o } from "@mxenabled/mxui";
+import { jsx as r, jsxs as u } from "react/jsx-runtime";
+import f from "@mui/material/Card";
+import h from "@mui/material/CardContent";
+var S = ({ budget: a }) => {
+  const { amount: e, budgetColors: { background: n }, category: { name: m }, category_guid: c, percentage: i, transaction_total: d } = a, g = [{
+    color: n,
+    percentage: `${i}%`
+  }];
+  return /* @__PURE__ */ r(f, {
+    sx: {
+      mt: 24,
+      mx: 24
+    },
+    children: /* @__PURE__ */ r(h, { children: /* @__PURE__ */ u(s, {
+      alignItems: "center",
+      gap: 16,
+      children: [
+        /* @__PURE__ */ r(l, {
+          categoryGuid: c,
+          size: 56
+        }),
+        /* @__PURE__ */ r(o, {
+          variant: "h1",
+          children: `${t(d, "0,0")} / ${t(e, "0,0")}`
+        }),
+        /* @__PURE__ */ r(o, {
+          bold: !0,
+          variant: "caption",
+          children: m
+        }),
+        /* @__PURE__ */ r(p, {
+          data: g,
+          height: 10
+        })
+      ]
+    }) })
+  });
+};
+export {
+  S as Header
+};
+
+//# sourceMappingURL=Header.es.js.map

package/dist/budgets/components/budgetdetails/Header.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.es.js","names":[],"sources":["../../../../src/budgets/components/budgetdetails/Header.tsx"],"sourcesContent":["import React from 'react'\n\nimport Card from '@mui/material/Card'\nimport CardContent from '@mui/material/CardContent'\nimport Stack from '@mui/material/Stack'\n\nimport { CategoryIcon, Text } from '@mxenabled/mxui'\n\nimport { StatusBar } from '../../../common'\nimport { DetailedBudget } from '../../../core'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\n\ninterface HeaderProps {\n  budget: DetailedBudget\n}\n\nexport const Header: React.FC<HeaderProps> = ({ budget }) => {\n  const {\n    amount,\n    budgetColors: { background },\n    category: { name: categoryName },\n    category_guid,\n    percentage,\n    transaction_total,\n  } = budget\n\n  const status = [\n    {\n      color: background,\n      percentage: `${percentage}%`,\n    },\n  ]\n\n  return (\n    <Card sx={{ mt: 24, mx: 24 }}>\n      <CardContent>\n        <Stack alignItems=\"center\" gap={16}>\n          <CategoryIcon categoryGuid={category_guid} size={56} />\n          <Text variant=\"h1\">\n            {`${formatCurrency(transaction_total, '0,0')} / ${formatCurrency(amount, '0,0')}`}\n          </Text>\n          <Text bold={true} variant=\"caption\">\n            {categoryName}\n          </Text>\n          <StatusBar data={status} height={10} />\n        </Stack>\n      </CardContent>\n    </Card>\n  )\n}\n"],"mappings":";;;;;;;;AAgBA,IAAa,IAAA,CAAiC,EAAE,QAAA,EAAA,MAAa;AAC3D,QAAM,EACJ,QAAA,GACA,cAAc,EAAE,YAAA,EAAA,GAChB,UAAU,EAAE,MAAM,EAAA,GAClB,eAAA,GACA,YAAA,GACA,mBAAA,EAAA,IACE,GAEE,IAAS,CACb;AAAA,IACE,OAAO;AAAA,IACP,YAAY,GAAG,CAAA;AAAA,EACjB,CACF;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IAAM,IAAI;AAAA,MAAE,IAAI;AAAA,MAAI,IAAI;AAAA,IAAG;AAAA,cACzB,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,MAAO,YAAW;AAAA,MAAS,KAAK;AAAA,gBAAhC;AAAA,QACE,gBAAA,EAAC,GAAD;AAAA,UAAc,cAAc;AAAA,UAAe,MAAM;AAAA,QAAK,CAAA;AAAA,QACtD,gBAAA,EAAC,GAAD;AAAA,UAAM,SAAQ;AAAA,oBACX,GAAG,EAAe,GAAmB,KAAK,CAAA,MAAO,EAAe,GAAQ,KAAK,CAAA;AAAA,QAC1E,CAAA;AAAA,QACN,gBAAA,EAAC,GAAD;AAAA,UAAM,MAAM;AAAA,UAAM,SAAQ;AAAA,oBACvB;AAAA,QACG,CAAA;AAAA,QACN,gBAAA,EAAC,GAAD;AAAA,UAAW,MAAM;AAAA,UAAQ,QAAQ;AAAA,QAAK,CAAA;AAAA,MACjC;AAAA,OACI,CAAA;AAAA,EACT,CAAA;AAEV"}

package/dist/budgets/components/budgetdetails/SubBudgetList.es.js

@@ -0,0 +1,98 @@
+import { buildDynamicCopy as D } from "../../../core/utils/Localization.es.js";
+import { useBudgetsStore as v, useGlobalCopyStore as O, useTransactionStore as T } from "../../../common/context/hooks.es.js";
+import f from "../../../common/components/dialog/Dialog.es.js";
+import w from "../../../common/components/drawer/Drawer.es.js";
+import F from "../../../transactions/components/shared/TransactionList.es.js";
+import { BudgetAmount as L } from "../shared/BudgetAmount.es.js";
+import { Header as P } from "./Header.es.js";
+import { SubBudgetZeroState as E } from "../budgetlist/SubBudgetZeroState.es.js";
+import { SubBudgetRow as N } from "../budgetlist/SubBudgetRow.es.js";
+import { AddSubBudget as j } from "./AddSubBudget.es.js";
+import i from "react";
+import { observer as k } from "mobx-react-lite";
+import I from "@mui/material/Stack";
+import { Text as R } from "@mxenabled/mxui";
+import { jsx as t, jsxs as a } from "react/jsx-runtime";
+import $ from "@mui/material/Divider";
+import G from "@mui/material/List";
+var ie = k(({ budget: n }) => {
+  const { category: _, subBudgets: m } = n, { budgets: o, common: s } = O(), { deleteBudget: b, selectedSubBudget: e, setSelectedSubBudget: h, updateBudget: S } = v(), { filter: c, setFilter: u } = T(), [B, p] = i.useState(!1), [C, d] = i.useState(!1), [l, g] = i.useState("");
+  i.useEffect(() => {
+    e && (g(`${e.amount}`), u({
+      ...c,
+      custom: (r) => r.category_guid === e.category_guid
+    }));
+  }, [e]);
+  const x = async () => {
+    e && await S({
+      ...e,
+      amount: Number(l)
+    });
+  }, A = async () => {
+    e && await b(e.guid), d(!1), y();
+  }, y = () => {
+    u({
+      ...c,
+      custom: (r) => r.category_guid === n.category_guid || r.top_level_category_guid === n.category_guid
+    }), h(void 0);
+  };
+  return /* @__PURE__ */ a(i.Fragment, { children: [
+    /* @__PURE__ */ a(G, {
+      sx: { bgcolor: "background.paper" },
+      children: [m.length === 0 ? /* @__PURE__ */ t(E, {}) : m.map((r) => /* @__PURE__ */ a(i.Fragment, { children: [/* @__PURE__ */ t(N, { budget: r }), /* @__PURE__ */ t($, {})] }, r.guid)), /* @__PURE__ */ t(j, {
+        category: _,
+        parentBudget: n
+      })]
+    }),
+    /* @__PURE__ */ t(w, {
+      ariaLabelClose: s.close_aria,
+      isOpen: !!e,
+      onClose: y,
+      onPrimaryAction: () => p(!0),
+      onSecondaryAction: () => d(!0),
+      primaryText: o.details_edit_button,
+      secondaryText: o.details_delete_button,
+      title: o.details_title,
+      children: e && /* @__PURE__ */ a(I, {
+        gap: 24,
+        children: [/* @__PURE__ */ t(P, { budget: e }), /* @__PURE__ */ t(F, { height: "100%" })]
+      })
+    }),
+    e && /* @__PURE__ */ a(i.Fragment, { children: [/* @__PURE__ */ t(f, {
+      copy: {
+        close_aria: s.close_aria,
+        title: o.details_edit_title
+      },
+      disablePrimaryButton: Number(l) <= 0,
+      isOpen: B,
+      onClose: () => p(!1),
+      onPrimaryAction: x,
+      primaryText: o.edit_save_button,
+      children: /* @__PURE__ */ t(L, {
+        amount: l,
+        categoryName: e.category.name,
+        onAmountChanged: g
+      })
+    }), /* @__PURE__ */ t(f, {
+      copy: {
+        close_aria: s.close_aria,
+        title: o.delete_title
+      },
+      isOpen: C,
+      onClose: () => d(!1),
+      onPrimaryAction: A,
+      primaryColor: "error",
+      primaryText: "Delete",
+      secondaryColor: "secondary",
+      children: /* @__PURE__ */ t(R, {
+        variant: "subtitle1",
+        children: D(o.delete_description, e.category.name)
+      })
+    })] })
+  ] });
+});
+export {
+  ie as SubBudgetList
+};
+
+//# sourceMappingURL=SubBudgetList.es.js.map

package/dist/budgets/components/budgetdetails/SubBudgetList.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubBudgetList.es.js","names":[],"sources":["../../../../src/budgets/components/budgetdetails/SubBudgetList.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Divider from '@mui/material/Divider'\nimport List from '@mui/material/List'\nimport Stack from '@mui/material/Stack'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport {\n  Dialog,\n  Drawer,\n  useBudgetsStore,\n  useGlobalCopyStore,\n  useTransactionStore,\n} from '../../../common'\nimport { type Budget, type DetailedBudget, type Transaction } from '../../../core'\n\nimport { TransactionList } from '../../../transactions'\n\nimport { SubBudgetZeroState } from '../budgetlist/SubBudgetZeroState'\nimport { SubBudgetRow } from '../budgetlist/SubBudgetRow'\nimport { BudgetAmount } from '../shared/BudgetAmount'\nimport { AddSubBudget } from './AddSubBudget'\nimport { Header } from './Header'\nimport { buildDynamicCopy } from '../../../core/utils/Localization'\n\ninterface SubBudgetListProps {\n  budget: DetailedBudget\n}\n\nexport const SubBudgetList: React.FC<SubBudgetListProps> = observer(({ budget }) => {\n  const { category, subBudgets } = budget\n  const { budgets: copy, common: commonCopy } = useGlobalCopyStore()\n  const { deleteBudget, selectedSubBudget, setSelectedSubBudget, updateBudget } = useBudgetsStore()\n  const { filter, setFilter } = useTransactionStore()\n\n  const [isEditOpen, setIsEditOpen] = React.useState(false)\n  const [isDeleteOpen, setIsDeleteOpen] = React.useState(false)\n  const [amount, setAmount] = React.useState(``)\n\n  React.useEffect(() => {\n    if (selectedSubBudget) {\n      setAmount(`${selectedSubBudget.amount}`)\n      setFilter({\n        ...filter,\n        custom: (t: Transaction) => t.category_guid === selectedSubBudget.category_guid,\n      })\n    }\n  }, [selectedSubBudget])\n\n  const handleUpdateBudget = async () => {\n    if (selectedSubBudget) {\n      await updateBudget({\n        ...selectedSubBudget,\n        amount: Number(amount),\n      } as Budget)\n    }\n  }\n\n  const handleDeleteBudget = async () => {\n    if (selectedSubBudget) {\n      await deleteBudget(selectedSubBudget.guid)\n    }\n    setIsDeleteOpen(false)\n    handleClose()\n  }\n\n  const handleClose = () => {\n    setFilter({\n      ...filter,\n      custom: (t: Transaction) =>\n        t.category_guid === budget.category_guid ||\n        t.top_level_category_guid === budget.category_guid,\n    })\n    setSelectedSubBudget(undefined)\n  }\n\n  return (\n    <React.Fragment>\n      <List sx={{ bgcolor: 'background.paper' }}>\n        {subBudgets.length === 0 ? (\n          <SubBudgetZeroState />\n        ) : (\n          subBudgets.map((subBudget) => (\n            <React.Fragment key={subBudget.guid}>\n              <SubBudgetRow budget={subBudget} />\n              <Divider />\n            </React.Fragment>\n          ))\n        )}\n        <AddSubBudget category={category} parentBudget={budget} />\n      </List>\n      <Drawer\n        ariaLabelClose={commonCopy.close_aria}\n        isOpen={Boolean(selectedSubBudget)}\n        onClose={handleClose}\n        onPrimaryAction={() => setIsEditOpen(true)}\n        onSecondaryAction={() => setIsDeleteOpen(true)}\n        primaryText={copy.details_edit_button}\n        secondaryText={copy.details_delete_button}\n        title={copy.details_title}\n      >\n        {selectedSubBudget && (\n          <Stack gap={24}>\n            <Header budget={selectedSubBudget} />\n            <TransactionList height=\"100%\" />\n          </Stack>\n        )}\n      </Drawer>\n\n      {selectedSubBudget && (\n        <React.Fragment>\n          <Dialog\n            copy={{ close_aria: commonCopy.close_aria, title: copy.details_edit_title }}\n            disablePrimaryButton={Number(amount) <= 0}\n            isOpen={isEditOpen}\n            onClose={() => setIsEditOpen(false)}\n            onPrimaryAction={handleUpdateBudget}\n            primaryText={copy.edit_save_button}\n          >\n            <BudgetAmount\n              amount={amount}\n              categoryName={selectedSubBudget.category.name}\n              onAmountChanged={setAmount}\n            />\n          </Dialog>\n\n          <Dialog\n            copy={{ close_aria: commonCopy.close_aria, title: copy.delete_title }}\n            isOpen={isDeleteOpen}\n            onClose={() => setIsDeleteOpen(false)}\n            onPrimaryAction={handleDeleteBudget}\n            primaryColor=\"error\"\n            primaryText=\"Delete\"\n            secondaryColor=\"secondary\"\n          >\n            <Text variant=\"subtitle1\">\n              {buildDynamicCopy(copy.delete_description, selectedSubBudget.category.name) as string}\n            </Text>\n          </Dialog>\n        </React.Fragment>\n      )}\n    </React.Fragment>\n  )\n})\n"],"mappings":"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"}

package/dist/budgets/components/budgetlist/BudgetRow.es.js

@@ -0,0 +1,71 @@
+import { formatCurrency as c } from "../../../core/utils/NumberFormatting.es.js";
+import h from "../../../common/components/donuts/SingleSegmentDonut.es.js";
+import "react";
+import a from "@mui/material/Stack";
+import { CategoryIcon as b, Text as o } from "@mxenabled/mxui";
+import { jsx as t, jsxs as e } from "react/jsx-runtime";
+import y from "@mui/material/ListItem";
+import v from "@mui/material/ListItemButton";
+import x from "@mui/material/ListItemText";
+import C from "@mui/material/ListItemAvatar";
+var _ = ({ budget: r, onClick: m }) => {
+  const { amount: s, budgetColors: { background: d, description: p }, category_guid: l, description: u, percentage: i, subBudgets: f, transaction_total: g } = r, n = i > 100;
+  return /* @__PURE__ */ t(y, { children: /* @__PURE__ */ e(v, {
+    onClick: () => m?.(r),
+    children: [/* @__PURE__ */ t(C, {
+      sx: {
+        mb: -8,
+        mr: 16
+      },
+      children: /* @__PURE__ */ t(h, {
+        color: d,
+        percent: i,
+        size: 40,
+        children: /* @__PURE__ */ t(b, {
+          categoryGuid: l,
+          variant: "basic"
+        })
+      })
+    }), /* @__PURE__ */ t(x, {
+      primary: /* @__PURE__ */ e(a, {
+        component: "span",
+        direction: "row",
+        justifyContent: "space-between",
+        children: [/* @__PURE__ */ t(o, {
+          bold: !0,
+          variant: "body1",
+          children: r.category.name
+        }), /* @__PURE__ */ t(o, {
+          fontWeight: 400,
+          variant: "body1",
+          children: `
+                  ${c(g, "0,0")} /
+                  ${c(s, "0,0")}
+                `
+        })]
+      }),
+      secondary: /* @__PURE__ */ e(a, {
+        component: "span",
+        direction: "row",
+        justifyContent: "space-between",
+        children: [/* @__PURE__ */ t(o, {
+          variant: "caption",
+          children: `${f.length} Sub-budgets`
+        }), /* @__PURE__ */ t(o, {
+          bold: n,
+          sx: {
+            color: p,
+            ...n && { ".MuiListItemButton-root:hover &, .MuiListItemButton-root:active &": { color: "error.dark" } }
+          },
+          variant: "caption",
+          children: u
+        })]
+      })
+    })]
+  }) });
+};
+export {
+  _ as BudgetRow
+};
+
+//# sourceMappingURL=BudgetRow.es.js.map

package/dist/budgets/components/budgetlist/BudgetRow.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BudgetRow.es.js","names":[],"sources":["../../../../src/budgets/components/budgetlist/BudgetRow.tsx"],"sourcesContent":["import React from 'react'\n\nimport ListItem from '@mui/material/ListItem'\nimport ListItemAvatar from '@mui/material/ListItemAvatar'\nimport ListItemButton from '@mui/material/ListItemButton'\nimport ListItemText from '@mui/material/ListItemText'\nimport Stack from '@mui/material/Stack'\n\nimport { CategoryIcon, Text } from '@mxenabled/mxui'\n\nimport { SingleSegmentDonut } from '../../../common'\nimport { type DetailedBudget } from '../../../core'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\n\ninterface BudgetRowProps {\n  budget: DetailedBudget\n  onClick?: (budget: DetailedBudget) => void\n}\n\nexport const BudgetRow: React.FC<BudgetRowProps> = ({ budget, onClick }) => {\n  const {\n    amount,\n    budgetColors: { background, description: descriptionColor },\n    category_guid,\n    description,\n    percentage,\n    subBudgets,\n    transaction_total,\n  } = budget\n\n  const overBudget = percentage > 100\n\n  return (\n    <ListItem>\n      <ListItemButton onClick={() => onClick?.(budget)}>\n        <ListItemAvatar sx={{ mb: -8, mr: 16 }}>\n          <SingleSegmentDonut color={background} percent={percentage} size={40}>\n            <CategoryIcon categoryGuid={category_guid} variant=\"basic\" />\n          </SingleSegmentDonut>\n        </ListItemAvatar>\n        <ListItemText\n          primary={\n            <Stack component=\"span\" direction=\"row\" justifyContent=\"space-between\">\n              <Text bold={true} variant=\"body1\">\n                {budget.category.name}\n              </Text>\n              <Text fontWeight={400} variant=\"body1\">\n                {`\n                  ${formatCurrency(transaction_total, '0,0')} /\n                  ${formatCurrency(amount, '0,0')}\n                `}\n              </Text>\n            </Stack>\n          }\n          secondary={\n            <Stack component=\"span\" direction=\"row\" justifyContent=\"space-between\">\n              <Text variant=\"caption\">{`${subBudgets.length} Sub-budgets`}</Text>\n              <Text\n                bold={overBudget}\n                sx={{\n                  color: descriptionColor,\n                  ...(overBudget && {\n                    '.MuiListItemButton-root:hover &, .MuiListItemButton-root:active &': {\n                      color: 'error.dark',\n                    },\n                  }),\n                }}\n                variant=\"caption\"\n              >\n                {description}\n              </Text>\n            </Stack>\n          }\n        />\n      </ListItemButton>\n    </ListItem>\n  )\n}\n"],"mappings":";;;;;;;;;;AAmBA,IAAa,IAAA,CAAuC,EAAE,QAAA,GAAQ,SAAA,EAAA,MAAc;AAC1E,QAAM,EACJ,QAAA,GACA,cAAc,EAAE,YAAA,GAAY,aAAa,EAAA,GACzC,eAAA,GACA,aAAA,GACA,YAAA,GACA,YAAA,GACA,mBAAA,EAAA,IACE,GAEE,IAAa,IAAa;AAEhC,SACE,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,IAAgB,SAAA,MAAe,IAAU,CAAM;AAAA,cAA/C,CACE,gBAAA,EAAC,GAAD;AAAA,MAAgB,IAAI;AAAA,QAAE,IAAI;AAAA,QAAI,IAAI;AAAA,MAAG;AAAA,gBACnC,gBAAA,EAAC,GAAD;AAAA,QAAoB,OAAO;AAAA,QAAY,SAAS;AAAA,QAAY,MAAM;AAAA,kBAChE,gBAAA,EAAC,GAAD;AAAA,UAAc,cAAc;AAAA,UAAe,SAAQ;AAAA,QAAS,CAAA;AAAA,MAC1C,CAAA;AAAA,IACN,CAAA,GAChB,gBAAA,EAAC,GAAD;AAAA,MACE,SACE,gBAAA,EAAC,GAAD;AAAA,QAAO,WAAU;AAAA,QAAO,WAAU;AAAA,QAAM,gBAAe;AAAA,kBAAvD,CACE,gBAAA,EAAC,GAAD;AAAA,UAAM,MAAM;AAAA,UAAM,SAAQ;AAAA,oBACvB,EAAO,SAAS;AAAA,QACb,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,UAAM,YAAY;AAAA,UAAK,SAAQ;AAAA,oBAC5B;AAAA,oBACG,EAAe,GAAmB,KAAK,CAAA;AAAA,oBACvC,EAAe,GAAQ,KAAK,CAAA;AAAA;AAAA,QAE5B,CAAA,CACD;AAAA;MAET,WACE,gBAAA,EAAC,GAAD;AAAA,QAAO,WAAU;AAAA,QAAO,WAAU;AAAA,QAAM,gBAAe;AAAA,kBAAvD,CACE,gBAAA,EAAC,GAAD;AAAA,UAAM,SAAQ;AAAA,oBAAW,GAAG,EAAW,MAAA;AAAA,QAA2B,CAAA,GAClE,gBAAA,EAAC,GAAD;AAAA,UACE,MAAM;AAAA,UACN,IAAI;AAAA,YACF,OAAO;AAAA,YACP,GAAI,KAAc,EAChB,qEAAqE,EACnE,OAAO,aACT,EACF;AAAA,UACF;AAAA,UACA,SAAQ;AAAA,oBAEP;AAAA,QACG,CAAA,CACD;AAAA;IAEV,CAAA,CACa;AAAA,KACR,CAAA;AAEd"}

package/dist/budgets/components/budgetlist/SubBudgetRow.es.js

@@ -0,0 +1,62 @@
+import { useBudgetsStore as d } from "../../../common/context/hooks.es.js";
+import { formatCurrency as o } from "../../../core/utils/NumberFormatting.es.js";
+import f from "../../../common/components/donuts/SingleSegmentDonut.es.js";
+import "react";
+import { observer as u } from "mobx-react-lite";
+import e from "@mui/material/Stack";
+import { CategoryIcon as l, Text as n } from "@mxenabled/mxui";
+import { jsx as t, jsxs as g } from "react/jsx-runtime";
+import y from "@mui/material/ListItem";
+import b from "@mui/material/ListItemButton";
+import h from "@mui/material/ListItemText";
+import S from "@mui/material/ListItemAvatar";
+var z = u(({ budget: r }) => {
+  const { amount: i, budgetColors: { background: m }, category: c, percentage: a, transaction_total: s } = r, { setSelectedSubBudget: p } = d();
+  return /* @__PURE__ */ t(y, { children: /* @__PURE__ */ g(b, {
+    onClick: () => p(r),
+    children: [/* @__PURE__ */ t(S, {
+      sx: {
+        mb: -8,
+        mr: 16
+      },
+      children: /* @__PURE__ */ t(f, {
+        color: m,
+        percent: a,
+        size: 40,
+        children: /* @__PURE__ */ t(l, {
+          categoryGuid: c.parent_guid,
+          variant: "basic"
+        })
+      })
+    }), /* @__PURE__ */ t(h, {
+      primary: /* @__PURE__ */ t(e, {
+        component: "span",
+        direction: "row",
+        justifyContent: "space-between",
+        children: /* @__PURE__ */ t(n, {
+          bold: !0,
+          variant: "body1",
+          children: r.category.name
+        })
+      }),
+      secondary: /* @__PURE__ */ t(e, {
+        component: "span",
+        direction: "row",
+        justifyContent: "space-between",
+        children: /* @__PURE__ */ t(n, {
+          fontWeight: 400,
+          variant: "body1",
+          children: `
+                  ${o(s, "0,0")} / 
+                  ${o(i, "0,0")}
+                `
+        })
+      })
+    })]
+  }) });
+});
+export {
+  z as SubBudgetRow
+};
+
+//# sourceMappingURL=SubBudgetRow.es.js.map

package/dist/budgets/components/budgetlist/SubBudgetRow.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubBudgetRow.es.js","names":[],"sources":["../../../../src/budgets/components/budgetlist/SubBudgetRow.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport ListItem from '@mui/material/ListItem'\nimport ListItemAvatar from '@mui/material/ListItemAvatar'\nimport ListItemButton from '@mui/material/ListItemButton'\nimport ListItemText from '@mui/material/ListItemText'\nimport Stack from '@mui/material/Stack'\n\nimport { CategoryIcon, Text } from '@mxenabled/mxui'\n\nimport { SingleSegmentDonut, useBudgetsStore } from '../../../common'\nimport { type DetailedBudget } from '../../../core'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\n\ninterface SubBudgetRowProps {\n  budget: DetailedBudget\n}\n\nexport const SubBudgetRow: React.FC<SubBudgetRowProps> = observer(({ budget }) => {\n  const {\n    amount,\n    budgetColors: { background },\n    category,\n    percentage,\n    transaction_total,\n  } = budget\n\n  const { setSelectedSubBudget } = useBudgetsStore()\n\n  return (\n    <ListItem>\n      <ListItemButton onClick={() => setSelectedSubBudget(budget)}>\n        <ListItemAvatar sx={{ mb: -8, mr: 16 }}>\n          <SingleSegmentDonut color={background} percent={percentage} size={40}>\n            <CategoryIcon categoryGuid={category.parent_guid} variant=\"basic\" />\n          </SingleSegmentDonut>\n        </ListItemAvatar>\n        <ListItemText\n          primary={\n            <Stack component=\"span\" direction=\"row\" justifyContent=\"space-between\">\n              <Text bold={true} variant=\"body1\">\n                {budget.category.name}\n              </Text>\n            </Stack>\n          }\n          secondary={\n            <Stack component=\"span\" direction=\"row\" justifyContent=\"space-between\">\n              <Text fontWeight={400} variant=\"body1\">\n                {`\n                  ${formatCurrency(transaction_total, '0,0')} / \n                  ${formatCurrency(amount, '0,0')}\n                `}\n              </Text>\n            </Stack>\n          }\n        />\n      </ListItemButton>\n    </ListItem>\n  )\n})\n"],"mappings":";;;;;;;;;;;;AAmBA,IAAa,IAA4C,EAAA,CAAU,EAAE,QAAA,EAAA,MAAa;AAChF,QAAM,EACJ,QAAA,GACA,cAAc,EAAE,YAAA,EAAA,GAChB,UAAA,GACA,YAAA,GACA,mBAAA,EAAA,IACE,GAEE,EAAE,sBAAA,EAAA,IAAyB,EAAgB;AAEjD,SACE,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,IAAgB,SAAA,MAAe,EAAqB,CAAM;AAAA,cAA1D,CACE,gBAAA,EAAC,GAAD;AAAA,MAAgB,IAAI;AAAA,QAAE,IAAI;AAAA,QAAI,IAAI;AAAA,MAAG;AAAA,gBACnC,gBAAA,EAAC,GAAD;AAAA,QAAoB,OAAO;AAAA,QAAY,SAAS;AAAA,QAAY,MAAM;AAAA,kBAChE,gBAAA,EAAC,GAAD;AAAA,UAAc,cAAc,EAAS;AAAA,UAAa,SAAQ;AAAA,QAAS,CAAA;AAAA,MACjD,CAAA;AAAA,IACN,CAAA,GAChB,gBAAA,EAAC,GAAD;AAAA,MACE,SACE,gBAAA,EAAC,GAAD;AAAA,QAAO,WAAU;AAAA,QAAO,WAAU;AAAA,QAAM,gBAAe;AAAA,kBACrD,gBAAA,EAAC,GAAD;AAAA,UAAM,MAAM;AAAA,UAAM,SAAQ;AAAA,oBACvB,EAAO,SAAS;AAAA,QACb,CAAA;AAAA,MACD,CAAA;AAAA,MAET,WACE,gBAAA,EAAC,GAAD;AAAA,QAAO,WAAU;AAAA,QAAO,WAAU;AAAA,QAAM,gBAAe;AAAA,kBACrD,gBAAA,EAAC,GAAD;AAAA,UAAM,YAAY;AAAA,UAAK,SAAQ;AAAA,oBAC5B;AAAA,oBACG,EAAe,GAAmB,KAAK,CAAA;AAAA,oBACvC,EAAe,GAAQ,KAAK,CAAA;AAAA;AAAA,QAE5B,CAAA;AAAA,MACD,CAAA;AAAA,IAEV,CAAA,CACa;AAAA,KACR,CAAA;AAEd,CAAC"}

package/dist/budgets/components/budgetlist/SubBudgetZeroState.es.js

@@ -0,0 +1,38 @@
+import { useGlobalCopyStore as e } from "../../../common/context/hooks.es.js";
+import { observer as a } from "mobx-react-lite";
+import n from "@mui/material/Stack";
+import { Icon as s, Text as r } from "@mxenabled/mxui";
+import { jsx as o, jsxs as c } from "react/jsx-runtime";
+var l = a(() => {
+  const { budgets: t } = e();
+  return /* @__PURE__ */ c(n, {
+    alignItems: "center",
+    gap: 12,
+    height: "auto",
+    mb: 24,
+    mt: 24,
+    children: [
+      /* @__PURE__ */ o(s, {
+        color: "action",
+        name: "bubble_chart",
+        sx: { fontSize: 32 }
+      }),
+      /* @__PURE__ */ o(r, {
+        bold: !0,
+        color: "text.secondary",
+        variant: "body2",
+        children: t.zero_state_no_sub_budgets
+      }),
+      /* @__PURE__ */ o(r, {
+        color: "text.secondary",
+        variant: "caption",
+        children: t.zero_state_no_sub_budgets_description
+      })
+    ]
+  });
+});
+export {
+  l as SubBudgetZeroState
+};
+
+//# sourceMappingURL=SubBudgetZeroState.es.js.map

package/dist/budgets/components/budgetlist/SubBudgetZeroState.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubBudgetZeroState.es.js","names":[],"sources":["../../../../src/budgets/components/budgetlist/SubBudgetZeroState.tsx"],"sourcesContent":["import Stack from '@mui/material/Stack'\nimport { observer } from 'mobx-react-lite'\n\nimport { Icon, Text } from '@mxenabled/mxui'\n\nimport { useGlobalCopyStore } from '../../../common'\n\nexport const SubBudgetZeroState = observer(() => {\n  const { budgets: copy } = useGlobalCopyStore()\n\n  return (\n    <Stack alignItems=\"center\" gap={12} height=\"auto\" mb={24} mt={24}>\n      <Icon color=\"action\" name=\"bubble_chart\" sx={{ fontSize: 32 }} />\n      <Text bold={true} color=\"text.secondary\" variant=\"body2\">\n        {copy.zero_state_no_sub_budgets}\n      </Text>\n      <Text color=\"text.secondary\" variant=\"caption\">\n        {copy.zero_state_no_sub_budgets_description}\n      </Text>\n    </Stack>\n  )\n})\n"],"mappings":";;;;;AAOA,IAAa,IAAqB,EAAA,MAAe;AAC/C,QAAM,EAAE,SAAS,EAAA,IAAS,EAAmB;AAE7C,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,YAAW;AAAA,IAAS,KAAK;AAAA,IAAI,QAAO;AAAA,IAAO,IAAI;AAAA,IAAI,IAAI;AAAA,cAA9D;AAAA,MACE,gBAAA,EAAC,GAAD;AAAA,QAAM,OAAM;AAAA,QAAS,MAAK;AAAA,QAAe,IAAI,EAAE,UAAU,GAAG;AAAA,MAAI,CAAA;AAAA,MAChE,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAM;AAAA,QAAM,OAAM;AAAA,QAAiB,SAAQ;AAAA,kBAC9C,EAAK;AAAA,MACF,CAAA;AAAA,MACN,gBAAA,EAAC,GAAD;AAAA,QAAM,OAAM;AAAA,QAAiB,SAAQ;AAAA,kBAClC,EAAK;AAAA,MACF,CAAA;AAAA,IACD;AAAA;AAEX,CAAC"}

package/dist/budgets/components/shared/BudgetAmount.es.js

@@ -0,0 +1,27 @@
+import { buildDynamicCopy as r } from "../../../core/utils/Localization.es.js";
+import { useBudgetsStore as a, useGlobalCopyStore as l, useRecurringTransactionsStore as f } from "../../../common/context/hooks.es.js";
+import { formatCurrency as y } from "../../../core/utils/NumberFormatting.es.js";
+import b from "../../../common/components/CurrencyInput.es.js";
+import "react";
+import e from "@mui/material/Stack";
+import { Text as m } from "@mxenabled/mxui";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+var j = ({ amount: i, categoryName: u, onAmountChanged: c }) => {
+  const { budgets: o } = l(), { totalBudgeted: d } = a(), { incomeTotal: p } = f(), s = p - d;
+  return /* @__PURE__ */ n(e, {
+    gap: 16,
+    children: [/* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t(m, { children: r(o.add_description_top, y(s, "0,0")) }), /* @__PURE__ */ t(m, { children: r(o.add_description_bottom, u) })] }), /* @__PURE__ */ t(b, {
+      amount: i,
+      autoFocus: !0,
+      label: o.add_label,
+      minAmount: 0,
+      setAmount: c,
+      sx: { ".MuiTypography-body1": { p: 0 } }
+    })]
+  });
+};
+export {
+  j as BudgetAmount
+};
+
+//# sourceMappingURL=BudgetAmount.es.js.map

package/dist/budgets/components/shared/BudgetAmount.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BudgetAmount.es.js","names":[],"sources":["../../../../src/budgets/components/shared/BudgetAmount.tsx"],"sourcesContent":["import React from 'react'\n\nimport Stack from '@mui/material/Stack'\nimport { Text } from '@mxenabled/mxui'\nimport {\n  CurrencyInput,\n  useBudgetsStore,\n  useGlobalCopyStore,\n  useRecurringTransactionsStore,\n} from '../../../common'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\nimport { buildDynamicCopy } from '../../../core/utils/Localization'\n\ninterface BudgetAmountProps {\n  amount: string\n  categoryName: string\n  onAmountChanged: (amount: string) => void\n}\n\nexport const BudgetAmount: React.FC<BudgetAmountProps> = ({\n  amount,\n  categoryName,\n  onAmountChanged,\n}) => {\n  const { budgets: copy } = useGlobalCopyStore()\n  const { totalBudgeted } = useBudgetsStore()\n  const { incomeTotal } = useRecurringTransactionsStore()\n\n  const unbudgetedIncome = incomeTotal - totalBudgeted\n\n  return (\n    <Stack gap={16}>\n      <Stack>\n        <Text>\n          {\n            buildDynamicCopy(\n              copy.add_description_top,\n              formatCurrency(unbudgetedIncome, '0,0'),\n            ) as string\n          }\n        </Text>\n        <Text>{buildDynamicCopy(copy.add_description_bottom, categoryName) as string}</Text>\n      </Stack>\n      <CurrencyInput\n        amount={amount}\n        autoFocus={true}\n        label={copy.add_label}\n        minAmount={0}\n        setAmount={onAmountChanged}\n        sx={{ '.MuiTypography-body1': { p: 0 } }}\n      />\n    </Stack>\n  )\n}\n"],"mappings":";;;;;;;;AAmBA,IAAa,IAAA,CAA6C,EACxD,QAAA,GACA,cAAA,GACA,iBAAA,EAAA,MACI;AACJ,QAAM,EAAE,SAAS,EAAA,IAAS,EAAmB,GACvC,EAAE,eAAA,EAAA,IAAkB,EAAgB,GACpC,EAAE,aAAA,EAAA,IAAgB,EAA8B,GAEhD,IAAmB,IAAc;AAEvC,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,KAAK;AAAA,cAAZ,CACE,gBAAA,EAAC,GAAD,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD,EAAA,UAEI,EACE,EAAK,qBACL,EAAe,GAAkB,KAAK,CACxC,EAEE,CAAA,GACN,gBAAA,EAAC,GAAD,EAAA,UAAO,EAAiB,EAAK,wBAAwB,CAAY,EAAkB,CAAA,CAC9E,EAAA,CAAA,GACP,gBAAA,EAAC,GAAD;AAAA,MACU,QAAA;AAAA,MACR,WAAW;AAAA,MACX,OAAO,EAAK;AAAA,MACZ,WAAW;AAAA,MACX,WAAW;AAAA,MACX,IAAI,EAAE,wBAAwB,EAAE,GAAG,EAAE,EAAE;AAAA,IACxC,CAAA,CACI;AAAA;AAEX"}

package/dist/budgets/components/shared/BudgetDetailsTopSection.es.js

@@ -0,0 +1,84 @@
+import { buildDynamicCopy as m } from "../../../core/utils/Localization.es.js";
+import { useGlobalCopyStore as h } from "../../../common/context/hooks.es.js";
+import { formatCurrency as t } from "../../../core/utils/NumberFormatting.es.js";
+import { fromTimestampToMonthYear as x } from "../../../core/utils/DateUtil.es.js";
+import u from "../../../insights/components/shared/StatusIndicator.es.js";
+import g from "react";
+import a from "@mui/material/Stack";
+import { H2 as y, P as e, Text as C } from "@mxenabled/mxui";
+import v from "@mui/material/Button";
+import { ChevronRight as B } from "@mxenabled/mx-icons";
+import { jsx as o, jsxs as i } from "react/jsx-runtime";
+import S from "@mui/material/Box";
+var W = ({ startDate: p, onViewHistory: n, totalTransaction: d, amount: c, spentPercentage: l, remainingAmount: s, iconColor: b, icon: f }) => {
+  const { budgets: r } = h();
+  return /* @__PURE__ */ o(g.Fragment, { children: /* @__PURE__ */ i(S, {
+    sx: {
+      bgcolor: "background.paper",
+      borderBottomColor: "divider",
+      borderBottomStyle: "solid",
+      borderBottomWidth: 1
+    },
+    children: [/* @__PURE__ */ i(a, {
+      sx: {
+        alignItems: "center",
+        flexDirection: "row",
+        gap: 12,
+        justifyContent: "space-between",
+        pt: 16,
+        px: 24
+      },
+      children: [/* @__PURE__ */ o(e, {
+        bold: !0,
+        variant: "subtitle1",
+        children: x(p)
+      }), n && /* @__PURE__ */ o(v, {
+        endIcon: /* @__PURE__ */ o(B, {}),
+        onClick: n,
+        sx: { height: 28 },
+        children: /* @__PURE__ */ o(C, {
+          bold: !0,
+          variant: "body2",
+          children: r.spending_history
+        })
+      })]
+    }), /* @__PURE__ */ o(u, {
+      amount: /* @__PURE__ */ i(a, {
+        sx: {
+          alignItems: "baseline",
+          flexDirection: "row",
+          gap: 4
+        },
+        children: [
+          /* @__PURE__ */ o(y, { children: t(d, "0,0.00") }),
+          /* @__PURE__ */ o(e, {
+            color: "text.secondary",
+            variant: "body2",
+            children: "/"
+          }),
+          /* @__PURE__ */ o(e, {
+            color: "text.secondary",
+            variant: "body2",
+            children: t(c, "0,0.00")
+          })
+        ]
+      }),
+      completeColor: `${b}.main`,
+      icon: f,
+      label: r.spent_label,
+      leftLabel: m(r.percent_spent, l.toFixed()),
+      percentComplete: l,
+      rightLabel: m(r.balance_left, t(s, "0,0.00")),
+      sx: {
+        pb: 24,
+        pt: 16,
+        px: 24
+      }
+    })]
+  }) });
+};
+export {
+  W as BudgetDetailsTopSection
+};
+
+//# sourceMappingURL=BudgetDetailsTopSection.es.js.map

package/dist/budgets/components/shared/BudgetDetailsTopSection.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BudgetDetailsTopSection.es.js","names":[],"sources":["../../../../src/budgets/components/shared/BudgetDetailsTopSection.tsx"],"sourcesContent":["import React from 'react'\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Stack from '@mui/material/Stack'\n\nimport { H2, P, Text } from '@mxenabled/mxui'\nimport { ChevronRight } from '@mxenabled/mx-icons'\n\nimport { useGlobalCopyStore } from '../../../common'\nimport { StatusIndicator } from '../../../insights'\nimport { fromTimestampToMonthYear } from '../../../core/utils/DateUtil'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\nimport { buildDynamicCopy } from '../../../core/utils/Localization'\n\ninterface BudgetDetailsTopAndMiddleSectionProps {\n  startDate: number\n  onViewHistory?: () => void\n  totalTransaction: number\n  amount: number\n  spentPercentage: number\n  remainingAmount: number\n  iconColor?: string\n  icon: React.ReactNode\n}\n\nexport const BudgetDetailsTopSection = ({\n  startDate,\n  onViewHistory,\n  totalTransaction,\n  amount,\n  spentPercentage,\n  remainingAmount,\n  iconColor,\n  icon,\n}: BudgetDetailsTopAndMiddleSectionProps) => {\n  const { budgets: budgetsCopy } = useGlobalCopyStore()\n\n  return (\n    <React.Fragment>\n      <Box\n        sx={{\n          bgcolor: 'background.paper',\n          borderBottomColor: 'divider',\n          borderBottomStyle: 'solid',\n          borderBottomWidth: 1,\n        }}\n      >\n        <Stack\n          sx={{\n            alignItems: 'center',\n            flexDirection: 'row',\n            gap: 12,\n            justifyContent: 'space-between',\n            pt: 16,\n            px: 24,\n          }}\n        >\n          <P bold={true} variant=\"subtitle1\">\n            {fromTimestampToMonthYear(startDate)}\n          </P>\n          {onViewHistory && (\n            <Button endIcon={<ChevronRight />} onClick={onViewHistory} sx={{ height: 28 }}>\n              <Text bold={true} variant=\"body2\">\n                {budgetsCopy.spending_history}\n              </Text>\n            </Button>\n          )}\n        </Stack>\n        <StatusIndicator\n          amount={\n            <Stack sx={{ alignItems: 'baseline', flexDirection: 'row', gap: 4 }}>\n              <H2>{formatCurrency(totalTransaction, '0,0.00')}</H2>\n              <P color=\"text.secondary\" variant=\"body2\">\n                /\n              </P>\n              <P color=\"text.secondary\" variant=\"body2\">\n                {formatCurrency(amount, '0,0.00')}\n              </P>\n            </Stack>\n          }\n          completeColor={`${iconColor}.main`}\n          icon={icon}\n          label={budgetsCopy.spent_label}\n          leftLabel={\n            buildDynamicCopy(budgetsCopy.percent_spent, spentPercentage.toFixed()) as string\n          }\n          percentComplete={spentPercentage}\n          rightLabel={\n            buildDynamicCopy(\n              budgetsCopy.balance_left,\n              formatCurrency(remainingAmount, '0,0.00'),\n            ) as string\n          }\n          sx={{\n            pb: 24,\n            pt: 16,\n            px: 24,\n          }}\n        />\n      </Box>\n    </React.Fragment>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAyBA,IAAa,IAAA,CAA2B,EACtC,WAAA,GACA,eAAA,GACA,kBAAA,GACA,QAAA,GACA,iBAAA,GACA,iBAAA,GACA,WAAA,GACA,MAAA,EAAA,MAC2C;AAC3C,QAAM,EAAE,SAAS,EAAA,IAAgB,EAAmB;AAEpD,SACE,gBAAA,EAAC,EAAM,UAAP,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,SAAS;AAAA,MACT,mBAAmB;AAAA,MACnB,mBAAmB;AAAA,MACnB,mBAAmB;AAAA,IACrB;AAAA,cANF,CAQE,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QACF,YAAY;AAAA,QACZ,eAAe;AAAA,QACf,KAAK;AAAA,QACL,gBAAgB;AAAA,QAChB,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,gBARF,CAUE,gBAAA,EAAC,GAAD;AAAA,QAAG,MAAM;AAAA,QAAM,SAAQ;AAAA,kBACpB,EAAyB,CAAS;AAAA,MAClC,CAAA,GACF,KACC,gBAAA,EAAC,GAAD;AAAA,QAAQ,SAAS,gBAAA,EAAC,GAAD,CAAe,CAAA;AAAA,QAAG,SAAS;AAAA,QAAe,IAAI,EAAE,QAAQ,GAAG;AAAA,kBAC1E,gBAAA,EAAC,GAAD;AAAA,UAAM,MAAM;AAAA,UAAM,SAAQ;AAAA,oBACvB,EAAY;AAAA,QACT,CAAA;AAAA,MACA,CAAA,CAEL;AAAA,QACP,gBAAA,EAAC,GAAD;AAAA,MACE,QACE,gBAAA,EAAC,GAAD;AAAA,QAAO,IAAI;AAAA,UAAE,YAAY;AAAA,UAAY,eAAe;AAAA,UAAO,KAAK;AAAA,QAAE;AAAA,kBAAlE;AAAA,UACE,gBAAA,EAAC,GAAD,EAAA,UAAK,EAAe,GAAkB,QAAQ,EAAM,CAAA;AAAA,UACpD,gBAAA,EAAC,GAAD;AAAA,YAAG,OAAM;AAAA,YAAiB,SAAQ;AAAA,sBAAQ;AAAA,UAEvC,CAAA;AAAA,UACH,gBAAA,EAAC,GAAD;AAAA,YAAG,OAAM;AAAA,YAAiB,SAAQ;AAAA,sBAC/B,EAAe,GAAQ,QAAQ;AAAA,UAC/B,CAAA;AAAA,QACE;AAAA;MAET,eAAe,GAAG,CAAA;AAAA,MACZ,MAAA;AAAA,MACN,OAAO,EAAY;AAAA,MACnB,WACE,EAAiB,EAAY,eAAe,EAAgB,QAAQ,CAAC;AAAA,MAEvE,iBAAiB;AAAA,MACjB,YACE,EACE,EAAY,cACZ,EAAe,GAAiB,QAAQ,CAC1C;AAAA,MAEF,IAAI;AAAA,QACF,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,IACD,CAAA,CACE;AAAA,KACS,CAAA;AAEpB"}