@pfm-platform/expenses-ui-mui 0.1.1

package/dist/index.cjs

@@ -0,0 +1,3042 @@
+'use strict';
+
+var material = require('@mui/material');
+var expensesFeature = require('@pfm-platform/expenses-feature');
+var jsxRuntime = require('react/jsx-runtime');
+var React3 = require('react');
+var LocalOfferIcon = require('@mui/icons-material/LocalOffer');
+var PieChart = require('@mui/x-charts/PieChart');
+var framerMotion = require('framer-motion');
+var shared = require('@pfm-platform/shared');
+var LineChart = require('@mui/x-charts/LineChart');
+var BarChart = require('@mui/x-charts/BarChart');
+var expensesDataAccess = require('@pfm-platform/expenses-data-access');
+var DeleteIcon = require('@mui/icons-material/Delete');
+var EditIcon = require('@mui/icons-material/Edit');
+var SettingsIcon = require('@mui/icons-material/Settings');
+var CloseIcon = require('@mui/icons-material/Close');
+var RestartAltIcon = require('@mui/icons-material/RestartAlt');
+var DonutLargeIcon = require('@mui/icons-material/DonutLarge');
+var iconsMaterial = require('@mui/icons-material');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React3__default = /*#__PURE__*/_interopDefault(React3);
+var LocalOfferIcon__default = /*#__PURE__*/_interopDefault(LocalOfferIcon);
+var DeleteIcon__default = /*#__PURE__*/_interopDefault(DeleteIcon);
+var EditIcon__default = /*#__PURE__*/_interopDefault(EditIcon);
+var SettingsIcon__default = /*#__PURE__*/_interopDefault(SettingsIcon);
+var CloseIcon__default = /*#__PURE__*/_interopDefault(CloseIcon);
+var RestartAltIcon__default = /*#__PURE__*/_interopDefault(RestartAltIcon);
+var DonutLargeIcon__default = /*#__PURE__*/_interopDefault(DonutLargeIcon);
+
+// src/components/ExpenseSummary.tsx
+function ExpenseSummary({
+  userId,
+  filters,
+  title = "Expense Summary",
+  currencySymbol = "$"
+}) {
+  const summary = expensesFeature.useExpenseSummary({ userId, filters });
+  return /* @__PURE__ */ jsxRuntime.jsx(material.Card, { children: /* @__PURE__ */ jsxRuntime.jsxs(material.CardContent, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h6", gutterBottom: true, children: title }),
+    !summary.hasExpenses ? /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", color: "text.secondary", children: "No expenses found" }) : /* @__PURE__ */ jsxRuntime.jsxs(material.Grid, { container: true, spacing: 2, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { size: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", color: "text.secondary", children: "Total" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "h5", fontWeight: "medium", children: [
+          currencySymbol,
+          summary.totalAmount.toFixed(2)
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { size: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", color: "text.secondary", children: "Categories" }),
+        /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h5", fontWeight: "medium", children: summary.count })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { size: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", color: "text.secondary", children: "Average" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "h5", fontWeight: "medium", children: [
+          currencySymbol,
+          summary.averageAmount.toFixed(2)
+        ] })
+      ] }) })
+    ] })
+  ] }) });
+}
+function ExpenseChart({
+  userId,
+  filters,
+  sortBy = "amount",
+  sortOrder = "desc",
+  title = "Expenses by Category",
+  currencySymbol = "$",
+  showPercentage = true
+}) {
+  const categories = expensesFeature.useExpensesByCategory({
+    userId,
+    filters,
+    sortBy,
+    sortOrder
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(material.Card, { children: /* @__PURE__ */ jsxRuntime.jsxs(material.CardContent, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h6", gutterBottom: true, children: title }),
+    categories.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", color: "text.secondary", children: "No expenses found" }) : /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: categories.map((category) => /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        material.Box,
+        {
+          sx: {
+            display: "flex",
+            justifyContent: "space-between",
+            mb: 0.5
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", fontWeight: "medium", children: category.tag }),
+            /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "body2", color: "text.secondary", children: [
+              currencySymbol,
+              category.amount.toFixed(2),
+              showPercentage && ` (${category.percentage.toFixed(1)}%)`
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        material.LinearProgress,
+        {
+          variant: "determinate",
+          value: category.percentage,
+          sx: { height: 8, borderRadius: 1 }
+        }
+      )
+    ] }, category.tag)) })
+  ] }) });
+}
+function ExpenseDonutChart({
+  userId,
+  filters,
+  sortBy = "amount",
+  sortOrder = "desc",
+  size,
+  showCenterText = true,
+  title,
+  selected,
+  onCategoryClick,
+  maxCategories = 7,
+  animated = true
+}) {
+  const theme = material.useTheme();
+  const categories = expensesFeature.useExpensesByCategory({
+    userId,
+    filters,
+    sortBy,
+    sortOrder
+  });
+  const processedCategories = React3__default.default.useMemo(() => {
+    if (categories.length <= maxCategories) {
+      return categories;
+    }
+    const topCategories = categories.slice(0, maxCategories - 1);
+    const otherCategories = categories.slice(maxCategories - 1);
+    const otherTotal = otherCategories.reduce((sum, cat) => sum + cat.amount, 0);
+    const otherPercentage = otherCategories.reduce((sum, cat) => sum + cat.percentage, 0);
+    return [
+      ...topCategories,
+      {
+        tag: "Other",
+        amount: otherTotal,
+        percentage: otherPercentage
+      }
+    ];
+  }, [categories, maxCategories]);
+  const total = processedCategories.reduce((sum, cat) => sum + cat.amount, 0);
+  const chartData = processedCategories.map((category) => ({
+    id: category.tag,
+    label: category.tag,
+    value: category.amount
+  }));
+  const colors = shared.getChartColors(theme);
+  const chartSize = size || shared.CHART_DIMENSIONS.donut.width;
+  const { innerRadius, outerRadius } = shared.CHART_DIMENSIONS.donut;
+  const rotation = React3__default.default.useMemo(() => {
+    if (!selected) return 0;
+    const selectedIndex = chartData.findIndex((item) => item.id === selected);
+    if (selectedIndex === -1) return 0;
+    let cumulativeAngle = 0;
+    for (let i = 0; i < selectedIndex; i++) {
+      cumulativeAngle += chartData[i].value / total * 360;
+    }
+    const selectedSliceAngle = chartData[selectedIndex].value / total * 360;
+    const selectedCenterAngle = cumulativeAngle + selectedSliceAngle / 2;
+    return -selectedCenterAngle;
+  }, [selected, chartData, total]);
+  const handleCategoryClick = React3__default.default.useCallback(
+    (_event, itemIdentifier) => {
+      const categoryTag = chartData[itemIdentifier.dataIndex]?.id;
+      if (categoryTag && onCategoryClick) {
+        onCategoryClick(categoryTag);
+      }
+    },
+    [chartData, onCategoryClick]
+  );
+  if (categories.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      material.Box,
+      {
+        sx: {
+          width: chartSize,
+          height: chartSize,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 1
+        },
+        children: [
+          title && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h6", color: "text.secondary", children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", color: "text.secondary", children: "No expense data" })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Box,
+    {
+      "data-testid": "expense-donut-chart",
+      sx: {
+        position: "relative",
+        width: chartSize,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center"
+      },
+      children: [
+        title && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h6", gutterBottom: true, sx: { mb: 2 }, children: title }),
+        /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { position: "relative", width: chartSize, height: chartSize }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.Box,
+            {
+              component: framerMotion.motion.div,
+              animate: { rotate: rotation },
+              transition: {
+                duration: animated ? 1 : 0,
+                // 1000ms to match D3 timing
+                ease: [0.4, 0, 0.2, 1]
+                // D3 easeInOut
+              },
+              sx: {
+                width: "100%",
+                height: "100%",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center"
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                PieChart.PieChart,
+                {
+                  series: [
+                    {
+                      data: chartData,
+                      innerRadius,
+                      outerRadius,
+                      paddingAngle: 0,
+                      cornerRadius: 0,
+                      // Maintain sort=null behavior from D3 (prevent auto-reordering)
+                      sortingValues: "none",
+                      highlightScope: { fade: "global", highlight: "item" },
+                      // Highlight selected category
+                      ...selected && {
+                        highlighted: { additionalRadius: 5 }
+                      }
+                    }
+                  ],
+                  colors,
+                  width: chartSize,
+                  height: chartSize,
+                  onItemClick: onCategoryClick ? handleCategoryClick : void 0,
+                  slotProps: {
+                    legend: {}
+                    // Legend configuration
+                  },
+                  sx: {
+                    // Ensure proper centering
+                    "& .MuiChartsLegend-root": {
+                      display: "none"
+                    },
+                    // Make slices clickable if handler provided
+                    ...onCategoryClick && {
+                      "& .MuiPieArc-root": {
+                        cursor: "pointer"
+                        // Remove transition from here since we're rotating the container
+                      },
+                      "& .MuiPieArc-root:hover": {
+                        filter: "brightness(1.1)"
+                      }
+                    }
+                  }
+                }
+              )
+            }
+          ),
+          showCenterText && /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsx(
+            material.Box,
+            {
+              component: framerMotion.motion.div,
+              variants: animated ? shared.textVariants : void 0,
+              initial: animated ? "initial" : void 0,
+              animate: animated ? "enter" : void 0,
+              exit: animated ? "exit" : void 0,
+              sx: {
+                position: "absolute",
+                top: "50%",
+                left: "50%",
+                transform: "translate(-50%, -50%)",
+                textAlign: "center",
+                pointerEvents: "none"
+              },
+              children: selected ? (
+                // Show selected category: icon, name, and amount
+                // Using absolute positioning like legacy D3 implementation (Layout2.js:137-179)
+                /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    LocalOfferIcon__default.default,
+                    {
+                      sx: {
+                        position: "absolute",
+                        top: "50%",
+                        left: "50%",
+                        transform: "translate(-50%, calc(-50% - 30px))",
+                        fontSize: 20,
+                        color: theme.palette.text.secondary
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    material.Typography,
+                    {
+                      variant: "body2",
+                      sx: {
+                        position: "absolute",
+                        top: "50%",
+                        left: "50%",
+                        transform: "translate(-50%, calc(-50% + 10px))",
+                        fontWeight: "normal",
+                        color: theme.palette.text.primary,
+                        textTransform: "capitalize",
+                        fontSize: "18px",
+                        whiteSpace: "nowrap"
+                      },
+                      children: selected
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    material.Typography,
+                    {
+                      variant: "h5",
+                      sx: {
+                        position: "absolute",
+                        top: "50%",
+                        left: "50%",
+                        transform: "translate(-50%, calc(-50% + 41px))",
+                        fontWeight: "bold",
+                        color: theme.palette.text.primary,
+                        fontSize: "25px",
+                        whiteSpace: "nowrap"
+                      },
+                      children: shared.formatCurrency(
+                        processedCategories.find((cat) => cat.tag === selected)?.amount || 0
+                      )
+                    }
+                  )
+                ] })
+              ) : (
+                // Show total when nothing selected
+                // Also use absolute positioning to ensure proper centering
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  material.Typography,
+                  {
+                    variant: "h4",
+                    sx: {
+                      position: "absolute",
+                      top: "50%",
+                      left: "50%",
+                      transform: "translate(-50%, -50%)",
+                      fontWeight: "medium",
+                      color: theme.palette.text.primary,
+                      whiteSpace: "nowrap"
+                    },
+                    children: shared.formatCurrency(total)
+                  }
+                )
+              )
+            },
+            selected || "total"
+          ) })
+        ] })
+      ]
+    }
+  );
+}
+function ExpenseThinDonut({
+  values,
+  selected,
+  onSelect,
+  valueFormatter = shared.formatCurrency,
+  size,
+  subtitle = "Total Spending",
+  animated = true,
+  ariaLabel = "Expense breakdown by category"
+}) {
+  const theme = material.useTheme();
+  const defaultWidth = 320;
+  const defaultHeight = 170;
+  const chartWidth = size || defaultWidth;
+  const chartHeight = size ? size * (defaultHeight / defaultWidth) : defaultHeight;
+  const innerRadius = 40;
+  const outerRadius = 48;
+  const selectedInnerRadius = 38;
+  const selectedOuterRadius = 50;
+  const total = React3__default.default.useMemo(() => {
+    return values.reduce((sum, item) => sum + item.value, 0);
+  }, [values]);
+  const selectedValue = React3__default.default.useMemo(() => {
+    if (!selected) return total;
+    const selectedItem = values.find((item) => item.name === selected);
+    return selectedItem ? selectedItem.value : total;
+  }, [values, selected, total]);
+  const chartData = React3__default.default.useMemo(
+    () => values.map((item) => ({
+      id: item.name,
+      label: item.name,
+      value: item.value
+    })),
+    [values]
+  );
+  const colors = shared.getChartColors(theme);
+  const handleSegmentClick = React3__default.default.useCallback(
+    (_event, itemIdentifier) => {
+      if (!onSelect) return;
+      const segmentName = chartData[itemIdentifier.dataIndex]?.id;
+      if (!segmentName) return;
+      onSelect(selected === segmentName ? null : segmentName);
+    },
+    [chartData, onSelect, selected]
+  );
+  if (values.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      material.Box,
+      {
+        role: "img",
+        "aria-label": "No expense data",
+        sx: {
+          width: chartWidth,
+          height: chartHeight,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: theme.palette.primary.main,
+          borderRadius: 1
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", sx: { color: theme.palette.primary.contrastText }, children: "No data available" })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.Box,
+    {
+      "data-testid": "expense-thin-donut",
+      role: "img",
+      "aria-label": ariaLabel,
+      sx: {
+        position: "relative",
+        width: chartWidth,
+        height: chartHeight,
+        backgroundColor: theme.palette.primary.main,
+        // Legacy: theme.palette.primary.main
+        borderRadius: 1,
+        overflow: "hidden"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { position: "relative", width: "100%", height: "100%" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          PieChart.PieChart,
+          {
+            series: [
+              {
+                data: chartData,
+                innerRadius: selected ? selectedInnerRadius : innerRadius,
+                outerRadius: selected ? selectedOuterRadius : outerRadius,
+                paddingAngle: 0.02,
+                // 0.02 radians matching legacy (line 50)
+                cornerRadius: 0,
+                // Maintain sort=null behavior from D3 (line 53)
+                // Prevent auto-reordering on update
+                sortingValues: "none",
+                highlightScope: { fade: "global", highlight: "item" }
+              }
+            ],
+            colors,
+            width: chartWidth,
+            height: chartHeight,
+            onItemClick: onSelect ? handleSegmentClick : void 0,
+            sx: {
+              // Hide legend completely (slotProps.legend.hidden may not work in all cases)
+              "& .MuiChartsLegend-root": {
+                display: "none"
+              },
+              // Make slices clickable if handler provided
+              ...onSelect && {
+                "& .MuiPieArc-root": {
+                  cursor: "pointer",
+                  transition: animated ? "all 200ms ease-in-out" : "none"
+                  // 200ms matching legacy
+                },
+                "& .MuiPieArc-root:hover": {
+                  filter: "brightness(1.1)"
+                }
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsx(
+          material.Box,
+          {
+            component: framerMotion.motion.div,
+            variants: animated ? shared.textVariants : void 0,
+            initial: animated ? "initial" : void 0,
+            animate: animated ? "enter" : void 0,
+            exit: animated ? "exit" : void 0,
+            sx: {
+              position: "absolute",
+              top: "50%",
+              left: "50%",
+              transform: selected ? "translate(-50%, calc(-50% + 5px))" : "translate(-50%, calc(-50% - 4px))",
+              // Legacy y positions
+              textAlign: "center",
+              pointerEvents: "none",
+              transition: animated ? "transform 200ms ease-in-out" : "none",
+              zIndex: 10
+              // Ensure text is above chart
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              material.Typography,
+              {
+                variant: "h6",
+                sx: {
+                  fontWeight: "bold",
+                  fontSize: "11px",
+                  // Legacy font-size
+                  color: theme.palette.primary.contrastText,
+                  // Legacy: theme.palette.background.default
+                  whiteSpace: "nowrap"
+                },
+                children: valueFormatter(selectedValue)
+              }
+            )
+          },
+          selected || "total"
+        ) }),
+        !selected && subtitle && /* @__PURE__ */ jsxRuntime.jsx(
+          material.Box,
+          {
+            component: framerMotion.motion.div,
+            variants: animated ? shared.fadeVariants : void 0,
+            initial: animated ? "initial" : void 0,
+            animate: animated ? "enter" : void 0,
+            exit: animated ? "exit" : void 0,
+            sx: {
+              position: "absolute",
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, calc(-50% + 8px))",
+              // Legacy y: 8
+              textAlign: "center",
+              pointerEvents: "none",
+              zIndex: 10
+              // Ensure text is above chart
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              material.Typography,
+              {
+                variant: "caption",
+                sx: {
+                  fontSize: "10px",
+                  // Legacy font-size
+                  color: theme.palette.primary.contrastText,
+                  whiteSpace: "nowrap"
+                },
+                children: subtitle
+              }
+            )
+          }
+        )
+      ] })
+    }
+  );
+}
+function ExpenseMeter({
+  data,
+  total,
+  selectedIndex,
+  onSelect,
+  small = false,
+  backgroundColor,
+  backgroundOpacity = 1,
+  animated = true,
+  ariaLabel = "Expense budget progress meter"
+}) {
+  const theme = material.useTheme();
+  const width = 300;
+  const height = small ? 20 : 40;
+  const radius = small ? 5 : 10;
+  const margin = small ? 5 : 10;
+  const plotWidth = width - margin * 2;
+  const plotHeight = height - margin * 2;
+  const segments = React3__default.default.useMemo(() => {
+    let cumulative = 0;
+    return data.map((item, index) => {
+      const segment = {
+        ...item,
+        cumulative,
+        index
+      };
+      cumulative += item.value;
+      return segment;
+    });
+  }, [data]);
+  const totalValue = React3__default.default.useMemo(
+    () => segments.reduce((sum, s) => sum + s.value, 0),
+    [segments]
+  );
+  const isOverBudget = totalValue > total;
+  const scale = React3__default.default.useCallback(
+    (value) => {
+      if (total === 0) return 0;
+      return value / total * plotWidth;
+    },
+    [total, plotWidth]
+  );
+  const handleSegmentClick = React3__default.default.useCallback(
+    (index) => {
+      if (!onSelect) return;
+      onSelect(selectedIndex === index ? null : index);
+    },
+    [onSelect, selectedIndex]
+  );
+  const clipId = React3__default.default.useId();
+  const selectedSegment = selectedIndex !== void 0 && selectedIndex >= 0 && selectedIndex < segments.length ? segments[selectedIndex] : null;
+  const triangleX = selectedSegment ? margin + scale(selectedSegment.cumulative + selectedSegment.value / 2) : 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.Box,
+    {
+      "data-testid": "expense-meter",
+      role: "img",
+      "aria-label": ariaLabel,
+      sx: {
+        position: "relative",
+        width: "100%",
+        maxWidth: width
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "svg",
+        {
+          width: "100%",
+          viewBox: `0 0 ${width} ${height}`,
+          preserveAspectRatio: "xMidYMid meet",
+          style: { display: "flex" },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: clipId, children: /* @__PURE__ */ jsxRuntime.jsx(
+              "rect",
+              {
+                x: 0,
+                y: 0,
+                width: plotWidth,
+                height: plotHeight,
+                rx: radius,
+                ry: radius
+              }
+            ) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "rect",
+              {
+                x: margin,
+                y: margin,
+                width: plotWidth,
+                height: plotHeight,
+                rx: radius,
+                ry: radius,
+                fill: backgroundColor || theme.palette.grey[300],
+                style: { opacity: backgroundOpacity }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(${margin}, ${margin})`, clipPath: `url(#${clipId})`, children: segments.map((segment) => {
+              const segmentWidth = scale(isOverBudget ? Math.min(segment.value, total) : segment.value);
+              const segmentX = scale(segment.cumulative);
+              const segmentColor = isOverBudget ? theme.palette.error.main : segment.color;
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                framerMotion.motion.rect,
+                {
+                  "data-testid": `meter-segment-${segment.index}`,
+                  x: segmentX,
+                  y: 0,
+                  width: segmentWidth,
+                  height: plotHeight,
+                  fill: segmentColor,
+                  onClick: () => handleSegmentClick(segment.index),
+                  style: {
+                    cursor: onSelect ? "pointer" : "default"
+                  },
+                  initial: animated ? { width: 0 } : void 0,
+                  animate: animated ? { width: segmentWidth, x: segmentX } : void 0,
+                  transition: animated ? { duration: 0.6, ease: "easeInOut" } : void 0
+                },
+                segment.index
+              );
+            }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: selectedSegment && /* @__PURE__ */ jsxRuntime.jsx(
+              framerMotion.motion.path,
+              {
+                "data-testid": "meter-triangle",
+                d: "M -8 -8 L 8 -8 L 0 2 Z",
+                transform: `translate(${triangleX}, ${height - 3})`,
+                fill: isOverBudget ? theme.palette.error.main : selectedSegment.color,
+                initial: animated ? { opacity: 0 } : void 0,
+                animate: animated ? { opacity: 1 } : void 0,
+                exit: animated ? { opacity: 0 } : void 0,
+                transition: animated ? { duration: 0.6 } : void 0
+              }
+            ) })
+          ]
+        }
+      )
+    }
+  );
+}
+function ExpenseLineChart({
+  data,
+  selectedDate,
+  onSelectDate,
+  width = 120,
+  height = 100,
+  showGrid = false,
+  animated = true
+}) {
+  const theme = material.useTheme();
+  const allData = data.flat();
+  if (allData.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      material.Box,
+      {
+        sx: {
+          width,
+          height,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: theme.palette.text.secondary,
+          fontSize: "12px"
+        },
+        children: "No data available"
+      }
+    );
+  }
+  const dates = data[0]?.map((point) => point.date.getTime()) || [];
+  const sortedDates = [...dates].sort((a, b) => a - b);
+  const series = data.map((dataPoints, index) => {
+    const sortedPoints = [...dataPoints].sort((a, b) => a.date.getTime() - b.date.getTime());
+    return {
+      data: sortedPoints.map((point) => point.value),
+      label: index === 0 ? "Current" : "Previous",
+      color: index === 0 ? theme.palette.primary.dark : theme.palette.primary.light,
+      curve: "linear",
+      showMark: false
+    };
+  });
+  const selectedIndex = selectedDate ? dates.findIndex((d) => {
+    const date = new Date(d);
+    return date.getFullYear() === selectedDate.getFullYear() && date.getMonth() === selectedDate.getMonth() && date.getDate() === selectedDate.getDate();
+  }) : -1;
+  const formatXAxis = (value) => {
+    const date = new Date(value);
+    return date.toLocaleDateString("en-US", { month: "short" });
+  };
+  const formatYAxis = (value) => {
+    return shared.formatCurrency(value);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.Box,
+    {
+      "data-testid": "expense-line-chart",
+      sx: {
+        width,
+        height,
+        position: "relative"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        LineChart.LineChart,
+        {
+          xAxis: [
+            {
+              data: sortedDates,
+              scaleType: "time",
+              valueFormatter: formatXAxis,
+              tickNumber: data[0]?.length || 0,
+              // Hide axis line (legacy hides path)
+              disableLine: true,
+              // Hide tick marks (legacy sets display: none)
+              disableTicks: true
+            }
+          ],
+          yAxis: [
+            {
+              valueFormatter: formatYAxis,
+              // Hide Y-axis labels (legacy sets display: none)
+              // Hide axis line (legacy hides path)
+              disableLine: true,
+              disableTicks: true
+            }
+          ],
+          series,
+          width,
+          height,
+          grid: { vertical: showGrid, horizontal: showGrid },
+          margin: { top: 20, right: 0, bottom: 20, left: 10 },
+          slotProps: {
+            legend: {}
+          },
+          sx: {
+            // X-axis label styling
+            "& .MuiChartsAxis-tickLabel": {
+              fontSize: "12px",
+              fontFamily: theme.typography.fontFamily,
+              cursor: onSelectDate ? "pointer" : "default"
+            },
+            // Selected date background indicator (rounded rect below X-axis)
+            ...selectedIndex !== -1 && {
+              "&::after": {
+                content: '""',
+                position: "absolute",
+                bottom: "5px",
+                left: `calc(${selectedIndex / (dates.length - 1) * 100}% + 10px - 12.5px)`,
+                width: "25px",
+                height: "15px",
+                backgroundColor: theme.palette.grey[200],
+                borderRadius: "3px",
+                pointerEvents: "none"
+              }
+            }
+          },
+          onAxisClick: onSelectDate ? (event, data2) => {
+            if (data2?.axisValue !== void 0) {
+              const clickedDate = new Date(data2.axisValue);
+              onSelectDate(clickedDate);
+            }
+          } : void 0,
+          ...animated ? {} : { skipAnimation: true }
+        }
+      )
+    }
+  );
+}
+function ExpenseBarChart({
+  data,
+  width = 300,
+  height = 160,
+  animated = true
+}) {
+  const theme = material.useTheme();
+  if (!data || data.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      material.Box,
+      {
+        sx: {
+          width,
+          height,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: theme.palette.text.secondary,
+          fontSize: "12px",
+          bgcolor: theme.palette.primary.main
+        },
+        children: "No data available"
+      }
+    );
+  }
+  const formatXAxis = (value) => {
+    if (typeof value === "number") {
+      const date = new Date(data[value]?.date);
+      return date.toLocaleDateString("en-US", { month: "short" });
+    }
+    return String(value);
+  };
+  const formatYAxis = (value) => {
+    if (Math.abs(value) < 1e4) {
+      return shared.formatCurrency(value);
+    }
+    const absValue = Math.abs(value);
+    const isNegative = value < 0;
+    if (absValue >= 1e6) {
+      return `${isNegative ? "-" : ""}$${(absValue / 1e6).toFixed(1)}M`;
+    }
+    return `${isNegative ? "-" : ""}$${(absValue / 1e3).toFixed(1)}K`;
+  };
+  const chartData = data.map((point, index) => ({
+    month: index,
+    value: point.value,
+    noData: point.noData
+  }));
+  const hasNoDataMonths = data.some((d) => d.noData);
+  const maxValue = Math.max(...data.map((d) => d.value), 0);
+  return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { "data-testid": "expense-bar-chart", sx: { width, height, position: "relative" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      BarChart.BarChart,
+      {
+        xAxis: [
+          {
+            data: chartData.map((_, i) => i),
+            scaleType: "band",
+            valueFormatter: formatXAxis,
+            // Hide default axis line and ticks (legacy hides .domain)
+            disableLine: true,
+            disableTicks: true
+          }
+        ],
+        yAxis: [
+          {
+            valueFormatter: formatYAxis,
+            min: 0,
+            max: maxValue || 100,
+            // 5 ticks on Y-axis (legacy uses .ticks(5))
+            tickNumber: 5,
+            disableLine: true,
+            disableTicks: true
+          }
+        ],
+        series: [
+          {
+            data: chartData.map((d) => d.noData ? null : d.value),
+            color: theme.palette.background.default
+            // Note: MUI X Charts doesn't support borderRadius on BarChart bars directly
+            // We'll use custom styling instead
+          }
+        ],
+        width,
+        height,
+        margin: { top: 20, left: 50, bottom: 40, right: 20 },
+        slotProps: {
+          legend: {}
+        },
+        sx: {
+          bgcolor: theme.palette.primary.main,
+          // X-axis label styling (rotated 270°, positioned like legacy)
+          "& .MuiChartsAxis-bottom .MuiChartsAxis-tickLabel": {
+            transform: "translate(-15px, 15px) rotate(270deg)",
+            fontWeight: "bold",
+            fontSize: "90%",
+            fill: theme.palette.background.default
+          },
+          // Y-axis label styling (positioned above tick, bold)
+          "& .MuiChartsAxis-left .MuiChartsAxis-tickLabel": {
+            transform: "translate(0, -7px)",
+            fontWeight: "bold",
+            fontSize: "90%",
+            fill: theme.palette.background.default
+          },
+          // Hide default axis domain lines
+          "& .MuiChartsAxis-line": {
+            display: "none"
+          },
+          // Hide default tick lines
+          "& .MuiChartsAxis-tick": {
+            display: "none"
+          },
+          // Grid lines on Y-axis ticks (dashed, semi-transparent)
+          "& .MuiChartsGrid-line": {
+            stroke: theme.palette.primary.dark,
+            strokeWidth: 0.5,
+            strokeDasharray: "2",
+            opacity: 0.5
+          },
+          // Bar styling
+          "& .MuiBarElement-root": {
+            // MUI X Charts doesn't support rounded bars natively in BarChart
+            // This is a known limitation - we'll use rx/ry if available
+            rx: 2,
+            ry: 2
+          }
+        },
+        grid: { horizontal: true, vertical: false },
+        ...animated ? {} : { skipAnimation: true }
+      }
+    ),
+    hasNoDataMonths && /* @__PURE__ */ jsxRuntime.jsxs(
+      material.Box,
+      {
+        sx: {
+          position: "absolute",
+          bottom: 5,
+          right: 20,
+          display: "flex",
+          alignItems: "center",
+          gap: 0.5
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.Box,
+            {
+              component: "svg",
+              sx: { width: 10, height: 10 },
+              viewBox: "0 0 10 10",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "line",
+                {
+                  x1: "0",
+                  y1: "5",
+                  x2: "10",
+                  y2: "5",
+                  stroke: theme.palette.background.default,
+                  strokeWidth: "1.5",
+                  strokeDasharray: "2,2",
+                  strokeLinecap: "round"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.Box,
+            {
+              component: "span",
+              sx: {
+                fontSize: "8px",
+                color: theme.palette.background.default,
+                fontWeight: "normal"
+              },
+              children: "No data available"
+            }
+          )
+        ]
+      }
+    ),
+    data.map((point, index) => {
+      if (!point.noData) return null;
+      const plotWidth = width - 50 - 20;
+      const barWidth = plotWidth / data.length;
+      const barX = 50 + index * barWidth + barWidth * 0.2;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        material.Box,
+        {
+          component: "svg",
+          sx: {
+            position: "absolute",
+            left: barX,
+            bottom: 40,
+            // bottom margin
+            width: barWidth * 0.6,
+            height: 2,
+            pointerEvents: "none"
+          },
+          viewBox: `0 0 ${barWidth * 0.6} 2`,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "line",
+            {
+              x1: "0",
+              y1: "1",
+              x2: barWidth * 0.6,
+              y2: "1",
+              stroke: theme.palette.background.default,
+              strokeWidth: "1.5",
+              strokeDasharray: "2,2",
+              strokeLinecap: "round"
+            }
+          )
+        },
+        index
+      );
+    })
+  ] });
+}
+function ExpenseCreateForm({ userId, onSuccess }) {
+  const { mode } = React3.useContext(shared.AppModeContext);
+  const [formData, setFormData] = React3.useState({
+    tag: "",
+    amount: "0.00"
+  });
+  const [showSuccess, setShowSuccess] = React3.useState(false);
+  const createMutation = expensesDataAccess.useCreateExpense({
+    onSuccess: () => {
+      setShowSuccess(true);
+      setFormData({
+        tag: "",
+        amount: "0.00"
+      });
+      onSuccess?.();
+    }
+  });
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    createMutation.mutate({
+      userId,
+      data: formData
+    });
+  };
+  if (mode === "user") {
+    return /* @__PURE__ */ jsxRuntime.jsx(material.Paper, { elevation: 2, sx: { p: 3 }, children: /* @__PURE__ */ jsxRuntime.jsx(material.Alert, { severity: "info", children: "Expenses are read-only in User mode. They are automatically computed from your transactions." }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(material.Paper, { elevation: 2, sx: { p: 3 }, children: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { component: "form", onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h6", gutterBottom: true, children: "Create New Expense (Admin Only)" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      material.TextField,
+      {
+        label: "Tag",
+        fullWidth: true,
+        margin: "normal",
+        value: formData.tag,
+        onChange: (e) => setFormData({ ...formData, tag: e.target.value }),
+        required: true,
+        helperText: "Expense category tag (e.g., health, diningout, insurance)"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      material.TextField,
+      {
+        label: "Amount",
+        fullWidth: true,
+        margin: "normal",
+        value: formData.amount,
+        onChange: (e) => setFormData({ ...formData, amount: e.target.value }),
+        required: true,
+        type: "text",
+        inputProps: { pattern: "^\\d+\\.\\d{2}$" },
+        helperText: "Amount in decimal format (e.g., 123.45)"
+      }
+    ),
+    createMutation.isError && /* @__PURE__ */ jsxRuntime.jsx(material.Alert, { severity: "error", sx: { mt: 2 }, children: createMutation.error instanceof Error ? createMutation.error.message : "Failed to create expense" }),
+    /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { mt: 3 }, children: /* @__PURE__ */ jsxRuntime.jsx(material.Button, { type: "submit", variant: "contained", disabled: createMutation.isPending, children: createMutation.isPending ? "Creating..." : "Create Expense" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      material.Snackbar,
+      {
+        open: showSuccess,
+        autoHideDuration: 3e3,
+        onClose: () => setShowSuccess(false),
+        message: "Expense created successfully"
+      }
+    )
+  ] }) });
+}
+function ExpenseEditForm({ expense, open, onClose, userId }) {
+  const { mode } = React3.useContext(shared.AppModeContext);
+  const [amount, setAmount] = React3.useState(expense.amount);
+  React3.useEffect(() => {
+    setAmount(expense.amount);
+  }, [expense]);
+  const updateMutation = expensesDataAccess.useUpdateExpense({
+    onSuccess: () => {
+      onClose();
+    }
+  });
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    updateMutation.mutate({
+      userId,
+      tag: expense.tag,
+      data: { amount }
+    });
+  };
+  if (mode === "user") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(material.Dialog, { open, onClose, maxWidth: "sm", fullWidth: true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(material.DialogTitle, { children: "Edit Expense" }),
+      /* @__PURE__ */ jsxRuntime.jsx(material.DialogContent, { children: /* @__PURE__ */ jsxRuntime.jsx(material.Alert, { severity: "info", sx: { mt: 2 }, children: "Expenses are read-only in User mode. They are automatically computed from your transactions." }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(material.DialogActions, { children: /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: onClose, children: "Close" }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(material.Dialog, { open, onClose, maxWidth: "sm", fullWidth: true, children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(material.DialogTitle, { children: "Edit Expense (Admin Only)" }),
+    /* @__PURE__ */ jsxRuntime.jsxs(material.DialogContent, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        material.TextField,
+        {
+          label: "Tag",
+          fullWidth: true,
+          margin: "normal",
+          value: expense.tag,
+          disabled: true,
+          helperText: "Tag cannot be changed after creation"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        material.TextField,
+        {
+          label: "Amount",
+          fullWidth: true,
+          margin: "normal",
+          value: amount,
+          onChange: (e) => setAmount(e.target.value),
+          required: true,
+          type: "text",
+          inputProps: { pattern: "^\\d+\\.\\d{2}$" },
+          helperText: "Amount in decimal format (e.g., 123.45)"
+        }
+      ),
+      updateMutation.isError && /* @__PURE__ */ jsxRuntime.jsx(material.Alert, { severity: "error", sx: { mt: 2 }, children: updateMutation.error instanceof Error ? updateMutation.error.message : "Failed to update expense" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(material.DialogActions, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: onClose, children: "Cancel" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        material.Button,
+        {
+          type: "submit",
+          variant: "contained",
+          disabled: updateMutation.isPending,
+          children: updateMutation.isPending ? "Saving..." : "Save Changes"
+        }
+      )
+    ] })
+  ] }) });
+}
+function ExpenseDeleteButton({
+  expense,
+  userId,
+  onSuccess,
+  variant = "icon"
+}) {
+  const { mode } = React3.useContext(shared.AppModeContext);
+  const [open, setOpen] = React3.useState(false);
+  const deleteMutation = expensesDataAccess.useDeleteExpense({
+    onSuccess: () => {
+      setOpen(false);
+      onSuccess?.();
+    }
+  });
+  const handleDelete = () => {
+    deleteMutation.mutate({
+      userId,
+      tag: expense.tag
+    });
+  };
+  const handleClickOpen = () => {
+    setOpen(true);
+  };
+  const handleClose = () => {
+    setOpen(false);
+  };
+  if (mode === "user") {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    variant === "icon" ? /* @__PURE__ */ jsxRuntime.jsx(
+      material.IconButton,
+      {
+        "aria-label": "delete expense",
+        onClick: handleClickOpen,
+        color: "error",
+        size: "small",
+        children: /* @__PURE__ */ jsxRuntime.jsx(DeleteIcon__default.default, {})
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      material.Button,
+      {
+        variant: "outlined",
+        color: "error",
+        startIcon: /* @__PURE__ */ jsxRuntime.jsx(DeleteIcon__default.default, {}),
+        onClick: handleClickOpen,
+        children: "Delete"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(material.Dialog, { open, onClose: handleClose, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(material.DialogTitle, { children: "Delete Expense" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(material.DialogContent, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(material.DialogContentText, { children: [
+          'Are you sure you want to delete the expense for tag "',
+          expense.tag,
+          '"? This action cannot be undone.'
+        ] }),
+        deleteMutation.isError && /* @__PURE__ */ jsxRuntime.jsx(material.Alert, { severity: "error", sx: { mt: 2 }, children: deleteMutation.error instanceof Error ? deleteMutation.error.message : "Failed to delete expense" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(material.DialogActions, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: handleClose, disabled: deleteMutation.isPending, children: "Cancel" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.Button,
+          {
+            onClick: handleDelete,
+            color: "error",
+            variant: "contained",
+            disabled: deleteMutation.isPending,
+            children: deleteMutation.isPending ? "Deleting..." : "Delete"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function ExpenseList({ userId, startDate, endDate }) {
+  const { mode } = React3.useContext(shared.AppModeContext);
+  const [editingExpense, setEditingExpense] = React3.useState(null);
+  const { data, isLoading, isError, error } = expensesDataAccess.useExpenses({
+    userId,
+    filters: startDate && endDate ? {
+      begin_on: startDate,
+      end_on: endDate
+    } : void 0
+  });
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(material.Box, { display: "flex", justifyContent: "center", p: 3, children: /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, {}) });
+  }
+  if (isError) {
+    return /* @__PURE__ */ jsxRuntime.jsx(material.Alert, { severity: "error", children: error instanceof Error ? error.message : "Failed to load expenses" });
+  }
+  const expenses = data || [];
+  if (expenses.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(material.Paper, { sx: { p: 3 }, children: /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { color: "text.secondary", align: "center", children: "No expenses found for the selected period." }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(material.TableContainer, { component: material.Paper, children: /* @__PURE__ */ jsxRuntime.jsxs(material.Table, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(material.TableHead, { children: /* @__PURE__ */ jsxRuntime.jsxs(material.TableRow, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(material.TableCell, { children: "Tag" }),
+        /* @__PURE__ */ jsxRuntime.jsx(material.TableCell, { align: "right", children: "Amount" }),
+        mode === "admin" && /* @__PURE__ */ jsxRuntime.jsx(material.TableCell, { align: "right", children: "Actions" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(material.TableBody, { children: expenses.map((expense) => /* @__PURE__ */ jsxRuntime.jsxs(material.TableRow, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(material.TableCell, { children: expense.tag }),
+        /* @__PURE__ */ jsxRuntime.jsxs(material.TableCell, { align: "right", children: [
+          "$",
+          expense.amount
+        ] }),
+        mode === "admin" && /* @__PURE__ */ jsxRuntime.jsxs(material.TableCell, { align: "right", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.IconButton,
+            {
+              size: "small",
+              onClick: () => setEditingExpense(expense),
+              "aria-label": "edit expense",
+              children: /* @__PURE__ */ jsxRuntime.jsx(EditIcon__default.default, {})
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(ExpenseDeleteButton, { expense, userId })
+        ] })
+      ] }, expense.tag)) })
+    ] }) }),
+    editingExpense && /* @__PURE__ */ jsxRuntime.jsx(
+      ExpenseEditForm,
+      {
+        expense: editingExpense,
+        open: Boolean(editingExpense),
+        onClose: () => setEditingExpense(null),
+        userId
+      }
+    )
+  ] });
+}
+function ExpenseDateRangeTabs({
+  onChange,
+  useShortLabels = false
+}) {
+  const theme = material.useTheme();
+  const { selectedDateRangeIndex, allDateRanges, selectDateRange } = expensesFeature.useExpenseWheelContext();
+  const isSmallScreen = material.useMediaQuery(theme.breakpoints.down("sm"));
+  const shouldUseShortLabels = useShortLabels || isSmallScreen;
+  const handleChange = (_event, newIndex) => {
+    selectDateRange(newIndex);
+    onChange?.(newIndex);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.Tabs,
+    {
+      value: selectedDateRangeIndex !== -1 ? selectedDateRangeIndex : false,
+      onChange: handleChange,
+      textColor: "primary",
+      indicatorColor: "primary",
+      variant: "fullWidth",
+      sx: {
+        borderBottom: 1,
+        borderColor: "divider",
+        minHeight: 48
+      },
+      children: allDateRanges.map((dateRange, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        material.Tab,
+        {
+          label: shouldUseShortLabels ? dateRange.label : dateRange.longLabel,
+          sx: {
+            minWidth: "auto",
+            flex: 1,
+            fontSize: 12,
+            fontWeight: "medium",
+            px: 1,
+            [theme.breakpoints.up("md")]: {
+              minWidth: 0,
+              fontSize: 13
+            }
+          }
+        },
+        dateRange.label
+      ))
+    }
+  );
+}
+var DEFAULT_DISPLAY_PREFERENCES = {
+  chartType: "wheel",
+  chartColor: "#2196f3",
+  dateRange: "current-month",
+  categoryGrouping: "none",
+  showLegend: true,
+  showLabels: true
+};
+var DEFAULT_EXPENSE_COLUMNS = [
+  "date",
+  "description",
+  "category",
+  "amount",
+  "account",
+  "tags"
+];
+function ExpenseSettingsPanel({
+  accounts = [],
+  availableTags = [],
+  displayPreferences = DEFAULT_DISPLAY_PREFERENCES,
+  onDisplayPreferencesChange,
+  onSave,
+  onCancel,
+  onReset
+}) {
+  const {
+    settingsVisible,
+    unsavedFilters,
+    toggleAccount,
+    toggleExcludedTag,
+    saveFilters,
+    cancelFilters
+  } = expensesFeature.useExpenseWheelContext();
+  const [selectedTab, setSelectedTab] = React3.useState(0);
+  const [localPrefs, setLocalPrefs] = React3.useState(displayPreferences);
+  const handleSave = () => {
+    saveFilters();
+    onDisplayPreferencesChange?.(localPrefs);
+    onSave?.();
+  };
+  const handleCancel = () => {
+    cancelFilters();
+    setLocalPrefs(displayPreferences);
+    setSelectedTab(0);
+    onCancel?.();
+  };
+  const handleReset = () => {
+    setLocalPrefs(DEFAULT_DISPLAY_PREFERENCES);
+    onDisplayPreferencesChange?.(DEFAULT_DISPLAY_PREFERENCES);
+    onReset?.();
+  };
+  const handleTagChange = (_event, value) => {
+    const currentExcluded = unsavedFilters.excludedTags || [];
+    currentExcluded.forEach((tag) => {
+      if (!value.includes(tag)) {
+        toggleExcludedTag(tag);
+      }
+    });
+    value.forEach((tag) => {
+      if (!currentExcluded.includes(tag)) {
+        toggleExcludedTag(tag);
+      }
+    });
+  };
+  const handlePrefChange = (key, value) => {
+    setLocalPrefs((prev) => ({ ...prev, [key]: value }));
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: settingsVisible && /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Box,
+    {
+      "data-testid": "expense-settings-panel",
+      component: framerMotion.motion.div,
+      variants: shared.panelVariants,
+      initial: "initial",
+      animate: "enter",
+      exit: "exit",
+      sx: {
+        position: "relative",
+        p: 3,
+        bgcolor: "background.paper",
+        borderRadius: 1,
+        minWidth: 400
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.IconButton,
+          {
+            onClick: handleCancel,
+            sx: {
+              position: "absolute",
+              top: 8,
+              right: 8
+            },
+            "aria-label": "Close settings",
+            children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon__default.default, {})
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h6", gutterBottom: true, sx: { mb: 2 }, children: "Expense Settings" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          material.Tabs,
+          {
+            value: selectedTab,
+            onChange: (_event, newValue) => setSelectedTab(newValue),
+            sx: { mb: 2, borderBottom: 1, borderColor: "divider" },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(material.Tab, { label: "Filters" }),
+              /* @__PURE__ */ jsxRuntime.jsx(material.Tab, { label: "Display" }),
+              /* @__PURE__ */ jsxRuntime.jsx(material.Tab, { label: "Advanced" })
+            ]
+          }
+        ),
+        selectedTab === 0 && /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { mb: 3 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "subtitle2", gutterBottom: true, sx: { fontWeight: "medium" }, children: "Accounts" }),
+            /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", color: "text.secondary", sx: { mb: 1, display: "block" }, children: "Select accounts to include in analysis" }),
+            /* @__PURE__ */ jsxRuntime.jsx(material.FormGroup, { children: accounts.length > 0 ? accounts.map((account) => /* @__PURE__ */ jsxRuntime.jsx(
+              material.FormControlLabel,
+              {
+                control: /* @__PURE__ */ jsxRuntime.jsx(
+                  material.Checkbox,
+                  {
+                    checked: unsavedFilters.accountIds?.includes(account.id) ?? false,
+                    onChange: () => toggleAccount(account.id),
+                    size: "small"
+                  }
+                ),
+                label: account.name,
+                sx: { ml: 0 }
+              },
+              account.id
+            )) : /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", color: "text.secondary", children: "No accounts available" }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { mb: 3 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "subtitle2", gutterBottom: true, sx: { fontWeight: "medium" }, children: "Excluded Tags" }),
+            /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", color: "text.secondary", sx: { mb: 1, display: "block" }, children: "Tags to exclude from analysis" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              material.Autocomplete,
+              {
+                multiple: true,
+                options: availableTags,
+                value: unsavedFilters.excludedTags || [],
+                onChange: handleTagChange,
+                renderTags: (value, getTagProps) => value.map((option, index) => /* @__PURE__ */ React3.createElement(
+                  material.Chip,
+                  {
+                    ...getTagProps({ index }),
+                    key: option,
+                    label: option,
+                    size: "small"
+                  }
+                )),
+                renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(
+                  material.TextField,
+                  {
+                    ...params,
+                    placeholder: unsavedFilters.excludedTags?.length ? "" : "Select tags to exclude",
+                    size: "small"
+                  }
+                ),
+                sx: { mt: 1 }
+              }
+            )
+          ] })
+        ] }),
+        selectedTab === 1 && /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(material.FormControl, { fullWidth: true, sx: { mb: 2 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(material.InputLabel, { size: "small", children: "Chart Type" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              material.Select,
+              {
+                size: "small",
+                value: localPrefs.chartType,
+                label: "Chart Type",
+                onChange: (e) => handlePrefChange("chartType", e.target.value),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: "wheel", children: "Wheel Chart" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: "donut", children: "Donut Chart" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: "bar", children: "Bar Chart" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: "meter", children: "Meter Chart" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.TextField,
+            {
+              fullWidth: true,
+              size: "small",
+              label: "Chart Color",
+              type: "color",
+              value: localPrefs.chartColor,
+              onChange: (e) => handlePrefChange("chartColor", e.target.value),
+              sx: { mb: 2 }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(material.FormControl, { fullWidth: true, sx: { mb: 2 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(material.InputLabel, { size: "small", children: "Date Range" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              material.Select,
+              {
+                size: "small",
+                value: localPrefs.dateRange,
+                label: "Date Range",
+                onChange: (e) => handlePrefChange("dateRange", e.target.value),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: "current-month", children: "Current Month" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: "last-30-days", children: "Last 30 Days" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: "last-3-months", children: "Last 3 Months" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: "last-6-months", children: "Last 6 Months" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: "last-year", children: "Last Year" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.FormControlLabel,
+            {
+              control: /* @__PURE__ */ jsxRuntime.jsx(
+                material.Checkbox,
+                {
+                  checked: localPrefs.showLegend,
+                  onChange: (e) => handlePrefChange("showLegend", e.target.checked),
+                  size: "small"
+                }
+              ),
+              label: "Show Legend",
+              sx: { mb: 1 }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.FormControlLabel,
+            {
+              control: /* @__PURE__ */ jsxRuntime.jsx(
+                material.Checkbox,
+                {
+                  checked: localPrefs.showLabels,
+                  onChange: (e) => handlePrefChange("showLabels", e.target.checked),
+                  size: "small"
+                }
+              ),
+              label: "Show Labels"
+            }
+          )
+        ] }),
+        selectedTab === 2 && /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(material.FormControl, { fullWidth: true, sx: { mb: 2 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(material.InputLabel, { size: "small", children: "Category Grouping" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              material.Select,
+              {
+                size: "small",
+                value: localPrefs.categoryGrouping,
+                label: "Category Grouping",
+                onChange: (e) => handlePrefChange("categoryGrouping", e.target.value),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: "none", children: "No Grouping" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: "parent", children: "Group by Parent Category" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: "custom", children: "Custom Grouping" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Divider, { sx: { my: 2 } }),
+          /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { mb: 2 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "subtitle2", gutterBottom: true, sx: { fontWeight: "medium" }, children: "Default Table Columns" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "caption", color: "text.secondary", sx: { mb: 1, display: "block" }, children: [
+              "Default columns: ",
+              DEFAULT_EXPENSE_COLUMNS.join(", ")
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Divider, { sx: { my: 2 } }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.Button,
+            {
+              onClick: handleReset,
+              variant: "outlined",
+              size: "small",
+              startIcon: /* @__PURE__ */ jsxRuntime.jsx(RestartAltIcon__default.default, {}),
+              fullWidth: true,
+              children: "Reset All to Defaults"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", gap: 1, justifyContent: "flex-end", mt: 3 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: handleCancel, variant: "outlined", size: "small", children: "Cancel" }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: handleSave, variant: "contained", size: "small", children: "Apply Settings" })
+        ] })
+      ]
+    }
+  ) });
+}
+function ExpenseLoadingState({
+  message = "Loading expenses...",
+  minHeight = 300,
+  size = 40
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Box,
+    {
+      "data-testid": "loading-state",
+      component: framerMotion.motion.div,
+      variants: shared.fadeVariants,
+      initial: "initial",
+      animate: "enter",
+      exit: "exit",
+      sx: {
+        minHeight,
+        height: "100%",
+        width: "100%",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 2,
+        py: 4
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size }),
+        message && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", color: "text.secondary", children: message })
+      ]
+    }
+  );
+}
+function ExpenseEmptyState({
+  title = "No expense data",
+  message = "Try selecting a different date range or check your accounts.",
+  minHeight = 300
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Box,
+    {
+      "data-testid": "empty-state",
+      component: framerMotion.motion.div,
+      variants: shared.fadeVariants,
+      initial: "initial",
+      animate: "enter",
+      exit: "exit",
+      sx: {
+        minHeight,
+        height: "100%",
+        width: "100%",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 2,
+        py: 4
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DonutLargeIcon__default.default,
+          {
+            sx: {
+              fontSize: 64,
+              color: "action.disabled",
+              opacity: 0.5
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.Typography,
+          {
+            variant: "h6",
+            color: "text.secondary",
+            sx: { fontWeight: "medium" },
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.Typography,
+          {
+            variant: "body2",
+            color: "text.secondary",
+            align: "center",
+            sx: { maxWidth: 400, px: 2 },
+            children: message
+          }
+        )
+      ]
+    }
+  );
+}
+function ExpenseWheelContent({
+  userId,
+  accounts = [],
+  availableTags = [],
+  enableSettings = true,
+  onCategoryClick,
+  chartSize
+}) {
+  const {
+    filters,
+    selectedTag,
+    selectTag,
+    settingsVisible,
+    showSettings,
+    selectedDateRange
+  } = expensesFeature.useExpenseWheelContext();
+  const { data: expenses, isLoading } = expensesDataAccess.useExpenses({
+    userId,
+    filters: {
+      begin_on: filters.begin_on,
+      end_on: filters.end_on
+    }
+  });
+  const hasData = expenses && expenses.length > 0;
+  const handleCategoryClick = (tag) => {
+    selectTag(tag);
+    if (onCategoryClick) {
+      onCategoryClick({
+        tag,
+        accountIds: filters.accountIds || [],
+        dateRange: selectedDateRange
+      });
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Box,
+    {
+      "data-testid": "expense-wheel",
+      sx: {
+        position: "relative",
+        width: "100%"
+      },
+      children: [
+        isLoading && /* @__PURE__ */ jsxRuntime.jsx(
+          material.LinearProgress,
+          {
+            sx: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              height: 1
+            }
+          }
+        ),
+        settingsVisible ? /* @__PURE__ */ jsxRuntime.jsx(
+          ExpenseSettingsPanel,
+          {
+            accounts,
+            availableTags
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ExpenseDateRangeTabs, {}),
+          /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { position: "relative", mt: 2 }, children: [
+            enableSettings && /* @__PURE__ */ jsxRuntime.jsx(
+              material.IconButton,
+              {
+                onClick: showSettings,
+                sx: {
+                  position: "absolute",
+                  top: 8,
+                  right: 16,
+                  zIndex: 1
+                },
+                "aria-label": "Open settings",
+                children: /* @__PURE__ */ jsxRuntime.jsx(SettingsIcon__default.default, {})
+              }
+            ),
+            isLoading && /* @__PURE__ */ jsxRuntime.jsx(ExpenseLoadingState, {}),
+            !isLoading && !hasData && /* @__PURE__ */ jsxRuntime.jsx(
+              ExpenseEmptyState,
+              {
+                title: "No expenses found",
+                message: "Try selecting a different date range or adjusting your filters."
+              }
+            ),
+            !isLoading && hasData && /* @__PURE__ */ jsxRuntime.jsx(
+              material.Box,
+              {
+                sx: {
+                  display: "flex",
+                  justifyContent: "center",
+                  py: 3
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  ExpenseDonutChart,
+                  {
+                    userId,
+                    filters,
+                    selected: selectedTag,
+                    onCategoryClick: handleCategoryClick,
+                    size: chartSize,
+                    maxCategories: 7,
+                    animated: true
+                  }
+                )
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function ExpenseWheelContainer({
+  userId,
+  initialDateRangeIndex = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(expensesFeature.ExpenseWheelProvider, { userId, initialDateRangeIndex, children: /* @__PURE__ */ jsxRuntime.jsx(ExpenseWheelContent, { userId, ...props }) });
+}
+function ExpenseFilterForm({
+  filters,
+  onFiltersChange,
+  compact = false
+}) {
+  const [localFilters, setLocalFilters] = React3.useState(filters);
+  const [errors, setErrors] = React3.useState([]);
+  const filterState = expensesFeature.useExpenseFilters(localFilters);
+  const handleChange = (field, value) => {
+    setLocalFilters((prev) => ({
+      ...prev,
+      [field]: value
+    }));
+    setErrors([]);
+  };
+  const handleApply = () => {
+    const validation = expensesFeature.validateExpenseFilters(localFilters);
+    if (!validation.isValid) {
+      setErrors(validation.errors);
+      return;
+    }
+    onFiltersChange(localFilters);
+  };
+  const handleClear = () => {
+    const clearedFilters = {
+      begin_on: void 0,
+      end_on: void 0,
+      threshold: void 0
+    };
+    setLocalFilters(clearedFilters);
+    setErrors([]);
+    onFiltersChange(clearedFilters);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(material.Paper, { sx: { p: compact ? 2 : 3 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: compact ? "subtitle1" : "h6", children: "Filter Expenses" }),
+      filterState.hasActiveFilters && /* @__PURE__ */ jsxRuntime.jsx(
+        material.Chip,
+        {
+          label: `${filterState.hasDateFilter ? "1" : "0"} + ${filterState.hasThresholdFilter ? "1" : "0"} filters`,
+          size: "small",
+          color: "primary"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", gap: 2, mb: 2, flexDirection: compact ? "column" : "row" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        material.TextField,
+        {
+          fullWidth: true,
+          type: "date",
+          label: "Start Date",
+          value: localFilters.begin_on || "",
+          onChange: (e) => handleChange("begin_on", e.target.value),
+          InputLabelProps: { shrink: true },
+          helperText: compact ? void 0 : "YYYY-MM-DD format"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        material.TextField,
+        {
+          fullWidth: true,
+          type: "date",
+          label: "End Date",
+          value: localFilters.end_on || "",
+          onChange: (e) => handleChange("end_on", e.target.value),
+          InputLabelProps: { shrink: true },
+          helperText: compact ? void 0 : "YYYY-MM-DD format"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      material.TextField,
+      {
+        fullWidth: true,
+        type: "number",
+        label: "Minimum Amount",
+        inputProps: { step: "0.01", min: "0" },
+        value: localFilters.threshold || "",
+        onChange: (e) => handleChange("threshold", parseFloat(e.target.value)),
+        helperText: compact ? void 0 : "Show only expenses above this amount",
+        sx: { mb: 2 }
+      }
+    ),
+    filterState.dateRangeLabel && /* @__PURE__ */ jsxRuntime.jsxs(material.Alert, { severity: "info", sx: { mb: 2 }, children: [
+      filterState.dateRangeLabel,
+      filterState.hasThresholdFilter && ` \u2022 Min: $${localFilters.threshold}`
+    ] }),
+    errors.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(material.Alert, { severity: "error", sx: { mb: 2 }, children: errors.map((error, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: error }, index)) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", gap: 2 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        material.Button,
+        {
+          variant: "contained",
+          startIcon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.FilterList, {}),
+          onClick: handleApply,
+          fullWidth: !compact,
+          children: "Apply Filters"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        material.Button,
+        {
+          variant: "outlined",
+          startIcon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.Clear, {}),
+          onClick: handleClear,
+          disabled: !filterState.hasActiveFilters,
+          children: "Clear"
+        }
+      )
+    ] })
+  ] });
+}
+function ExpenseAdvancedFilterForm({
+  filters,
+  onFiltersChange,
+  availableCategories = [],
+  availableMerchants = [],
+  compact = false,
+  showPresets = true
+}) {
+  const [localFilters, setLocalFilters] = React3.useState(filters);
+  const [amountRange, setAmountRange] = React3.useState([0, 1e3]);
+  React3.useEffect(() => {
+    if (localFilters.minAmount !== void 0 || localFilters.maxAmount !== void 0) {
+      setAmountRange([
+        localFilters.minAmount || 0,
+        localFilters.maxAmount || 1e3
+      ]);
+    }
+  }, [localFilters.minAmount, localFilters.maxAmount]);
+  const handleChange = (field, value) => {
+    setLocalFilters((prev) => ({
+      ...prev,
+      [field]: value
+    }));
+  };
+  const handleAmountRangeChange = (_event, newValue) => {
+    if (Array.isArray(newValue)) {
+      setAmountRange(newValue);
+      setLocalFilters((prev) => ({
+        ...prev,
+        minAmount: newValue[0],
+        maxAmount: newValue[1]
+      }));
+    }
+  };
+  const handleApply = () => {
+    onFiltersChange(localFilters);
+  };
+  const handleClear = () => {
+    const clearedFilters = {
+      begin_on: void 0,
+      end_on: void 0,
+      threshold: void 0,
+      categories: void 0,
+      merchants: void 0,
+      minAmount: void 0,
+      maxAmount: void 0,
+      amountComparison: "between",
+      type: "all",
+      sortBy: "date",
+      sortDirection: "desc"
+    };
+    setLocalFilters(clearedFilters);
+    setAmountRange([0, 1e3]);
+    onFiltersChange(clearedFilters);
+  };
+  const handlePreset = (preset) => {
+    const now = /* @__PURE__ */ new Date();
+    let begin_on;
+    let end_on;
+    switch (preset) {
+      case "this-month":
+        begin_on = new Date(now.getFullYear(), now.getMonth(), 1).toISOString().split("T")[0];
+        end_on = new Date(now.getFullYear(), now.getMonth() + 1, 0).toISOString().split("T")[0];
+        break;
+      case "last-month":
+        begin_on = new Date(now.getFullYear(), now.getMonth() - 1, 1).toISOString().split("T")[0];
+        end_on = new Date(now.getFullYear(), now.getMonth(), 0).toISOString().split("T")[0];
+        break;
+      case "this-year":
+        begin_on = new Date(now.getFullYear(), 0, 1).toISOString().split("T")[0];
+        end_on = new Date(now.getFullYear(), 11, 31).toISOString().split("T")[0];
+        break;
+      case "last-30-days":
+        begin_on = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1e3).toISOString().split("T")[0];
+        end_on = now.toISOString().split("T")[0];
+        break;
+    }
+    setLocalFilters((prev) => ({ ...prev, begin_on, end_on }));
+  };
+  const activeFilterCount = [
+    localFilters.begin_on || localFilters.end_on,
+    localFilters.categories && localFilters.categories.length > 0,
+    localFilters.merchants && localFilters.merchants.length > 0,
+    localFilters.minAmount !== void 0 || localFilters.maxAmount !== void 0,
+    localFilters.type && localFilters.type !== "all"
+  ].filter(Boolean).length;
+  return /* @__PURE__ */ jsxRuntime.jsxs(material.Paper, { sx: { p: compact ? 2 : 3 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: compact ? "subtitle1" : "h6", children: "Advanced Filters" }),
+      activeFilterCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+        material.Chip,
+        {
+          label: `${activeFilterCount} filter${activeFilterCount !== 1 ? "s" : ""}`,
+          size: "small",
+          color: "primary",
+          icon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.FilterList, {})
+        }
+      )
+    ] }),
+    showPresets && /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { mb: 2 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", color: "text.secondary", gutterBottom: true, display: "block", children: "Quick Date Presets:" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", gap: 1, flexWrap: "wrap" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.Chip,
+          {
+            label: "This Month",
+            size: "small",
+            onClick: () => handlePreset("this-month"),
+            variant: "outlined"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.Chip,
+          {
+            label: "Last Month",
+            size: "small",
+            onClick: () => handlePreset("last-month"),
+            variant: "outlined"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.Chip,
+          {
+            label: "This Year",
+            size: "small",
+            onClick: () => handlePreset("this-year"),
+            variant: "outlined"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.Chip,
+          {
+            label: "Last 30 Days",
+            size: "small",
+            onClick: () => handlePreset("last-30-days"),
+            variant: "outlined"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(material.Accordion, { defaultExpanded: !compact, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(material.AccordionSummary, { expandIcon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ExpandMore, {}), children: /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "subtitle2", children: "Date Range" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(material.AccordionDetails, { children: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", gap: 2, flexDirection: compact ? "column" : "row" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.TextField,
+          {
+            fullWidth: true,
+            type: "date",
+            label: "Start Date",
+            value: localFilters.begin_on || "",
+            onChange: (e) => handleChange("begin_on", e.target.value || void 0),
+            InputLabelProps: { shrink: true }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.TextField,
+          {
+            fullWidth: true,
+            type: "date",
+            label: "End Date",
+            value: localFilters.end_on || "",
+            onChange: (e) => handleChange("end_on", e.target.value || void 0),
+            InputLabelProps: { shrink: true }
+          }
+        )
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(material.Accordion, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(material.AccordionSummary, { expandIcon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ExpandMore, {}), children: /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "subtitle2", children: [
+        "Categories",
+        localFilters.categories && localFilters.categories.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          material.Chip,
+          {
+            label: localFilters.categories.length,
+            size: "small",
+            sx: { ml: 1 }
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(material.AccordionDetails, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        material.Autocomplete,
+        {
+          multiple: true,
+          freeSolo: true,
+          options: availableCategories,
+          value: localFilters.categories || [],
+          onChange: (_e, value) => handleChange("categories", value.length > 0 ? value : void 0),
+          renderTags: (value, getTagProps) => value.map((option, index) => /* @__PURE__ */ React3.createElement(material.Chip, { label: option, ...getTagProps({ index }), key: option, size: "small" })),
+          renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(material.TextField, { ...params, label: "Filter by Categories", placeholder: "Add categories..." })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(material.Accordion, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(material.AccordionSummary, { expandIcon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ExpandMore, {}), children: /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "subtitle2", children: [
+        "Merchants",
+        localFilters.merchants && localFilters.merchants.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          material.Chip,
+          {
+            label: localFilters.merchants.length,
+            size: "small",
+            sx: { ml: 1 }
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(material.AccordionDetails, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        material.Autocomplete,
+        {
+          multiple: true,
+          freeSolo: true,
+          options: availableMerchants,
+          value: localFilters.merchants || [],
+          onChange: (_e, value) => handleChange("merchants", value.length > 0 ? value : void 0),
+          renderTags: (value, getTagProps) => value.map((option, index) => /* @__PURE__ */ React3.createElement(material.Chip, { label: option, ...getTagProps({ index }), key: option, size: "small" })),
+          renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(material.TextField, { ...params, label: "Filter by Merchants", placeholder: "Add merchants..." })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(material.Accordion, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(material.AccordionSummary, { expandIcon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ExpandMore, {}), children: /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "subtitle2", children: "Amount Range" }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(material.AccordionDetails, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(material.FormControl, { fullWidth: true, sx: { mb: 2 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(material.InputLabel, { children: "Comparison Type" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            material.Select,
+            {
+              value: localFilters.amountComparison || "between",
+              label: "Comparison Type",
+              onChange: (e) => handleChange("amountComparison", e.target.value),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: "between", children: "Between" }),
+                /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: "above", children: "Above" }),
+                /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: "below", children: "Below" }),
+                /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: "exact", children: "Exact" })
+              ]
+            }
+          )
+        ] }),
+        localFilters.amountComparison === "between" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "caption", gutterBottom: true, children: [
+            "Amount: $",
+            amountRange[0],
+            " - $",
+            amountRange[1]
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.Slider,
+            {
+              value: amountRange,
+              onChange: handleAmountRangeChange,
+              valueLabelDisplay: "auto",
+              min: 0,
+              max: 1e3,
+              step: 10,
+              marks: [
+                { value: 0, label: "$0" },
+                { value: 500, label: "$500" },
+                { value: 1e3, label: "$1000" }
+              ]
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+          material.TextField,
+          {
+            fullWidth: true,
+            type: "number",
+            label: "Amount",
+            inputProps: { step: "0.01", min: "0" },
+            value: localFilters.minAmount || "",
+            onChange: (e) => handleChange("minAmount", parseFloat(e.target.value) || void 0)
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(material.Accordion, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(material.AccordionSummary, { expandIcon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ExpandMore, {}), children: /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "subtitle2", children: "Type & Sorting" }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(material.AccordionDetails, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(material.FormControl, { fullWidth: true, sx: { mb: 2 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(material.InputLabel, { children: "Expense Type" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            material.Select,
+            {
+              value: localFilters.type || "all",
+              label: "Expense Type",
+              onChange: (e) => handleChange("type", e.target.value),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: "all", children: "All Expenses" }),
+                /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: "recurring", children: "Recurring Only" }),
+                /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: "one-time", children: "One-Time Only" })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", gap: 2 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(material.FormControl, { fullWidth: true, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(material.InputLabel, { children: "Sort By" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              material.Select,
+              {
+                value: localFilters.sortBy || "date",
+                label: "Sort By",
+                onChange: (e) => handleChange("sortBy", e.target.value),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: "date", children: "Date" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: "amount", children: "Amount" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: "merchant", children: "Merchant" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(material.FormControl, { fullWidth: true, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(material.InputLabel, { children: "Direction" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              material.Select,
+              {
+                value: localFilters.sortDirection || "desc",
+                label: "Direction",
+                onChange: (e) => handleChange("sortDirection", e.target.value),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: "asc", children: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.TrendingUp, { fontSize: "small" }),
+                    " Ascending"
+                  ] }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: "desc", children: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.TrendingDown, { fontSize: "small" }),
+                    " Descending"
+                  ] }) })
+                ]
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] }),
+    activeFilterCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(material.Alert, { severity: "info", sx: { mt: 2 }, children: /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "body2", children: [
+      localFilters.begin_on && localFilters.end_on && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        "Dates: ",
+        localFilters.begin_on,
+        " to ",
+        localFilters.end_on
+      ] }),
+      localFilters.categories && localFilters.categories.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        " \u2022 Categories: ",
+        localFilters.categories.length
+      ] }),
+      localFilters.merchants && localFilters.merchants.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        " \u2022 Merchants: ",
+        localFilters.merchants.length
+      ] }),
+      (localFilters.minAmount !== void 0 || localFilters.maxAmount !== void 0) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        " \u2022 Amount: $",
+        localFilters.minAmount || 0,
+        " - $",
+        localFilters.maxAmount || 1e3
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { mt: 3, display: "flex", gap: 2 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        material.Button,
+        {
+          variant: "contained",
+          startIcon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.FilterList, {}),
+          onClick: handleApply,
+          fullWidth: !compact,
+          children: "Apply Filters"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        material.Button,
+        {
+          variant: "outlined",
+          startIcon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.Clear, {}),
+          onClick: handleClear,
+          disabled: activeFilterCount === 0,
+          children: "Clear All"
+        }
+      )
+    ] })
+  ] });
+}
+function ExpenseExportButton({
+  expenses,
+  dateRangeLabel = "expenses",
+  currencySymbol = "$",
+  variant = "outlined",
+  size = "medium",
+  disabled = false
+}) {
+  const [anchorEl, setAnchorEl] = React3.useState(null);
+  const [showSuccess, setShowSuccess] = React3.useState(false);
+  const [showError, setShowError] = React3.useState(false);
+  const [errorMessage, setErrorMessage] = React3.useState("");
+  const open = Boolean(anchorEl);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const generateFilename = (extension) => {
+    const timestamp = (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
+    const sanitizedLabel = dateRangeLabel.replace(/[^a-z0-9]/gi, "_").toLowerCase();
+    return `expenses_${sanitizedLabel}_${timestamp}.${extension}`;
+  };
+  const formatAmount = (amount) => {
+    return `${currencySymbol}${amount}`;
+  };
+  const calculateTotal = () => {
+    return expenses.reduce((sum, expense) => sum + parseFloat(expense.amount), 0);
+  };
+  const exportToCSV = () => {
+    try {
+      const headers = ["Tag", "Amount", "Percentage"];
+      const total = calculateTotal();
+      const rows = expenses.map((expense) => {
+        const amount = parseFloat(expense.amount);
+        const percentage = total > 0 ? (amount / total * 100).toFixed(2) : "0.00";
+        return [
+          expense.tag,
+          formatAmount(expense.amount),
+          `${percentage}%`
+        ];
+      });
+      rows.push(["Total", formatAmount(total.toFixed(2)), "100.00%"]);
+      const csvContent = [
+        headers.join(","),
+        ...rows.map((row) => row.join(","))
+      ].join("\n");
+      const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+      const link = document.createElement("a");
+      const url = URL.createObjectURL(blob);
+      link.setAttribute("href", url);
+      link.setAttribute("download", generateFilename("csv"));
+      link.style.visibility = "hidden";
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      setShowSuccess(true);
+      handleClose();
+    } catch (error) {
+      setErrorMessage(error instanceof Error ? error.message : "Failed to export CSV");
+      setShowError(true);
+    }
+  };
+  const exportToExcel = () => {
+    try {
+      const headers = ["Tag", "Amount", "Percentage"];
+      const total = calculateTotal();
+      const rows = expenses.map((expense) => {
+        const amount = parseFloat(expense.amount);
+        const percentage = total > 0 ? (amount / total * 100).toFixed(2) : "0.00";
+        return [
+          expense.tag,
+          formatAmount(expense.amount),
+          `${percentage}%`
+        ];
+      });
+      rows.push(["Total", formatAmount(total.toFixed(2)), "100.00%"]);
+      const tsvContent = [
+        headers.join("	"),
+        ...rows.map((row) => row.join("	"))
+      ].join("\n");
+      const blob = new Blob([tsvContent], { type: "application/vnd.ms-excel" });
+      const link = document.createElement("a");
+      const url = URL.createObjectURL(blob);
+      link.setAttribute("href", url);
+      link.setAttribute("download", generateFilename("xls"));
+      link.style.visibility = "hidden";
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      setShowSuccess(true);
+      handleClose();
+    } catch (error) {
+      setErrorMessage(error instanceof Error ? error.message : "Failed to export Excel");
+      setShowError(true);
+    }
+  };
+  const exportToPDF = () => {
+    try {
+      const total = calculateTotal();
+      const htmlContent = `
+        <!DOCTYPE html>
+        <html>
+        <head>
+          <title>Expense Report - ${dateRangeLabel}</title>
+          <style>
+            body { font-family: Arial, sans-serif; margin: 40px; }
+            h1 { color: #333; }
+            table { width: 100%; border-collapse: collapse; margin-top: 20px; }
+            th, td { padding: 12px; text-align: left; border-bottom: 1px solid #ddd; }
+            th { background-color: #f5f5f5; font-weight: bold; }
+            .total { font-weight: bold; background-color: #f9f9f9; }
+            .right { text-align: right; }
+          </style>
+        </head>
+        <body>
+          <h1>Expense Report</h1>
+          <p><strong>Period:</strong> ${dateRangeLabel}</p>
+          <p><strong>Generated:</strong> ${(/* @__PURE__ */ new Date()).toLocaleDateString()}</p>
+          <table>
+            <thead>
+              <tr>
+                <th>Tag</th>
+                <th class="right">Amount</th>
+                <th class="right">Percentage</th>
+              </tr>
+            </thead>
+            <tbody>
+              ${expenses.map((expense) => {
+        const amount = parseFloat(expense.amount);
+        const percentage = total > 0 ? (amount / total * 100).toFixed(2) : "0.00";
+        return `
+                    <tr>
+                      <td>${expense.tag}</td>
+                      <td class="right">${formatAmount(expense.amount)}</td>
+                      <td class="right">${percentage}%</td>
+                    </tr>
+                  `;
+      }).join("")}
+              <tr class="total">
+                <td>Total</td>
+                <td class="right">${formatAmount(total.toFixed(2))}</td>
+                <td class="right">100.00%</td>
+              </tr>
+            </tbody>
+          </table>
+        </body>
+        </html>
+      `;
+      const printWindow = window.open("", "_blank");
+      if (printWindow) {
+        printWindow.document.write(htmlContent);
+        printWindow.document.close();
+        printWindow.focus();
+        setTimeout(() => {
+          printWindow.print();
+        }, 250);
+        setShowSuccess(true);
+        handleClose();
+      } else {
+        throw new Error("Could not open print window. Please allow popups.");
+      }
+    } catch (error) {
+      setErrorMessage(error instanceof Error ? error.message : "Failed to export PDF");
+      setShowError(true);
+    }
+  };
+  const isEmpty = expenses.length === 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      material.Button,
+      {
+        variant,
+        size,
+        startIcon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.Download, {}),
+        onClick: handleClick,
+        disabled: disabled || isEmpty,
+        "aria-label": "Export expenses",
+        "aria-controls": open ? "export-menu" : void 0,
+        "aria-haspopup": "true",
+        "aria-expanded": open ? "true" : void 0,
+        children: "Export"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      material.Menu,
+      {
+        id: "export-menu",
+        anchorEl,
+        open,
+        onClose: handleClose,
+        MenuListProps: {
+          "aria-labelledby": "export-button"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(material.MenuItem, { onClick: exportToCSV, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(material.ListItemIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.FileDownload, { fontSize: "small" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(material.ListItemText, { children: "Export as CSV" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(material.MenuItem, { onClick: exportToExcel, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(material.ListItemIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.TableChart, { fontSize: "small" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(material.ListItemText, { children: "Export as Excel" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(material.MenuItem, { onClick: exportToPDF, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(material.ListItemIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.PictureAsPdf, { fontSize: "small" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(material.ListItemText, { children: "Export as PDF" })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      material.Snackbar,
+      {
+        open: showSuccess,
+        autoHideDuration: 3e3,
+        onClose: () => setShowSuccess(false),
+        anchorOrigin: { vertical: "bottom", horizontal: "center" },
+        children: /* @__PURE__ */ jsxRuntime.jsx(material.Alert, { severity: "success", onClose: () => setShowSuccess(false), children: "Export completed successfully!" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      material.Snackbar,
+      {
+        open: showError,
+        autoHideDuration: 5e3,
+        onClose: () => setShowError(false),
+        anchorOrigin: { vertical: "bottom", horizontal: "center" },
+        children: /* @__PURE__ */ jsxRuntime.jsx(material.Alert, { severity: "error", onClose: () => setShowError(false), children: errorMessage || "Export failed" })
+      }
+    )
+  ] });
+}
+function ExpenseBreakdownItem({
+  name,
+  value,
+  percent,
+  icon,
+  color,
+  onClick,
+  clickable = !!onClick
+}) {
+  const theme = material.useTheme();
+  const displayName = name || "Untagged";
+  const iconColor = color || theme.palette.text.primary;
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Box,
+    {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        width: "100%",
+        padding: theme.spacing(1),
+        gap: theme.spacing(1.5)
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.Box,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              minWidth: 32
+            },
+            children: icon || /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.LocalOffer, { sx: { color: iconColor, fontSize: 20 } })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          material.Box,
+          {
+            sx: {
+              display: "flex",
+              flexDirection: "column",
+              flex: 1,
+              minWidth: 0
+              // Allow text truncation
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                material.Typography,
+                {
+                  variant: "body2",
+                  sx: {
+                    fontWeight: 500,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap"
+                  },
+                  children: displayName
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", color: "text.secondary", children: value })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.Box,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              minWidth: 50,
+              justifyContent: "flex-end"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              material.Typography,
+              {
+                variant: "body2",
+                sx: {
+                  fontWeight: 600,
+                  color: theme.palette.primary.main
+                },
+                children: [
+                  percent.toFixed(1),
+                  "%"
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+  if (clickable && onClick) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      material.ButtonBase,
+      {
+        "data-testid": "expense-breakdown-item",
+        onClick,
+        sx: {
+          width: "100%",
+          borderRadius: 1,
+          transition: "background-color 0.2s",
+          "&:hover": {
+            backgroundColor: theme.palette.action.hover
+          },
+          "&:active": {
+            backgroundColor: theme.palette.action.selected
+          }
+        },
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(material.Box, { "data-testid": "expense-breakdown-item", sx: { borderRadius: 1 }, children: content });
+}
+function ExpenseAnalyzer({
+  loading = false,
+  dateRangeSelector,
+  trendData,
+  detailData,
+  transactionCount,
+  transactionSum,
+  transactionType = "Debit",
+  onTransactionTypeToggle,
+  tagBreakdown,
+  onViewAllTransactions,
+  onTagClick,
+  currencyFormatter = (value) => `$${value.toFixed(2)}`,
+  emptyMessage = "No expense data available for the selected period"
+}) {
+  const theme = material.useTheme();
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ExpenseLoadingState, {});
+  }
+  const isEmpty = trendData.length === 0 && detailData.length === 0 && tagBreakdown.length === 0;
+  if (isEmpty) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ExpenseEmptyState, { message: emptyMessage });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.Box,
+    {
+      "data-testid": "expense-analyzer",
+      sx: {
+        padding: { xs: 0, md: theme.spacing(2) }
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(material.Grid, { container: true, spacing: 2, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(material.Grid, { size: { xs: 12, sm: 8 }, children: [
+          dateRangeSelector && /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { mb: 2 }, children: dateRangeSelector }),
+          trendData.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(material.Paper, { elevation: 1, sx: { p: 2, mb: 2 }, children: /* @__PURE__ */ jsxRuntime.jsx(ExpenseLineChart, { data: [trendData], height: 200 }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            material.Box,
+            {
+              sx: {
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                mb: 2,
+                px: 1
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    material.Typography,
+                    {
+                      variant: "body2",
+                      component: "span",
+                      sx: {
+                        mr: 1,
+                        cursor: onTransactionTypeToggle ? "pointer" : "default",
+                        "&:hover": onTransactionTypeToggle ? { textDecoration: "underline" } : void 0
+                      },
+                      onClick: onTransactionTypeToggle,
+                      children: [
+                        transactionCount,
+                        " ",
+                        transactionType,
+                        transactionCount !== 1 ? "s" : ""
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h6", component: "span", sx: { fontWeight: 600 }, children: currencyFormatter(transactionSum) })
+                ] }),
+                onViewAllTransactions && /* @__PURE__ */ jsxRuntime.jsx(
+                  material.Button,
+                  {
+                    variant: "text",
+                    size: "small",
+                    startIcon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.Visibility, {}),
+                    onClick: onViewAllTransactions,
+                    children: "View All"
+                  }
+                )
+              ]
+            }
+          ),
+          detailData.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(material.Paper, { elevation: 1, sx: { p: 2 }, children: /* @__PURE__ */ jsxRuntime.jsx(ExpenseLineChart, { data: [detailData], height: 300 }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { size: { xs: 12, sm: 4 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          material.Paper,
+          {
+            elevation: 1,
+            sx: {
+              p: 1,
+              maxHeight: { sm: 600 },
+              overflowY: "auto"
+            },
+            children: tagBreakdown.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(material.Box, { children: tagBreakdown.map((tag, index) => /* @__PURE__ */ jsxRuntime.jsx(
+              ExpenseBreakdownItem,
+              {
+                name: tag.name,
+                value: currencyFormatter(tag.value),
+                percent: tag.percent,
+                color: tag.color,
+                icon: tag.icon,
+                onClick: onTagClick ? () => onTagClick(tag) : void 0
+              },
+              tag.name || `untagged-${index}`
+            )) }) : /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", color: "text.secondary", sx: { p: 2, textAlign: "center" }, children: "No tag data available" })
+          }
+        ) })
+      ] })
+    }
+  );
+}
+var defaultCurrencyFormatter = (value) => {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  }).format(value);
+};
+function ExpenseCompareCard({
+  title = "Compare Categories",
+  firstTag,
+  secondTag,
+  dateRangeLabel,
+  onViewDetails,
+  currencyFormatter = defaultCurrencyFormatter,
+  showTrends = true
+}) {
+  const theme = material.useTheme();
+  const renderTrendIcon = (trend) => {
+    switch (trend) {
+      case "up":
+        return /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.TrendingUp, { fontSize: "small", color: "error" });
+      case "down":
+        return /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.TrendingDown, { fontSize: "small", color: "success" });
+      case "flat":
+      default:
+        return /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.TrendingFlat, { fontSize: "small", color: "action" });
+    }
+  };
+  const renderTagColumn = (tag, isPrimary) => {
+    const color = tag.color || (isPrimary ? theme.palette.primary.dark : theme.palette.primary.light);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      material.Box,
+      {
+        sx: {
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          gap: 1,
+          p: 2,
+          borderRadius: 1,
+          bgcolor: isPrimary ? "primary.50" : "secondary.50"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.Chip,
+            {
+              label: tag.name || "Untagged",
+              sx: {
+                bgcolor: color,
+                color: "white",
+                fontWeight: "medium"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.Typography,
+            {
+              variant: "h4",
+              sx: {
+                fontWeight: 600,
+                color
+              },
+              children: currencyFormatter(tag.amount)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            material.Typography,
+            {
+              variant: "body2",
+              color: "text.secondary",
+              children: [
+                tag.percent.toFixed(1),
+                "% of total"
+              ]
+            }
+          ),
+          showTrends && tag.trend && /* @__PURE__ */ jsxRuntime.jsxs(
+            material.Box,
+            {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 0.5
+              },
+              children: [
+                renderTrendIcon(tag.trend),
+                tag.trendPercent !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+                  material.Typography,
+                  {
+                    variant: "caption",
+                    sx: {
+                      color: tag.trend === "up" ? "error.main" : tag.trend === "down" ? "success.main" : "text.secondary"
+                    },
+                    children: [
+                      tag.trendPercent > 0 ? "+" : "",
+                      tag.trendPercent.toFixed(1),
+                      "%"
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  };
+  const difference = firstTag.amount - secondTag.amount;
+  const percentDifference = difference / secondTag.amount * 100;
+  return /* @__PURE__ */ jsxRuntime.jsxs(material.Card, { "data-testid": "expense-compare-card", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      material.CardHeader,
+      {
+        avatar: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.CompareArrows, { color: "primary" }),
+        title,
+        subheader: dateRangeLabel,
+        titleTypographyProps: {
+          variant: "h6",
+          color: "primary"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(material.CardContent, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        material.Box,
+        {
+          sx: {
+            display: "flex",
+            gap: 2,
+            mb: 2
+          },
+          children: [
+            renderTagColumn(firstTag, true),
+            renderTagColumn(secondTag, false)
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        material.Box,
+        {
+          sx: {
+            p: 2,
+            borderRadius: 1,
+            bgcolor: "background.default",
+            textAlign: "center"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", color: "text.secondary", gutterBottom: true, children: "Difference" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              material.Typography,
+              {
+                variant: "h6",
+                sx: {
+                  fontWeight: 600,
+                  color: difference > 0 ? "error.main" : difference < 0 ? "success.main" : "text.secondary"
+                },
+                children: [
+                  difference > 0 ? "+" : "",
+                  currencyFormatter(Math.abs(difference))
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "caption", color: "text.secondary", children: [
+              "(",
+              percentDifference > 0 ? "+" : "",
+              percentDifference.toFixed(1),
+              "%)"
+            ] })
+          ]
+        }
+      )
+    ] }),
+    onViewDetails && /* @__PURE__ */ jsxRuntime.jsx(
+      material.CardActions,
+      {
+        sx: {
+          justifyContent: "flex-end",
+          borderTop: `1px solid ${theme.palette.divider}`
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          material.Button,
+          {
+            size: "small",
+            color: "primary",
+            endIcon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ChevronRight, {}),
+            onClick: onViewDetails,
+            children: "View Details"
+          }
+        )
+      }
+    )
+  ] });
+}
+
+exports.ExpenseAdvancedFilterForm = ExpenseAdvancedFilterForm;
+exports.ExpenseAnalyzer = ExpenseAnalyzer;
+exports.ExpenseBarChart = ExpenseBarChart;
+exports.ExpenseBreakdownItem = ExpenseBreakdownItem;
+exports.ExpenseChart = ExpenseChart;
+exports.ExpenseCompareCard = ExpenseCompareCard;
+exports.ExpenseCreateForm = ExpenseCreateForm;
+exports.ExpenseDateRangeTabs = ExpenseDateRangeTabs;
+exports.ExpenseDeleteButton = ExpenseDeleteButton;
+exports.ExpenseDonutChart = ExpenseDonutChart;
+exports.ExpenseEditForm = ExpenseEditForm;
+exports.ExpenseEmptyState = ExpenseEmptyState;
+exports.ExpenseExportButton = ExpenseExportButton;
+exports.ExpenseFilterForm = ExpenseFilterForm;
+exports.ExpenseLineChart = ExpenseLineChart;
+exports.ExpenseList = ExpenseList;
+exports.ExpenseLoadingState = ExpenseLoadingState;
+exports.ExpenseMeter = ExpenseMeter;
+exports.ExpenseSettingsPanel = ExpenseSettingsPanel;
+exports.ExpenseSummary = ExpenseSummary;
+exports.ExpenseThinDonut = ExpenseThinDonut;
+exports.ExpenseWheelContainer = ExpenseWheelContainer;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map