# Ez Finance Dashboard

*** ## 🔗Links [**Template Link on Bubble Marketplace**](https://bubble.io/template/ez-finance-dashboard-1681904041616x950594462238638000) [**Template Link on Our Website**](https://eazycode.com/template/ez-finance-dashboard-1692021503235x466255490125073900) [**Preview Link**](https://ez-finance-dashboard.bubbleapps.io/) [**Forum Link**](https://forum.bubble.io/t/new-ez-finance-dashboard-template-by-eazycode/272921) *** ## Photos {% tabs %} {% tab title="1" %}

{% endtab %} {% tab title="2" %}

{% endtab %} {% tab title="3" %}

{% endtab %} {% tab title="4" %}

{% endtab %} {% tab title="5" %}

{% endtab %} {% tab title="6" %}

{% endtab %} {% tab title="7" %}

{% endtab %} {% endtabs %} *** ## Introduction Ez Finance Dashboard is a modern web template designed for those who want to manage their money effectively. This template provides powerful tools for managing and monitoring financial transactions. With our template, you can easily track and analyze financial data, manage your investment portfolio, and monitor your budget. Integration with Plaid provides secure and convenient access to financial data, making it easy to manage bank accounts, complete transactions, and monitor financial health. The application includes: * **Overview Tab Dashboard** - Offers accurate control over the movement of funds across accounts, payment history, and income/expense schedules. * **Autopay & Templates** - We've included an auto-payment feature to help you remember to pay your bills. Additionally, for payments with varying amounts, we've added the "templates" function. * **Transactions** - We've included additional filters to speed up the search for required payments. Our template is fully compatible and responsive across all device types. Our team has developed this template in line with up-to-date UX/UI design standards, providing an intuitive interface and visually pleasing aesthetics. While we sell the template as is, we remain open to discussing additional modifications. Before purchasing the template, we recommend checking out the preview section. If you have any questions or require further clarification, please do not hesitate to contact us, and we'll be delighted to assist and tailor a solution to suit your needs. *** ## Features * **Dashboard** * **Transactions** * **Payments** * **Invoicing** * **Trading** * **Reports** * **Responsive design** *** ## Notes {% hint style="info" %} **Important note**: After purchasing this template and customizing it, be sure that you had a chance to learn how to set up data security. Check all privacy settings by the following link before launch: [***Bubble Privacy*** ](https://manual.bubble.io/help-guides/data/the-database/protecting-data-with-privacy-rules) Since access to objects differs in each application and is unique for each case, ensure you have established all the privacy rules. {% endhint %} {% hint style="danger" %} This template is not the final product. Any part of the application can be modified for different needs. {% endhint %} *** ## Pages ### index This page presents the features of this application. Also, on this page, clients can find links to other EazyCode templates on this topic. ### authorization This is the Sign-In / Sign-Up page. ### dashboard This is a user panel page. The page displays nine tabs. * **Dashboard** - This tab contains general information about the current user's finances, including expenses and income graphs, a list of transactions, a list of added bank cards, and the total balance. * [**Plaid**](#plaid) **Connect** - This is the PLAID connection tab. On this tab, the user can connect Plaid account and make ACH transfers. * **Wallet** - This tab with a list of all added bank cards. The user can add/delete/ edit any of them. For each card, he has a list of options, such as: setting a limit, replenishing the balance, making a transfer, changing the PIN code, blocking, and reissuing the card. * **Transactions** - This tab displays a list of all completed transactions, with the option to filter the list by date, credit card, category, and status. * **Payments** - A tab for creating automatic payments, templates, and making transfers of any type. * **Invoicing** - In this tab, the user can see the list of invoices, and their status. Also, create new invoices. * **Trading** - This tab displays stock market trends. * **Reports** - This tab displays categories by customer spending. * **Settings** - Tab with user personal information and change password form. ### reset\_pw This page allows the user to reset the password. ### 404 This page appears when something goes wrong in the app's work *** ## Reusable elements ### Footer This reusable element includes links to the EazyCode templates, socials, and personal web. ### Header This reusable element includes the app navigation panel. ### header dashboard This reusable element includes the app navigation panel while a user logged in. *** ## Workflow Highlighting the workflow with color is a great way to separate actions in essence and significance. Below is the EazyCode standard for the use of colors with a detailed explanation. {% hint style="warning" %} The standards below are for informational purposes only. Any discrepancy is not related to the functionality of the application. {% endhint %} **Blue** - The actions taking place on our screen do not utilize the application's resources. For instance, when an element is clicked and a popup is opened or closed.

**Green** - These actions involve creating or modifying entries in the database. For example, "Create a new Thing," "Make changes to a thing or a list of things," as well as "Copy a list of things," and so on.

**Red** - This action involves deleting or resetting values. For instance, "Delete a thing or a list of things," as well as "Reset a group" and "Reset inputs."

**Orange** - Actions related to your navigation. For example, "Navigate to a page," or "Do when a condition is true" – when you use specific values for checking, such as "When the current user is logged in," and so on.

**Cyan** - Actions utilizing Custom Events – lengthy tasks that involve the creation, modification, deletion, and plugins within a single comprehensive workflow as steps.

**Brown** - Custom workflow, API workflow, and similar tasks.

**Purple** - The significance of this color is determined by the developer themselves, as it is done due to the fact that everyone has their own approach to development.

**Grey** - All other actions.

*** ## Plaid Plaid is a financial technology company that provides a platform for connecting financial accounts with various applications and services. It acts as an intermediary between consumers, banks, and fintech apps, allowing users to securely link their bank accounts, credit cards, and other financial accounts to these apps. The Plaid platform provides developers with tools and APIs to access and work with financial data, enabling features such as account verification, balance checking, transaction history access, and more. This allows fintech apps to offer a range of services like budgeting tools, investment advice, loan applications, and payment options, all while keeping data secure and compliant with regulations. {% hint style="info" %} Below is a step-by-step instruction for configuring the plugin. {% endhint %} 1. Install the [**Ez Plaid Connect & ACH Transfers**](https://bubble.io/plugin/ez-plaid-connect--ach-transfers-1692018511967x124389103328296960) plugin.

2. For each call in the plugin, two keys are required: the client ID and the secret key. They are repeated in every call. You can get these keys for free by registering at this link:

3. You need to get keys in your dashboard:

4. There are 3 types of environments in the Plaid ecosystem. Sandbox, development, production. To get started, we recommend choosing Sandbox and trying to integrate this test environment. Each call has a required parameter to fill in. It can be dynamic depending on your conditions.

5. The last step in the dashboard panel of the Plaid, you need to type "redirect URL" of your application. In our case, we want the user to return to the dashboard page after authorization. 2 links for the test and live version.

6. You are ready to start integration. The first step is to create a link token using the "Get Link Token" plugin API data call, filling in the fields of the main settings of your application. In the following example, we immediately write "link\_loken" in the current user field. In the Call Data parameters, we specify the user ID, Application Name, and a link to the created Endpoint (Backend Workflow) for the subsequent configuration of the webhook and our specified redirect URI.

7. Next, you need to install the plugin element (Windows Auth) in your App. It is required to specify our saved link token for authorization to work. In the preview, with the correct link token, you will have the opportunity to select a bank to connect to. For test mode, we recommend using "Chase"

8. After passing the authorization stage, you are returned to the "redirect uri" that you entered earlier in Plaid Dash. The link will contain the oauth\_state\_id parameter, which you will accept on the BUBBLE side when the page is loaded. You create a workflow and the first step is to set the plugin action - Handle Public Key.

9. Next step, install the Plugin Event upon successful generation of the Public Key.

10. Inside the event, your first action is to exchange your public key for the main "access token" using the Public Token Exchange API call.

11. In response to your call, the next step you can use is an "access token". In our example, we write it to the current user field.

12. Using this token, you can get permission to conduct subsequent ACH transactions or use this token in conjunction with other Plaid BUBBLE plugins.

To get data about the current account and available payment methods, use the plugin call - "Get Account Info" *** ## Data Types {% hint style="info" %} This data type contains information only for demonstration purposes. {% endhint %} ### Card This data type is used to store bank card proprieties.

Field name	Type	Notes
`accountNumber`	`text`	Stores the card account number.
`balance`	`number`	Stores the card balance.
`block`	`yes/no`	Stores the card status(blocked or not).
`cardCredit`	`number`	Stores the credit card number.
`cardholder`	`text`	Stores the card holder name.
`cardLimit`	`number`	Stores the card limit.
`cardName`	`text`	Stores the card title.
`cardNumber`	`number`	Stores the card number.
`expirationDate`	`date`	Stores the card expiration date.
`image`	`image`	Stores the card image.
`image on click`	`image`	Stores the card image when clicked.
`PINcode`	`text`	Stores the card PIN code.
`valid`	`text`	Stores the card valid information.

### Chart Sectors This data type is used to store chart proprieties in the trading tab.

Field name	Type	Notes	Notes
`name`	`text`	Stores the sector title.
`percent`	`numebr`	Stores the sector percentage.

### ChartBreakdown This data type is used to store chart proprieties in the report tab.

Field name	Type	Notes	Notes
`Labes`	`Chat`	Stores the sector title.
`num`	`text`	Stores the sector percentage.

### ChartJs This data type is used to store chart proprieties in the dashboard tab.

Field name	Type	Notes
`LabelsMonth`	`text`	Stores the chart month.
`lable Week`	`text`	Stores the chart week.
`MonthExp`	`number`	Stores the month expenses value.
`MonthInc`	`number`	Stores the month income value.
`WeekExp`	`number`	Stores the week expenses value.
`weekInc`	`number`	Stores the week income value.

### Checkout This data type is used to store transfer proprieties.

Field name	Type	Notes
`additionalData`	`text`	Stores the transfer message.
`card`	`Card`	Stores the card data type.
`Complete`	`yes/no`	Stores the transfer status(done or not).
`providers`	`Service_Providers`	Stores the service provider data type.
`serviceCategory`	`Service_Category`	Stores the service category data type.
`theAmount`	`number`	Stores the transfer ammount.

### Commodities Chart This data type is used to store commodities chart proprieties in the trading tab.

Field name	Type	Notes
`Date`	`date`	Stores the chart date.
`last`	`number`	Stores the chart value number.
`last2`	`number`	Stores the chart value number.
`last3`	`number`	Stores the chart value number.
`last4`	`number`	Stores the chart value number.

### Currencies This data type is used to store currency proprieties in the trading tab.

Field name	Type	Notes
`% Change`	`number`	Stores the currency change percentage.
`Change`	`number`	Stores the currency change vlaue.
`Price`	`number`	Stores the currency price.
`Symbol`	`text`	Stores the currency symbol.
`SymbolImage`	`image`	Stores the currency symbol image.

### Invoicing This data type is used to store invoicing proprieties.

Field name	Type	Notes
`Amount`	`number`	Stores the invoice amount.
`Due date`	`date`	Stores the invoice due date.
`ID`	`text`	Stores the invoice ID.
`Name`	`text`	Stores the invoice title.
`status`	`Status`	Stores the status option set.

### Service\_Category This data type is used to store service category proprieties.

Field name	Type	Notes
`name`	`text`	Stores the category title.
`service`	`Service_Providers`	Stores the service providers data type.
`serviceProviders`	`List of` `Service_Providerses`	Stores the service providers data type.

### Service\_Providers This data type is used to store service provider proprieties.

Field name	Type	Notes
`imageSubtype`	`image`	Stores the provider image.
`serviceCategory`	`Service_Category`	Stores the service category data type.
`subtype`	`text`	Stores the provider title.

### Templates This data type is used to store template proprieties.

Field name	Type	Notes
`automaticPayment`	`AutoPay`	Stores the auto pay option set.
`AutoPay`	`yes/no`	Stores the auto pay status(enable or not).
`templateAdditional`	`text`	Stores the template aditional informaition.
`templateAmount`	`number`	Stores the template ammount.
`templateCard`	`Card`	Stores the card data type.
`templateCategory`	`Service_Category`	Stores the service category data type.
`templateProviders`	`Service_Providers`	Stores the service provider data type.
`templateTitle`	`text`	Stores the template title.

### Transactions This data type is used to store transaction proprieties.

Field name	Type	Notes
`additionalData`	`text`	Stores the transaction ID.
`amount`	`number`	Stores the transaction ammount.
`card`	`Card`	Stores the card data type.
`checkout`	`Checkout`	Stores the checkout data type.
`status`	`Status`	Stores the status option set.

### Treasuries This data type is used to store treasure proprieties in the trading tab.

Field name	Type	Notes
`Asked`	`number`	Stores the treasure asked value.
`Asked Yield`	`number`	Stores the treasure asked yield value.
`Bid`	`number`	Stores the treasure bid value.
`CHG`	`number`	Stores the treasure CHG value.
`Coupon`	`number`	Stores the treasure coupon value.
`Maturity`	`text`	Stores the treasure maturity value.

### User This data type is used to store user proprieties.

Field name	Type	Notes
`card`	`Card`	Stores the card data type.
`Mobile`	`number`	Stores the user mobile number.
`name`	`text`	Stores the user full name.
`photo`	`image`	Stores the user image.
`Plaid` `Access Token`	`text`	Stores the user plaid access token.
`Plaid` `Session linkToken`	`text`	Stores the user plaid session link token.

*** ## Option sets ### AutoPay * Weekly * Monthly * Quarterly * Annually ### Status * Paid * Rejected * Unpaid ***

The template is sold as is, although additional modifications can be discussed. Feel free to contact us for any inquiries and we’ll be happy to find a solution for your ideas – **Hire us:**

\ \ **Follow us:**