@pfm-platform/budgets-ui-mui 0.2.0 → 0.2.1

package/dist/index.d.cts

@@ -1,12 +1,12 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Budget } from '@pfm-platform/shared';
+import { BudgetWithRelations } from '@pfm-platform/shared';
 
 interface BudgetListProps {
     userId: string;
-    /** Date range start */
-    start_date?: string;
-    /** Date range end */
-    end_date?: string;
+    /** Budget month (1-12) */
+    month?: number;
+    /** Budget year */
+    year?: number;
     /** Custom title for the list */
     title?: string;
     /** Currency symbol to display */
@@ -18,14 +18,14 @@ interface BudgetListProps {
  * BudgetList component displays budgets with progress bars.
  * Shows budget name, amounts, and visual progress indicator.
  */
-declare function BudgetList({ userId, start_date, end_date, title, currencySymbol, maxItems, }: BudgetListProps): react_jsx_runtime.JSX.Element;
+declare function BudgetList({ userId, month, year, title, currencySymbol, maxItems, }: BudgetListProps): react_jsx_runtime.JSX.Element;
 
 interface BudgetSummaryProps {
     userId: string;
-    /** Date range start */
-    start_date?: string;
-    /** Date range end */
-    end_date?: string;
+    /** Budget month (1-12) */
+    month?: number;
+    /** Budget year */
+    year?: number;
     /** Custom title for the summary */
     title?: string;
     /** Currency symbol to display */
@@ -35,7 +35,7 @@ interface BudgetSummaryProps {
  * BudgetSummary component displays aggregate budget statistics.
  * Shows total budgets, budget amount, spent, remaining, and overall state.
  */
-declare function BudgetSummary({ userId, start_date, end_date, title, currencySymbol, }: BudgetSummaryProps): react_jsx_runtime.JSX.Element;
+declare function BudgetSummary({ userId, month, year, title, currencySymbol, }: BudgetSummaryProps): react_jsx_runtime.JSX.Element;
 
 interface BudgetCreateFormProps {
     userId: string;
@@ -45,7 +45,7 @@ declare function BudgetCreateForm({ userId, onSuccess, }: BudgetCreateFormProps)
 
 interface BudgetEditFormProps {
     userId: string;
-    budget: Budget;
+    budget: BudgetWithRelations;
     open: boolean;
     onClose: () => void;
 }
@@ -53,13 +53,13 @@ declare function BudgetEditForm({ userId, budget, open, onClose, }: BudgetEditFo
 
 interface BudgetDeleteButtonProps {
     userId: string;
-    budgetId: number;
+    budgetId: string;
     budgetName: string;
 }
 declare function BudgetDeleteButton({ userId, budgetId, budgetName, }: BudgetDeleteButtonProps): react_jsx_runtime.JSX.Element;
 
 interface BudgetProgressCardProps {
-    budget: Budget;
+    budget: BudgetWithRelations;
     /** Current spent amount */
     currentSpent: number;
     /** Currency symbol to display */
@@ -92,11 +92,11 @@ interface BudgetProgressCardProps {
 declare function BudgetProgressCard({ budget, currentSpent, currencySymbol, showTrend, lastPeriodSpent, }: BudgetProgressCardProps): react_jsx_runtime.JSX.Element;
 
 interface BudgetProgressListProps {
-    budgets: Budget[];
+    budgets: BudgetWithRelations[];
     /** Map of budget ID to current spent amount */
-    spentByBudget: Map<number, number>;
+    spentByBudget: Map<string, number>;
     /** Map of budget ID to last period spent amount (optional) */
-    lastPeriodSpentByBudget?: Map<number, number>;
+    lastPeriodSpentByBudget?: Map<string, number>;
     /** Currency symbol to display */
     currencySymbol?: string;
     /** Show trend indicators */

package/dist/index.d.ts

@@ -1,12 +1,12 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Budget } from '@pfm-platform/shared';
+import { BudgetWithRelations } from '@pfm-platform/shared';
 
 interface BudgetListProps {
     userId: string;
-    /** Date range start */
-    start_date?: string;
-    /** Date range end */
-    end_date?: string;
+    /** Budget month (1-12) */
+    month?: number;
+    /** Budget year */
+    year?: number;
     /** Custom title for the list */
     title?: string;
     /** Currency symbol to display */
@@ -18,14 +18,14 @@ interface BudgetListProps {
  * BudgetList component displays budgets with progress bars.
  * Shows budget name, amounts, and visual progress indicator.
  */
-declare function BudgetList({ userId, start_date, end_date, title, currencySymbol, maxItems, }: BudgetListProps): react_jsx_runtime.JSX.Element;
+declare function BudgetList({ userId, month, year, title, currencySymbol, maxItems, }: BudgetListProps): react_jsx_runtime.JSX.Element;
 
 interface BudgetSummaryProps {
     userId: string;
-    /** Date range start */
-    start_date?: string;
-    /** Date range end */
-    end_date?: string;
+    /** Budget month (1-12) */
+    month?: number;
+    /** Budget year */
+    year?: number;
     /** Custom title for the summary */
     title?: string;
     /** Currency symbol to display */
@@ -35,7 +35,7 @@ interface BudgetSummaryProps {
  * BudgetSummary component displays aggregate budget statistics.
  * Shows total budgets, budget amount, spent, remaining, and overall state.
  */
-declare function BudgetSummary({ userId, start_date, end_date, title, currencySymbol, }: BudgetSummaryProps): react_jsx_runtime.JSX.Element;
+declare function BudgetSummary({ userId, month, year, title, currencySymbol, }: BudgetSummaryProps): react_jsx_runtime.JSX.Element;
 
 interface BudgetCreateFormProps {
     userId: string;
@@ -45,7 +45,7 @@ declare function BudgetCreateForm({ userId, onSuccess, }: BudgetCreateFormProps)
 
 interface BudgetEditFormProps {
     userId: string;
-    budget: Budget;
+    budget: BudgetWithRelations;
     open: boolean;
     onClose: () => void;
 }
@@ -53,13 +53,13 @@ declare function BudgetEditForm({ userId, budget, open, onClose, }: BudgetEditFo
 
 interface BudgetDeleteButtonProps {
     userId: string;
-    budgetId: number;
+    budgetId: string;
     budgetName: string;
 }
 declare function BudgetDeleteButton({ userId, budgetId, budgetName, }: BudgetDeleteButtonProps): react_jsx_runtime.JSX.Element;
 
 interface BudgetProgressCardProps {
-    budget: Budget;
+    budget: BudgetWithRelations;
     /** Current spent amount */
     currentSpent: number;
     /** Currency symbol to display */
@@ -92,11 +92,11 @@ interface BudgetProgressCardProps {
 declare function BudgetProgressCard({ budget, currentSpent, currencySymbol, showTrend, lastPeriodSpent, }: BudgetProgressCardProps): react_jsx_runtime.JSX.Element;
 
 interface BudgetProgressListProps {
-    budgets: Budget[];
+    budgets: BudgetWithRelations[];
     /** Map of budget ID to current spent amount */
-    spentByBudget: Map<number, number>;
+    spentByBudget: Map<string, number>;
     /** Map of budget ID to last period spent amount (optional) */
-    lastPeriodSpentByBudget?: Map<number, number>;
+    lastPeriodSpentByBudget?: Map<string, number>;
     /** Currency symbol to display */
     currencySymbol?: string;
     /** Show trend indicators */

package/dist/index.js

@@ -9,13 +9,13 @@ import { Warning, TrendingUp, TrendingDown, ExpandMore, Info, LocalOffer, Add, C
 // src/components/BudgetList.tsx
 function BudgetList({
   userId,
-  start_date,
-  end_date,
+  month,
+  year,
   title = "Budgets",
   currencySymbol = "$",
   maxItems
 }) {
-  const budgets = useBudgetProgress({ userId, start_date, end_date });
+  const budgets = useBudgetProgress({ userId, month, year });
   if (!budgets) {
     return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { children: [
       /* @__PURE__ */ jsx(Typography, { variant: "h6", gutterBottom: true, children: title }),
@@ -78,12 +78,12 @@ function BudgetList({
 }
 function BudgetSummary({
   userId,
-  start_date,
-  end_date,
+  month,
+  year,
   title = "Budget Summary",
   currencySymbol = "$"
 }) {
-  const summary = useBudgetSummary({ userId, start_date, end_date });
+  const summary = useBudgetSummary({ userId, month, year });
   if (!summary) {
     return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { children: [
       /* @__PURE__ */ jsx(Typography, { variant: "h6", gutterBottom: true, children: title }),
@@ -205,13 +205,16 @@ function BudgetCreateForm({
       setError("At least one tag is required");
       return;
     }
+    const now = /* @__PURE__ */ new Date();
     const data = {
+      user_id: userId,
       name: name.trim(),
+      month: now.getMonth() + 1,
+      year: now.getFullYear(),
       budget_amount: amount,
-      tag_names: tags,
       show_on_dashboard: true
     };
-    createBudget.mutate({ userId, data });
+    createBudget.mutate({ userId, data, tagNames: tags });
   };
   return /* @__PURE__ */ jsxs(Paper, { sx: { p: 3 }, children: [
     /* @__PURE__ */ jsx(Typography, { variant: "h6", gutterBottom: true, children: "Create Budget" }),
@@ -304,7 +307,7 @@ function BudgetEditForm({
 }) {
   const [name, setName] = useState(budget.name);
   const [budgetAmount, setBudgetAmount] = useState(budget.budget_amount.toString());
-  const [tagNames, setTagNames] = useState(budget.tag_names.join(", "));
+  const [tagNames, setTagNames] = useState(budget.budget_tags.map((bt) => bt.tag_name).join(", "));
   const [error, setError] = useState(null);
   const updateBudget = useUpdateBudget({
     onSuccess: () => {
@@ -335,10 +338,9 @@ function BudgetEditForm({
       id: budget.id,
       name: name.trim(),
       budget_amount: amount,
-      tag_names: tags,
       show_on_dashboard: true
     };
-    updateBudget.mutate({ userId, budgetId: budget.id, data });
+    updateBudget.mutate({ userId, budgetId: budget.id, data, tagNames: tags });
   };
   const handleClose = () => {
     if (!updateBudget.isPending) {
@@ -519,10 +521,10 @@ function BudgetProgressCard({
     /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", mb: 2 }, children: [
       /* @__PURE__ */ jsxs(Box, { children: [
         /* @__PURE__ */ jsx(Typography, { variant: "h6", gutterBottom: true, children: budget.name }),
-        budget.tag_names.length > 0 && /* @__PURE__ */ jsx(
+        budget.budget_tags.length > 0 && /* @__PURE__ */ jsx(
           Chip,
           {
-            label: budget.tag_names[0],
+            label: budget.budget_tags[0].tag_name,
             size: "small",
             variant: "outlined",
             sx: { mb: 1 }
@@ -624,8 +626,8 @@ function BudgetProgressList({
   const categories = useMemo(() => {
     const uniqueCategories = /* @__PURE__ */ new Set();
     budgets.forEach((budget) => {
-      budget.tag_names.forEach((tag) => {
-        uniqueCategories.add(tag);
+      budget.budget_tags.forEach((bt) => {
+        uniqueCategories.add(bt.tag_name);
       });
     });
     return Array.from(uniqueCategories).sort();
@@ -638,7 +640,7 @@ function BudgetProgressList({
       if (statusFilter === "on-track" && percentage > 70) return false;
       if (statusFilter === "warning" && (percentage <= 70 || percentage > 90)) return false;
       if (statusFilter === "over-budget" && percentage <= 90) return false;
-      if (categoryFilter !== "all" && !budget.tag_names.includes(categoryFilter)) return false;
+      if (categoryFilter !== "all" && !budget.budget_tags.some((bt) => bt.tag_name === categoryFilter)) return false;
       return true;
     });
   }, [budgets, spentByBudget, statusFilter, categoryFilter]);