feat(admin-panel): responsive branches, workshops, products and orders

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/admin-panel/src/views/order/create.vue

@@ -13,8 +13,8 @@
     inventing a Rial figure — see docs/ADMIN-PORT-PLAN.md.
   -->
   <a-spin v-if="hasPermission('order.create')" :spinning="loading">
-    <a-card title="لیست محصولات">
-      <XTable ref="tblProducts" :model="cols">
+    <a-card title="لیست محصولات" class="page-card">
+      <XTable ref="tblProducts" :model="cols" mobile-cards>
         <template #image="{ record }">
           <img
             width="90px"
@@ -42,7 +42,15 @@
       </XTable>
 
       <a-card v-if="items.length > 0" title="ثبت سفارش" class="mt-5">
-        <a-table :columns="columns" :data-source="items" bordered :pagination="false" row-key="vid">
+        <a-table
+          :columns="columns"
+          :data-source="items"
+          bordered
+          :pagination="false"
+          row-key="vid"
+          :size="layout.isMobile ? 'small' : 'middle'"
+          :scroll="layout.isSmallScreen ? { x: 'max-content' } : undefined"
+        >
           <template #bodyCell="{ column, record, index }">
             <template v-if="column.dataIndex === 'delete'">
               <CloseOutlined class="cursor-pointer" @click="cart.remove(record)" />
@@ -170,7 +178,7 @@
 
           <a-button
             type="primary"
-            class="mt-4"
+            class="mt-4 form-submit"
             :disabled="!items || items.length < 1"
             @click="submitOrder"
           >
@@ -197,9 +205,11 @@ import { buildProductListModel } from '../apps/product/productListModel';
 import { useCartStore, type CartItem, type CartVariant } from '../../stores/cart';
 import { useUsersStore } from '../../stores/users';
 import { useAuthStore } from '../../stores/auth';
+import { useLayoutStore } from '../../stores/layout';
 import api from '../../api/client';
 
 const router = useRouter();
+const layout = useLayoutStore();
 const users = useUsersStore();
 const auth = useAuthStore();
 const cart = useCartStore();
@@ -421,4 +431,24 @@ onMounted(async () => {
 .totals {
   margin: 1rem 0;
 }
+
+@media (max-width: 575px) {
+  .grid-5 {
+    grid-template-columns: 1fr 1fr;
+    column-gap: 12px;
+    row-gap: 0;
+  }
+  .grid-5 > :first-child {
+    grid-column: 1 / -1;
+  }
+  .mt-5 {
+    margin-top: 12px;
+  }
+  .mt-4 {
+    margin-top: 12px;
+  }
+  .totals {
+    margin: 0 0 12px;
+  }
+}
 </style>