Refine manager calendar card layout

app/pages/client-orders/index.vue

@@ -195,10 +195,11 @@ const statusTabs = computed<Array<{ id: StatusFilter; label: string; count: numb
 const calendarOptions = computed(() => ({
   plugins: [dayGridPlugin],
   locale: ruLocale,
-  initialView: 'dayGridMonth',
+  initialView: 'dayGridWeek',
   height: 'auto',
   fixedWeekCount: false,
   firstDay: 1,
+  weekends: false,
   headerToolbar: {
     left: 'prev,next today',
     center: 'title',
@@ -240,7 +241,6 @@ const calendarOptions = computed(() => ({
     return {
       html: `
         <div class="manager-calendar-order-card">
-          <div class="manager-calendar-order-card__topline">
           <div class="manager-calendar-order-card__header">
             <div class="manager-calendar-order-card__avatar-shell">
               ${avatarSrc
@@ -252,10 +252,11 @@ const calendarOptions = computed(() => ({
               <div class="manager-calendar-order-card__code">${orderCode}</div>
             </div>
           </div>
+          <div class="manager-calendar-order-card__meta">
             <span class="${orderGroupClass}">${orderGroupLabel}</span>
-          </div>
             <div class="manager-calendar-order-card__price">${totalPriceLabel}</div>
           </div>
+        </div>
       `,
     };
   },
@@ -353,35 +354,27 @@ const calendarOptions = computed(() => ({
 <style>
 .manager-calendar-order-card {
   display: grid;
-  gap: 0.4rem;
-  min-height: 78px;
+  gap: 0.55rem;
+  min-height: 84px;
   border-radius: 18px;
   background: #ffffff;
-  padding: 0.7rem 0.75rem;
+  padding: 0.85rem 0.9rem;
   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: flex-start;
-  gap: 0.55rem;
+  align-items: center;
+  gap: 0.7rem;
   min-width: 0;
-  flex: 1 1 auto;
 }
 
 .manager-calendar-order-card__avatar-shell {
-  width: 32px;
-  height: 32px;
+  width: 34px;
+  height: 34px;
   flex: 0 0 auto;
   overflow: hidden;
-  border-radius: 11px;
+  border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -408,27 +401,34 @@ const calendarOptions = computed(() => ({
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 0.76rem;
+  font-size: 0.8rem;
   line-height: 1.15;
   font-weight: 800;
   color: #123824;
 }
 
 .manager-calendar-order-card__code {
-  margin-top: 0.15rem;
-  font-size: 0.72rem;
+  margin-top: 0.18rem;
+  font-size: 0.74rem;
   line-height: 1.1;
   font-weight: 700;
   color: #688676;
 }
 
+.manager-calendar-order-card__meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.65rem;
+}
+
 .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;
+  padding: 0.28rem 0.58rem;
+  font-size: 0.64rem;
   line-height: 1;
   font-weight: 800;
   white-space: nowrap;
@@ -455,9 +455,11 @@ const calendarOptions = computed(() => ({
 }
 
 .manager-calendar-order-card__price {
-  font-size: 0.74rem;
+  font-size: 0.76rem;
   font-weight: 700;
   color: #0d854a;
+  text-align: right;
+  white-space: nowrap;
 }
 
 .manager-calendar-shell :deep(.fc) {
@@ -494,12 +496,21 @@ const calendarOptions = computed(() => ({
 
 .manager-calendar-shell :deep(.fc-daygrid-day-frame) {
   background: transparent;
-  padding: 0.35rem;
+  padding: 0.5rem;
 }
 
 .manager-calendar-shell :deep(.fc-daygrid-day-top) {
   justify-content: flex-end;
-  padding: 0.15rem 0.25rem 0.2rem;
+  padding: 0.25rem 0.35rem 0.3rem;
+}
+
+.manager-calendar-shell :deep(.fc-daygrid-day-events) {
+  margin: 0;
+  padding: 0 0.3rem 0.45rem;
+}
+
+.manager-calendar-shell :deep(.fc-daygrid-event-harness) {
+  margin-top: 0.45rem;
 }
 
 .manager-calendar-shell :deep(.fc-daygrid-day-number) {