Feature user projection merge

app/client/src/components/AccountForm.tsx

@@ -203,7 +203,7 @@ export default function PopupForm({
             name="type"
             className="formSelect"
             onChange={(event) =>
-              setAccountType(event.target.value as typeofAccount)
+              {setAccountType(event.target.value as typeofAccount); setFormInput({ ...formInput, ["subType"]: "" })}
             }
           >
             <option value="">Select Account type</option>
@@ -229,7 +229,7 @@ export default function PopupForm({
           />
           <br></br>
 
-          {accountType === accountCategory.SAVING ? (
+          {accountType === "SAVINGS" ? (
             <>
               <label htmlFor="subType">Type of saving account</label>
               <select
@@ -239,7 +239,6 @@ export default function PopupForm({
                 className="formSelect"
                 onChange={(event) => {
                   handleChange(event);
-                  setFormInput({ ...formInput, ["subType"]: "" });
                 }}
               >
                 <option value="">Select saving type</option>
@@ -253,7 +252,7 @@ export default function PopupForm({
             </>
           ) : null}
 
-          {accountType === accountCategory.CREDIT_CARD ? (
+          {accountType === "CREDIT_CARD" ? (
             <>
               <label htmlFor="subType">Type of credit:</label>
               <select

app/client/src/components/AccountListCard.tsx

@@ -3,6 +3,7 @@ import { useState } from "react";
 import AccountPopup from "./AccountForm.tsx";
 import { type Account } from "../types/AccountType.ts";
 import type { AuthSession } from "@/types/authTypes.ts";
+import { accountCategory } from "@/enum/AccountCategory.ts";
 
 interface cardProp {
   account: Account;
@@ -47,7 +48,9 @@ export default function Card({
 
         <div>
           <p>
-            {account.type + " " + (account.subtype ? " " + account.subtype : "")}
+            {accountCategory[account.type as keyof typeof accountCategory] +
+              " " +
+              (account.subtype ? " " + account.subtype : "")}
           </p>
           <p>{Number(account.balance).toFixed(2)}</p>
         </div>

app/client/src/components/SelectAccount.tsx

@@ -1,5 +1,6 @@
 import type { Account } from "@/types/AccountType";
 import React from "react";
+import { accountCategory } from "@/enum/AccountCategory.ts";
 
 interface selectProp {
   accounts: Account[];
@@ -26,7 +27,13 @@ export default function SelectAccount({
         {accounts &&
           accounts.map((account) => (
             <option key={account.id} value={account.id}>
-              {account.name} ({account.type})
+              {account.name} (
+              {
+                accountCategory[
+                  account.type.toUpperCase() as keyof typeof accountCategory
+                ]
+              }
+              )
             </option>
           ))}
       </select>

app/client/src/enum/AccountCategory.ts

@@ -1,5 +1,5 @@
 export const accountCategory = {
-  SAVING: "Savings",
+  SAVINGS: "Savings",
   CHEQUING: "Chequing",
   INVESTMENT: "Investment",
   CREDIT_CARD:"Credit Card",

app/client/src/pages/ProjectionPage.tsx

@@ -24,7 +24,11 @@ import {
 import ProjectionGraph from "@/components/ProjectionGraph";
 import { TbGraph } from "react-icons/tb";
 import NoItemState from "@/components/NoItemState";
-import { handleCurrencyChange, handleCurrencyBlur } from "@/utils/handleInput";
+import {
+  handleCurrencyChange,
+  handleCurrencyBlur,
+  handleNumberChange,
+} from "@/utils/handleInput";
 import type {
   projectionDebtRequest,
   projectionSavingRequest,
@@ -106,7 +110,7 @@ function ProjectionPage({ session }: ProjectionProp) {
             category: accountCategory.CREDIT_CARD,
             remainingAmount: inputAmount,
             minimumPayment: inputMinPay,
-            interestRate: inputInterest / 100,
+            interestRate: inputInterest,
             nextDueDate: nextDueDate,
             period: inputPeriod,
           };
@@ -163,7 +167,7 @@ function ProjectionPage({ session }: ProjectionProp) {
             financial_account_id: selectedAccount,
             balance: inputAmount,
             monthly_deposit: inputMinPay,
-            annual_interest_rate: inputInterest / 100,
+            annual_interest_rate: inputInterest,
             time_frame: inputPeriod,
           };
 
@@ -233,7 +237,7 @@ function ProjectionPage({ session }: ProjectionProp) {
       if (savingRequest) {
         //Assigns the fields to what the projection of the saving account used
         setSelectedAccount(savingRequest.financial_account_id);
-        setAmount(savingRequest.balance.toFixed(2));
+        setAmount((savingRequest.balance * 100).toFixed(2));
         setInterest(savingRequest.annual_interest_rate.toString());
         setMinPay(savingRequest.monthly_deposit.toFixed(2));
         setPeriod(savingRequest.time_frame.toString());
@@ -270,36 +274,6 @@ function ProjectionPage({ session }: ProjectionProp) {
     }
   };
 
-  //Handles on change of percentage
-  const handleNumberChange = (
-    event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>,
-    setNumber: React.Dispatch<React.SetStateAction<string>>,
-    min: number,
-    max: number,
-  ) => {
-    let input = event.target.value;
-    let changeInterest;
-    const pattern = /^\d*\.?\d{0,2}$/;
-
-    console.log(input);
-    console.log(pattern.test(input));
-
-    //Determine if the input follows the format/pattern
-    if (pattern.test(input) || input === "") {
-      input = input.replace(/^0+(?=\d)/, "");
-      changeInterest = Number(input);
-
-      if (changeInterest > max) {
-        changeInterest = max;
-      }
-
-      if (changeInterest < min) {
-        changeInterest = min;
-      }
-      console.log(changeInterest);
-      setNumber(changeInterest.toString());
-    }
-  };
   //Get the saving accounts
   useEffect(() => {
     if (selectedType === "Saving") {

app/client/src/utils/handleInput.ts

@@ -26,3 +26,34 @@ export const handleCurrencyBlur = (
     setCurrency(parseFloat(currency).toFixed(2));
   }
 };
+
+//Handles on change of whole numbers
+export const handleNumberChange = (
+  event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>,
+  setNumber: React.Dispatch<React.SetStateAction<string>>,
+  min: number,
+  max: number,
+) => {
+  let input = event.target.value;
+  let changeNumber;
+  const pattern = /^\d*\.?\d{0,2}$/;
+
+  console.log(input);
+  console.log(pattern.test(input));
+
+  //Determine if the input follows the format/pattern
+  if (pattern.test(input) || input === "") {
+    input = input.replace(/^0+(?=\d)/, "");
+    changeNumber = Number(input);
+
+    if (changeNumber > max) {
+      changeNumber = max;
+    }
+
+    if (changeNumber < min) {
+      changeNumber = min;
+    }
+    console.log(changeNumber);
+    setNumber(changeNumber.toString());
+  }
+};

app/client/test/handleInput.test.ts

@@ -2,6 +2,7 @@ import { describe, it, expect, vi } from "vitest";
 import {
   handleCurrencyChange,
   handleCurrencyBlur,
+  handleNumberChange,
 } from "../src/utils/handleInput";
 //tests for handleCurrencyChange and handleCurrencyBlur functions
 function mockEvent(value: string) {
@@ -135,3 +136,68 @@ it("does not strip zeros inside the number", () => {
 
   expect(setCurrency).toHaveBeenCalledWith("101");
 });
+
+describe("handleNumberChange", () => {
+  it("accepts valid number input", () => {
+    const setNumber = vi.fn();
+    const event = mockEvent("12");
+
+    handleNumberChange(event, setNumber, 0, 100);
+
+    expect(setNumber).toHaveBeenCalledWith("12");
+  });
+
+  it("Doesn't accept decimals", () => {
+    const setNumber = vi.fn();
+    const event = mockEvent("12.");
+
+    handleNumberChange(event, setNumber, 0, 100);
+
+    expect(setNumber).not.toHaveBeenCalledWith();
+  });
+
+  it("Empty string", () => {
+    const setNumber = vi.fn();
+    const event = mockEvent("");
+
+    handleNumberChange(event, setNumber, 0, 100);
+
+    expect(setNumber).toHaveBeenCalledWith("");
+  });
+
+  it("strip leading 0s", () => {
+    const setNumber = vi.fn();
+    const event = mockEvent("0000123");
+
+    handleNumberChange(event, setNumber, 0, 100);
+
+    expect(setNumber).toHaveBeenCalledWith("123");
+  });
+
+  it("rejects letters in input", () => {
+    const setNumber = vi.fn();
+    const event = mockEvent("12A");
+
+    handleNumberChange(event, setNumber, 0, 100);
+
+    expect(setNumber).not.toHaveBeenCalledWith();
+  });
+
+  it("Sets the value to the maximum", () => {
+    const setNumber = vi.fn();
+    const event = mockEvent("120");
+
+    handleNumberChange(event, setNumber, 0, 100);
+
+    expect(setNumber).not.toHaveBeenCalledWith("100");
+  });
+
+  it("Sets value to the minimum", () => {
+    const setNumber = vi.fn();
+    const event = mockEvent("1");
+
+    handleNumberChange(event, setNumber, 10, 100);
+
+    expect(setNumber).not.toHaveBeenCalledWith("10");
+  });
+});

app/server/services/ts/user/src/index.ts

@@ -58,6 +58,7 @@ process.on("SIGTERM", () => cleanup);
 
 app.get("/charts/expenses", async (req, res) => {
 process.on("SIGTERM", () => server.close());
+})
 
 app.get(
   "/charts/expenses",

app/server/services/ts/user/src/queries/debt.ts

@@ -13,7 +13,7 @@ export async function findDebtsBy(db: Pool, userId: string) : Promise<DebtInfoRe
         JOIN finus.profile p ON pfa.profile_id = p.id
         JOIN finus.finusAccount_profile uap ON p.id = uap.profile_id
         WHERE uap.account_id = ? 
-        AND fa.type = 'Credit Card' 
+        AND fa.type = 'CREDIT_CARD' 
         AND fa.subtype = 'Loan'
         GROUP BY fa.id
     `;

app/server/services/ts/user/src/queries/saving.ts

@@ -14,7 +14,7 @@ export async function findSavingsBy(db: Pool, userId: string) : Promise<SavingIn
         JOIN finus.profile p ON pfa.profile_id = p.id
         JOIN finus.finusAccount_profile uap ON p.id = uap.profile_id
         WHERE uap.account_id = ? 
-        AND fa.type = 'Savings' 
+        AND fa.type = 'SAVINGS' 
         GROUP BY fa.id
     `;
 

app/server/services/ts/user/src/types/FinancialAccountType.ts

@@ -1,7 +1,7 @@
 export enum FinancialAccountType {
-    SAVINGS = 'Savings',
-    CREDIT = 'Credit Card',
-    INVESTMENT = 'Investment',
-    CHEQUING = 'Chequing',
-    UNCONFIRMED = 'Unconfirmed',
+    SAVINGS = 'savings',
+    CREDIT = 'credit_card',
+    INVESTMENT = 'investment',
+    CHEQUING = 'chequing',
+    UNCONFIRMED = 'unconfirmed',
 }