@mx-cartographer/experiences 9.2.4-alpha.al0 → 9.3.0-alpha.bb1

package/dist/budgets/components/addbudget/UnbudgetedRow/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/budgets/components/addbudget/UnbudgetedRow.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 ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'\nimport ListItemText from '@mui/material/ListItemText'\n\nimport { CategoryIcon, Icon } from '@mxenabled/mxui'\n\nimport { Dialog, useGlobalCopyStore } from '../../../common'\nimport { type DetailedCategory } from '../../../core'\n\nimport { BudgetAmount } from '../shared/BudgetAmount'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\n\ninterface UnbudgetedRowProps {\n  category: DetailedCategory\n  onAddBudget: (category: DetailedCategory, amount: number) => void\n}\n\nexport const UnbudgetedRow: React.FC<UnbudgetedRowProps> = observer(({ category, onAddBudget }) => {\n  const { budgets: copy, common: commonCopy } = useGlobalCopyStore()\n\n  const [isAddBudgetOpen, setIsAddBudgetOpen] = React.useState(false)\n  const [amount, setAmount] = React.useState(\n    `${category.totalAmount === 0 ? '' : category.totalAmount}`,\n  )\n\n  return (\n    <React.Fragment>\n      <ListItem key={category.guid}>\n        <ListItemButton onClick={() => setIsAddBudgetOpen(true)}>\n          <ListItemAvatar>\n            <CategoryIcon categoryGuid={category.guid} />\n          </ListItemAvatar>\n          <ListItemText\n            primary={category.name}\n            secondary={formatCurrency(category.totalAmount, '0,0')}\n          />\n          <ListItemSecondaryAction>\n            <Icon name=\"add\" size={20} />\n          </ListItemSecondaryAction>\n        </ListItemButton>\n      </ListItem>\n      <Dialog\n        copy={{ close_aria: commonCopy.close_aria, title: copy.add_title }}\n        disablePrimaryButton={Number(amount) <= 0}\n        isOpen={isAddBudgetOpen}\n        onClose={() => setIsAddBudgetOpen(false)}\n        onPrimaryAction={() => onAddBudget(category, Number(amount))}\n        primaryText={copy.add_save_button}\n      >\n        <BudgetAmount amount={amount} categoryName={category.name} onAmountChanged={setAmount} />\n      </Dialog>\n    </React.Fragment>\n  )\n})\n"],"mappings":";;;;;;;;;;;;;AAsBA,IAAa,IAA8C,EAAA,CAAU,EAAE,UAAA,GAAU,aAAA,EAAA,MAAkB;AACjG,QAAM,EAAE,SAAS,GAAM,QAAQ,EAAA,IAAe,EAAmB,GAE3D,CAAC,GAAiB,CAAA,IAAsB,EAAM,SAAS,EAAK,GAC5D,CAAC,GAAQ,CAAA,IAAa,EAAM,SAChC,GAAG,EAAS,gBAAgB,IAAI,KAAK,EAAS,WAAA,EAChD;AAEA,SACE,gBAAA,EAAC,EAAM,UAAP,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,IAAgB,SAAA,MAAe,EAAmB,EAAI;AAAA,cAAtD;AAAA,MACE,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD,EAAc,cAAc,EAAS,KAAO,CAAA,EAC9B,CAAA;AAAA,MAChB,gBAAA,EAAC,GAAD;AAAA,QACE,SAAS,EAAS;AAAA,QAClB,WAAW,EAAe,EAAS,aAAa,KAAK;AAAA,MACtD,CAAA;AAAA,MACD,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAK;AAAA,QAAM,MAAM;AAAA,MAAK,CAAA,EACL,CAAA;AAAA,IACX;AAAA,KACR,GAbK,EAAS,IAad,GACV,gBAAA,EAAC,GAAD;AAAA,IACE,MAAM;AAAA,MAAE,YAAY,EAAW;AAAA,MAAY,OAAO,EAAK;AAAA,IAAU;AAAA,IACjE,sBAAsB,OAAO,CAAM,KAAK;AAAA,IACxC,QAAQ;AAAA,IACR,SAAA,MAAe,EAAmB,EAAK;AAAA,IACvC,iBAAA,MAAuB,EAAY,GAAU,OAAO,CAAM,CAAC;AAAA,IAC3D,aAAa,EAAK;AAAA,cAElB,gBAAA,EAAC,GAAD;AAAA,MAAsB,QAAA;AAAA,MAAQ,cAAc,EAAS;AAAA,MAAM,iBAAiB;AAAA,IAAY,CAAA;AAAA,EAClF,CAAA,CACM,EAAA,CAAA;AAEpB,CAAC"}

package/dist/budgets/components/budgetdetails/AddSubBudget/index.es.js

@@ -0,0 +1,98 @@
+import { useBudgetsStore as v, useGlobalCopyStore as I } from "../../../../common/context/hooks/index.es.js";
+import O from "../../../../common/components/dialog/Dialog/index.es.js";
+import w from "../../../../common/components/drawer/Drawer/index.es.js";
+import { useCategoryUiStore as L } from "../../../../categories/context/hooks/index.es.js";
+import N from "../../../../categories/components/CategoryRow/index.es.js";
+import { BudgetAmount as j } from "../../shared/BudgetAmount/index.es.js";
+import t from "react";
+import { observer as k } from "mobx-react-lite";
+import p from "@mui/material/Stack";
+import { Icon as f, Text as D } from "@mxenabled/mxui";
+import { jsx as e, jsxs as m } from "react/jsx-runtime";
+import G from "@mui/material/Box";
+import P from "@mui/material/Divider";
+import T from "@mui/material/List";
+import z from "@mui/material/ListItem";
+import E from "@mui/material/ListItemButton";
+import R from "@mui/material/ListItemText";
+var re = k(({ category: o, parentBudget: g }) => {
+  const { budgets: r, common: u } = I(), { setExpandedGuid: b, setOnSelect: h } = L(), { addBudget: y } = v(), [C, n] = t.useState(!1), [_, a] = t.useState(!1), [i, l] = t.useState(""), [d, c] = t.useState(void 0);
+  t.useEffect(() => {
+    h((A) => {
+      const s = o.subCategories.find((B) => B.guid === A);
+      s && (c(s), l(`${s.currentAmount === 0 ? "" : s.currentAmount}`), a(!0));
+    });
+  }, []);
+  const x = () => {
+    b(o.guid), n(!0);
+  }, S = async () => {
+    d && Number(i) > 0 && (await y(d, Number(i), g.guid), a(!1), n(!1), c(void 0));
+  };
+  return /* @__PURE__ */ m(G, { children: [
+    /* @__PURE__ */ e(z, {
+      disableGutters: !0,
+      disablePadding: !0,
+      sx: { bgcolor: "background.paper" },
+      children: /* @__PURE__ */ e(E, {
+        onClick: x,
+        children: /* @__PURE__ */ e(R, { children: /* @__PURE__ */ m(p, {
+          alignItems: "center",
+          direction: "row",
+          justifyContent: "space-between",
+          children: [/* @__PURE__ */ m(p, {
+            alignItems: "center",
+            direction: "row",
+            gap: 8,
+            children: [/* @__PURE__ */ e(f, {
+              fill: !0,
+              name: "add_box",
+              size: 24,
+              sx: { color: "primary.light" }
+            }), /* @__PURE__ */ e(D, {
+              bold: !0,
+              sx: { color: "primary.light" },
+              variant: "body1",
+              children: r.add_sub_budget_button
+            })]
+          }), /* @__PURE__ */ e(f, {
+            name: "chevron_right",
+            size: 24,
+            sx: { color: "primary.light" }
+          })]
+        }) })
+      })
+    }),
+    /* @__PURE__ */ e(P, {}),
+    /* @__PURE__ */ e(w, {
+      ariaLabelClose: u.close_aria,
+      isOpen: C,
+      onClose: () => n(!1),
+      title: r.add_sub_budget_title,
+      children: /* @__PURE__ */ e(T, { children: /* @__PURE__ */ e(N, {
+        category: o,
+        subCategories: o.subCategories
+      }) })
+    }),
+    /* @__PURE__ */ e(O, {
+      copy: {
+        close_aria: u.close_aria,
+        title: r.add_title
+      },
+      disablePrimaryButton: Number(i) <= 0,
+      isOpen: _,
+      onClose: () => a(!1),
+      onPrimaryAction: S,
+      primaryText: r.add_save_button,
+      children: /* @__PURE__ */ e(j, {
+        amount: i,
+        categoryName: d?.name || "",
+        onAmountChanged: l
+      })
+    })
+  ] });
+});
+export {
+  re as AddSubBudget
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/budgets/components/budgetdetails/AddSubBudget/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/budgets/components/budgetdetails/AddSubBudget.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\nimport Divider from '@mui/material/Divider'\nimport List from '@mui/material/List'\nimport ListItem from '@mui/material/ListItem'\nimport ListItemButton from '@mui/material/ListItemButton'\nimport ListItemText from '@mui/material/ListItemText'\nimport Stack from '@mui/material/Stack'\n\nimport { Icon, Text } from '@mxenabled/mxui'\n\nimport { Dialog, Drawer, useBudgetsStore, useGlobalCopyStore } from '../../../common'\nimport { type DetailedBudget, type DetailedCategory } from '../../../core'\nimport { CategoryRow, useCategoryUiStore } from '../../../categories'\nimport { BudgetAmount } from '../shared/BudgetAmount'\n\ninterface AddSubBudgetProps {\n  category: DetailedCategory\n  parentBudget: DetailedBudget\n}\n\nexport const AddSubBudget: React.FC<AddSubBudgetProps> = observer(({ category, parentBudget }) => {\n  const { budgets: copy, common: commonCopy } = useGlobalCopyStore()\n  const { setExpandedGuid, setOnSelect } = useCategoryUiStore()\n  const { addBudget } = useBudgetsStore()\n\n  const [isOpen, setIsOpen] = React.useState(false)\n  const [isAddBudgetOpen, setIsAddBudgetOpen] = React.useState(false)\n  const [amount, setAmount] = React.useState('')\n  const [subCategory, setSubCategory] = React.useState<DetailedCategory | undefined>(undefined)\n\n  React.useEffect(() => {\n    setOnSelect((guid: string) => {\n      const subCategory = category.subCategories.find((sc) => sc.guid === guid)\n      if (subCategory) {\n        setSubCategory(subCategory)\n        setAmount(`${subCategory.currentAmount === 0 ? '' : subCategory.currentAmount}`)\n        setIsAddBudgetOpen(true)\n      }\n    })\n  }, [])\n\n  const handleOpen = () => {\n    setExpandedGuid(category.guid)\n    setIsOpen(true)\n  }\n\n  const handleAddSubBudget = async () => {\n    if (subCategory && Number(amount) > 0) {\n      await addBudget(subCategory, Number(amount), parentBudget.guid)\n      setIsAddBudgetOpen(false)\n      setIsOpen(false)\n      setSubCategory(undefined)\n    }\n  }\n\n  return (\n    <Box>\n      <ListItem disableGutters={true} disablePadding={true} sx={{ bgcolor: 'background.paper' }}>\n        <ListItemButton onClick={handleOpen}>\n          <ListItemText>\n            <Stack alignItems=\"center\" direction=\"row\" justifyContent=\"space-between\">\n              <Stack alignItems=\"center\" direction=\"row\" gap={8}>\n                <Icon fill={true} name=\"add_box\" size={24} sx={{ color: 'primary.light' }} />\n                <Text bold={true} sx={{ color: 'primary.light' }} variant=\"body1\">\n                  {copy.add_sub_budget_button}\n                </Text>\n              </Stack>\n              <Icon name=\"chevron_right\" size={24} sx={{ color: 'primary.light' }} />\n            </Stack>\n          </ListItemText>\n        </ListItemButton>\n      </ListItem>\n      <Divider />\n\n      <Drawer\n        ariaLabelClose={commonCopy.close_aria}\n        isOpen={isOpen}\n        onClose={() => setIsOpen(false)}\n        title={copy.add_sub_budget_title}\n      >\n        <List>\n          <CategoryRow category={category} subCategories={category.subCategories} />\n        </List>\n      </Drawer>\n\n      <Dialog\n        copy={{ close_aria: commonCopy.close_aria, title: copy.add_title }}\n        disablePrimaryButton={Number(amount) <= 0}\n        isOpen={isAddBudgetOpen}\n        onClose={() => setIsAddBudgetOpen(false)}\n        onPrimaryAction={handleAddSubBudget}\n        primaryText={copy.add_save_button}\n      >\n        <BudgetAmount\n          amount={amount}\n          categoryName={subCategory?.name || ''}\n          onAmountChanged={setAmount}\n        />\n      </Dialog>\n    </Box>\n  )\n})\n"],"mappings":"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"}

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

@@ -0,0 +1,66 @@
+import { useAppConfig as k, useBudgetsStore as D, useGlobalCopyStore as j, useTransactionStore as G } from "../../../../common/context/hooks/index.es.js";
+import { useScreenSize as I } from "../../../../common/hooks/useScreenSize/index.es.js";
+import L from "../../../../common/components/drawer/Drawer/index.es.js";
+import { exportTransactionsToCSV as z } from "../../../../core/utils/TransactionUtils/index.es.js";
+import A from "../../../../transactions/components/shared/TransactionList/index.es.js";
+import E from "../../../../transactions/components/shared/TransactionDetails/index.es.js";
+import { Header as W } from "../Header/index.es.js";
+import { SubBudgetList as H } from "../SubBudgetList/index.es.js";
+import i from "react";
+import { observer as M } from "mobx-react-lite";
+import e from "@mui/material/Stack";
+import { Icon as O } from "@mxenabled/mxui";
+import R from "@mui/material/Button";
+import { jsx as t, jsxs as r } from "react/jsx-runtime";
+import p from "@mui/material/Tab";
+import V from "@mui/material/Tabs";
+var st = M(({ budget: c }) => {
+  const { is_mobile_webview: u } = k(), { setAlert: f } = D(), { budgets: o, common: b, transactions: h } = j(), { isDesktop: _, isSmallTablet: T, isTablet: C } = I(), { sortedTransactions: s, sortedTransactionsWithSplits: S, tags: g } = G(), [a, x] = i.useState(0), [l, m] = i.useState(""), n = i.useMemo(() => s.find((d) => d.guid === l), [l, s]), v = (d, B) => {
+    x(B);
+  }, w = () => {
+    z(S, g), f(o.alert_csv_downloaded);
+  }, y = s.length > 0 && !u && (_ || C && !T);
+  return /* @__PURE__ */ r(e, {
+    gap: 24,
+    children: [/* @__PURE__ */ t(W, { budget: c }), /* @__PURE__ */ r(e, { children: [
+      /* @__PURE__ */ r(V, {
+        onChange: v,
+        sx: { width: "100%" },
+        textColor: "primary",
+        value: a,
+        variant: "fullWidth",
+        children: [/* @__PURE__ */ t(p, { label: o.details_transactions_tab }), /* @__PURE__ */ t(p, { label: o.details_subbudgets_tab })]
+      }),
+      a === 0 && /* @__PURE__ */ r(e, { children: [y && /* @__PURE__ */ t(e, {
+        direction: "row",
+        justifyContent: "right",
+        mb: -24,
+        mr: 8,
+        mt: 8,
+        zIndex: 1,
+        children: /* @__PURE__ */ t(R, {
+          onClick: w,
+          startIcon: /* @__PURE__ */ t(O, { name: "ios_share" }),
+          variant: "text",
+          children: h.export_csv_btn
+        })
+      }), /* @__PURE__ */ t(A, {
+        height: "100%",
+        onClick: m
+      })] }),
+      a === 1 && /* @__PURE__ */ t(H, { budget: c }),
+      /* @__PURE__ */ t(L, {
+        ariaLabelClose: b.close_aria,
+        isOpen: !!n,
+        onClose: () => m(""),
+        title: o.details_transaction_drawer,
+        children: n && /* @__PURE__ */ t(E, { transaction: n })
+      })
+    ] })]
+  });
+});
+export {
+  st as BudgetDetails
+};
+
+//# sourceMappingURL=index.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.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/index.es.js

@@ -0,0 +1,48 @@
+import p from "../../../../common/components/charts/StatusBar/index.es.js";
+import { formatCurrency as t } from "../../../../core/utils/NumberFormatting/index.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=index.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.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/index.es.js

@@ -0,0 +1,98 @@
+import { buildDynamicCopy as D } from "../../../../core/utils/Localization/index.es.js";
+import { useBudgetsStore as v, useGlobalCopyStore as O, useTransactionStore as T } from "../../../../common/context/hooks/index.es.js";
+import f from "../../../../common/components/dialog/Dialog/index.es.js";
+import w from "../../../../common/components/drawer/Drawer/index.es.js";
+import F from "../../../../transactions/components/shared/TransactionList/index.es.js";
+import { BudgetAmount as L } from "../../shared/BudgetAmount/index.es.js";
+import { Header as P } from "../Header/index.es.js";
+import { SubBudgetZeroState as E } from "../../budgetlist/SubBudgetZeroState/index.es.js";
+import { SubBudgetRow as N } from "../../budgetlist/SubBudgetRow/index.es.js";
+import { AddSubBudget as j } from "../AddSubBudget/index.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=index.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.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/shared/BudgetAmount/index.es.js

@@ -0,0 +1,27 @@
+import { buildDynamicCopy as r } from "../../../../core/utils/Localization/index.es.js";
+import { useBudgetsStore as a, useGlobalCopyStore as l, useRecurringTransactionsStore as f } from "../../../../common/context/hooks/index.es.js";
+import { formatCurrency as y } from "../../../../core/utils/NumberFormatting/index.es.js";
+import b from "../../../../common/components/CurrencyInput/index.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=index.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.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/index.es.js

@@ -0,0 +1,84 @@
+import { buildDynamicCopy as m } from "../../../../core/utils/Localization/index.es.js";
+import { useGlobalCopyStore as h } from "../../../../common/context/hooks/index.es.js";
+import { formatCurrency as t } from "../../../../core/utils/NumberFormatting/index.es.js";
+import { fromTimestampToMonthYear as x } from "../../../../core/utils/DateUtil/index.es.js";
+import u from "../../../../insights/components/shared/StatusIndicator/index.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=index.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.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"}