From 77b98539ea4cdd52cabff67a5a3678dfdec313c6 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <ruslanbakiev@dsrptlab.com>
Date: Mon, 6 Apr 2026 11:32:49 +0700
Subject: [PATCH] Refine manager calendar cards

---
 app/pages/client-orders/index.vue | 181 +++++++++++++++++++++++++-----
 1 file changed, 155 insertions(+), 26 deletions(-)

diff --git a/app/pages/client-orders/index.vue b/app/pages/client-orders/index.vue
index 06ecad6..ebe0087 100644
--- a/app/pages/client-orders/index.vue
+++ b/app/pages/client-orders/index.vue
@@ -85,6 +85,35 @@ function getOrderGroup(order: ManagerOrderItem) {
   return 'CLOSED';
 }
 
+function orderGroupLabel(group: StatusFilter) {
+  if (group === 'NEW') {
+    return 'Заявка';
+  }
+  if (group === 'PRICED') {
+    return 'Расчёт';
+  }
+  if (group === 'IN_PROGRESS') {
+    return 'В работе';
+  }
+  if (group === 'CLOSED') {
+    return 'Закрыт';
+  }
+  return 'Все';
+}
+
+function orderGroupBadgeClass(group: StatusFilter) {
+  if (group === 'NEW') {
+    return 'manager-calendar-order-card__status manager-calendar-order-card__status--new';
+  }
+  if (group === 'PRICED') {
+    return 'manager-calendar-order-card__status manager-calendar-order-card__status--priced';
+  }
+  if (group === 'IN_PROGRESS') {
+    return 'manager-calendar-order-card__status manager-calendar-order-card__status--progress';
+  }
+  return 'manager-calendar-order-card__status manager-calendar-order-card__status--closed';
+}
+
 function matchesFilter(order: ManagerOrderItem) {
   if (statusFilter.value === 'ALL') {
     return true;
@@ -168,6 +197,7 @@ const calendarOptions = computed(() => ({
   },
   events: filteredOrders.value.map((order: ManagerOrderItem) => {
     const customer = customerCardMeta(order.customerId);
+    const group = getOrderGroup(order);
 
     return {
       id: order.id,
@@ -180,6 +210,8 @@ const calendarOptions = computed(() => ({
         fallbackAvatarSrc: customer.fallbackAvatarSrc,
         initials: customer.initials,
         orderCode: formatOrderCode(order.code),
+        orderGroupLabel: orderGroupLabel(group),
+        orderGroupClass: orderGroupBadgeClass(group),
         totalPriceLabel: formatPrice(order.totalPrice) ?? 'Цена уточняется',
       },
     };
@@ -188,22 +220,27 @@ const calendarOptions = computed(() => ({
     const customerName = escapeHtml(event.extendedProps.customerName || '');
     const avatarSrc = event.extendedProps.avatarSrc || event.extendedProps.fallbackAvatarSrc;
     const orderCode = escapeHtml(event.extendedProps.orderCode || '');
+    const orderGroupLabel = escapeHtml(event.extendedProps.orderGroupLabel || '');
+    const orderGroupClass = escapeHtml(event.extendedProps.orderGroupClass || '');
     const totalPriceLabel = escapeHtml(event.extendedProps.totalPriceLabel || '');
     const initials = escapeHtml(event.extendedProps.initials || '');
 
     return {
       html: `
         <div class="manager-calendar-order-card">
-          <div class="manager-calendar-order-card__header">
-            <div class="manager-calendar-order-card__avatar-shell">
-              ${avatarSrc
-                ? `<img src="${escapeHtml(avatarSrc)}" alt="${customerName}" class="manager-calendar-order-card__avatar">`
-                : `<span class="manager-calendar-order-card__initials">${initials}</span>`}
-            </div>
-            <div class="manager-calendar-order-card__text">
-              <div class="manager-calendar-order-card__code">${orderCode}</div>
-              <div class="manager-calendar-order-card__name">${customerName}</div>
+          <div class="manager-calendar-order-card__topline">
+            <div class="manager-calendar-order-card__header">
+              <div class="manager-calendar-order-card__avatar-shell">
+                ${avatarSrc
+                  ? `<img src="${escapeHtml(avatarSrc)}" alt="${customerName}" class="manager-calendar-order-card__avatar">`
+                  : `<span class="manager-calendar-order-card__initials">${initials}</span>`}
+              </div>
+              <div class="manager-calendar-order-card__text">
+                <div class="manager-calendar-order-card__name">${customerName}</div>
+                <div class="manager-calendar-order-card__code">${orderCode}</div>
+              </div>
             </div>
+            <span class="${orderGroupClass}">${orderGroupLabel}</span>
           </div>
           <div class="manager-calendar-order-card__price">${totalPriceLabel}</div>
         </div>
@@ -272,7 +309,7 @@ const calendarOptions = computed(() => ({
       Заказы по текущим условиям не найдены.
     </div>
 
-    <div v-else-if="viewMode === 'calendar'" class="surface-card rounded-3xl p-4 md:p-5">
+    <div v-else-if="viewMode === 'calendar'" class="manager-calendar-shell">
       <FullCalendar :options="calendarOptions" />
     </div>
 
@@ -294,26 +331,35 @@ const calendarOptions = computed(() => ({
 <style>
 .manager-calendar-order-card {
   display: grid;
-  gap: 0.45rem;
-  min-height: 74px;
+  gap: 0.4rem;
+  min-height: 78px;
   border-radius: 18px;
   background: #ffffff;
-  padding: 0.62rem 0.72rem;
+  padding: 0.7rem 0.75rem;
+  box-shadow: 0 12px 26px rgba(18, 56, 36, 0.08);
+}
+
+.manager-calendar-order-card__topline {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.6rem;
 }
 
 .manager-calendar-order-card__header {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 0.55rem;
   min-width: 0;
+  flex: 1 1 auto;
 }
 
 .manager-calendar-order-card__avatar-shell {
-  width: 34px;
-  height: 34px;
+  width: 32px;
+  height: 32px;
   flex: 0 0 auto;
   overflow: hidden;
-  border-radius: 12px;
+  border-radius: 11px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -336,27 +382,110 @@ const calendarOptions = computed(() => ({
   min-width: 0;
 }
 
-.manager-calendar-order-card__code {
-  font-size: 0.88rem;
-  line-height: 1.1;
-  font-weight: 800;
-  color: #123824;
-}
-
 .manager-calendar-order-card__name {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  font-size: 0.76rem;
+  line-height: 1.15;
+  font-weight: 800;
+  color: #123824;
+}
+
+.manager-calendar-order-card__code {
+  margin-top: 0.15rem;
   font-size: 0.72rem;
-  color: #5a7968;
+  line-height: 1.1;
+  font-weight: 700;
+  color: #688676;
+}
+
+.manager-calendar-order-card__status {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  padding: 0.24rem 0.5rem;
+  font-size: 0.62rem;
+  line-height: 1;
+  font-weight: 800;
+  white-space: nowrap;
+}
+
+.manager-calendar-order-card__status--new {
+  background: #edf3ef;
+  color: #355947;
+}
+
+.manager-calendar-order-card__status--priced {
+  background: #eef7f1;
+  color: #0d854a;
+}
+
+.manager-calendar-order-card__status--progress {
+  background: #edf2f6;
+  color: #2f5872;
+}
+
+.manager-calendar-order-card__status--closed {
+  background: #f1f3f2;
+  color: #617268;
 }
 
 .manager-calendar-order-card__price {
-  font-size: 0.78rem;
+  font-size: 0.74rem;
   font-weight: 700;
   color: #0d854a;
 }
 
+.manager-calendar-shell :deep(.fc) {
+  --fc-border-color: #dbe5df;
+  --fc-button-bg-color: #123824;
+  --fc-button-border-color: #123824;
+  --fc-button-hover-bg-color: #0d854a;
+  --fc-button-hover-border-color: #0d854a;
+  --fc-button-active-bg-color: #0d854a;
+  --fc-button-active-border-color: #0d854a;
+  --fc-neutral-bg-color: transparent;
+  --fc-page-bg-color: transparent;
+}
+
+.manager-calendar-shell :deep(.fc-theme-standard td),
+.manager-calendar-shell :deep(.fc-theme-standard th),
+.manager-calendar-shell :deep(.fc-theme-standard .fc-scrollgrid) {
+  border-color: #dbe5df;
+}
+
+.manager-calendar-shell :deep(.fc-theme-standard .fc-scrollgrid) {
+  border-radius: 22px;
+  overflow: hidden;
+}
+
+.manager-calendar-shell :deep(.fc-col-header-cell-cushion) {
+  padding: 0.85rem 0.35rem;
+  font-size: 0.74rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #688676;
+}
+
+.manager-calendar-shell :deep(.fc-daygrid-day-frame) {
+  background: transparent;
+  padding: 0.35rem;
+}
+
+.manager-calendar-shell :deep(.fc-daygrid-day-top) {
+  justify-content: flex-end;
+  padding: 0.15rem 0.25rem 0.2rem;
+}
+
+.manager-calendar-shell :deep(.fc-daygrid-day-number) {
+  font-size: 0.78rem;
+  font-weight: 700;
+  color: #5a7968;
+}
+
 .fc .fc-daygrid-event {
   border: 0;
   background: transparent;