{% extends 'Layouts/Doc/default.html.twig' %}

{% block title %}{{ 'app.documentation.menu.architecture.overview'|trans }}{% endblock %}
{% block headerPageTitle %}{{ 'app.documentation.menu.architecture.overview'|trans|upper }}{% endblock %}

{% block body %}
    <div class="card mb-12">
        <div class="card-body flex-column p-5">
            <div class="d-flex align-items-center h-lg-200px p-5 p-lg-15">
                <div class="row">
                    <div class="col-md-12 pt-5 scroll-y">
                        <h1 class="fw-bold fs-4 fs-lg-1 text-gray-800 mb-3">Architectural drivers</h1>
                        <div class="position-relative w-100 text-gray-800">
                            <p>All architectural decisions need to be backed by a valid reason. The fundamental signposts we use to take such choices, are explained in <a href="{{ path('foxorders_documentation_architectural_drivers') }}"><strong>Architectural Drivers section</strong></a>.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="d-flex align-items-center p-lg-15">
                <div class="row">
                    <div class="col-md-12 pt-5 scroll-y">
                        <h1 class="fw-bold fs-4 fs-lg-1 text-gray-800 mb-3">Architecture</h1>
                        <div class="position-relative w-100 text-gray-800">
                            <p>On the below image you can see the symbolic representation of Popina Order architecture.</p>
				            <img alt="Architecture" class="mt-10" src="{{ foxorders_doc ~ 'foxorders-architecure.jpeg' }}" style="width: 400px; height: 600px; margin: auto;display: block;"/>
                            <p class="mt-10">Keep on reading this chapter to learn more about each of its parts: Admin, Shop, Cash register, API, Core and Bundles.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="d-flex align-items-center p-lg-15">
                <div class="row">
                    <div class="col-md-12 pt-5 scroll-y">
                        <h1 class="fw-bold fs-4 fs-lg-1 text-gray-800 mb-3">Division into Core, Admin, Shop, Cash register and API</h1>

                        <h2 class="fs-3 mt-10">Core</h2>
                        <p>The <strong>Core</strong> is another component that integrates all the other components. The <strong>Core component</strong> is where all the logic and implementations that are useful for our project's operations are gathered.</p>
                        <p><strong>Popina Order</strong> has here a fully integrated concept of everything that is needed to run a webshop.</p>

                        <h2 class="fs-3 mt-10">Admin</h2>
                        <p>In every system with the security layer the functionalities of system administration need to be restricted to only some users with a certain roles:</p>
                        <ul>
                            <li><strong>Administrator:</strong> Full access to configure the project ang global options, and access to all franchises and shops.</li>
                            <li><strong>Support:</strong> Read access only to all franchises and shops to help our clients.</li>
                            <li><strong>Manager:</strong> Full access to configure his franchises and shops.</li>
                            <li><strong>Shop owner:</strong> Full access to configure his shop.</li>
                        </ul>

                        <h2 class="fs-3 mt-10">Shop</h2>
                        <p>Our <strong>ShopBundle</strong> and <strong>FranchiseBundle</strong> is basically a standard B2C interface for everything that happens in the webshop's system, where the clients can make and pay their orders. Also here views have been built using the <strong>ReactJS</strong>.</p>

                        <h2 class="fs-3 mt-10">Cash register</h2>
                        <p>When enabled, all orders made from the webshop are send to the cash <strong>registers existing</strong> in the <strong>physical shop(s)</strong>.</p>

                        <h2 class="fs-3 mt-10">API</h2>
                        <p>When we created our API based on API Platform framework we have done everything to offer API as easy as possible to use by developer. The most important features of our API:</p>
                        <ul>
                            <li>All operations are grouped by <strong>shop owner</strong>, <strong>manager</strong> and <strong>admin</strong> context (three prefixes).</li>
                            <li>We create all endpoints implementing the REST principles and we are using http verbs (<strong>POST</strong>, <strong>GET</strong>, <strong>PUT</strong>, <strong>PATCH</strong>, <strong>DELETE</strong>).</li>
                            <li>Returned responses contain minimal information (developer should extend serialization if need more data).</li>
                            <li>Entire business logic is separated from API - if it necessary we dispatch command instead mixing API logic with business logic.</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}