Add Expenses app

A UI based on [Budget Zen](https://github.com/BrunoBernardino/budgetzen-web) but slightly updated and adjusted for bewCloud. It also features a chart with available money and spent by budgets.

This is useful for envelope-based budgeting.

routes/api/expenses/add-budget.tsx

@@ -0,0 +1,57 @@
+import { Handlers } from 'fresh/server.ts';
+
+import { Budget, FreshContextState } from '/lib/types.ts';
+import { createBudget, getBudgets } from '/lib/data/expenses.ts';
+
+interface Data {}
+
+export interface RequestBody {
+  name: string;
+  month: string;
+  value: number;
+  currentMonth: string;
+}
+
+export interface ResponseBody {
+  success: boolean;
+  newBudgets: Budget[];
+}
+
+export const handler: Handlers<Data, FreshContextState> = {
+  async POST(request, context) {
+    if (!context.state.user) {
+      return new Response('Unauthorized', { status: 401 });
+    }
+
+    const requestBody = await request.clone().json() as RequestBody;
+
+    if (
+      !requestBody.name || !requestBody.month || !requestBody.month.match(/^\d{4}-\d{2}$/) || !requestBody.value ||
+      Number.isNaN(requestBody.value) || !requestBody.currentMonth || !requestBody.currentMonth.match(/^\d{4}-\d{2}$/)
+    ) {
+      return new Response('Bad request', { status: 400 });
+    }
+
+    try {
+      const newBudget = await createBudget(
+        context.state.user.id,
+        requestBody.name,
+        requestBody.month,
+        requestBody.value,
+      );
+
+      if (!newBudget) {
+        throw new Error('Failed to add budget!');
+      }
+    } catch (error) {
+      console.error(error);
+      return new Response(`${error}`, { status: 500 });
+    }
+
+    const newBudgets = await getBudgets(context.state.user.id, requestBody.currentMonth);
+
+    const responseBody: ResponseBody = { success: true, newBudgets };
+
+    return new Response(JSON.stringify(responseBody));
+  },
+};

routes/api/expenses/add-expense.tsx

@@ -0,0 +1,80 @@
+import { Handlers } from 'fresh/server.ts';
+
+import { Budget, Expense, FreshContextState } from '/lib/types.ts';
+import { createExpense, getBudgets, getExpenses } from '/lib/data/expenses.ts';
+
+interface Data {}
+
+export interface RequestBody {
+  cost: number;
+  description: string;
+  budget: string;
+  date: string;
+  is_recurring: boolean;
+  month: string;
+}
+
+export interface ResponseBody {
+  success: boolean;
+  newExpenses: Expense[];
+  newBudgets: Budget[];
+}
+
+export const handler: Handlers<Data, FreshContextState> = {
+  async POST(request, context) {
+    if (!context.state.user) {
+      return new Response('Unauthorized', { status: 401 });
+    }
+
+    const requestBody = await request.clone().json() as RequestBody;
+
+    if (
+      !requestBody.cost || Number.isNaN(requestBody.cost) || !requestBody.description || !requestBody.month ||
+      !requestBody.month.match(/^\d{4}-\d{2}$/)
+    ) {
+      return new Response('Bad request', { status: 400 });
+    }
+
+    if (!requestBody.budget) {
+      requestBody.budget = 'Misc';
+    }
+
+    if (!requestBody.date) {
+      requestBody.date = new Date().toISOString().substring(0, 10);
+    }
+
+    if (!requestBody.date.match(/^\d{4}-\d{2}-\d{2}$/)) {
+      return new Response('Bad request', { status: 400 });
+    }
+
+    if (!requestBody.is_recurring) {
+      requestBody.is_recurring = false;
+    }
+
+    try {
+      const newExpense = await createExpense(
+        context.state.user.id,
+        requestBody.cost,
+        requestBody.description,
+        requestBody.budget,
+        requestBody.date,
+        requestBody.is_recurring,
+      );
+
+      if (!newExpense) {
+        throw new Error('Failed to add expense!');
+      }
+    } catch (error) {
+      console.error(error);
+      return new Response(`${error}`, { status: 500 });
+    }
+
+    const newExpenses = await getExpenses(context.state.user.id, requestBody.month);
+
+    const newBudgets = await getBudgets(context.state.user.id, requestBody.month);
+
+    const responseBody: ResponseBody = { success: true, newExpenses, newBudgets };
+
+    return new Response(JSON.stringify(responseBody));
+  },
+};

routes/api/expenses/auto-complete.tsx

@@ -0,0 +1,38 @@
+import { Handlers } from 'fresh/server.ts';
+
+import { FreshContextState } from '/lib/types.ts';
+import { getExpenseSuggestions } from '/lib/data/expenses.ts';
+
+interface Data {}
+
+export interface RequestBody {
+  name: string;
+}
+
+export interface ResponseBody {
+  success: boolean;
+  suggestions: string[];
+}
+
+export const handler: Handlers<Data, FreshContextState> = {
+  async POST(request, context) {
+    if (!context.state.user) {
+      return new Response('Unauthorized', { status: 401 });
+    }
+
+    const requestBody = await request.clone().json() as RequestBody;
+
+    if (!requestBody.name || requestBody.name.length < 2) {
+      return new Response('Bad request', { status: 400 });
+    }
+
+    const suggestions = await getExpenseSuggestions(
+      context.state.user.id,
+      requestBody.name,
+    );
+
+    const responseBody: ResponseBody = { success: true, suggestions };
+
+    return new Response(JSON.stringify(responseBody));
+  },
+};

routes/api/expenses/delete-budget.tsx

@@ -0,0 +1,51 @@
+import { Handlers } from 'fresh/server.ts';
+
+import { Budget, FreshContextState } from '/lib/types.ts';
+import { deleteBudget, getBudgetById, getBudgets } from '/lib/data/expenses.ts';
+
+interface Data {}
+
+export interface RequestBody {
+  id: string;
+  currentMonth: string;
+}
+
+export interface ResponseBody {
+  success: boolean;
+  newBudgets: Budget[];
+}
+
+export const handler: Handlers<Data, FreshContextState> = {
+  async POST(request, context) {
+    if (!context.state.user) {
+      return new Response('Unauthorized', { status: 401 });
+    }
+
+    const requestBody = await request.clone().json() as RequestBody;
+
+    if (
+      !requestBody.id || !requestBody.currentMonth || !requestBody.currentMonth.match(/^\d{4}-\d{2}$/)
+    ) {
+      return new Response('Bad request', { status: 400 });
+    }
+
+    const budget = await getBudgetById(context.state.user.id, requestBody.id);
+
+    if (!budget) {
+      return new Response('Not found', { status: 404 });
+    }
+
+    try {
+      await deleteBudget(context.state.user.id, requestBody.id);
+    } catch (error) {
+      console.error(error);
+      return new Response(`${error}`, { status: 500 });
+    }
+
+    const newBudgets = await getBudgets(context.state.user.id, requestBody.currentMonth);
+
+    const responseBody: ResponseBody = { success: true, newBudgets };
+
+    return new Response(JSON.stringify(responseBody));
+  },
+};

routes/api/expenses/delete-expense.tsx

@@ -0,0 +1,54 @@
+import { Handlers } from 'fresh/server.ts';
+
+import { Budget, Expense, FreshContextState } from '/lib/types.ts';
+import { deleteExpense, getBudgets, getExpenseById, getExpenses } from '/lib/data/expenses.ts';
+
+interface Data {}
+
+export interface RequestBody {
+  id: string;
+  month: string;
+}
+
+export interface ResponseBody {
+  success: boolean;
+  newExpenses: Expense[];
+  newBudgets: Budget[];
+}
+
+export const handler: Handlers<Data, FreshContextState> = {
+  async POST(request, context) {
+    if (!context.state.user) {
+      return new Response('Unauthorized', { status: 401 });
+    }
+
+    const requestBody = await request.clone().json() as RequestBody;
+
+    if (
+      !requestBody.id || !requestBody.month || !requestBody.month.match(/^\d{4}-\d{2}$/)
+    ) {
+      return new Response('Bad request', { status: 400 });
+    }
+
+    const expense = await getExpenseById(context.state.user.id, requestBody.id);
+
+    if (!expense) {
+      return new Response('Not found', { status: 404 });
+    }
+
+    try {
+      await deleteExpense(context.state.user.id, requestBody.id);
+    } catch (error) {
+      console.error(error);
+      return new Response(`${error}`, { status: 500 });
+    }
+
+    const newExpenses = await getExpenses(context.state.user.id, requestBody.month);
+
+    const newBudgets = await getBudgets(context.state.user.id, requestBody.month);
+
+    const responseBody: ResponseBody = { success: true, newExpenses, newBudgets };
+
+    return new Response(JSON.stringify(responseBody));
+  },
+};

routes/api/expenses/export-expenses.tsx

@@ -0,0 +1,32 @@
+import { Handlers } from 'fresh/server.ts';
+
+import { Budget, Expense, FreshContextState } from '/lib/types.ts';
+import { getAllBudgetsForExport, getAllExpensesForExport } from '/lib/data/expenses.ts';
+
+interface Data {}
+
+export interface RequestBody {}
+
+export interface ResponseBody {
+  success: boolean;
+  jsonContents: {
+    budgets: (Omit<Budget, 'id' | 'user_id' | 'created_at' | 'extra'> & { extra: Record<never, never> })[];
+    expenses: (Omit<Expense, 'id' | 'user_id' | 'created_at' | 'extra'> & { extra: Record<never, never> })[];
+  };
+}
+
+export const handler: Handlers<Data, FreshContextState> = {
+  async POST(request, context) {
+    if (!context.state.user) {
+      return new Response('Unauthorized', { status: 401 });
+    }
+
+    const newExpenses = await getAllExpensesForExport(context.state.user.id);
+
+    const newBudgets = await getAllBudgetsForExport(context.state.user.id);
+
+    const responseBody: ResponseBody = { success: true, jsonContents: { expenses: newExpenses, budgets: newBudgets } };
+
+    return new Response(JSON.stringify(responseBody));
+  },
+};

routes/api/expenses/import-expenses.tsx

@@ -0,0 +1,82 @@
+import { Handlers } from 'fresh/server.ts';
+
+import { Budget, Expense, FreshContextState } from '/lib/types.ts';
+import { concurrentPromises } from '/lib/utils/misc.ts';
+import {
+  createBudget,
+  createExpense,
+  deleteAllBudgetsAndExpenses,
+  getBudgets,
+  getExpenses,
+} from '/lib/data/expenses.ts';
+
+interface Data {}
+
+export interface RequestBody {
+  budgets: Pick<Budget, 'name' | 'month' | 'value'>[];
+  expenses: Pick<Expense, 'cost' | 'description' | 'budget' | 'date' | 'is_recurring'>[];
+  month: string;
+  replace: boolean;
+}
+
+export interface ResponseBody {
+  success: boolean;
+  newBudgets: Budget[];
+  newExpenses: Expense[];
+}
+
+export const handler: Handlers<Data, FreshContextState> = {
+  async POST(request, context) {
+    if (!context.state.user) {
+      return new Response('Unauthorized', { status: 401 });
+    }
+
+    const requestBody = await request.clone().json() as RequestBody;
+
+    if (
+      (requestBody.budgets.length === 0 && requestBody.expenses.length === 0) || !requestBody.month ||
+      !requestBody.month.match(/^\d{4}-\d{2}$/)
+    ) {
+      return new Response('Bad request', { status: 400 });
+    }
+
+    if (requestBody.replace) {
+      await deleteAllBudgetsAndExpenses(context.state.user.id);
+    }
+
+    try {
+      await concurrentPromises(
+        requestBody.budgets.map((budget) => () =>
+          createBudget(context.state.user!.id, budget.name, budget.month, budget.value)
+        ),
+        5,
+      );
+
+      await concurrentPromises(
+        requestBody.expenses.map((expense) => () =>
+          createExpense(
+            context.state.user!.id,
+            expense.cost,
+            expense.description,
+            expense.budget,
+            expense.date,
+            expense.is_recurring ?? false,
+            { skipRecalculation: true, skipBudgetMatching: true, skipBudgetCreation: true },
+          )
+        ),
+        5,
+      );
+    } catch (error) {
+      console.error(error);
+      return new Response(`${error}`, { status: 500 });
+    }
+
+    const newExpenses = await getExpenses(context.state.user.id, requestBody.month);
+
+    const newBudgets = await getBudgets(context.state.user.id, requestBody.month);
+
+    const responseBody: ResponseBody = { success: true, newExpenses, newBudgets };
+
+    return new Response(JSON.stringify(responseBody));
+  },
+};

routes/api/expenses/update-budget.tsx

@@ -0,0 +1,60 @@
+import { Handlers } from 'fresh/server.ts';
+
+import { Budget, FreshContextState } from '/lib/types.ts';
+import { getBudgetById, getBudgets, updateBudget } from '/lib/data/expenses.ts';
+
+interface Data {}
+
+export interface RequestBody {
+  id: string;
+  name: string;
+  month: string;
+  value: number;
+  currentMonth: string;
+}
+
+export interface ResponseBody {
+  success: boolean;
+  newBudgets: Budget[];
+}
+
+export const handler: Handlers<Data, FreshContextState> = {
+  async POST(request, context) {
+    if (!context.state.user) {
+      return new Response('Unauthorized', { status: 401 });
+    }
+
+    const requestBody = await request.clone().json() as RequestBody;
+
+    if (
+      !requestBody.id || !requestBody.name || !requestBody.month || !requestBody.month.match(/^\d{4}-\d{2}$/) ||
+      !requestBody.value || Number.isNaN(requestBody.value) || !requestBody.currentMonth ||
+      !requestBody.currentMonth.match(/^\d{4}-\d{2}$/)
+    ) {
+      return new Response('Bad request', { status: 400 });
+    }
+
+    const budget = await getBudgetById(context.state.user.id, requestBody.id);
+
+    if (!budget) {
+      return new Response('Not found', { status: 404 });
+    }
+
+    budget.name = requestBody.name;
+    budget.month = requestBody.month;
+    budget.value = requestBody.value;
+
+    try {
+      await updateBudget(budget);
+    } catch (error) {
+      console.error(error);
+      return new Response(`${error}`, { status: 500 });
+    }
+
+    const newBudgets = await getBudgets(context.state.user.id, requestBody.currentMonth);
+
+    const responseBody: ResponseBody = { success: true, newBudgets };
+
+    return new Response(JSON.stringify(responseBody));
+  },
+};

routes/api/expenses/update-expense.tsx

@@ -0,0 +1,82 @@
+import { Handlers } from 'fresh/server.ts';
+
+import { Budget, Expense, FreshContextState } from '/lib/types.ts';
+import { getBudgets, getExpenseById, getExpenses, updateExpense } from '/lib/data/expenses.ts';
+
+interface Data {}
+
+export interface RequestBody {
+  id: string;
+  cost: number;
+  description: string;
+  budget: string;
+  date: string;
+  is_recurring: boolean;
+  month: string;
+}
+
+export interface ResponseBody {
+  success: boolean;
+  newExpenses: Expense[];
+  newBudgets: Budget[];
+}
+
+export const handler: Handlers<Data, FreshContextState> = {
+  async POST(request, context) {
+    if (!context.state.user) {
+      return new Response('Unauthorized', { status: 401 });
+    }
+
+    const requestBody = await request.clone().json() as RequestBody;
+
+    if (
+      !requestBody.id || !requestBody.cost || Number.isNaN(requestBody.cost) || !requestBody.description ||
+      !requestBody.month || !requestBody.month.match(/^\d{4}-\d{2}$/)
+    ) {
+      return new Response('Bad request', { status: 400 });
+    }
+
+    const expense = await getExpenseById(context.state.user.id, requestBody.id);
+
+    if (!expense) {
+      return new Response('Not found', { status: 404 });
+    }
+
+    if (!requestBody.budget) {
+      requestBody.budget = 'Misc';
+    }
+
+    if (!requestBody.date) {
+      requestBody.date = new Date().toISOString().substring(0, 10);
+    }
+
+    if (!requestBody.date.match(/^\d{4}-\d{2}-\d{2}$/)) {
+      return new Response('Bad request', { status: 400 });
+    }
+
+    if (!requestBody.is_recurring) {
+      requestBody.is_recurring = false;
+    }
+
+    expense.cost = requestBody.cost;
+    expense.description = requestBody.description;
+    expense.budget = requestBody.budget;
+    expense.date = requestBody.date;
+    expense.is_recurring = requestBody.is_recurring;
+
+    try {
+      await updateExpense(expense);
+    } catch (error) {
+      console.error(error);
+      return new Response(`${error}`, { status: 500 });
+    }
+
+    const newExpenses = await getExpenses(context.state.user.id, requestBody.month);
+
+    const newBudgets = await getBudgets(context.state.user.id, requestBody.month);
+
+    const responseBody: ResponseBody = { success: true, newExpenses, newBudgets };
+
+    return new Response(JSON.stringify(responseBody));
+  },
+};

routes/expenses.tsx

@@ -0,0 +1,73 @@
+import { Handlers, PageProps } from 'fresh/server.ts';
+
+import { Budget, Expense, FreshContextState, SupportedCurrencySymbol } from '/lib/types.ts';
+import { isAppEnabled } from '/lib/config.ts';
+import { generateMonthlyBudgetsAndExpenses, getBudgets, getExpenses } from '/lib/data/expenses.ts';
+import ExpensesWrapper from '/islands/expenses/ExpensesWrapper.tsx';
+
+interface Data {
+  userBudgets: Budget[];
+  userExpenses: Expense[];
+  initialMonth: string;
+  currency: SupportedCurrencySymbol;
+}
+
+export const handler: Handlers<Data, FreshContextState> = {
+  async GET(request, context) {
+    if (!context.state.user) {
+      return new Response('Redirect', { status: 303, headers: { 'Location': `/login` } });
+    }
+
+    if (!isAppEnabled('expenses')) {
+      return new Response('Redirect', { status: 303, headers: { 'Location': `/files` } });
+    }
+
+    const searchParams = new URL(request.url).searchParams;
+
+    let initialMonth = searchParams.get('month') || new Date().toISOString().substring(0, 7);
+
+    const currentMonth = new Date().toISOString().substring(0, 7);
+    const nextMonth = new Date(new Date(currentMonth).setUTCMonth(new Date(currentMonth).getUTCMonth() + 1))
+      .toISOString()
+      .substring(0, 7);
+
+    // Send invalid months (format) back to current month
+    if (!initialMonth.match(/^\d{4}-\d{2}$/)) {
+      initialMonth = currentMonth;
+    }
+
+    // Reset to next month if the selected month is too far in the future
+    if (initialMonth > nextMonth) {
+      initialMonth = nextMonth;
+    }
+
+    let userBudgets = await getBudgets(context.state.user.id, initialMonth);
+
+    let userExpenses = await getExpenses(context.state.user.id, initialMonth);
+
+    // If there are no budgets or expenses, and the selected month is in the future, generate the month's budgets and expenses
+    if (userBudgets.length === 0 && userExpenses.length === 0 && initialMonth >= currentMonth) {
+      await generateMonthlyBudgetsAndExpenses(context.state.user.id, initialMonth);
+
+      userBudgets = await getBudgets(context.state.user.id, initialMonth);
+      userExpenses = await getExpenses(context.state.user.id, initialMonth);
+    }
+
+    const currency = context.state.user.extra.expenses_currency || '$';
+
+    return await context.render({ userBudgets, userExpenses, initialMonth, currency });
+  },
+};
+
+export default function ExpensesPage({ data }: PageProps<Data, FreshContextState>) {
+  return (
+    <main>
+      <ExpensesWrapper
+        initialBudgets={data.userBudgets}
+        initialExpenses={data.userExpenses}
+        initialMonth={data.initialMonth}
+        currency={data.currency}
+      />
+    </main>
+  );
+}

routes/settings.tsx

@@ -1,6 +1,6 @@
 import { Handlers, PageProps } from 'fresh/server.ts';
 
-import { FreshContextState } from '/lib/types.ts';
+import { currencyMap, FreshContextState, SupportedCurrencySymbol } from '/lib/types.ts';
 import { PASSWORD_SALT } from '/lib/auth.ts';
 import {
   createVerificationCode,
@@ -25,6 +25,7 @@ interface Data {
     message: string;
   };
   formData: Record<string, any>;
+  currency?: SupportedCurrencySymbol;
 }
 
 export const handler: Handlers<Data, FreshContextState> = {
@@ -33,7 +34,10 @@ export const handler: Handlers<Data, FreshContextState> = {
       return new Response('Redirect', { status: 303, headers: { 'Location': `/login` } });
     }
 
-    return await context.render();
+    return await context.render({
+      formData: {},
+      currency: context.state.user.extra.expenses_currency,
+    });
   },
   async POST(request, context) {
     if (!context.state.user) {
@@ -48,9 +52,9 @@ export const handler: Handlers<Data, FreshContextState> = {
 
     const formData = await request.clone().formData();
 
-    try {
-      const { user } = context.state;
+    const { user } = context.state;
 
+    try {
       action = getFormDataField(formData, 'action') as Action;
 
       if (action !== 'change-email' && action !== 'verify-change-email') {
@@ -154,6 +158,19 @@ export const handler: Handlers<Data, FreshContextState> = {
           status: 303,
           headers: { 'location': `/signup?success=delete` },
         });
+      } else if (action === 'change-currency') {
+        const newCurrencySymbol = getFormDataField(formData, 'currency') as SupportedCurrencySymbol;
+
+        if (!currencyMap.has(newCurrencySymbol)) {
+          throw new Error(`Invalid currency.`);
+        }
+
+        user.extra.expenses_currency = newCurrencySymbol;
+
+        await updateUser(user);
+
+        successTitle = 'Currency changed!';
+        successMessage = 'Currency changed successfully.';
       }
 
       const notice = successTitle
@@ -166,6 +183,7 @@ export const handler: Handlers<Data, FreshContextState> = {
       return await context.render({
         notice,
         formData: convertFormDataToObject(formData),
+        currency: user.extra.expenses_currency,
       });
     } catch (error) {
       console.error(error);
@@ -175,6 +193,7 @@ export const handler: Handlers<Data, FreshContextState> = {
       return await context.render({
         error: { title: errorTitle, message: errorMessage },
         formData: convertFormDataToObject(formData),
+        currency: user.extra.expenses_currency,
       });
     }
   },
@@ -183,7 +202,7 @@ export const handler: Handlers<Data, FreshContextState> = {
 export default function SettingsPage({ data }: PageProps<Data, FreshContextState>) {
   return (
     <main>
-      <Settings formData={data?.formData} error={data?.error} notice={data?.notice} />
+      <Settings formData={data?.formData} error={data?.error} notice={data?.notice} currency={data?.currency} />
     </main>
   );
 }