Unify order items layout across cart and orders

app/pages/orders/[id].vue

@@ -5,9 +5,8 @@ import {
   type OrderDetailQuery,
 } from '~/composables/graphql/generated';
 import {
-  orderLogisticsStateText,
   orderDeliveryStateText,
-  orderLineStateText,
+  orderLogisticsStateText,
 } from '~/composables/useOrderDetailPresentation';
 
 type OrderItem = NonNullable<OrderDetailQuery['order']>;
@@ -48,18 +47,13 @@ const currentOrder = computed<OrderItem | null>(() =>
           audience="client"
         />
 
-        <div class="surface-card rounded-3xl p-5">
+        <div>
           <h2 class="text-xl font-bold text-[#123824]">Состав заказа</h2>
-          <ul class="mt-4 space-y-3">
-            <li
-              v-for="item in currentOrder.items"
-              :key="item.id"
-              class="manager-mini-card space-y-2"
-            >
-              <p class="text-sm font-semibold text-[#123824]">{{ item.productName }} × {{ item.quantity }}</p>
-              <p class="text-sm text-[#5c7b69]">{{ orderLineStateText(item.unitPrice, item.lineTotal) }}</p>
-            </li>
-          </ul>
+          <OrdersOrderItemsTable
+            class="mt-4"
+            :items="currentOrder.items"
+            :calculation-payload="currentOrder.calculationPayload"
+          />
         </div>
 
         <div class="surface-card rounded-3xl p-5">