wip: NaN errr

frontend/package.json

@@ -17,21 +17,21 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-select": "^2.0.0",
-    "@tanstack/react-query": "^5.29.0",
+    "@tanstack/react-query": "4.32.1",
     "@tanstack/react-query-devtools": "^5.29.2",
     "axios": "^1.6.8",
     "clsx": "^2.1.0",
     "date-fns": "^3.6.0",
     "react": "^18.2.0",
+    "react-currency-input-field": "3.6.11",
     "react-day-picker": "^8.10.1",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.51.2",
+    "react-hook-form": "7.45.2",
     "react-hot-toast": "^2.4.1",
-    "react-number-format": "^5.3.4",
     "react-router-dom": "^6.22.3",
     "swiper": "^11.1.1",
     "tailwind-merge": "^2.2.2",
-    "zod": "^3.22.4"
+    "zod": "3.21.4"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",

frontend/src/Router/index.tsx

@@ -22,4 +22,4 @@ export function Router() {
       </Routes>
     </BrowserRouter>
   );
-}
+}

frontend/src/app/entities/BankAccount.ts

@@ -0,0 +1,8 @@
+export interface BankAccount {
+  id: string;
+  name: string;
+  initialBalance: number;
+  type: 'CHECKING' | 'INVESTMENT' | 'CASH';
+  color: string;
+  currentBalance: number;
+}

frontend/src/app/services/bankAccountsService/create.ts

@@ -1,13 +1,13 @@
-import { httpClient } from "../httpClient";
+import { httpClient } from '../httpClient'
 
-export interface BankAccountParams {
+export interface CreateBankAccountParams {
   name: string;
   initialBalance: number;
   color: string;
   type: 'CHECKING' | 'INVESTMENT' | 'CASH';
 }
 
-export async function create(params: BankAccountParams) {
+export async function create(params: CreateBankAccountParams) {
   const { data } = await httpClient.post('/bank-accounts', params);
 
   return data;

frontend/src/app/services/bankAccountsService/getAll.ts

@@ -1,13 +1,7 @@
+import { BankAccount } from "../../entities/BankAccount";
 import { httpClient } from "../httpClient";
 
-type BankAccountsResponse = Array<{
-  id: string;
-  name: string;
-  initialBalance: number;
-  type: 'CHECKING' | 'INVESTMENT' | 'CASH';
-  color: string;
-  currentBalance: number;
-}>;
+type BankAccountsResponse = Array<BankAccount>;
 
 export async function getAll() {
   const { data } = await httpClient.get<BankAccountsResponse>('/bank-accounts');

frontend/src/app/services/bankAccountsService/index.ts

@@ -1,7 +1,9 @@
 import { create } from "./create";
 import { getAll } from "./getAll";
+import { update } from "./update";
 
 export const bankAccountsService = {
   create,
   getAll,
+  update,
 };

frontend/src/app/services/bankAccountsService/update.ts

@@ -0,0 +1,14 @@
+import { httpClient } from '../httpClient'
+
+export interface UpdateBankAccountParams {
+  name: string;
+  initialBalance: number;
+  color: string;
+  type: 'CHECKING' | 'INVESTMENT' | 'CASH';
+}
+
+export async function update(params: UpdateBankAccountParams) {
+  const { data } = await httpClient.put('/bank-accounts', params)
+
+  return data
+}

frontend/src/app/services/httpClient.ts

@@ -6,7 +6,7 @@ export const httpClient = axios.create({
   baseURL: import.meta.env.VITE_API_URL,
 });
 
-httpClient.interceptors.request.use(config => {
+httpClient.interceptors.request.use(async config => {
   const accessToken = localStorage.getItem(localStorageKeys.ACCESS_TOKEN);
 
   if (accessToken) {

frontend/src/app/utils/currencyStringToNumber.ts

@@ -1,4 +1,8 @@
-export function currencyStringToNumber(value: string) {
+export function currencyStringToNumber(value: string | number) {
+  if (typeof value === 'number') {
+    return value;
+  }
+
   const sanitizedString = value.replace(/\./g, '').replace(',', '.');
 
   return Number(sanitizedString);

frontend/src/view/components/Button.tsx

@@ -3,21 +3,21 @@ import { cn } from "../../app/utils/cn";
 import Spinner from "./Spinner";
 
 interface ButtonProps extends ComponentProps<'button'> {
-  isPending?: boolean;
+  isLoading?: boolean;
 }
 
-export function Button({ className, isPending, disabled, children, ...props }: ButtonProps) {
+export function Button({ className, isLoading: isLoading, disabled, children, ...props }: ButtonProps) {
   return (
     <button
       {...props}
-      disabled={disabled || isPending}
+      disabled={disabled || isLoading}
       className={cn(
         "bg-teal-900 hover:bg-teal-800 disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed px-6 h-12 rounded-2xl font-medium text-white transition-all flex items-center justify-center",
         className,
       )}
     >
-      {!isPending && children}
-      {isPending && <Spinner className="w-6 h-6" />}
+      {!isLoading && children}
+      {isLoading && <Spinner className="w-6 h-6" />}
     </button>
   );
 }

frontend/src/view/components/InputCurrency.tsx

@@ -1,33 +1,56 @@
-import { CrossCircledIcon } from "@radix-ui/react-icons";
-import { NumericFormat } from "react-number-format";
-import { cn } from "../../app/utils/cn";
+import { CrossCircledIcon } from '@radix-ui/react-icons'
+import { cn } from '../../app/utils/cn'
+import CurrencyInput from 'react-currency-input-field'
 
 interface InputCurrencyProps {
-  error?: string;
-  value?: string | number;
-  onChange?(value: string): void;
+  error?: string
+  value?: string | number
+  defaultValue: string | number
+  className?: string
+  onChange(value?: string): void
 }
 
-export function InputCurrency({ error, value, onChange }: InputCurrencyProps) {
+export function InputCurrency({
+  error, value, onChange, className, defaultValue
+}: InputCurrencyProps) {
+
+  function handleTransform(value: string) {
+    return value.length === 0 ? '0' : value
+  }
+
   return (
-    <div>
-      <NumericFormat
-        thousandSeparator="."
+    <div className={cn(
+      error && 'relative top-4'
+    )}>
+      <CurrencyInput
+        groupSeparator="."
         decimalSeparator=","
+        decimalScale={2}
         value={value}
-        onChange={event => onChange?.(event.target.value)}
+        defaultValue={defaultValue}
+        onValueChange={(value) => onChange(value)}
+        transformRawValue={handleTransform}
         className={cn(
-          "text-gray-800 text-[32px] font-bold tracking-[-1px] outline-none w-full",
-          error && "text-red-900"
+          'w-full text-gray-800 text-[32px] font-bold tracking-[-1px] outline-none',
+          error && 'text-red-900',
+          className
         )}
       />
 
       {error && (
-        <div className="flex gap-2 items-center mt-2 text-red-900">
+        <div className="mt-2 flex gap-2 items-center text-red-900">
           <CrossCircledIcon />
           <span className="text-xs">{error}</span>
         </div>
       )}
     </div>
-  );
+  )
+}
+
+InputCurrency.defaultProps = {
+  value: null,
+  defaultValue: null,
+  error: '',
+  className: '',
+  onChange: null,
 }

frontend/src/view/pages/Dashboard/components/Accounts/AccountCard.tsx

@@ -1,21 +1,23 @@
+import { BankAccount } from "../../../../../app/entities/BankAccount";
 import { cn } from "../../../../../app/utils/cn";
 import { formatCurrency } from "../../../../../app/utils/formatCurrency";
 import { BankAccountTypeIcon } from "../../../../components/icons/BankAccountTypeIcon";
 import { useDashboard } from "../DashboardContext/useDashboard";
 
 interface AccountCardProps {
-  color: string;
-  name: string;
-  balance: number;
-  type: 'CASH' | 'CHECKING' | 'INVESTMENT'
+  data: BankAccount;
 }
 
-export function AccountCard({ color, name, balance, type }: AccountCardProps) {
-  const { areValuesVisible } = useDashboard();
+export function AccountCard({ data }: AccountCardProps) {
+  const { name, color, currentBalance, type } = data;
+
+  const { areValuesVisible, openEditAccountModal } = useDashboard();
   return (
     <div
       className="p-4 bg-white rounded-2xl h-[200px] flex flex-col justify-between border-b-4 border-teal-950"
       style={{ borderColor: color }}
+      role="button"
+      onClick={() => openEditAccountModal(data)}
     >
       <div>
         <BankAccountTypeIcon type={type} />
@@ -30,7 +32,7 @@ export function AccountCard({ color, name, balance, type }: AccountCardProps) {
           "text-gray-800 font-medium tracking-[-0.5px] block",
           !areValuesVisible && "blur-sm"
         )}>
-          {formatCurrency(balance)}
+          {formatCurrency(currentBalance)}
         </span>
         <small className="text-gray-600 text-sm">
           Saldo atual

frontend/src/view/pages/Dashboard/components/Accounts/index.tsx

@@ -20,6 +20,7 @@ export function Accounts() {
     isLoading,
     accounts,
     openNewAccountModal,
+    currentBalance
   } = UseAccountsController();
 
   return (
@@ -39,7 +40,7 @@ export function Accounts() {
                 "text-2xl tracking-[-1px] text-white",
                 !areValuesVisible && "blur-md"
               )}>
-                {formatCurrency(1000.23)}
+                {formatCurrency(currentBalance)}
               </strong>
               <button
                 className="w-8 h-8 flex items-center justify-center"
@@ -98,12 +99,7 @@ export function Accounts() {
 
                   {accounts.map(account => (
                     <SwiperSlide key={account.id}>
-                      <AccountCard
-                        color={account.color}
-                        name={account.name}
-                        balance={account.currentBalance}
-                        type={account.type}
-                      />
+                      <AccountCard data={account}/>
                     </SwiperSlide>
                   ))}
 

frontend/src/view/pages/Dashboard/components/Accounts/useAccountsController.ts

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { useWindowWidth } from "../../../../../app/hooks/useWindowWidth";
 import { useDashboard } from "../DashboardContext/useDashboard";
 import { useQuery } from "@tanstack/react-query";
@@ -18,6 +18,12 @@ export function UseAccountsController() {
     queryFn: bankAccountsService.getAll,
   });
 
+  const currentBalance = useMemo(() => {
+    if (!data) return 0;
+
+    return data.reduce((total, account) => total + account.currentBalance, 0);
+  }, [data]);
+
   return {
     sliderState,
     setSliderState,
@@ -27,5 +33,6 @@ export function UseAccountsController() {
     isLoading: isFetching,
     accounts: data ?? [],
     openNewAccountModal,
+    currentBalance
   }
 }