From 8e1945853bd1f08a5a6aa522b9518e438c42fc13 Mon Sep 17 00:00:00 2001
From: Victor Lucas <victorlcmonteiro@gmail.com>
Date: Mon, 20 Nov 2023 21:03:47 -0500
Subject: [PATCH 1/8] feat: budgets

---
 .gitignore                                    |   4 +-
 .vscode/settings.json                         |   3 -
 components/LateralMenu/index.tsx              |   2 +
 configs/collections.config.ts                 |   3 +
 .../BaseModule/components/Bubble/index.tsx    |  17 ++-
 modules/BaseModule/constants/Bubble.ts        |   1 +
 .../BaseModule/container/BaseForm/index.tsx   |  21 +++-
 .../BaseModule/container/BaseList/index.tsx   |  48 +++----
 modules/BaseModule/shared/renderFields.tsx    |   2 +-
 .../FormBill/form-bill.container.tsx          |  20 ++-
 .../components/form-budget.component.tsx      | 119 ++++++++++++++++++
 .../container/form-budget.container.tsx       |  12 ++
 .../container/list-budget.container.tsx       |  82 ++++++++++++
 modules/Budget/services/budget.service.ts     |  43 +++++++
 modules/Category/hooks/useCategories.tsx      |  41 ++++++
 .../Category/hooks/useCategoriesSelect.tsx    |  26 ----
 pages/budget/create.tsx                       |  12 ++
 pages/budget/index.tsx                        |  10 ++
 18 files changed, 396 insertions(+), 70 deletions(-)
 delete mode 100644 .vscode/settings.json
 create mode 100644 configs/collections.config.ts
 create mode 100644 modules/Budget/components/form-budget.component.tsx
 create mode 100644 modules/Budget/container/form-budget.container.tsx
 create mode 100644 modules/Budget/container/list-budget.container.tsx
 create mode 100644 modules/Budget/services/budget.service.ts
 create mode 100644 modules/Category/hooks/useCategories.tsx
 delete mode 100644 modules/Category/hooks/useCategoriesSelect.tsx
 create mode 100644 pages/budget/create.tsx
 create mode 100644 pages/budget/index.tsx

diff --git a/.gitignore b/.gitignore
index cb034b6..992029d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -30,6 +30,8 @@ yarn-error.log*
 .env.development.local
 .env.test.local
 .env.production.local
+.env.prod
 
 # vercel
-.vercel
\ No newline at end of file
+.vercel
+.vscode
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
deleted file mode 100644
index 3662b37..0000000
--- a/.vscode/settings.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "typescript.tsdk": "node_modules/typescript/lib"
-}
\ No newline at end of file
diff --git a/components/LateralMenu/index.tsx b/components/LateralMenu/index.tsx
index 1bbc53e..eb5c7ac 100644
--- a/components/LateralMenu/index.tsx
+++ b/components/LateralMenu/index.tsx
@@ -20,6 +20,7 @@ import { FiHome, FiPower, FiTrendingUp, FiTrendingDown, FiMenu } from 'react-ico
 import { IconType } from 'react-icons';
 import Image from 'next/image';
 import { BiSolidCategoryAlt } from 'react-icons/bi';
+import { TbPigMoney } from "react-icons/tb";
 
 interface LinkItemProps {
   name: string;
@@ -30,6 +31,7 @@ const LinkItems: Array<LinkItemProps> = [
   { name: 'Início', icon: FiHome, link: '/' },
   { name: 'Criar receita', icon: FiTrendingUp, link: '/bill?type=INCOME' },
   { name: 'Criar despesa', icon: FiTrendingDown, link: '/bill?type=EXPENSE' },
+  { name: 'Orçamentos', icon: TbPigMoney, link: '/budget' },
   { name: 'Categorias', icon: BiSolidCategoryAlt, link: '/category' },
   {
     name: 'Sair',
diff --git a/configs/collections.config.ts b/configs/collections.config.ts
new file mode 100644
index 0000000..d0a37d8
--- /dev/null
+++ b/configs/collections.config.ts
@@ -0,0 +1,3 @@
+import { firestore } from '@Configs/Firebase';
+
+export const budgetsCollection = firestore.collection('budgets');
diff --git a/modules/BaseModule/components/Bubble/index.tsx b/modules/BaseModule/components/Bubble/index.tsx
index d9e57b1..f5b8637 100644
--- a/modules/BaseModule/components/Bubble/index.tsx
+++ b/modules/BaseModule/components/Bubble/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { FieldErrors, FieldValues, UseFormRegister } from 'react-hook-form';
 
-import { Input, Select } from '@Components';
+import { Input, Select, MoneyInput } from '@Components';
 import SelectOption from '@Modules/BaseModule/interfaces/SelectOption';
 
 import { BubbleEnum, BUBBLE_TYPES } from '../../constants/Bubble';
@@ -51,10 +51,21 @@ const Bubble = ({
           {...register(name, { required })}
           error={errors[name]?.message}
           value={value}
-          {...props}
-        />
+
+        {...props}/>
       );
 
+      case BUBBLE_TYPES.MONEY:
+        return (
+          <MoneyInput
+            name={name}
+            label={label}
+            {...register(name, { required })}
+            error={errors[name]?.message}
+            {...props}
+          />
+          );
+
     case BUBBLE_TYPES.SELECT:
       return (
         <Select
diff --git a/modules/BaseModule/constants/Bubble.ts b/modules/BaseModule/constants/Bubble.ts
index 05dfa3e..537bde5 100644
--- a/modules/BaseModule/constants/Bubble.ts
+++ b/modules/BaseModule/constants/Bubble.ts
@@ -1,6 +1,7 @@
 export const BUBBLE_TYPES = {
   INPUT_TEXT: 'INPUT_TEXT',
   INPUT_COLOR: 'INPUT_COLOR',
+  MONEY: 'MONEY',
   SELECT: 'SELECT',
 };
 
diff --git a/modules/BaseModule/container/BaseForm/index.tsx b/modules/BaseModule/container/BaseForm/index.tsx
index 3111a4e..8faedfd 100644
--- a/modules/BaseModule/container/BaseForm/index.tsx
+++ b/modules/BaseModule/container/BaseForm/index.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import { useForm } from 'react-hook-form';
 import { Button } from '@chakra-ui/button';
 import { Flex } from '@chakra-ui/react';
@@ -7,6 +7,7 @@ import * as Yup from 'yup';
 
 import BaseField from '@Modules/BaseModule/interfaces/BaseField';
 import renderFields from '@Modules/BaseModule/shared/renderFields';
+import Bubble from '@Modules/BaseModule/components/Bubble';
 
 interface BaseFormInterface<T> {
   id?: string | number;
@@ -65,10 +66,26 @@ const BaseForm = <T extends {}>({
     }
   }, [fetchData, id]);
 
+  const renderFields = useMemo(() => {
+    return fields.map(({ name, type, label, options, value }) => (
+      <Bubble
+        key={name}
+        name={name}
+        label={label}
+        type={type}
+        errors={errors}
+        register={register}
+        options={options}
+        value={value}
+        props={{ mb: 5 }}
+      />
+    ));
+  }, [fields]);
+
   return (
     <form onSubmit={handleSubmit(wrapperOnSubmit)}>
       <Flex direction="column" alignItems="flex-start">
-        {renderFields(fields, errors, register)}
+        {renderFields}
 
         <Button type="submit" isLoading={isSubmitting}>
           {submitLabel}
diff --git a/modules/BaseModule/container/BaseList/index.tsx b/modules/BaseModule/container/BaseList/index.tsx
index adb5270..2682c20 100644
--- a/modules/BaseModule/container/BaseList/index.tsx
+++ b/modules/BaseModule/container/BaseList/index.tsx
@@ -67,6 +67,10 @@ const BaseList = <T extends { id?: string | number }>({
     setModalType(type);
   };
 
+  const wrapperOnDelete = cb => {
+    setModalType(null);
+  };
+
   const tableItems = useMemo(() => {
     const fields = headers.map(({ field }) => field);
 
@@ -102,7 +106,7 @@ const BaseList = <T extends { id?: string | number }>({
                       fontSize="sm"
                       onClick={() => handleOpenModalWithId(item.id, MODAL_TYPES.EDIT_MODAL)}
                     >
-                      Editar categoria
+                      Editar item
                     </Button>
 
                     <Button
@@ -115,7 +119,7 @@ const BaseList = <T extends { id?: string | number }>({
                       fontSize="sm"
                       onClick={() => handleOpenModalWithId(item.id, MODAL_TYPES.DELETE_MODAL)}
                     >
-                      Deletar categoria
+                      Deletar item
                     </Button>
                   </Stack>
                 </PopoverBody>
@@ -133,9 +137,9 @@ const BaseList = <T extends { id?: string | number }>({
         return (
           <>
             <Text fontSize="lg" fontWeight="bold" color="white" mb={5} mt={3}>
-              Deletar categoria
+              Deletar item
             </Text>
-            Você tem certeza que deseja apagar esta categoria?
+            Você tem certeza que deseja apagar este item?
           </>
         );
 
@@ -153,7 +157,7 @@ const BaseList = <T extends { id?: string | number }>({
         return (
           <>
             <Button onClick={() => setModalType(null)}>Cancelar</Button>
-            <Button colorScheme="red" ml={3} onClick={() => onDeleteItem(id)}>
+            <Button colorScheme="red" ml={3} onClick={() => wrapperOnDelete(onDeleteItem(id))}>
               Deletar
             </Button>
           </>
@@ -170,24 +174,22 @@ const BaseList = <T extends { id?: string | number }>({
       >
         {modalContent}
       </Modal>
-      <Box margin="10px" padding="10px" borderWidth="1px" borderRadius="lg">
-        <Table variant="simple">
-          <Thead>
-            <Tr>
-              {headers.map(({ label }) => (
-                <Th key={label}>{label}</Th>
-              ))}
-              {optionsEnabled && <Th></Th>}
-            </Tr>
-          </Thead>
-          <Tbody>
-            <>
-              {isLoading && <Spinner />}
-              {!isLoading && tableItems}
-            </>
-          </Tbody>
-        </Table>
-      </Box>
+      <Table variant="simple">
+        <Thead>
+          <Tr>
+            {headers.map(({ label }) => (
+              <Th key={label}>{label}</Th>
+            ))}
+            {optionsEnabled && <Th></Th>}
+          </Tr>
+        </Thead>
+        <Tbody>
+          <>
+            {isLoading && <Spinner />}
+            {!isLoading && tableItems}
+          </>
+        </Tbody>
+      </Table>
     </>
   );
 };
diff --git a/modules/BaseModule/shared/renderFields.tsx b/modules/BaseModule/shared/renderFields.tsx
index e9b168e..cfd7e44 100644
--- a/modules/BaseModule/shared/renderFields.tsx
+++ b/modules/BaseModule/shared/renderFields.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import Bubble from '../components/Bubble';
+
 import BaseField from '../interfaces/BaseField';
 
 const renderFields = (fields: BaseField[], errors, register) =>
diff --git a/modules/Bill/container/FormBill/form-bill.container.tsx b/modules/Bill/container/FormBill/form-bill.container.tsx
index 9be7ada..eaa881a 100644
--- a/modules/Bill/container/FormBill/form-bill.container.tsx
+++ b/modules/Bill/container/FormBill/form-bill.container.tsx
@@ -10,7 +10,7 @@ import { BillTypes, BillStatus } from '@Modules/Bill/constants/Types';
 import { Input, MoneyInput, Select, DatePicker, Box, If } from '@Components';
 import { useUser } from '@Modules/Authentication/context/UserContext';
 import { defaultRequiredMessage, TO_YEAR } from '@Modules/Bill/constants/BillConsts';
-import { useCategoriesSelect } from '@Modules/Category/hooks/useCategoriesSelect';
+import { useCategories } from '@Modules/Category/hooks/useCategories';
 
 const types = [
   {
@@ -52,7 +52,7 @@ export const FormBillContainer = ({ billId }: FormBillProps) => {
   const router = useRouter();
   const toast = useToast();
   const { userId } = useUser();
-  const categoriesSelect = useCategoriesSelect();
+  const categoriesSelect = useCategories();
 
   const [foundBill, setFoundBill] = useState<Bill | undefined>();
 
@@ -183,16 +183,14 @@ export const FormBillContainer = ({ billId }: FormBillProps) => {
   }, [watch, router.query.type]);
 
   const categories = useMemo(() => {
-    console.log(
-      categoriesSelect,
-      categoriesSelect.filter(category => category.type === type)
+    return (
+      categoriesSelect
+        ?.filter(category => category.type === type)
+        ?.map(category => ({
+          label: category.name,
+          value: category.id,
+        })) || []
     );
-    return categoriesSelect
-      .filter(category => category.type === type)
-      .map(category => ({
-        label: category.name,
-        value: category.id,
-      }));
   }, [type, categoriesSelect]);
 
   useEffect(() => {
diff --git a/modules/Budget/components/form-budget.component.tsx b/modules/Budget/components/form-budget.component.tsx
new file mode 100644
index 0000000..e875c98
--- /dev/null
+++ b/modules/Budget/components/form-budget.component.tsx
@@ -0,0 +1,119 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { object, string } from 'yup';
+import { useToast, Text } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+
+import BaseForm from '@Modules/BaseModule/container/BaseForm';
+import { BUBBLE_TYPES, BubbleEnum } from '@Modules/BaseModule/constants/Bubble';
+import { firestore } from '@Configs/Firebase';
+import { BillTypes } from '@Modules/Bill/constants/Types';
+import { useUser } from '@Authentication/context/UserContext';
+import { useCategories } from '@Modules/Category/hooks/useCategories';
+import {
+  createBudget,
+  getOneBudget,
+  updateBudget,
+  verifyExistsBudgetCategory,
+} from '@Modules/Budget/services/budget.service';
+
+interface FormBudgetProps {
+  id?: string | number;
+}
+
+interface ICategory {
+  id?: string;
+  name: string;
+  color: string;
+}
+
+const schema = object().shape({
+  name: string().required('Este campo é obrigatório.'),
+  value: string().required('Este campo é obrigatório.'),
+  categoryId: string().required('Este campo é obrigatório.'),
+});
+
+export const FormBudget = ({ id }: FormBudgetProps) => {
+  const toast = useToast();
+  const router = useRouter();
+  const { userId } = useUser();
+  const categories = useCategories({ type: BillTypes.EXPENSE });
+  const [fields, setFields] = useState([]);
+
+  useEffect(() => {
+    if (categories?.length > 0) {
+      setFields([
+        {
+          name: 'name',
+          label: 'Nome',
+          type: BUBBLE_TYPES.INPUT_TEXT as BubbleEnum,
+        },
+        {
+          name: 'value',
+          label: 'Valor',
+          type: BUBBLE_TYPES.MONEY as BubbleEnum,
+        },
+        {
+          name: 'categoryId',
+          label: 'Categoria',
+          type: BUBBLE_TYPES.SELECT as BubbleEnum,
+          options: categories.map(({ id, name }) => ({ label: name, value: id })),
+        },
+      ]);
+    }
+  }, [categories]);
+
+  const fetch = useCallback(async () => {
+    return getOneBudget(id);
+  }, [id]);
+
+  const onSubmit = async values => {
+    try {
+      if (id) {
+        await updateBudget(id, {
+          userId,
+          ...values,
+        });
+      } else {
+        const verifyAlreadyExistsCategory = await verifyExistsBudgetCategory(userId, values.categoryId);
+        if (verifyAlreadyExistsCategory) {
+          return toast({
+            description: 'Já existe um orçamento criado para esta categoria!',
+            status: 'error',
+          });
+        }
+
+        await createBudget({
+          userId,
+          ...values,
+        });
+      }
+      toast({
+        description: `Orçamento ${id ? 'editado' : 'criado'} com sucesso!`,
+        status: 'success',
+      });
+      router.replace('/budget');
+    } catch (error) {
+      toast({
+        description: error.message,
+        status: 'error',
+      });
+    }
+  };
+
+  return (
+    <>
+      <Text fontSize="lg" fontWeight="bold" color="white" mb={3}>
+        {id ? 'Editar' : 'Criar'} orçamento
+      </Text>
+
+      <BaseForm<ICategory>
+        id={id}
+        fields={fields}
+        fetch={fetch}
+        onSubmit={onSubmit}
+        submitLabel={id ? 'Editar' : 'Criar'}
+        schema={schema}
+      />
+    </>
+  );
+};
diff --git a/modules/Budget/container/form-budget.container.tsx b/modules/Budget/container/form-budget.container.tsx
new file mode 100644
index 0000000..db320a4
--- /dev/null
+++ b/modules/Budget/container/form-budget.container.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { Box } from '@Components/Box';
+import { FormBudget } from '@Modules/Budget/components/form-budget.component';
+
+export const FormBudgetContainer = () => {
+  return (
+    <Box>
+      <FormBudget />
+    </Box>
+  );
+};
diff --git a/modules/Budget/container/list-budget.container.tsx b/modules/Budget/container/list-budget.container.tsx
new file mode 100644
index 0000000..d89fc27
--- /dev/null
+++ b/modules/Budget/container/list-budget.container.tsx
@@ -0,0 +1,82 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { Button } from '@chakra-ui/button';
+import { Badge, Link } from '@chakra-ui/react';
+
+import { Box } from '@Components';
+import BaseList from '@Modules/BaseModule/container/BaseList';
+import { BillTypes } from '@Modules/Bill/constants/Types';
+import { useUser } from '@Authentication/context/UserContext';
+import { deleteBudget, getAllBudgets, IBudget } from '@Modules/Budget/services/budget.service';
+import { useCategories } from '@Modules/Category/hooks/useCategories';
+import { FormBudget } from '@Modules/Budget/components/form-budget.component';
+
+export const ListBudgetContainer = () => {
+  const [items, setItems] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const { userId } = useUser();
+  const categories = useCategories({ type: BillTypes.EXPENSE });
+
+  const fetchData = useCallback(async () => {
+    try {
+      setLoading(true);
+
+      const budgets = await getAllBudgets(userId, setItems);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  }, [userId]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  const onDeleteItem = id => {
+    deleteBudget(id);
+  };
+
+  const renderCategory = useCallback(
+    categoryId => {
+      const foundCategory = categories?.find(({ id }) => id === categoryId);
+
+      if (!foundCategory) <></>;
+
+      return <Badge bg={foundCategory?.color}>{foundCategory?.name}</Badge>;
+    },
+    [categories]
+  );
+
+  return (
+    <Box>
+      <Link href="/budget/create">
+        <Button mb={5}>Criar orçamento</Button>
+      </Link>
+
+      <BaseList<IBudget>
+        headers={[
+          {
+            label: 'Nome',
+            field: 'name',
+          },
+          {
+            label: 'Valor',
+            field: 'value',
+            render: ({ value }) => <>R${Number(value).toFixed(2).replace('.', ',')}</>,
+          },
+
+          {
+            label: 'Categoria',
+            field: 'categoryId',
+            render: ({ categoryId }) => renderCategory(categoryId),
+          },
+        ]}
+        items={items}
+        isLoading={false}
+        editComponent={id => <FormBudget id={id} />}
+        onDeleteItem={onDeleteItem}
+        optionsEnabled
+      />
+    </Box>
+  );
+};
diff --git a/modules/Budget/services/budget.service.ts b/modules/Budget/services/budget.service.ts
new file mode 100644
index 0000000..07c5081
--- /dev/null
+++ b/modules/Budget/services/budget.service.ts
@@ -0,0 +1,43 @@
+import { budgetsCollection } from '@Configs/collections.config';
+
+export interface IBudget {
+  id?: string;
+  name: string;
+  value: number;
+  userId: string;
+  categoryId: string;
+}
+
+export const getAllBudgets = (userId: string, setItems) => {
+  return budgetsCollection
+    .where('userId', '==', userId)
+    .onSnapshot(({ docs }) => setItems(docs.map(budget => ({ id: budget.id, ...budget.data() } as IBudget))));
+};
+
+export const getOneBudget = id => {
+  return budgetsCollection
+    .doc(id)
+    .get()
+    .then(res => res.data());
+};
+
+export const updateBudget = (id: string, budget: IBudget) => {
+  return budgetsCollection.doc(id).update(budget);
+};
+
+export const verifyExistsBudgetCategory = (userId, categoryId) => {
+  return budgetsCollection
+    .where('userId', '==', userId)
+    .where('categoryId', '==', categoryId)
+    .limit(1)
+    .get()
+    .then(({ empty }) => !empty);
+};
+
+export const createBudget = (budget: IBudget) => {
+  return budgetsCollection.add(budget);
+};
+
+export const deleteBudget = (id: string) => {
+  return budgetsCollection.doc(id).delete();
+};
diff --git a/modules/Category/hooks/useCategories.tsx b/modules/Category/hooks/useCategories.tsx
new file mode 100644
index 0000000..9e7cf29
--- /dev/null
+++ b/modules/Category/hooks/useCategories.tsx
@@ -0,0 +1,41 @@
+import { useState, useEffect, useCallback } from 'react';
+
+import { firestore } from '@Configs/Firebase';
+import { useUser } from '@Authentication/context/UserContext';
+import { BillTypes } from '@Modules/Bill/constants/Types';
+
+export interface ICategory {
+  id?: string;
+  name: string;
+  color: string;
+  type: string;
+}
+interface UseCategoriesOptions {
+  type?: string;
+}
+export const useCategories = (options?: UseCategoriesOptions) => {
+  const [categories, setCategories] = useState(null);
+  const { userId } = useUser();
+  const fetchUserCategories = useCallback(async () => {
+    if (!userId) return;
+
+    const data = await firestore.collection('categories').where('userId', '==', userId).get();
+    const docs = data.docs.map(
+      category =>
+        ({
+          id: category.id,
+          ...category.data(),
+        } as ICategory)
+    );
+
+    const processedDocs = docs.filter(item => (options?.type ? item.type === options.type : true));
+
+    setCategories(processedDocs);
+  }, [setCategories, userId]);
+
+  useEffect(() => {
+    fetchUserCategories();
+  }, [fetchUserCategories]);
+
+  return categories;
+};
diff --git a/modules/Category/hooks/useCategoriesSelect.tsx b/modules/Category/hooks/useCategoriesSelect.tsx
deleted file mode 100644
index 8287740..0000000
--- a/modules/Category/hooks/useCategoriesSelect.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { useState, useEffect, useCallback } from 'react';
-
-import { firestore } from '@Configs/Firebase';
-import { useUser } from '@Authentication/context/UserContext';
-
-export const useCategoriesSelect = () => {
-  const [categories, setCategories] = useState([]);
-  const { userId } = useUser();
-  const fetchUserCategories = useCallback(async () => {
-    if (!userId) return;
-
-    const data = await firestore.collection('categories').where('userId', '==', userId).get();
-    setCategories(
-      data.docs.map(category => ({
-        id: category.id,
-        ...category.data(),
-      }))
-    );
-  }, [setCategories, userId]);
-
-  useEffect(() => {
-    fetchUserCategories();
-  }, [fetchUserCategories]);
-
-  return categories;
-};
diff --git a/pages/budget/create.tsx b/pages/budget/create.tsx
new file mode 100644
index 0000000..ee73126
--- /dev/null
+++ b/pages/budget/create.tsx
@@ -0,0 +1,12 @@
+import withLateralMenu from '@/hoc/withLateralMenu';
+import { FormBudgetContainer } from '@Modules/Budget/container/form-budget.container';
+
+const FormBudget = () => {
+  return (
+    <>
+      <FormBudgetContainer />
+    </>
+  );
+};
+
+export default withLateralMenu(FormBudget);
diff --git a/pages/budget/index.tsx b/pages/budget/index.tsx
new file mode 100644
index 0000000..002ba67
--- /dev/null
+++ b/pages/budget/index.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+
+import withLateralMenu from '@/hoc/withLateralMenu';
+import { ListBudgetContainer } from '@Modules/Budget/container/list-budget.container';
+
+const Budget = () => {
+  return <ListBudgetContainer />;
+};
+
+export default withLateralMenu(Budget);

From 4bdf872292f750419c3a6224a1377a421f6af61e Mon Sep 17 00:00:00 2001
From: Victor Lucas <victorlcmonteiro@gmail.com>
Date: Mon, 20 Nov 2023 21:04:53 -0500
Subject: [PATCH 2/8] fix: remove unused

---
 modules/BaseModule/shared/renderFields.tsx | 21 ---------------------
 1 file changed, 21 deletions(-)
 delete mode 100644 modules/BaseModule/shared/renderFields.tsx

diff --git a/modules/BaseModule/shared/renderFields.tsx b/modules/BaseModule/shared/renderFields.tsx
deleted file mode 100644
index cfd7e44..0000000
--- a/modules/BaseModule/shared/renderFields.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-
-
-import BaseField from '../interfaces/BaseField';
-
-const renderFields = (fields: BaseField[], errors, register) =>
-  fields.map(({ name, type, label, options, value }) => (
-    <Bubble
-      key={name}
-      name={name}
-      label={label}
-      type={type}
-      errors={errors}
-      register={register}
-      options={options}
-      value={value}
-      props={{ mb: 5 }}
-    />
-  ));
-
-export default renderFields;

From bf8ffd1b661f83474b5b0a7caecdcf32eeaf4e07 Mon Sep 17 00:00:00 2001
From: Victor Lucas <victorlcmonteiro@gmail.com>
Date: Mon, 20 Nov 2023 21:07:29 -0500
Subject: [PATCH 3/8] fix: remove unused

---
 modules/BaseModule/container/BaseForm/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/modules/BaseModule/container/BaseForm/index.tsx b/modules/BaseModule/container/BaseForm/index.tsx
index 8faedfd..538f77d 100644
--- a/modules/BaseModule/container/BaseForm/index.tsx
+++ b/modules/BaseModule/container/BaseForm/index.tsx
@@ -6,7 +6,6 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import * as Yup from 'yup';
 
 import BaseField from '@Modules/BaseModule/interfaces/BaseField';
-import renderFields from '@Modules/BaseModule/shared/renderFields';
 import Bubble from '@Modules/BaseModule/components/Bubble';
 
 interface BaseFormInterface<T> {

From 5bf5817dd65d566c546bef49f9fb607493cf9b43 Mon Sep 17 00:00:00 2001
From: Victor Lucas <victorlcmonteiro@gmail.com>
Date: Mon, 20 Nov 2023 21:11:20 -0500
Subject: [PATCH 4/8] fix: lint

---
 components/LateralMenu/index.tsx              |  2 +-
 .../BaseModule/components/Bubble/index.tsx    | 24 +++++++++----------
 .../container/list-categories.container.tsx   | 15 +++++++-----
 3 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/components/LateralMenu/index.tsx b/components/LateralMenu/index.tsx
index eb5c7ac..d25406b 100644
--- a/components/LateralMenu/index.tsx
+++ b/components/LateralMenu/index.tsx
@@ -20,7 +20,7 @@ import { FiHome, FiPower, FiTrendingUp, FiTrendingDown, FiMenu } from 'react-ico
 import { IconType } from 'react-icons';
 import Image from 'next/image';
 import { BiSolidCategoryAlt } from 'react-icons/bi';
-import { TbPigMoney } from "react-icons/tb";
+import { TbPigMoney } from 'react-icons/tb';
 
 interface LinkItemProps {
   name: string;
diff --git a/modules/BaseModule/components/Bubble/index.tsx b/modules/BaseModule/components/Bubble/index.tsx
index f5b8637..8115f61 100644
--- a/modules/BaseModule/components/Bubble/index.tsx
+++ b/modules/BaseModule/components/Bubble/index.tsx
@@ -51,20 +51,20 @@ const Bubble = ({
           {...register(name, { required })}
           error={errors[name]?.message}
           value={value}
-
-        {...props}/>
+          {...props}
+        />
       );
 
-      case BUBBLE_TYPES.MONEY:
-        return (
-          <MoneyInput
-            name={name}
-            label={label}
-            {...register(name, { required })}
-            error={errors[name]?.message}
-            {...props}
-          />
-          );
+    case BUBBLE_TYPES.MONEY:
+      return (
+        <MoneyInput
+          name={name}
+          label={label}
+          {...register(name, { required })}
+          error={errors[name]?.message}
+          {...props}
+        />
+      );
 
     case BUBBLE_TYPES.SELECT:
       return (
diff --git a/modules/Category/container/list-categories.container.tsx b/modules/Category/container/list-categories.container.tsx
index 5f98f2a..0a314cd 100644
--- a/modules/Category/container/list-categories.container.tsx
+++ b/modules/Category/container/list-categories.container.tsx
@@ -6,7 +6,7 @@ import { FormCategory } from '@Modules/Category/components/form-category.compone
 import BaseList from '@Modules/BaseModule/container/BaseList';
 import { firestore } from '@Configs/Firebase';
 import { BillTypes } from '@Modules/Bill/constants/Types';
-import { useUser } from "@Authentication/context/UserContext";
+import { useUser } from '@Authentication/context/UserContext';
 
 interface ICategory {
   id?: string;
@@ -24,11 +24,14 @@ export const ListCategoriesContainer = () => {
   const { userId } = useUser();
 
   const fetchData = useCallback(async () => {
-    firestore.collection('categories').where('userId', '==', userId).onSnapshot(({ docs }) => {
-      setLoading(true);
-      setItems(docs.map(category => ({ id: category.id, ...category.data() } as ICategory)));
-    });
-    }, [userId]);
+    firestore
+      .collection('categories')
+      .where('userId', '==', userId)
+      .onSnapshot(({ docs }) => {
+        setLoading(true);
+        setItems(docs.map(category => ({ id: category.id, ...category.data() } as ICategory)));
+      });
+  }, [userId]);
 
   useEffect(() => {
     fetchData();

From 00b6ab2bcd4f73a006465f3c560dde55686c9ef3 Mon Sep 17 00:00:00 2001
From: Victor Lucas <victorlcmonteiro@gmail.com>
Date: Mon, 20 Nov 2023 21:25:45 -0500
Subject: [PATCH 5/8] fix: build

---
 .../BaseModule/container/BaseForm/index.tsx   |  6 ++---
 .../BaseModule/container/BaseList/index.tsx   |  8 +++----
 .../components/form-budget.component.tsx      | 23 ++++++++-----------
 modules/Budget/services/budget.service.ts     |  2 +-
 .../components/form-category.component.tsx    |  2 +-
 pages/logout.tsx                              |  5 ++--
 6 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/modules/BaseModule/container/BaseForm/index.tsx b/modules/BaseModule/container/BaseForm/index.tsx
index 538f77d..65d8eb3 100644
--- a/modules/BaseModule/container/BaseForm/index.tsx
+++ b/modules/BaseModule/container/BaseForm/index.tsx
@@ -9,10 +9,10 @@ import BaseField from '@Modules/BaseModule/interfaces/BaseField';
 import Bubble from '@Modules/BaseModule/components/Bubble';
 
 interface BaseFormInterface<T> {
-  id?: string | number;
-  fetch?: (id: string | number) => Promise<T>;
+  id?: string;
+  fetch?: (id: string) => Promise<T>;
   fields: BaseField[];
-  onSubmit: (element: T) => T | Promise<T> | Promise<void>;
+  onSubmit: (element: T) => Promise<any>;
   submitLabel?: string;
   schema: Yup.AnyObjectSchema;
 }
diff --git a/modules/BaseModule/container/BaseList/index.tsx b/modules/BaseModule/container/BaseList/index.tsx
index 2682c20..b9d9c3f 100644
--- a/modules/BaseModule/container/BaseList/index.tsx
+++ b/modules/BaseModule/container/BaseList/index.tsx
@@ -39,12 +39,12 @@ interface BaseListInterface<T> {
   items: T[];
   isLoading: boolean;
   optionsEnabled?: boolean;
-  onDeleteItem?: (id: string | number) => void;
+  onDeleteItem?: (id: string) => void;
   onCloseOption?: () => void;
-  editComponent?: (id: string | number) => React.ReactElement;
+  editComponent?: (id: string) => React.ReactElement;
 }
 
-const BaseList = <T extends { id?: string | number }>({
+const BaseList = <T extends { id?: string }>({
   headers,
   items,
   isLoading,
@@ -54,7 +54,7 @@ const BaseList = <T extends { id?: string | number }>({
   onDeleteItem,
 }: BaseListInterface<T>) => {
   const [modalType, setModalType] = useState(null);
-  const [id, setId] = useState<number>();
+  const [id, setId] = useState<string>();
 
   useEffect(() => {
     if (!modalType && !!onCloseOption) {
diff --git a/modules/Budget/components/form-budget.component.tsx b/modules/Budget/components/form-budget.component.tsx
index e875c98..ae28c63 100644
--- a/modules/Budget/components/form-budget.component.tsx
+++ b/modules/Budget/components/form-budget.component.tsx
@@ -5,7 +5,6 @@ import { useRouter } from 'next/router';
 
 import BaseForm from '@Modules/BaseModule/container/BaseForm';
 import { BUBBLE_TYPES, BubbleEnum } from '@Modules/BaseModule/constants/Bubble';
-import { firestore } from '@Configs/Firebase';
 import { BillTypes } from '@Modules/Bill/constants/Types';
 import { useUser } from '@Authentication/context/UserContext';
 import { useCategories } from '@Modules/Category/hooks/useCategories';
@@ -14,16 +13,11 @@ import {
   getOneBudget,
   updateBudget,
   verifyExistsBudgetCategory,
+  IBudget,
 } from '@Modules/Budget/services/budget.service';
 
 interface FormBudgetProps {
-  id?: string | number;
-}
-
-interface ICategory {
   id?: string;
-  name: string;
-  color: string;
 }
 
 const schema = object().shape({
@@ -62,14 +56,17 @@ export const FormBudget = ({ id }: FormBudgetProps) => {
     }
   }, [categories]);
 
-  const fetch = useCallback(async () => {
-    return getOneBudget(id);
-  }, [id]);
+  const fetch = useCallback(
+    async id => {
+      return getOneBudget(id);
+    },
+    [id]
+  );
 
-  const onSubmit = async values => {
+  const onSubmit = async (values: IBudget) => {
     try {
       if (id) {
-        await updateBudget(id, {
+        return updateBudget(id, {
           userId,
           ...values,
         });
@@ -106,7 +103,7 @@ export const FormBudget = ({ id }: FormBudgetProps) => {
         {id ? 'Editar' : 'Criar'} orçamento
       </Text>
 
-      <BaseForm<ICategory>
+      <BaseForm<IBudget>
         id={id}
         fields={fields}
         fetch={fetch}
diff --git a/modules/Budget/services/budget.service.ts b/modules/Budget/services/budget.service.ts
index 07c5081..4049d3c 100644
--- a/modules/Budget/services/budget.service.ts
+++ b/modules/Budget/services/budget.service.ts
@@ -18,7 +18,7 @@ export const getOneBudget = id => {
   return budgetsCollection
     .doc(id)
     .get()
-    .then(res => res.data());
+    .then(res => res.data() as IBudget);
 };
 
 export const updateBudget = (id: string, budget: IBudget) => {
diff --git a/modules/Category/components/form-category.component.tsx b/modules/Category/components/form-category.component.tsx
index bc086fb..8991920 100644
--- a/modules/Category/components/form-category.component.tsx
+++ b/modules/Category/components/form-category.component.tsx
@@ -10,7 +10,7 @@ import { BillTypes } from '@Modules/Bill/constants/Types';
 import { useUser } from '@Authentication/context/UserContext';
 
 interface FormCategoryProps {
-  id?: string | number;
+  id?: string;
 }
 interface ICategory {
   id?: string;
diff --git a/pages/logout.tsx b/pages/logout.tsx
index 3605c40..3f7357e 100644
--- a/pages/logout.tsx
+++ b/pages/logout.tsx
@@ -1,5 +1,6 @@
 import { useRouter } from 'next/router';
 import { useEffect } from 'react';
+import { Center } from '@chakra-ui/react';
 
 import { auth } from '@Configs/Firebase';
 
@@ -9,7 +10,7 @@ export default function Logout() {
   useEffect(() => {
     auth.signOut();
     router.push('/');
-  }, []);
+  }, [router]);
 
-  return <>Loading</>;
+  return <Center>Loading</Center>;
 }

From eb2d15818c48ab31e1ca57c2460cf4802e2937b0 Mon Sep 17 00:00:00 2001
From: Victor Lucas <victorlcmonteiro@gmail.com>
Date: Tue, 21 Nov 2023 21:28:02 -0500
Subject: [PATCH 6/8] feat: analytics

---
 components/LateralMenu/index.tsx              |   3 +-
 configs/collections.config.ts                 |   1 +
 hooks/useBills.tsx                            |  48 +++
 .../hooks => hooks}/useCategories.tsx         |   2 +-
 .../categories-current-month.component.tsx    |  83 ++++
 .../components/month-by-month.component.tsx   | 101 +++++
 .../container/list-analytics.container.tsx    |  18 +
 .../Analytics/services/alaytics.services.ts   |   0
 .../FormBill/form-bill.container.tsx          |   2 +-
 .../components/form-budget.component.tsx      |   2 +-
 .../container/list-budget.container.tsx       |   2 +-
 package.json                                  |   5 +-
 pages/analytics.tsx                           |   8 +
 yarn.lock                                     | 370 ++++++++++++++++++
 14 files changed, 639 insertions(+), 6 deletions(-)
 create mode 100644 hooks/useBills.tsx
 rename {modules/Category/hooks => hooks}/useCategories.tsx (94%)
 create mode 100644 modules/Analytics/components/categories-current-month.component.tsx
 create mode 100644 modules/Analytics/components/month-by-month.component.tsx
 create mode 100644 modules/Analytics/container/list-analytics.container.tsx
 create mode 100644 modules/Analytics/services/alaytics.services.ts
 create mode 100644 pages/analytics.tsx

diff --git a/components/LateralMenu/index.tsx b/components/LateralMenu/index.tsx
index d25406b..047666a 100644
--- a/components/LateralMenu/index.tsx
+++ b/components/LateralMenu/index.tsx
@@ -20,7 +20,7 @@ import { FiHome, FiPower, FiTrendingUp, FiTrendingDown, FiMenu } from 'react-ico
 import { IconType } from 'react-icons';
 import Image from 'next/image';
 import { BiSolidCategoryAlt } from 'react-icons/bi';
-import { TbPigMoney } from 'react-icons/tb';
+import { TbBrandGoogleAnalytics, TbPigMoney } from 'react-icons/tb';
 
 interface LinkItemProps {
   name: string;
@@ -29,6 +29,7 @@ interface LinkItemProps {
 }
 const LinkItems: Array<LinkItemProps> = [
   { name: 'Início', icon: FiHome, link: '/' },
+  { name: 'Análises', icon: TbBrandGoogleAnalytics, link: '/analytics' },
   { name: 'Criar receita', icon: FiTrendingUp, link: '/bill?type=INCOME' },
   { name: 'Criar despesa', icon: FiTrendingDown, link: '/bill?type=EXPENSE' },
   { name: 'Orçamentos', icon: TbPigMoney, link: '/budget' },
diff --git a/configs/collections.config.ts b/configs/collections.config.ts
index d0a37d8..821b747 100644
--- a/configs/collections.config.ts
+++ b/configs/collections.config.ts
@@ -1,3 +1,4 @@
 import { firestore } from '@Configs/Firebase';
 
+export const billsCollection = firestore.collection('bills');
 export const budgetsCollection = firestore.collection('budgets');
diff --git a/hooks/useBills.tsx b/hooks/useBills.tsx
new file mode 100644
index 0000000..84b9321
--- /dev/null
+++ b/hooks/useBills.tsx
@@ -0,0 +1,48 @@
+import { useState, useEffect, useCallback } from 'react';
+
+import { firestore } from '@Configs/Firebase';
+import { useUser } from '@Authentication/context/UserContext';
+import { BillTypes } from '@Modules/Bill/constants/Types';
+import { billsCollection } from '@Configs/collections.config';
+
+export interface IBill {
+  id?: string;
+  name: string;
+  description?: string;
+  value: number;
+  type: 'INCOME' | 'EXPENSE';
+  status: string;
+  dueDate: number;
+  createdAt: number;
+  userId: string;
+  category?: string;
+}
+interface UseBillsOptions {
+  type?: string;
+}
+export const useBills = (options?: UseBillsOptions) => {
+  const [bills, setBills] = useState<IBill[]>([]);
+  const { userId } = useUser();
+  const fetchBills = useCallback(async () => {
+    if (!userId) return;
+
+    const data = await billsCollection.where('userId', '==', userId).get();
+    const docs = data.docs.map(
+      category =>
+        ({
+          id: category.id,
+          ...category.data(),
+        } as IBill)
+    );
+
+    const processedDocs = docs.filter(item => (options?.type ? item.type === options.type : true));
+
+    setBills(processedDocs);
+  }, [setBills, userId]);
+
+  useEffect(() => {
+    fetchBills();
+  }, [fetchBills]);
+
+  return bills;
+};
diff --git a/modules/Category/hooks/useCategories.tsx b/hooks/useCategories.tsx
similarity index 94%
rename from modules/Category/hooks/useCategories.tsx
rename to hooks/useCategories.tsx
index 9e7cf29..8be7488 100644
--- a/modules/Category/hooks/useCategories.tsx
+++ b/hooks/useCategories.tsx
@@ -14,7 +14,7 @@ interface UseCategoriesOptions {
   type?: string;
 }
 export const useCategories = (options?: UseCategoriesOptions) => {
-  const [categories, setCategories] = useState(null);
+  const [categories, setCategories] = useState<ICategory[]>([]);
   const { userId } = useUser();
   const fetchUserCategories = useCallback(async () => {
     if (!userId) return;
diff --git a/modules/Analytics/components/categories-current-month.component.tsx b/modules/Analytics/components/categories-current-month.component.tsx
new file mode 100644
index 0000000..e69e484
--- /dev/null
+++ b/modules/Analytics/components/categories-current-month.component.tsx
@@ -0,0 +1,83 @@
+import dynamic from 'next/dynamic';
+
+// @ts-ignore
+const ResponsivePieCanvas = dynamic(() => import('@nivo/pie').then(m => m.ResponsivePieCanvas), { ssr: false });
+
+import { Text, Box as ChackraBox, Tag } from '@chakra-ui/react';
+import { useMemo } from 'react';
+
+import { Box } from '@Components';
+import { ICategory } from '@/hooks/useCategories';
+import { IBill } from '@/hooks/useBills';
+import { BillTypes } from '@Modules/Bill/constants/Types';
+
+interface CategoriesCurrentMonthProps {
+  bills: IBill[];
+  categories: ICategory[];
+}
+
+const keyToText = {
+  rest: 'Retante',
+  income: 'Receita',
+  expense: 'Despesa',
+};
+
+export const CategoriesCurrentMonth = ({ bills, categories }: CategoriesCurrentMonthProps) => {
+  const graphData = useMemo(() => {
+    return bills?.map(bill => {
+      return {
+        value: bill.value,
+        id: categories?.find(({ id }) => id === bill.category)?.name || 'Outro',
+      };
+    });
+  }, [bills, categories]);
+
+  const data = [
+    {
+      id: 'Cartão de crédito',
+      value: 440,
+    },
+    {
+      id: 'Investimento',
+      value: 251,
+    },
+    {
+      id: 'Outros',
+      value: 464,
+    },
+  ];
+  return (
+    <Box bg="gray.300">
+      <Text fontSize="lg" fontWeight="bold" color="gray.600">
+        Gastos por categoria
+      </Text>
+      <ChackraBox height="400px">
+        {/* @ts-ignore */}
+        <ResponsivePieCanvas
+          // @ts-ignore
+          data={graphData}
+          margin={{ top: 10, right: 50, bottom: 80, left: 50 }}
+          innerRadius={0.5}
+          padAngle={0.7}
+          cornerRadius={3}
+          activeOuterRadiusOffset={8}
+          borderWidth={1}
+          borderColor={{
+            from: 'color',
+            modifiers: [['darker', 0.2]],
+          }}
+          arcLinkLabelsSkipAngle={10}
+          arcLinkLabelsTextColor="#333333"
+          arcLinkLabelsThickness={2}
+          arcLinkLabelsColor={{ from: 'color' }}
+          arcLabelsSkipAngle={10}
+          arcLabelsTextColor={{
+            from: 'color',
+            modifiers: [['darker', 2]],
+          }}
+          tooltip={() => <></>}
+        />
+      </ChackraBox>
+    </Box>
+  );
+};
diff --git a/modules/Analytics/components/month-by-month.component.tsx b/modules/Analytics/components/month-by-month.component.tsx
new file mode 100644
index 0000000..9241a34
--- /dev/null
+++ b/modules/Analytics/components/month-by-month.component.tsx
@@ -0,0 +1,101 @@
+import dynamic from 'next/dynamic';
+
+// @ts-ignore
+const ResponsiveBarCanvas = dynamic(() => import('@nivo/bar').then(m => m.ResponsiveBarCanvas), { ssr: false });
+
+import { Text, Box as ChackraBox, Tag } from '@chakra-ui/react';
+import { useMemo } from 'react';
+
+import { Box } from '@Components';
+import { IBill } from '@/hooks/useBills';
+import { BillTypes } from '@Modules/Bill/constants/Types';
+
+interface MonthByMonthProps {
+  bills: IBill[];
+}
+
+const keyToText = {
+  rest: 'Retante',
+  income: 'Receita',
+  expense: 'Despesa',
+};
+
+export const MonthByMonth = ({ bills }: MonthByMonthProps) => {
+  const data = useMemo(() => {
+    const billsReduce = bills.reduce((prev, curr) => {
+      const dueDate = new Date(curr.dueDate);
+      const month = `${dueDate.getMonth() + 1}/${dueDate.getFullYear()}`;
+
+      if (!prev[month]) {
+        prev[month] = {};
+
+        if (curr.type === BillTypes.EXPENSE) {
+          prev[month] = {
+            expense: curr.value,
+            income: 0,
+            month,
+          };
+        } else {
+          prev[month] = {
+            expense: 0,
+            income: curr.value,
+            month,
+          };
+        }
+
+        prev[month].rest = prev[month].income - prev[month].expense;
+      }
+
+      if (prev?.[month]) {
+        if (curr.type === BillTypes.EXPENSE) {
+          prev[month].expense += curr.value;
+        } else {
+          prev[month].income += curr.value;
+        }
+
+        prev[month].rest = prev[month].income - prev[month].expense;
+      }
+
+      return prev;
+    }, {});
+
+    return Object.values(billsReduce);
+  }, [bills]);
+
+  return (
+    <Box bg="gray.300">
+      <Text fontSize="lg" fontWeight="bold" color="gray.600">
+        Últimos meses
+      </Text>
+      <ChackraBox height="400px">
+        {/* @ts-ignore */}
+        <ResponsiveBarCanvas
+          // @ts-ignore
+          data={data}
+          keys={['income', 'expense', 'rest']}
+          indexBy="month"
+          margin={{ top: 10, right: 60, bottom: 50, left: 60 }}
+          groupMode="grouped"
+          layout="vertical"
+          valueScale={{ type: 'linear' }}
+          indexScale={{ type: 'band', round: true }}
+          colors={['#38A169', '#E53E3E', '#3182ce']}
+          colorBy="id"
+          enableGridX={false}
+          enableGridY={false}
+          labelTextColor={{
+            from: 'color',
+            modifiers: [['darker', 1.6]],
+          }}
+          tooltip={item => {
+            return (
+              <Tag fontSize="xx-small" variant="solid">
+                {keyToText[item.id]} {item.value}
+              </Tag>
+            );
+          }}
+        />
+      </ChackraBox>
+    </Box>
+  );
+};
diff --git a/modules/Analytics/container/list-analytics.container.tsx b/modules/Analytics/container/list-analytics.container.tsx
new file mode 100644
index 0000000..ea273e0
--- /dev/null
+++ b/modules/Analytics/container/list-analytics.container.tsx
@@ -0,0 +1,18 @@
+import { MonthByMonth } from '@Modules/Analytics/components/month-by-month.component';
+import { CategoriesCurrentMonth } from '@Modules/Analytics/components/categories-current-month.component';
+import { useCategories } from '@/hooks/useCategories';
+import { useBills } from '@/hooks/useBills';
+import { BillTypes } from '@Modules/Bill/constants/Types';
+
+export const ListAnalyticsContainer = () => {
+  const categories = useCategories();
+  const bills = useBills();
+  const billsExpesne = bills.filter(bill => bill.type === BillTypes.EXPENSE);
+
+  return (
+    <>
+      <MonthByMonth bills={bills} />
+      <CategoriesCurrentMonth categories={categories} bills={billsExpesne} />
+    </>
+  );
+};
diff --git a/modules/Analytics/services/alaytics.services.ts b/modules/Analytics/services/alaytics.services.ts
new file mode 100644
index 0000000..e69de29
diff --git a/modules/Bill/container/FormBill/form-bill.container.tsx b/modules/Bill/container/FormBill/form-bill.container.tsx
index eaa881a..723b180 100644
--- a/modules/Bill/container/FormBill/form-bill.container.tsx
+++ b/modules/Bill/container/FormBill/form-bill.container.tsx
@@ -10,7 +10,7 @@ import { BillTypes, BillStatus } from '@Modules/Bill/constants/Types';
 import { Input, MoneyInput, Select, DatePicker, Box, If } from '@Components';
 import { useUser } from '@Modules/Authentication/context/UserContext';
 import { defaultRequiredMessage, TO_YEAR } from '@Modules/Bill/constants/BillConsts';
-import { useCategories } from '@Modules/Category/hooks/useCategories';
+import { useCategories } from '@/hooks/useCategories';
 
 const types = [
   {
diff --git a/modules/Budget/components/form-budget.component.tsx b/modules/Budget/components/form-budget.component.tsx
index ae28c63..bc63153 100644
--- a/modules/Budget/components/form-budget.component.tsx
+++ b/modules/Budget/components/form-budget.component.tsx
@@ -7,7 +7,7 @@ import BaseForm from '@Modules/BaseModule/container/BaseForm';
 import { BUBBLE_TYPES, BubbleEnum } from '@Modules/BaseModule/constants/Bubble';
 import { BillTypes } from '@Modules/Bill/constants/Types';
 import { useUser } from '@Authentication/context/UserContext';
-import { useCategories } from '@Modules/Category/hooks/useCategories';
+import { useCategories } from '@/hooks/useCategories';
 import {
   createBudget,
   getOneBudget,
diff --git a/modules/Budget/container/list-budget.container.tsx b/modules/Budget/container/list-budget.container.tsx
index d89fc27..3a1e1b1 100644
--- a/modules/Budget/container/list-budget.container.tsx
+++ b/modules/Budget/container/list-budget.container.tsx
@@ -7,7 +7,7 @@ import BaseList from '@Modules/BaseModule/container/BaseList';
 import { BillTypes } from '@Modules/Bill/constants/Types';
 import { useUser } from '@Authentication/context/UserContext';
 import { deleteBudget, getAllBudgets, IBudget } from '@Modules/Budget/services/budget.service';
-import { useCategories } from '@Modules/Category/hooks/useCategories';
+import { useCategories } from '@/hooks/useCategories';
 import { FormBudget } from '@Modules/Budget/components/form-budget.component';
 
 export const ListBudgetContainer = () => {
diff --git a/package.json b/package.json
index a959826..2be24fa 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,9 @@
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
     "@hookform/resolvers": "^2.8.2",
+    "@nivo/bar": "^0.84.0",
+    "@nivo/core": "^0.84.0",
+    "@nivo/pie": "^0.84.0",
     "firebase": "^8.9.1",
     "framer-motion": "^4",
     "next": "^12.0.0",
@@ -40,4 +43,4 @@
     "sass": "^1.69.5",
     "typescript": "^4.3.5"
   }
-}
\ No newline at end of file
+}
diff --git a/pages/analytics.tsx b/pages/analytics.tsx
new file mode 100644
index 0000000..0dcd35d
--- /dev/null
+++ b/pages/analytics.tsx
@@ -0,0 +1,8 @@
+import withLateralMenu from '@/hoc/withLateralMenu';
+import { ListAnalyticsContainer } from '@Modules/Analytics/container/list-analytics.container';
+
+const Analytics = () => {
+  return <ListAnalyticsContainer />;
+};
+
+export default withLateralMenu(Analytics);
diff --git a/yarn.lock b/yarn.lock
index 454898a..04146b7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1403,6 +1403,153 @@
   resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.0.0.tgz#c19e6cfdb1cebe088ea663d6405a6ed76fc4e79d"
   integrity sha512-NMZRwS59X4+yQT53jROZMcboiPVd6zCGlEN3kuPewelTDVwKAXxzhpLuxCO46e0ssol8UZiOTdgB4NPVbsLK2A==
 
+"@nivo/annotations@0.84.0":
+  version "0.84.0"
+  resolved "https://registry.yarnpkg.com/@nivo/annotations/-/annotations-0.84.0.tgz#488b18599e494ec12be8fdcb270d9ae85b8a7b91"
+  integrity sha512-g3n+WaZgRza7fZVQZrrxq1cLS+6vmjhWGmQqEynFmKM2f11F7gdkHLhGMYosayjZ0Sb/bMUXvBSkUbyKli7NVw==
+  dependencies:
+    "@nivo/colors" "0.84.0"
+    "@nivo/core" "0.84.0"
+    "@react-spring/web" "9.4.5 || ^9.7.2"
+    "@types/prop-types" "^15.7.2"
+    lodash "^4.17.21"
+    prop-types "^15.7.2"
+
+"@nivo/arcs@0.84.0":
+  version "0.84.0"
+  resolved "https://registry.yarnpkg.com/@nivo/arcs/-/arcs-0.84.0.tgz#e080cdc7d09e4abaf7f74004f9cc5af69b80d22f"
+  integrity sha512-6i6CQmqdk7KZnaYmg8l0jqElQM19LJ/29WlxwVtDW43iQD0AqDzXb/eIwzZSZwf8sfGP8e8vvapkESlfkmzuPw==
+  dependencies:
+    "@nivo/colors" "0.84.0"
+    "@nivo/core" "0.84.0"
+    "@react-spring/web" "9.4.5 || ^9.7.2"
+    "@types/d3-shape" "^2.0.0"
+    d3-shape "^1.3.5"
+
+"@nivo/axes@0.84.0":
+  version "0.84.0"
+  resolved "https://registry.yarnpkg.com/@nivo/axes/-/axes-0.84.0.tgz#f3d288cfc3c6f77b86c557c350f1b63fe5be7b29"
+  integrity sha512-bC9Rx5ixGJiupTRXSnATIVRLPcx0HR8yXGBuO8GTy6K1DDnhaNWfhErnBLYbB9Sq13WQGrS2he6uvLVLd23CtA==
+  dependencies:
+    "@nivo/core" "0.84.0"
+    "@nivo/scales" "0.84.0"
+    "@react-spring/web" "9.4.5 || ^9.7.2"
+    "@types/d3-format" "^1.4.1"
+    "@types/d3-time-format" "^2.3.1"
+    "@types/prop-types" "^15.7.2"
+    d3-format "^1.4.4"
+    d3-time-format "^3.0.0"
+    prop-types "^15.7.2"
+
+"@nivo/bar@^0.84.0":
+  version "0.84.0"
+  resolved "https://registry.yarnpkg.com/@nivo/bar/-/bar-0.84.0.tgz#7bbf2c78c2381d26ff3d4c1a9b960bc5bd49ad7d"
+  integrity sha512-sOiC980VKS+SOnVSGPlG/nd2ssmz4b6iqIZY/POvwSkB8gvUFz6Bk6lBGXlVNxh1xHaYplVhyl1Tp2NpIWPcAA==
+  dependencies:
+    "@nivo/annotations" "0.84.0"
+    "@nivo/axes" "0.84.0"
+    "@nivo/colors" "0.84.0"
+    "@nivo/core" "0.84.0"
+    "@nivo/legends" "0.84.0"
+    "@nivo/scales" "0.84.0"
+    "@nivo/tooltip" "0.84.0"
+    "@react-spring/web" "9.4.5 || ^9.7.2"
+    "@types/d3-scale" "^3.2.3"
+    "@types/d3-shape" "^2.0.0"
+    d3-scale "^3.2.3"
+    d3-shape "^1.3.5"
+    lodash "^4.17.21"
+
+"@nivo/colors@0.84.0":
+  version "0.84.0"
+  resolved "https://registry.yarnpkg.com/@nivo/colors/-/colors-0.84.0.tgz#03fa4e8f8ad045a916ba210d78f125122c704beb"
+  integrity sha512-wNG1uYyDP5Owc1Pdkz0zesdZCrPAywmSssNzQ2Aju7nVs7Ru7iHNBIvOAGgyXTe2gcrIO9VSasXWR+jEYyxN2Q==
+  dependencies:
+    "@nivo/core" "0.84.0"
+    "@types/d3-color" "^2.0.0"
+    "@types/d3-scale" "^3.2.3"
+    "@types/d3-scale-chromatic" "^2.0.0"
+    "@types/prop-types" "^15.7.2"
+    d3-color "^3.1.0"
+    d3-scale "^3.2.3"
+    d3-scale-chromatic "^2.0.0"
+    lodash "^4.17.21"
+    prop-types "^15.7.2"
+
+"@nivo/core@0.84.0", "@nivo/core@^0.84.0":
+  version "0.84.0"
+  resolved "https://registry.yarnpkg.com/@nivo/core/-/core-0.84.0.tgz#2bde01f2bf590e37fe98adae8ba43766d9e78c4c"
+  integrity sha512-HyQM4x4B7d4X9+xLPKkPxqIxhSDzbJUywGTDWHWx1daeX9VP8O+MqkTBsNsoB+tjxrbKrRJ0+ceS2w89JB+qrA==
+  dependencies:
+    "@nivo/recompose" "0.84.0"
+    "@nivo/tooltip" "0.84.0"
+    "@react-spring/web" "9.4.5 || ^9.7.2"
+    "@types/d3-shape" "^2.0.0"
+    d3-color "^3.1.0"
+    d3-format "^1.4.4"
+    d3-interpolate "^3.0.1"
+    d3-scale "^3.2.3"
+    d3-scale-chromatic "^3.0.0"
+    d3-shape "^1.3.5"
+    d3-time-format "^3.0.0"
+    lodash "^4.17.21"
+
+"@nivo/legends@0.84.0":
+  version "0.84.0"
+  resolved "https://registry.yarnpkg.com/@nivo/legends/-/legends-0.84.0.tgz#d89def3427aaa509721a9b6f38c813dd38401aff"
+  integrity sha512-o0s1cXoIH6Km9A2zoKB8Ey99Oc1w5nymz0j8s7hR2B0EHo5HgVbYjSs2sZD7NSwLt3QM57Nzxw9VzJ+sqfV30Q==
+  dependencies:
+    "@nivo/colors" "0.84.0"
+    "@nivo/core" "0.84.0"
+    "@types/d3-scale" "^3.2.3"
+    "@types/prop-types" "^15.7.2"
+    d3-scale "^3.2.3"
+    prop-types "^15.7.2"
+
+"@nivo/pie@^0.84.0":
+  version "0.84.0"
+  resolved "https://registry.yarnpkg.com/@nivo/pie/-/pie-0.84.0.tgz#b295f8f8c6da8fd74460aed6e00de64e4d58a386"
+  integrity sha512-yM8oe162YlOKFZkpVhSF+9J/F3rhyUc+gS9M3M+HyVqzXM3xOKjZiqd5tckgFbvTixDK6FLsSBHzH2SRij/hDQ==
+  dependencies:
+    "@nivo/arcs" "0.84.0"
+    "@nivo/colors" "0.84.0"
+    "@nivo/core" "0.84.0"
+    "@nivo/legends" "0.84.0"
+    "@nivo/tooltip" "0.84.0"
+    "@types/d3-shape" "^2.0.0"
+    d3-shape "^1.3.5"
+
+"@nivo/recompose@0.84.0":
+  version "0.84.0"
+  resolved "https://registry.yarnpkg.com/@nivo/recompose/-/recompose-0.84.0.tgz#c65f8dcf5053d17c1cedfe88c248b3486305807f"
+  integrity sha512-Odb+r0pEmGt4RV020jwvngF7PxBgxS1e1sy8bWlZKc5qkm6k3eVlZNuYU+zGbDxHMigImvrx5KfUv5iUqtQBZA==
+  dependencies:
+    "@types/prop-types" "^15.7.2"
+    "@types/react-lifecycles-compat" "^3.0.1"
+    prop-types "^15.7.2"
+    react-lifecycles-compat "^3.0.4"
+
+"@nivo/scales@0.84.0":
+  version "0.84.0"
+  resolved "https://registry.yarnpkg.com/@nivo/scales/-/scales-0.84.0.tgz#a066aaad24d14200bc3780575ef9be88a3b25014"
+  integrity sha512-Cayo9jFMpoF7Ha7eqOAucHLUG6zZLGpxiAtyZ/vTUCkRZPHmd/YMvrm8E6OyQCTBVf+aRtOKk9tQnMv8E9fWiw==
+  dependencies:
+    "@types/d3-scale" "^3.2.3"
+    "@types/d3-time" "^1.1.1"
+    "@types/d3-time-format" "^3.0.0"
+    d3-scale "^3.2.3"
+    d3-time "^1.0.11"
+    d3-time-format "^3.0.0"
+    lodash "^4.17.21"
+
+"@nivo/tooltip@0.84.0":
+  version "0.84.0"
+  resolved "https://registry.yarnpkg.com/@nivo/tooltip/-/tooltip-0.84.0.tgz#f033798f1d09af5b2de7fa36ee91faa75543c5d8"
+  integrity sha512-x/6Vk4RXKHkG9q5dk4uFYwEfbMoIvJd5ahhVQ6bskuLks5FZoS6bkKoNggjxwmHbIWOVITGUXuykOfC54EWSpw==
+  dependencies:
+    "@nivo/core" "0.84.0"
+    "@react-spring/web" "9.4.5 || ^9.7.2"
+
 "@node-rs/helper@1.2.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@node-rs/helper/-/helper-1.2.1.tgz#e079b05f21ff4329d82c4e1f71c0290e4ecdc70c"
@@ -1521,11 +1668,104 @@
     prop-types "^15.7.2"
     tslib "^2.1.0"
 
+"@react-spring/animated@~9.7.3":
+  version "9.7.3"
+  resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.7.3.tgz#4211b1a6d48da0ff474a125e93c0f460ff816e0f"
+  integrity sha512-5CWeNJt9pNgyvuSzQH+uy2pvTg8Y4/OisoscZIR8/ZNLIOI+CatFBhGZpDGTF/OzdNFsAoGk3wiUYTwoJ0YIvw==
+  dependencies:
+    "@react-spring/shared" "~9.7.3"
+    "@react-spring/types" "~9.7.3"
+
+"@react-spring/core@~9.7.3":
+  version "9.7.3"
+  resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.7.3.tgz#60056bcb397f2c4f371c6c9a5f882db77ae90095"
+  integrity sha512-IqFdPVf3ZOC1Cx7+M0cXf4odNLxDC+n7IN3MDcVCTIOSBfqEcBebSv+vlY5AhM0zw05PDbjKrNmBpzv/AqpjnQ==
+  dependencies:
+    "@react-spring/animated" "~9.7.3"
+    "@react-spring/shared" "~9.7.3"
+    "@react-spring/types" "~9.7.3"
+
+"@react-spring/shared@~9.7.3":
+  version "9.7.3"
+  resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.7.3.tgz#4cf29797847c689912aec4e62e34c99a4d5d9e53"
+  integrity sha512-NEopD+9S5xYyQ0pGtioacLhL2luflh6HACSSDUZOwLHoxA5eku1UPuqcJqjwSD6luKjjLfiLOspxo43FUHKKSA==
+  dependencies:
+    "@react-spring/types" "~9.7.3"
+
+"@react-spring/types@~9.7.3":
+  version "9.7.3"
+  resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.7.3.tgz#ea78fd447cbc2612c1f5d55852e3c331e8172a0b"
+  integrity sha512-Kpx/fQ/ZFX31OtlqVEFfgaD1ACzul4NksrvIgYfIFq9JpDHFwQkMVZ10tbo0FU/grje4rcL4EIrjekl3kYwgWw==
+
+"@react-spring/web@9.4.5 || ^9.7.2":
+  version "9.7.3"
+  resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.7.3.tgz#d9f4e17fec259f1d65495a19502ada4f5b57fa3d"
+  integrity sha512-BXt6BpS9aJL/QdVqEIX9YoUy8CE6TJrU0mNCqSoxdXlIeNcEBWOfIyE6B14ENNsyQKS3wOWkiJfco0tCr/9tUg==
+  dependencies:
+    "@react-spring/animated" "~9.7.3"
+    "@react-spring/core" "~9.7.3"
+    "@react-spring/shared" "~9.7.3"
+    "@react-spring/types" "~9.7.3"
+
 "@rushstack/eslint-patch@^1.0.6":
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.0.6.tgz#023d72a5c4531b4ce204528971700a78a85a0c50"
   integrity sha512-Myxw//kzromB9yWgS8qYGuGVf91oBUUJpNvy5eM50sqvmKLbKjwLxohJnkWGTeeI9v9IBMtPLxz5Gc60FIfvCA==
 
+"@types/d3-color@^2.0.0":
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/@types/d3-color/-/d3-color-2.0.6.tgz#88a9a06afea2d3a400ea650a6c3e60e9bf9b0f2a"
+  integrity sha512-tbaFGDmJWHqnenvk3QGSvD3RVwr631BjKRD7Sc7VLRgrdX5mk5hTyoeBL6rXZaeoXzmZwIl1D2HPogEdt1rHBg==
+
+"@types/d3-format@^1.4.1":
+  version "1.4.5"
+  resolved "https://registry.yarnpkg.com/@types/d3-format/-/d3-format-1.4.5.tgz#6392303c2ca3c287c3a1a2046455cd0a0bd50bbe"
+  integrity sha512-mLxrC1MSWupOSncXN/HOlWUAAIffAEBaI4+PKy2uMPsKe4FNZlk7qrbTjmzJXITQQqBHivaks4Td18azgqnotA==
+
+"@types/d3-path@^2":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@types/d3-path/-/d3-path-2.0.4.tgz#6b2893c23ec01788f79f7a6ec39eaaf9a6732af4"
+  integrity sha512-jjZVLBjEX4q6xneKMmv62UocaFJFOTQSb/1aTzs3m3ICTOFoVaqGBHpNLm/4dVi0/FTltfBKgmOK1ECj3/gGjA==
+
+"@types/d3-scale-chromatic@^2.0.0":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@types/d3-scale-chromatic/-/d3-scale-chromatic-2.0.4.tgz#7376660736efc734daf75228d7f08e9029cefe1d"
+  integrity sha512-OUgfg6wmoZVhs0/pV8HZhsMw7pYJnS6smfNK2S5ogMaPHfDUaTMu7JA5ssZrRupwf2vWI+haPAuUpsz+M1BOKA==
+
+"@types/d3-scale@^3.2.3":
+  version "3.3.5"
+  resolved "https://registry.yarnpkg.com/@types/d3-scale/-/d3-scale-3.3.5.tgz#c89ff1550a4246f717e3c2e35deb35e183a338ba"
+  integrity sha512-YOpKj0kIEusRf7ofeJcSZQsvKbnTwpe1DUF+P2qsotqG53kEsjm7EzzliqQxMkAWdkZcHrg5rRhB4JiDOQPX+A==
+  dependencies:
+    "@types/d3-time" "^2"
+
+"@types/d3-shape@^2.0.0":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@types/d3-shape/-/d3-shape-2.1.7.tgz#7c3bd6a9c758b54ba495cab0575cb18359251123"
+  integrity sha512-HedHlfGHdwzKqX9+PiQVXZrdmGlwo7naoefJP7kCNk4Y7qcpQt1tUaoRa6qn0kbTdlaIHGO7111qLtb/6J8uuw==
+  dependencies:
+    "@types/d3-path" "^2"
+
+"@types/d3-time-format@^2.3.1":
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/@types/d3-time-format/-/d3-time-format-2.3.4.tgz#544af5184df8b3fc4d9b42b14058789acee2905e"
+  integrity sha512-xdDXbpVO74EvadI3UDxjxTdR6QIxm1FKzEA/+F8tL4GWWUg/hgvBqf6chql64U5A9ZUGWo7pEu4eNlyLwbKdhg==
+
+"@types/d3-time-format@^3.0.0":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/d3-time-format/-/d3-time-format-3.0.4.tgz#f972bdd7be1048184577cf235a44721a78c6bb4b"
+  integrity sha512-or9DiDnYI1h38J9hxKEsw513+KVuFbEVhl7qdxcaudoiqWWepapUen+2vAriFGexr6W5+P4l9+HJrB39GG+oRg==
+
+"@types/d3-time@^1.1.1":
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-1.1.4.tgz#20da4b75c537a940e7319b75717c67a2e499515a"
+  integrity sha512-JIvy2HjRInE+TXOmIGN5LCmeO0hkFZx5f9FZ7kiN+D+YTcc8pptsiLiuHsvwxwC7VVKmJ2ExHUgNlAiV7vQM9g==
+
+"@types/d3-time@^2":
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-2.1.4.tgz#43587aa57d565ab60a1d2201edeebc497d5c1252"
+  integrity sha512-BTfLsxTeo7yFxI/haOOf1ZwJ6xKgQLT9dCp+EcmQv87Gox6X+oKl4mLKfO6fnWm3P22+A6DknMNEZany8ql2Rw==
+
 "@types/json-schema@^7.0.7":
   version "7.0.9"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d"
@@ -1568,6 +1808,27 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
   integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
 
+"@types/prop-types@^15.7.2":
+  version "15.7.11"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.11.tgz#2596fb352ee96a1379c657734d4b913a613ad563"
+  integrity sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==
+
+"@types/react-lifecycles-compat@^3.0.1":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#87eb56ce6cce9e9db4557825ab559d90f72995dc"
+  integrity sha512-1CM48Y9ztL5S4wjt7DK2izrkgPp/Ql0zCJu/vHzhgl7J+BD4UbSGjHN1M2TlePms472JvOazUtAO1/G3oFZqIQ==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*":
+  version "18.2.38"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.38.tgz#3605ca41d3daff2c434e0b98d79a2469d4c2dd52"
+  integrity sha512-cBBXHzuPtQK6wNthuVMV6IjHAFkdl/FOPFIlkd81/Cd1+IqkHu/A+w4g43kaQQoYHik/ruaQBDL72HyCy1vuMw==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/react@17.0.16":
   version "17.0.16"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.16.tgz#056f40c45645761527baeb7d89d842a6abdf285a"
@@ -2351,6 +2612,105 @@ csstype@^3.0.2, csstype@^3.0.6:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.8.tgz#d2266a792729fb227cd216fb572f43728e1ad340"
   integrity sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==
 
+d3-array@2, d3-array@^2.3.0:
+  version "2.12.1"
+  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-2.12.1.tgz#e20b41aafcdffdf5d50928004ececf815a465e81"
+  integrity sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==
+  dependencies:
+    internmap "^1.0.0"
+
+"d3-color@1 - 2":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-2.0.0.tgz#8d625cab42ed9b8f601a1760a389f7ea9189d62e"
+  integrity sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ==
+
+"d3-color@1 - 3", d3-color@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-3.1.0.tgz#395b2833dfac71507f12ac2f7af23bf819de24e2"
+  integrity sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==
+
+"d3-format@1 - 2":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-2.0.0.tgz#a10bcc0f986c372b729ba447382413aabf5b0767"
+  integrity sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA==
+
+d3-format@^1.4.4:
+  version "1.4.5"
+  resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.4.5.tgz#374f2ba1320e3717eb74a9356c67daee17a7edb4"
+  integrity sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ==
+
+"d3-interpolate@1 - 2", "d3-interpolate@1.2.0 - 2":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-2.0.1.tgz#98be499cfb8a3b94d4ff616900501a64abc91163"
+  integrity sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==
+  dependencies:
+    d3-color "1 - 2"
+
+"d3-interpolate@1 - 3", d3-interpolate@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-3.0.1.tgz#3c47aa5b32c5b3dfb56ef3fd4342078a632b400d"
+  integrity sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==
+  dependencies:
+    d3-color "1 - 3"
+
+d3-path@1:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.9.tgz#48c050bb1fe8c262493a8caf5524e3e9591701cf"
+  integrity sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==
+
+d3-scale-chromatic@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-scale-chromatic/-/d3-scale-chromatic-2.0.0.tgz#c13f3af86685ff91323dc2f0ebd2dabbd72d8bab"
+  integrity sha512-LLqy7dJSL8yDy7NRmf6xSlsFZ6zYvJ4BcWFE4zBrOPnQERv9zj24ohnXKRbyi9YHnYV+HN1oEO3iFK971/gkzA==
+  dependencies:
+    d3-color "1 - 2"
+    d3-interpolate "1 - 2"
+
+d3-scale-chromatic@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz#15b4ceb8ca2bb0dcb6d1a641ee03d59c3b62376a"
+  integrity sha512-Lx9thtxAKrO2Pq6OO2Ua474opeziKr279P/TKZsMAhYyNDD3EnCffdbgeSYN5O7m2ByQsxtuP2CSDczNUIZ22g==
+  dependencies:
+    d3-color "1 - 3"
+    d3-interpolate "1 - 3"
+
+d3-scale@^3.2.3:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-3.3.0.tgz#28c600b29f47e5b9cd2df9749c206727966203f3"
+  integrity sha512-1JGp44NQCt5d1g+Yy+GeOnZP7xHo0ii8zsQp6PGzd+C1/dl0KGsp9A7Mxwp+1D1o4unbTTxVdU/ZOIEBoeZPbQ==
+  dependencies:
+    d3-array "^2.3.0"
+    d3-format "1 - 2"
+    d3-interpolate "1.2.0 - 2"
+    d3-time "^2.1.1"
+    d3-time-format "2 - 3"
+
+d3-shape@^1.3.5:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.3.7.tgz#df63801be07bc986bc54f63789b4fe502992b5d7"
+  integrity sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==
+  dependencies:
+    d3-path "1"
+
+"d3-time-format@2 - 3", d3-time-format@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-3.0.0.tgz#df8056c83659e01f20ac5da5fdeae7c08d5f1bb6"
+  integrity sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==
+  dependencies:
+    d3-time "1 - 2"
+
+"d3-time@1 - 2", d3-time@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-2.1.1.tgz#e9d8a8a88691f4548e68ca085e5ff956724a6682"
+  integrity sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==
+  dependencies:
+    d3-array "2"
+
+d3-time@^1.0.11:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-1.1.0.tgz#b1e19d307dae9c900b7e5b25ffc5dcc249a8a0f1"
+  integrity sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA==
+
 damerau-levenshtein@^1.0.6:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.7.tgz#64368003512a1a6992593741a09a9d31a836f55d"
@@ -3292,6 +3652,11 @@ internal-slot@^1.0.3:
     has "^1.0.3"
     side-channel "^1.0.4"
 
+internmap@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/internmap/-/internmap-1.0.1.tgz#0017cc8a3b99605f0302f2b198d272e015e5df95"
+  integrity sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==
+
 invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
@@ -4320,6 +4685,11 @@ react-is@^16.7.0, react-is@^16.8.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-lifecycles-compat@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
+
 react-onclickoutside@^6.10.0:
   version "6.11.2"
   resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.11.2.tgz#790e2100b9a3589eefca1404ecbf0476b81b7928"

From d107579d71f07ef4fa20af44c926de888db229f1 Mon Sep 17 00:00:00 2001
From: Victor Lucas <victorlcmonteiro@gmail.com>
Date: Tue, 21 Nov 2023 21:30:48 -0500
Subject: [PATCH 7/8] fix: remove unused service by now

---
 modules/Analytics/services/alaytics.services.ts | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 modules/Analytics/services/alaytics.services.ts

diff --git a/modules/Analytics/services/alaytics.services.ts b/modules/Analytics/services/alaytics.services.ts
deleted file mode 100644
index e69de29..0000000

From 06a5dd428948c45184987f1a80e6737924154139 Mon Sep 17 00:00:00 2001
From: Victor Lucas <victorlcmonteiro@gmail.com>
Date: Tue, 21 Nov 2023 21:32:08 -0500
Subject: [PATCH 8/8] feat: notify errors

---
 .../Bill/container/FormBill/form-bill.container.tsx    | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/modules/Bill/container/FormBill/form-bill.container.tsx b/modules/Bill/container/FormBill/form-bill.container.tsx
index 723b180..f27762e 100644
--- a/modules/Bill/container/FormBill/form-bill.container.tsx
+++ b/modules/Bill/container/FormBill/form-bill.container.tsx
@@ -28,11 +28,6 @@ const recurrenceTypes = [
     label: 'Cada mês',
     value: 'EVERY_MONTH',
   },
-  // TODO: every year recurrence
-  //  {
-  //    label: 'Cada ano',
-  //    value: 'EVERY_YEAR',
-  //  },
 ];
 
 interface FormBillProps {
@@ -129,7 +124,10 @@ export const FormBillContainer = ({ billId }: FormBillProps) => {
 
       router.push('/');
     } catch (error) {
-      console.error(error);
+      toast({
+        description: error.message,
+        status: 'error',
+      });
     }
   };