The Frontend
============

The Frontend of the application is separated from the backend and located in the frontend directory. 
This allows us to create a Single Page Application (SPA) using popular frameworks such as VueJs, ReactJS, and React Native. For this project, VueJs was used.

The frontend directory contains the following structure:

.. code-block:: bash

    frontend/
    └── src
        ├── Components
        │   ├── Forms
        │   ├── Layouts
        │   └── Utils
        ├── Pages
        │   ├── 2FA
        │   ├── Auth
        │   ├── Dashboard
        │   ├── Errors
        │   ├── IPAuth
        │   ├── Management
        │   ├── Settings
        │   ├── System
        │   └── pages.js
        ├── index.js
        └── utils


- **src:** The source directory of the frontend.
    - **Components:** Directory containing reusable components.
        - **Forms:** Contains input and form components used in the frontend of the project.
        - **Layouts:** Directory with layouts for different sections of the frontend.
        - **Utils:** Directory containing utility components such as Notifications, Messages, Search, Pagination, among others.
    - **Pages:** Contains the system pages related to the component names rendered from the backend.
        - **2FA:** Screen for two-factor authentication.
        - **Auth:** Pages for authentication modules.
        - **Dashboard:** Index page of the application for customer and administrative users.
        - **Errors:** Screens for error pages.
        - **IpAuth:** Pages for IP authorization modules.
        - **Management:** Directory containing pages for administrative panel sections.
        - **Settings:** Screen for account configuration sections.
        - **System:** Sections for global configurations.
        - **pages.js:** File containing an object with the Component Name (key): Directory where to locate it.
    - **index.js:** Entry point of the application. Here the integration of InertiaJs with the VueJs framework is configured, which allows a monolithic backend like Django to render components like an SPA.
    - **utils:** Utilities in JavaScript used in the frontend.


How to link the backend with the frontend
-----------------------------------------

The ``pages.js`` file serves as a link between the component that the backend needs to render and its location. Let's see an example:

1. Backend

.. code-block:: python

    def index(request):
        props = {}
        component_key = "IndexCustomer"

        # Do something

        return render_inertia(request, component_key, props)

2. Frontend 

In the pages.js file, there must be an object that contains a key IndexCustomer and the path of the component to display:

.. code-block:: javascript

    const pages = {
        // ....
        "IndexCustomer": "Dashboard/Index.vue"
        // ...
    }

.. admonition:: Note

    Note that it is important that the value of the ``component_key`` matches a key in the pages object, which indicates the path of the component to be rendered.