Refine order list layout and client card

app/pages/client-orders/index.vue

@@ -207,14 +207,26 @@ const calendarOptions = computed(() => ({
     >
       <template #controls>
         <div class="flex w-full flex-col gap-3 md:w-auto md:flex-row">
-          <div class="tabs tabs-boxed w-fit bg-white">
-            <button class="tab" :class="{ 'tab-active': viewMode === 'cards' }" @click="setViewMode('cards')">
+          <div class="inline-flex w-fit rounded-full border border-[#d7e9de] bg-white p-1">
+            <button
+              class="rounded-full px-4 py-2 text-sm font-semibold text-[#355947] transition"
+              :class="viewMode === 'cards' ? 'bg-[#123824] text-white' : 'hover:bg-[#f4faf6]'"
+              @click="setViewMode('cards')"
+            >
               Карточки
             </button>
-            <button class="tab" :class="{ 'tab-active': viewMode === 'calendar' }" @click="setViewMode('calendar')">
+            <button
+              class="rounded-full px-4 py-2 text-sm font-semibold text-[#355947] transition"
+              :class="viewMode === 'calendar' ? 'bg-[#123824] text-white' : 'hover:bg-[#f4faf6]'"
+              @click="setViewMode('calendar')"
+            >
               Календарь
             </button>
-            <button class="tab" :class="{ 'tab-active': viewMode === 'kanban' }" @click="setViewMode('kanban')">
+            <button
+              class="rounded-full px-4 py-2 text-sm font-semibold text-[#355947] transition"
+              :class="viewMode === 'kanban' ? 'bg-[#123824] text-white' : 'hover:bg-[#f4faf6]'"
+              @click="setViewMode('kanban')"
+            >
               Kanban
             </button>
           </div>
@@ -288,7 +300,6 @@ const calendarOptions = computed(() => ({
             :created-at="order.createdAt"
             :total-price="order.totalPrice"
             :items="order.items"
-            :customer="customerCardMeta(order.customerId)"
           />
         </div>
       </div>
@@ -304,7 +315,6 @@ const calendarOptions = computed(() => ({
         :created-at="order.createdAt"
         :total-price="order.totalPrice"
         :items="order.items"
-        :customer="customerCardMeta(order.customerId)"
       />
     </div>
   </section>

app/pages/clients/[id].vue

@@ -148,8 +148,8 @@ async function rejectRequest() {
       </div>
 
       <template v-else>
-        <div class="surface-card flex flex-col gap-6 rounded-[36px] p-6 md:flex-row md:items-center">
-          <div class="shrink-0">
+        <div class="surface-card rounded-[36px] p-6">
+          <div class="flex flex-col items-center gap-4 text-center">
             <img
               v-if="messengerConnectionAvatarSrc(currentUser.telegramConnection)"
               :src="messengerConnectionAvatarSrc(currentUser.telegramConnection)"
@@ -162,13 +162,15 @@ async function rejectRequest() {
             >
               {{ userInitials(currentUser.fullName) }}
             </div>
-          </div>
 
-          <div class="space-y-2">
-            <p class="manager-eyebrow">Пользователь</p>
-            <h1 class="manager-title">{{ currentUser.fullName }}</h1>
-            <p class="text-sm text-[#466653]">{{ currentUser.email }}</p>
-            <p v-if="currentUser.companyName" class="text-sm text-[#466653]">{{ currentUser.companyName }}</p>
+            <div class="space-y-2">
+              <p class="manager-eyebrow">Пользователь</p>
+              <h1 class="text-[clamp(1.8rem,3vw,2.8rem)] font-black leading-none tracking-[-0.04em] text-[#123824]">
+                {{ currentUser.fullName }}
+              </h1>
+              <p class="text-sm text-[#466653]">{{ currentUser.email }}</p>
+              <p v-if="currentUser.companyName" class="text-sm text-[#466653]">{{ currentUser.companyName }}</p>
+            </div>
           </div>
         </div>
 
@@ -187,11 +189,6 @@ async function rejectRequest() {
               :created-at="order.createdAt"
               :total-price="order.totalPrice"
               :items="order.items"
-              :customer="{
-                name: currentUser.fullName,
-                avatarSrc: messengerConnectionAvatarSrc(currentUser.telegramConnection),
-                initials: userInitials(currentUser.fullName),
-              }"
             />
           </div>
         </div>

app/pages/orders/index.vue

@@ -53,7 +53,10 @@ const filteredOrders = computed(() => {
       search-placeholder="Номер заказа или товар"
     >
       <template #controls>
-        <select v-model="statusFilter" class="select select-bordered w-full rounded-full bg-white md:w-64">
+        <select
+          v-model="statusFilter"
+          class="w-full rounded-full border border-[#d7e9de] bg-white px-4 py-3 text-sm font-semibold text-[#123824] outline-none transition focus:border-[#139957] focus:shadow-[0_0_0_3px_rgba(19,153,87,0.12)] md:w-64"
+        >
           <option value="ALL">Все заказы</option>
           <option value="WAITING">Ожидают подтверждения</option>
           <option value="ACTIVE">Активные</option>
@@ -62,8 +65,10 @@ const filteredOrders = computed(() => {
       </template>
     </UiSectionSearchHero>
 
-    <div v-if="allOrders.loading.value" class="alert surface-card border-0">Загрузка заказов...</div>
-    <div v-else-if="filteredOrders.length === 0" class="alert surface-card border-0">
+    <div v-if="allOrders.loading.value" class="manager-empty-state">
+      Загрузка заказов...
+    </div>
+    <div v-else-if="filteredOrders.length === 0" class="manager-empty-state">
       Заказы по текущим условиям не найдены.
     </div>