Improve UI for 2.0

config/twig_hooks/admin/invoice/show.yaml

@@ -16,9 +16,6 @@ sylius_twig_hooks:
         'sylius_admin.invoice.show.content.header.title_block.title':
             number:
                 template: '@SyliusInvoicingPlugin/admin/invoice/show/content/header/title_block/title/number.html.twig'
-                priority: 100
-            subtitle:
-                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/header/title_block/title/subtitle.html.twig'
                 priority: 0
 
         'sylius_admin.invoice.show.content.header.title_block.actions':
@@ -34,6 +31,9 @@ sylius_twig_hooks:
                 priority: 0
 
         'sylius_admin.invoice.show.content.sections':
+            details:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/details.html.twig'
+                priority: 300
             buyer:
                 template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/buyer.html.twig'
                 priority: 200
@@ -90,9 +90,6 @@ sylius_twig_hooks:
         'sylius_admin.invoice.show.content.sections.card':
             body:
                 template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/card/body.html.twig'
-                priority: 100
-            footer:
-                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/card/footer.html.twig'
                 priority: 0
 
         'sylius_admin.invoice.show.content.sections.card.body':

templates/admin/invoice/show/content/header/title_block/actions/back_to_index.html.twig

@@ -1,3 +1,3 @@
-<a {{ sylius_test_html_attribute('back') }} href="{{ path('sylius_invoicing_admin_invoice_index') }}" class="btn">
+<a {{ sylius_test_html_attribute('back') }} href="{{ path('sylius_invoicing_admin_invoice_index') }}" class="btn btn-icon">
     {{ ux_icon('tabler:arrow-left', {'class': 'icon'}) }}
 </a>

templates/admin/invoice/show/content/sections/buyer.html.twig

@@ -1,5 +1,5 @@
-<div class="col">
-    <div class="card mb-3">
+<div class="col-12 col-md-4 mb-3">
+    <div class="card h-full">
         <div class="card-header">
             <div class="card-title">
                 {{ 'sylius_invoicing.ui.buyer'|trans }}

templates/admin/invoice/show/content/sections/buyer/first_name.html.twig

@@ -1,3 +1,5 @@
 {% set billing_data = hookable_metadata.context.resource.billingData %}
 
-<strong>{{ billing_data.firstName }} {{ billing_data.lastName }}</strong>
+<div>
+    <strong>{{ billing_data.firstName }} {{ billing_data.lastName }}</strong>
+</div>

templates/admin/invoice/show/content/sections/card.html.twig

@@ -1,5 +1,5 @@
 {% set invoice = hookable_metadata.context.resource %}
 
-<div class="card mb-3 mb-2">
+<div class="col-12">
     {% hook 'card' %}
 </div>

templates/admin/invoice/show/content/sections/card/body.html.twig

@@ -1,3 +1,3 @@
-<div class="card-body">
+<div class="card">
     {% hook 'body' %}
 </div>

templates/admin/invoice/show/content/sections/card/body/table.html.twig

@@ -1,5 +1,5 @@
 <div class="table-responsive">
-    <table class="table table-bordered table-striped table-sm">
+    <table class="table">
         {% hook 'table' %}
     </table>
 </div>

templates/admin/invoice/show/content/sections/card/body/table/body/currency.html.twig

@@ -1 +1 @@
-<td>{{ hookable_metadata.context.resource.currencyCode }}</td>
+<td class="text-center">{{ hookable_metadata.context.resource.currencyCode }}</td>

templates/admin/invoice/show/content/sections/card/body/table/body/no.html.twig

@@ -1 +1 @@
-<td>{{ hookable_metadata.context.loop.index }}</td>
+<td class="text-center">{{ hookable_metadata.context.loop.index }}</td>

templates/admin/invoice/show/content/sections/card/body/table/header/currency.html.twig

@@ -1 +1 @@
-<th class="sylius-table-column-total" scope="col">{{ 'sylius.ui.currency'|trans }}</th>
+<th class="sylius-table-column-total text-center text-wrap" scope="col">{{ 'sylius.ui.currency'|trans }}</th>

templates/admin/invoice/show/content/sections/card/body/table/header/discounted_unit_net_price.html.twig

@@ -1 +1 @@
-<th class="sylius-table-column-discounted-unit-net-price" scope="col">{{ 'sylius_invoicing.ui.discounted_unit_net_price'|trans }}</th>
+<th class="sylius-table-column-discounted-unit-net-price text-end text-wrap" scope="col">{{ 'sylius_invoicing.ui.discounted_unit_net_price'|trans }}</th>

templates/admin/invoice/show/content/sections/card/body/table/header/gross_value.html.twig

@@ -1 +1 @@
-<th class="sylius-table-column-total" scope="col">{{ 'sylius_invoicing.ui.gross_value'|trans }}</th>
+<th class="sylius-table-column-total text-end text-wrap" scope="col">{{ 'sylius_invoicing.ui.gross_value'|trans }}</th>

templates/admin/invoice/show/content/sections/card/body/table/header/name.html.twig

@@ -1 +1 @@
-<th class="sylius-table-column-name" scope="col">{{ 'sylius.ui.name'|trans }}</th>
+<th class="sylius-table-column-name text-wrap" scope="col">{{ 'sylius.ui.name'|trans }}</th>

templates/admin/invoice/show/content/sections/card/body/table/header/net_value.html.twig

@@ -1 +1 @@
-<th class="sylius-table-column-subtotal" scope="col">{{ 'sylius_invoicing.ui.net_value'|trans }}</th>
+<th class="sylius-table-column-subtotal text-end text-wrap" scope="col">{{ 'sylius_invoicing.ui.net_value'|trans }}</th>

templates/admin/invoice/show/content/sections/card/body/table/header/no.html.twig

@@ -1 +1 @@
-<th class="sylius-table-column-number" scope="col">{{ 'sylius_invoicing.ui.no'|trans }}</th>
+<th class="sylius-table-column-number text-center text-wrap" scope="col">{{ 'sylius_invoicing.ui.no'|trans }}</th>

templates/admin/invoice/show/content/sections/card/body/table/header/quantity.html.twig

@@ -1 +1 @@
-<th class="sylius-table-column-quantity" scope="col">{{ 'sylius.ui.quantity'|trans }}</th>
+<th class="sylius-table-column-quantity text-end text-wrap" scope="col">{{ 'sylius.ui.quantity'|trans }}</th>

templates/admin/invoice/show/content/sections/card/body/table/header/tax_amount.html.twig

@@ -1 +1 @@
-<th class="sylius-table-column-tax_total" scope="col">{{ 'sylius_invoicing.ui.tax_amount'|trans }}</th>
+<th class="sylius-table-column-tax_total text-end text-wrap" scope="col">{{ 'sylius_invoicing.ui.tax_amount'|trans }}</th>

templates/admin/invoice/show/content/sections/card/body/table/header/tax_rate.html.twig

@@ -1 +1 @@
-<th class="sylius-table-column-tax-rate" scope="col">{{ 'sylius_invoicing.ui.tax_rate'|trans }}</th>
+<th class="sylius-table-column-tax-rate text-end text-wrap" scope="col">{{ 'sylius_invoicing.ui.tax_rate'|trans }}</th>

templates/admin/invoice/show/content/sections/card/body/table/header/unit_net_price.html.twig

@@ -1 +1 @@
-<th class="sylius-table-column-unit-net-price" scope="col">{{ 'sylius_invoicing.ui.unit_net_price'|trans }}</th>
+<th class="sylius-table-column-unit-net-price text-end text-wrap" scope="col">{{ 'sylius_invoicing.ui.unit_net_price'|trans }}</th>

templates/admin/invoice/show/content/sections/details.html.twig

@@ -0,0 +1,39 @@
+{% set invoice = hookable_metadata.context.resource %}
+
+<div class="col-12 col-md-4 mb-3">
+    <div class="card h-full">
+        <div class="card-header">
+            <div class="card-title">
+                {{ 'sylius.ui.details'|trans }}
+            </div>
+        </div>
+        <div class="card-body">
+            <table class="table table-sm table-borderless">
+                <tr>
+                    <td><strong>{{ 'sylius_invoicing.ui.issued_at'|trans }}:</strong></td>
+                    <td><span {{ sylius_test_html_attribute('issued-at') }}>{{ invoice.issuedAt|format_datetime }}</span></td>
+                </tr>
+                <tr>
+                    <td><strong>{{ 'sylius_invoicing.ui.issued_for_order'|trans }}:</strong></td>
+                    <td>#{{ invoice.order.number }}</td>
+                </tr>
+                <tr>
+                    <td><strong>{{ 'sylius_invoicing.ui.issued_from'|trans }}:</strong></td>
+                    <td {{ sylius_test_html_attribute('channel') }}>
+                        {% include '@SyliusAdmin/shared/grid/field/channel.html.twig' with {'data': invoice.channel} %}
+                    </td>
+                </tr>
+                <tr {{ sylius_test_html_attribute('invoice-is-paid') }}>
+                    <td><strong>{{ 'sylius_invoicing.ui.payment.paid'|trans }}: </strong></td>
+                    <td>
+                        {% if hookable_metadata.context.resource.paymentState is constant('Sylius\\InvoicingPlugin\\Entity\\InvoiceInterface::PAYMENT_STATE_COMPLETED') %}
+                            <span class="text-success">{{ 'sylius_invoicing.ui.payment.yes'|trans }}</span>
+                        {% else %}
+                            <span class="text-danger">{{ 'sylius_invoicing.ui.payment.no'|trans }}</span>
+                        {% endif %}
+                    </td>
+                </tr>
+            </table>
+        </div>
+    </div>
+</div>

templates/admin/invoice/show/content/sections/seller.html.twig

@@ -1,8 +1,8 @@
 {% set shop_billing_data = hookable_metadata.context.resource.shopBillingData %}
 
 {% if shop_billing_data %}
-    <div class="col">
-        <div class="card mb-3">
+    <div class="col-12 col-md-4 mb-3">
+        <div class="card h-full">
             <div class="card-header">
                 <div class="card-title">
                     {{ 'sylius_invoicing.ui.seller'|trans }}

templates/admin/invoice/show/content/sections/seller/company.html.twig

@@ -1,3 +1,7 @@
 {% set shop_billing_data = hookable_metadata.context.resource.shopBillingData %}
 
-{% if shop_billing_data.company %}<strong>{{ shop_billing_data.company }}</strong>{% endif %}
+{% if shop_billing_data.company %}
+    <div>
+        <strong>{{ shop_billing_data.company }}</strong>
+    </div>
+{% endif %}

templates/admin/order/show/content/sections/invoices/table.html.twig

@@ -4,7 +4,9 @@
             {{ 'sylius_invoicing.ui.invoices'|trans }}
         </div>
     </div>
-    <table class="table table-borderless align-middle mb-0">
-        {% hook 'table' %}
-    </table>
+    <div class="table-responsive">
+        <table class="table table-hover table-vcenter card-table">
+            {% hook 'table' %}
+        </table>
+    </div>
 </div>

templates/admin/order/show/content/sections/invoices/table/body/actions.html.twig

@@ -1,3 +1,5 @@
 <td>
-    {% hook 'actions' %}
+    <div class="d-flex gap-1 justify-content-end">
+        {% hook 'actions' %}
+    </div>
 </td>

templates/admin/order/show/content/sections/invoices/table/body/issued_at.html.twig

@@ -1,3 +1,3 @@
-<td {{ sylius_test_html_attribute('issued-at') }}>
+<td class="text-end" {{ sylius_test_html_attribute('issued-at') }}>
     {{ hookable_metadata.context.invoice.issuedAt|format_date }}
 </td>

templates/admin/order/show/content/sections/invoices/table/head/actions.html.twig

@@ -1 +1 @@
-<th>{{ 'sylius.ui.actions'|trans }}</th>
+<th class="text-end">{{ 'sylius.ui.actions'|trans }}</th>

templates/admin/order/show/content/sections/invoices/table/head/issued_at.html.twig

@@ -1 +1 @@
-<th>{{ 'sylius_invoicing.ui.issued_at'|trans }}</th>
+<th class="text-end">{{ 'sylius_invoicing.ui.issued_at'|trans }}</th>