@ozdao/martyrs 0.2.604 → 0.2.605

package/src/modules/rents/views/components/pages/Rents.vue

@@ -1,56 +1,71 @@
 <template>
   <div class="pd-medium mobile:pd-thin bg-white">
-    <header class="mn-b-medium flex-v-center flex-nowrap flex">
-      <h2 class="mn-r-medium">Rents</h2>
-      <button 
-        @click="$router.push({ name: 'Organization_Create Rent', params: {_id: route.params._id}})" 
-        class="radius-extra i-big hover:scale-[1.05] cursor-pointer t-white bg-second"
-      >
-        +
-      </button>
-      <div class="mn-l-auto flex-v-center">
-        <button 
-          @click="toggleView" 
-          class="pd-small radius-small bg-light mn-r-small"
-        >
-          {{ isCalendarView ? 'List View' : 'Calendar View' }}
-        </button>
-      </div>
-    </header>
+    <SectionPageTitle
+      v-if="!MOBILE_APP"
+      title="Rents"
+      :actions="[
+        { method: () => $router.push({ name: routePrefix + 'Create Rent' }), label: '+ Add Rent' }
+      ]"
+      class="mn-b-medium"
+    />
 
     <Feed
+      v-model:items="currentProducts"
       :search="true"
       :keepSlotVisible="true"
       :states="{
         empty: {
-          title: 'No Rents Found',
-          description: 'Currently, there are no rents available.'
+          title: 'No Tables Found',
+          description: 'No products available.'
         }
       }"
-      :store="{ read: (options) => rents.actions.read(options) }"
+      :store="{ read: (options) => products.actions.read(options) }"
       :options="{
         owner: route.params._id,
+        listing: 'rent',
+        lookup: ['rents', 'variants'],
         startDate: dateRange.start.toISOString(),
-        endDate: dateRange.end.toISOString()
+        endDate: dateRange.end.toISOString(),
+        limit: 50
       }"
-      v-slot="{ items }"
-    > 
+      v-slot="{ items: productItems }"
+    >
       <GanttChart
         v-model:view="view"
         v-model:date="date"
         v-model:dateRange="dateRange"
-        :items="items"
+        :items="flattenProductRents(productItems)"
+        :external-groups="ganttGroups(productItems)"
         :loading="loading"
         :title-key="'productDetails.name'"
         :start-key="'startDate'"
         :end-key="'endDate'"
         :status-key="'status'"
         :id-key="'_id'"
-        :group-by="'productDetails.name'"
+        :group-by="'productDetails.productId'"
         @load-more="handleLoadMore"
         @item-click="handleItemClick"
+        @cell-click="handleCellClick"
         @today="handleToday"
-      />
+      >
+        <template #product-col="{ group }">
+          <div
+            v-if="group.data?.isProductRow && group.data?.hasVariants"
+            class="flex flex-v-center gap-micro cursor-pointer h-100 w-100 o-hidden"
+            @click="toggleProduct(group.data.productId)"
+          >
+            <span class="fw-bold truncate">{{ group.title }}</span>
+            <IconChevronBottom fill="rgba(var(--dark))" class="i-small mn-l-auto ease-out flex-shrink-0" :class="{ 'rotate-180deg': expandedProducts.has(group.data.productId) }" />
+          </div>
+          <div
+            v-else-if="group.data?.isVariantRow"
+            class="flex flex-v-center gap-micro h-100 pd-l-medium o-hidden"
+          >
+            <span class="t-small opacity-50 truncate">{{ group.data.variantName || 'Default' }}</span>
+          </div>
+          <div v-else class="fw-medium truncate">{{ group.title }}</div>
+        </template>
+      </GanttChart>
 
      <!--  <CardRent
         v-else
@@ -60,100 +75,508 @@
         class="bg-light pd-small mn-b-thin radius-small"
       /> -->
     </Feed>
+
+    <Popup
+      :isPopupOpen="!!selectedRent"
+      @close-popup="closeRentPopup"
+      :align="isPhone() ? 'bottom center' : 'center center'"
+      title="Rent Details"
+      class="bg-white radius-medium pd-small w-clamp-25r-25r-100 mobile:radius-zero mobile:radius-tr-medium mobile:radius-tl-medium"
+    >
+      <div v-if="selectedRent" class="w-100">
+        <p class="mn-b-small opacity-50">
+          Booking information and customer details.
+        </p>
+
+        <!-- Product & Status -->
+        <div class="mn-b-small">
+          <div class="flex-nowrap flex gap-thin">
+            <div class="w-100 bg-light radius-small pd-small">
+              <p class="mn-b-micro opacity-50 t-small">Product</p>
+              <p class="fw-medium">{{ selectedRent.productDetails?.name }}</p>
+            </div>
+            <div class="w-100 bg-light radius-small pd-small">
+              <p class="mn-b-micro opacity-50 t-small">Status</p>
+              <span class="pd-micro pd-l-thin pd-r-thin radius-extra t-micro t-white" :class="rentStatusClass">{{ selectedRent.status }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Quick Actions -->
+        <div v-if="selectedRent.status !== 'completed' && selectedRent.status !== 'canceled'" class="mn-b-small">
+          <p class="mn-b-thin fw-medium">Actions</p>
+          <div class="flex-nowrap flex gap-thin">
+            <template v-if="selectedRent.status === 'pending'">
+              <Button
+                :submit="() => confirmRent()"
+                class="pd-small radius-small flex-center flex w-100 cursor-pointer bg-second t-white t-small"
+              >
+                Confirm
+              </Button>
+              <Button
+                :submit="() => cancelRent()"
+                class="pd-small radius-small flex-center flex w-100 cursor-pointer bg-red t-white t-small"
+              >
+                Cancel
+              </Button>
+            </template>
+            <template v-if="selectedRent.status === 'confirmed' || selectedRent.status === 'active'">
+              <Button
+                :submit="() => closeRent()"
+                class="pd-small radius-small flex-center flex w-100 cursor-pointer bg-main t-black t-small"
+              >
+                Close
+              </Button>
+              <Button
+                :submit="() => closeRentNow()"
+                class="pd-small radius-small flex-center flex w-100 cursor-pointer bg-green t-white t-small"
+              >
+                Close Now
+              </Button>
+            </template>
+          </div>
+        </div>
+
+        <!-- Dates -->
+        <div class="mn-b-small">
+          <p class="mn-b-thin fw-medium">Period</p>
+          <div class="flex-nowrap flex gap-thin">
+            <div class="w-100 bg-light radius-small pd-small">
+              <p class="mn-b-micro opacity-50 t-small">From</p>
+              <p>{{ formatDate(selectedRent.startDate) }}</p>
+            </div>
+            <div class="w-100 bg-light radius-small pd-small">
+              <p class="mn-b-micro opacity-50 t-small">To</p>
+              <p>{{ formatDate(selectedRent.endDate) }}</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Payment -->
+        <div class="mn-b-small">
+          <p class="mn-b-thin fw-medium">Payment</p>
+          <div v-if="selectedRentOrder?.payment" class="flex-nowrap flex gap-thin">
+            <div class="w-100 bg-light radius-small pd-small">
+              <p class="mn-b-micro opacity-50 t-small">Method</p>
+              <p>{{ selectedRentOrder.payment.type || '—' }}</p>
+            </div>
+            <div class="w-100 bg-light radius-small pd-small">
+              <p class="mn-b-micro opacity-50 t-small">Status</p>
+              <div class="flex-v-center flex gap-micro">
+                <p class="fw-medium" :class="selectedRentOrder.payment?.status === 'paid' ? 't-green' : 't-red'">{{ selectedRentOrder.payment?.status || 'unpaid' }}</p>
+                <div
+                  @click="togglePaymentStatus"
+                  class="cursor-pointer radius-extra mn-l-auto"
+                  :class="selectedRentOrder.payment?.status === 'paid' ? 'bg-green' : 'bg-light'"
+                  style="width: 36px; height: 20px; position: relative; transition: background 0.2s; flex-shrink: 0;"
+                >
+                  <div
+                    class="bg-white radius-extra"
+                    style="width: 16px; height: 16px; position: absolute; top: 2px; transition: left 0.2s;"
+                    :style="{ left: selectedRentOrder.payment?.status === 'paid' ? '18px' : '2px' }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div v-else class="bg-light radius-small pd-small opacity-50 t-small">
+            No order linked
+          </div>
+        </div>
+
+        <!-- Order -->
+        <div v-if="selectedRent.order" class="mn-b-small">
+          <p class="mn-b-thin fw-medium">Order</p>
+          <router-link
+            :to="orderLink"
+            class="flex-v-center flex gap-thin bg-light radius-small pd-small cursor-pointer hover:opacity-70"
+          >
+            <div class="flex-column flex w-100">
+              <p class="t-small opacity-50 mn-b-micro">Order ID</p>
+              <p class="fw-medium t-small">{{ selectedRent.order }}</p>
+            </div>
+            <span class="t-small opacity-50">→</span>
+          </router-link>
+        </div>
+
+        <!-- Customer -->
+        <div class="mn-b-small">
+          <p class="mn-b-thin fw-medium">Customer</p>
+          <router-link
+            v-if="selectedRentCustomer"
+            :to="customerLink"
+            class="bg-light radius-small pd-small cursor-pointer hover:opacity-70 flex-v-center flex"
+          >
+            <div class="w-100">
+              <p v-if="selectedRentCustomer.profile?.name" class="fw-medium mn-b-micro">{{ selectedRentCustomer.profile.name }}</p>
+              <p v-if="selectedRentCustomer.phone" class="t-small opacity-70 mn-b-micro">{{ selectedRentCustomer.phone }}</p>
+              <p v-if="selectedRentCustomer.email" class="t-small opacity-70">{{ selectedRentCustomer.email }}</p>
+            </div>
+            <span class="t-small opacity-50">→</span>
+          </router-link>
+          <div v-else class="bg-light radius-small pd-small opacity-50">
+            No customer linked
+          </div>
+        </div>
+
+        <!-- Comment -->
+        <div v-if="selectedRent.comment" class="mn-b-small">
+          <p class="mn-b-thin fw-medium">Comment</p>
+          <div class="bg-light radius-small pd-small t-small">{{ selectedRent.comment }}</div>
+        </div>
+
+        <!-- Close popup button -->
+        <div class="flex-nowrap flex gap-small">
+          <Button
+            :submit="() => closeRentPopup()"
+            :showLoader="false"
+            :showSucces="false"
+            class="pd-small radius-small flex-center flex w-100 cursor-pointer bg-main t-black"
+          >
+            Close
+          </Button>
+        </div>
+      </div>
+    </Popup>
+
+    <!-- Create Rent Popup -->
+    <Popup
+      :isPopupOpen="showCreatePopup"
+      @close-popup="closeCreatePopup"
+      :align="isPhone() ? 'bottom center' : 'center right'"
+      title="Create Rent"
+      class="bg-white pd-small w-clamp-25r-25r-100 desktop:h-100 desktop:radius-zero mobile:radius-zero mobile:radius-tr-medium mobile:radius-tl-medium"
+    >
+      <div class="flex flex-column gap-thin">
+        <!-- <Block title="Product" class=""> -->
+          <CardOrderItem
+            :editable="true"
+            :productId="createRentData.productId"
+            :variantId="createRentData.variantId"
+            :images="createRentData.productImages"
+            :name="createRentData.productName"
+            :price="createRentData.productPrice"
+            :listing="'rent'"
+            :dates="createRentDates"
+            :rentPeriod="createRentData.rentPeriod"
+            @updateRentDates="onRentDatesUpdate"
+            class="pd-thin radius-small bg-white"
+          />
+        <!-- </Block> -->
+
+        <FormSelectCustomer
+          v-model:customer="createRentData.customer"
+          :orgId="getOwnerIdFromProduct(createRentData.productOwner)"
+        />
+
+        <Block title="Comment" class="">
+          <Field v-model="createRentData.comment" type="textarea" class="bg-white radius-small pd-small" />
+        </Block>
+
+        <Button
+          :submit="() => submitCreateRent()"
+          class="bg-second t-white pd-small radius-small w-100 mn-t-thin"
+        >
+          Create Rent
+        </Button>
+      </div>
+    </Popup>
   </div>
 </template>
 
 <script setup>
 import dayjs from 'dayjs'
 
-import Tab from '@martyrs/src/components/Tab/Tab.vue';
 import Feed from '@martyrs/src/components/Feed/Feed.vue';
-
-import CardRent from '@martyrs/src/modules/rents/views/components/blocks/CardRent.vue';
-
+import Field from '@martyrs/src/components/Field/Field.vue';
+import Popup from '@martyrs/src/components/Popup/Popup.vue';
+import Button from '@martyrs/src/components/Button/Button.vue';
+import Block from '@martyrs/src/components/Block/Block.vue';
+import CardOrderItem from '@martyrs/src/modules/orders/components/blocks/CardOrderItem.vue';
+import SectionPageTitle from '@martyrs/src/modules/core/views/components/sections/SectionPageTitle.vue';
 import GanttChart from '@martyrs/src/modules/rents/views/components/pages/Gant/GanttChart.vue';
+import IconChevronBottom from '@martyrs/src/modules/icons/navigation/IconChevronBottom.vue';
+import FormSelectCustomer from '@martyrs/src/modules/orders/components/forms/FormSelectCustomer.vue';
+import * as auth from '@martyrs/src/modules/auth/views/store/auth.js';
 
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, reactive, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
+import { useGlobalMixins } from '@martyrs/src/modules/core/views/mixins/mixins.js';
 
 import * as rents from '@martyrs/src/modules/rents/views/store/rents.store';
+import * as products from '@martyrs/src/modules/products/store/products.js';
+import * as orders from '@martyrs/src/modules/orders/store/orders.js';
+import { useStore } from '@martyrs/src/modules/core/views/store/core.store.js';
+const { core } = useStore();
 
 const route = useRoute();
 const router = useRouter();
+const { isPhone } = useGlobalMixins();
 
-const isCalendarView = ref(true);
-
+const currentProducts = ref([])
 
-// Set initial date range - current month plus 15 days before and 45 days after
-const view = ref('days')
+// --- Gantt view state ---
+const view = ref('hours')
 const date = ref(new Date())
 const loading = ref(false)
 
 const dateRange = computed(() => {
   const d = dayjs(date.value)
-  
   switch (view.value) {
     case 'hours':
-      // Show only the current day in hours view
-      return {
-        start: d.startOf('day').toDate(),
-        end: d.endOf('day').toDate()
-      }
-      
+      return { start: d.startOf('day').toDate(), end: d.endOf('day').toDate() }
     case 'days':
-      return {
-        start: d.startOf('month').toDate(),
-        end: d.endOf('month').toDate()
-      }
-      
+      return { start: d.startOf('month').toDate(), end: d.endOf('month').toDate() }
     case 'weeks':
-      return {
-        start: d.subtract(1, 'month').startOf('week').toDate(),
-        end: d.add(2, 'months').endOf('week').toDate()
-      }
-      
+      return { start: d.subtract(1, 'month').startOf('week').toDate(), end: d.add(2, 'months').endOf('week').toDate() }
     default:
-      return {
-        start: d.startOf('month').toDate(),
-        end: d.endOf('month').toDate()
-      }
+      return { start: d.startOf('month').toDate(), end: d.endOf('month').toDate() }
+  }
+})
+
+const routePrefix = computed(() => {
+  const ctx = route.meta.context
+  if (ctx === 'backoffice') return 'Backoffice'
+  if (ctx === 'organization') return 'Organization_'
+  return ''
+})
+
+// --- Извлечь owner ID строкой ---
+const getOwnerIdFromProduct = (owner) => {
+  if (!owner) return route.params._id
+  if (typeof owner === 'string') return owner
+  if (typeof owner?.target === 'string') return owner.target
+  if (owner?.target?._id) return owner.target._id
+  return route.params._id
+}
+
+// --- Expand/collapse ---
+const expandedProducts = ref(new Set())
+const toggleProduct = (productId) => {
+  const s = new Set(expandedProducts.value)
+  s.has(productId) ? s.delete(productId) : s.add(productId)
+  expandedProducts.value = s
+}
+
+// --- Groups ---
+const expandedInitialized = ref(false)
+const ganttGroups = (productItems) => {
+  if (!expandedInitialized.value && productItems.length > 0) {
+    productItems.forEach(p => {
+      if (p.variants?.length) expandedProducts.value.add(p._id)
+    })
+    expandedProducts.value = new Set(expandedProducts.value)
+    expandedInitialized.value = true
   }
+
+  const groups = []
+  productItems.forEach(product => {
+    const hasVariants = product.variants?.length > 0
+    groups.push({
+      key: product._id,
+      title: product.name || 'Unknown',
+      data: { productId: product._id, isProductRow: true, hasVariants, productImages: product.images || [], productPrice: product.price || 0, productOwner: product.owner, productRentPeriod: product.rentPeriod || 'day' }
+    })
+    if (hasVariants && expandedProducts.value.has(product._id)) {
+      product.variants.forEach(variant => {
+        groups.push({
+          key: `${product._id}_${variant._id}`,
+          title: variant.name || 'Default',
+          data: {
+            productId: product._id,
+            productName: product.name || 'Unknown',
+            variantId: variant._id,
+            variantName: variant.name,
+            isVariantRow: true,
+            productImages: variant.images?.length ? variant.images : (product.images || []),
+            productPrice: variant.price || product.price || 0,
+            productOwner: product.owner,
+            productRentPeriod: product.rentPeriod || 'day'
+          }
+        })
+      })
+    }
+  })
+  return groups
+}
+
+// --- Flatten rents ---
+const flattenProductRents = (productItems) => {
+  const result = []
+  productItems.forEach(product => {
+    const name = product.name || 'Unknown'
+    const hasVariants = product.variants?.length > 0
+
+    if (product.rents?.length > 0) {
+      product.rents.forEach(rent => {
+        const groupKey = hasVariants && rent.variant ? `${product._id}_${rent.variant}` : product._id
+        result.push({ ...rent, productDetails: { name, productId: groupKey } })
+      })
+    }
+
+    if (!product.rents?.some(r => !r.variant)) {
+      result.push({ _id: `placeholder-${product._id}`, productDetails: { name, productId: product._id }, startDate: null, endDate: null, status: null })
+    }
+
+    if (hasVariants && expandedProducts.value.has(product._id)) {
+      product.variants.forEach(variant => {
+        const varKey = `${product._id}_${variant._id}`
+        if (!product.rents?.some(r => r.variant === variant._id)) {
+          result.push({ _id: `placeholder-${varKey}`, productDetails: { name: variant.name || 'Default', productId: varKey }, startDate: null, endDate: null, status: null })
+        }
+      })
+    }
+  })
+  return result
+}
+
+// --- Create rent popup ---
+const showCreatePopup = ref(false)
+const createRentData = reactive({
+  productId: null,
+  productName: '',
+  productImages: [],
+  productPrice: 0,
+  productOwner: null,
+  variantId: null,
+  variantName: '',
+  comment: '',
+  customer: null,
+  rentPeriod: 'day'
 })
+const createRentDates = ref({ start: null, end: null })
+
+const closeCreatePopup = () => {
+  showCreatePopup.value = false
+  createRentData.productId = null
+  createRentData.productName = ''
+  createRentData.productImages = []
+  createRentData.productPrice = 0
+  createRentData.productOwner = null
+  createRentData.variantId = null
+  createRentData.variantName = ''
+  createRentData.comment = ''
+  createRentData.customer = null
+  createRentData.rentPeriod = 'day'
+  createRentDates.value = { start: null, end: null }
+}
+
+const handleCellClick = ({ group, cell }) => {
+  if (!group?.data) return
+  const d = cell?.date ? dayjs(cell.date) : dayjs()
+
+  createRentData.productId = group.data.productId
+  createRentData.productName = group.data.isVariantRow ? group.data.productName : group.title
+  createRentData.productImages = group.data.productImages || []
+  createRentData.productPrice = group.data.productPrice || 0
+  createRentData.productOwner = group.data.productOwner
+  createRentData.variantId = group.data.variantId || null
+  createRentData.variantName = group.data.variantName || ''
+  createRentData.comment = ''
+  createRentData.customer = null
+  createRentData.rentPeriod = group.data.productRentPeriod || 'day'
+
+  const start = d.toDate()
+  const end = d.add(4, 'hour').toDate()
+  createRentDates.value = { start, end }
+
+  showCreatePopup.value = true
+}
+
+const onRentDatesUpdate = (productId, variantId, dates) => {
+  createRentDates.value = dates
+}
 
-// Handle load more
+const submitCreateRent = async () => {
+  const { start, end } = createRentDates.value
+  if (!start || !end) throw new Error('No dates selected')
+
+  const ownerId = getOwnerIdFromProduct(createRentData.productOwner)
+  const startDate = new Date(start).toISOString()
+  const endDate = new Date(end).toISOString()
+
+  // 1. Создаём рент
+  console.log('[submitCreateRent] customer:', JSON.stringify(createRentData.customer))
+  console.log('[submitCreateRent] customer._id:', createRentData.customer?._id)
+  const rentResult = await rents.actions.create({
+    product: createRentData.productId,
+    variant: createRentData.variantId || undefined,
+    startDate,
+    endDate,
+    status: 'pending',
+    comment: createRentData.comment || undefined,
+    owner: { type: 'Organization', target: ownerId },
+    creator: { type: 'User', target: auth.state.user?._id }
+  })
+
+  console.log('[submitCreateRent] rentResult:', JSON.stringify(rentResult))
+
+  // 2. Создаём ордер, передаём existingRents чтобы бэк не дублировал
+  const customerPayload = createRentData.customer?._id
+    ? { type: 'Customer', target: createRentData.customer._id }
+    : createRentData.customer?.phone
+      ? { type: 'Customer', target: null, phone: createRentData.customer.phone, email: createRentData.customer.email, profile: { name: createRentData.customer.profile?.name } }
+      : undefined
+  console.log('[submitCreateRent] customerPayload for order:', JSON.stringify(customerPayload))
+  const orderResult = await orders.actions.create({
+    customer: createRentData.customer?._id
+      ? { type: 'Customer', target: createRentData.customer._id }
+      : createRentData.customer?.phone
+        ? { type: 'Customer', target: null, phone: createRentData.customer.phone, email: createRentData.customer.email, profile: { name: createRentData.customer.profile?.name } }
+        : undefined,
+    owner: { type: 'Organization', target: ownerId },
+    status: 'pending',
+    creator: { type: 'User', target: auth.state.user?._id },
+    comment: createRentData.comment || undefined,
+    existingRents: rentResult?._id ? [rentResult._id] : [],
+    positions: [{
+      _id: createRentData.productId,
+      variant: createRentData.variantId || undefined,
+      name: createRentData.productName,
+      price: createRentData.productPrice,
+      quantity: 1,
+      listing: 'rent',
+      rentPeriod: createRentData.rentPeriod || 'flat',
+      date: { start: startDate, end: endDate }
+    }]
+  })
+
+  console.log('[submitCreateRent] orderResult:', JSON.stringify(orderResult))
+  console.log('[submitCreateRent] orderResult.customer:', JSON.stringify(orderResult?.customer))
+  if (!orderResult?._id) throw new Error('Order creation failed')
+
+  // 3. Привязываем рент к ордеру
+  if (rentResult?._id) {
+    await rents.actions.update({ _id: rentResult._id, order: orderResult._id })
+    rentResult.order = orderResult._id
+  }
+
+  // 4. Добавляем рент в Gantt реактивно (customer для отображения в баре)
+  if (createRentData.customer) {
+    rentResult.customer = {
+      profile: createRentData.customer.profile,
+      phone: createRentData.customer.phone,
+      email: createRentData.customer.email
+    }
+  }
+  const product = currentProducts.value.find(p => p._id === createRentData.productId)
+  if (product) {
+    if (!product.rents) product.rents = []
+    core.actions.add(product.rents, rentResult)
+  }
+
+  closeCreatePopup()
+}
+
+// --- Navigation ---
 const handleLoadMore = async (direction) => {
-  console.log('Loading more:', direction)
-  
   loading.value = true
-  
   try {
-    // Only update date if it's navigation (not refresh)
     if (direction !== 'refresh') {
       const d = dayjs(date.value)
-      let newDate
-      
-      switch (view.value) {
-        case 'hours':
-          newDate = direction === 'forward' 
-            ? d.add(1, 'day').toDate()
-            : d.subtract(1, 'day').toDate()
-          break
-        case 'days':
-          newDate = direction === 'forward'
-            ? d.add(1, 'month').toDate()
-            : d.subtract(1, 'month').toDate()
-          break
-        case 'weeks':
-          newDate = direction === 'forward'
-            ? d.add(1, 'month').toDate()
-            : d.subtract(1, 'month').toDate()
-          break
-      }
-      
-      date.value = newDate
+      const unit = view.value === 'hours' ? 'day' : 'month'
+      date.value = direction === 'forward' ? d.add(1, unit).toDate() : d.subtract(1, unit).toDate()
     }
-    
-    // Load data for the current date range
     await rents.actions.read({
       owner: route.params._id,
       startDate: dateRange.value.start.toISOString(),
@@ -166,69 +589,145 @@ const handleLoadMore = async (direction) => {
   }
 }
 
-// Handle item click
-const handleItemClick = (item) => {
-  console.log('Item clicked:', item)
-}
-
-// Handle today
-const handleToday = () => {
-  const now = new Date()
-  date.value = now
-  
-  // For hours view, ensure we're showing the current hour
-  if (view.value === 'hours') {
-    // Update date to current time to trigger proper centering
-    date.value = new Date()
+const handleToday = () => { date.value = new Date() }
+
+// --- Rent details popup ---
+const selectedRent = ref(null)
+const selectedRentOrder = ref(null)
+const selectedRentCustomer = ref(null)
+
+const orderLink = computed(() => {
+  if (!selectedRent.value?.order) return ''
+  const ctx = route.meta.context
+  const id = selectedRent.value.order
+  if (ctx === 'backoffice') return `/backoffice/orders/${id}`
+  if (ctx === 'organization') return `/organizations/${route.params._id}/orders/${id}`
+  return `/orders/${id}`
+})
+
+const customerLink = computed(() => {
+  if (!selectedRentCustomer.value?._id) return ''
+  const ctx = route.meta.context
+  const id = selectedRentCustomer.value._id
+  if (ctx === 'backoffice') return `/backoffice/customers?customerId=${id}`
+  if (ctx === 'organization') return `/organizations/${route.params._id}/customers?customerId=${id}`
+  return `/customers?customerId=${id}`
+})
+
+const rentStatusClass = computed(() => {
+  const map = { pending: 'bg-yellow', confirmed: 'bg-second', active: 'bg-green', completed: 'bg-grey', canceled: 'bg-red' }
+  return map[selectedRent.value?.status] || 'bg-second'
+})
+
+const formatDate = (d) => d ? dayjs(d).format('HH:mm, DD MMM YYYY') : '—'
+
+const loadOrderData = async (orderId) => {
+  if (!orderId) return
+  try {
+    console.log('[loadOrderData] loading order:', orderId)
+    const result = await orders.actions.read({ _id: orderId })
+    console.log('[loadOrderData] result:', JSON.stringify(result?.[0]?.customer))
+    if (result?.length > 0) {
+      selectedRentOrder.value = result[0]
+      console.log('[loadOrderData] customer.target:', result[0].customer?.target)
+      console.log('[loadOrderData] customer.target type:', typeof result[0].customer?.target)
+      if (result[0].customer?.target) selectedRentCustomer.value = result[0].customer.target
+      console.log('[loadOrderData] selectedRentCustomer:', JSON.stringify(selectedRentCustomer.value))
+    }
+  } catch (err) {
+    console.error('[loadOrderData] Error:', err)
   }
 }
 
-const today = new Date();
-const calendarStartDate = ref(new Date(today));
-calendarStartDate.value.setDate(today.getDate() - 30);
-
-const calendarEndDate = ref(new Date(today));
-calendarEndDate.value.setDate(today.getDate() + 30);
-
-// Toggle between calendar and list view
-const toggleView = () => {
-  isCalendarView.value = !isCalendarView.value;
-};
-
-// Navigate to rent details page
-const viewRentDetails = (rent) => {
-  router.push({ name: 'Rent Details', params: { _id: rent._id } });
-};
-
-// Load more data when scrolling the Gantt chart
-const loadMoreData = async ({ direction, date }) => {
-  // alert(direction)
-  console.log('scroll direction is', direction)
-  console.log('current date is', date)
-  // Update the visible range
-  if (direction === 'forward') {
-    calendarEndDate.value = date;
-  } else {
-    calendarStartDate.value = date;
+const handleItemClick = (item) => {
+  if (item._id?.startsWith('placeholder-')) return
+  console.log('[handleItemClick] item:', item._id, 'order:', item.order)
+  selectedRent.value = item
+  selectedRentOrder.value = null
+  selectedRentCustomer.value = null
+  if (item.order) loadOrderData(item.order)
+}
+
+const closeRentPopup = () => {
+  selectedRent.value = null
+  selectedRentOrder.value = null
+  selectedRentCustomer.value = null
+}
+
+// --- Обновить статус ренты в product.rents (оригинал, не копия) ---
+const updateRentInProducts = (rentId, updates) => {
+  for (const product of currentProducts.value) {
+    if (!product.rents) continue
+    const rent = product.rents.find(r => r._id === rentId)
+    if (rent) {
+      Object.assign(rent, updates)
+      break
+    }
   }
-  // Here you can add logic to fetch more rents if they fall within the new date range
+}
+
+// --- Quick actions ---
+const confirmRent = async () => {
   try {
-    // You might need to adjust this depending on your API and data structure
-    const startDateParam = new Date(calendarStartDate.value);
-    startDateParam.setDate(startDateParam.getDate() - 30); // Fetch a bit more to cover edge cases
-    
-    const endDateParam = new Date(calendarEndDate.value);
-    endDateParam.setDate(endDateParam.getDate() + 30);
-    
-    await rents.actions.read({
-      owner: route.params._id,
-      startDate: startDateParam.toISOString(),
-      endDate: endDateParam.toISOString()
-    });
-  } catch (error) {
-    console.error('Error loading additional rent data:', error);
-  }
-};
+    await rents.actions.update({ _id: selectedRent.value._id, status: 'active' })
+    selectedRent.value.status = 'active'
+    updateRentInProducts(selectedRent.value._id, { status: 'active' })
+    if (selectedRentOrder.value) {
+      await orders.actions.update({ _id: selectedRentOrder.value._id, status: 'in_progress' })
+      selectedRentOrder.value.status = 'in_progress'
+    }
+  } catch (err) { console.error('Error confirming rent:', err) }
+}
+
+const cancelRent = async () => {
+  try {
+    await rents.actions.update({ _id: selectedRent.value._id, status: 'canceled' })
+    selectedRent.value.status = 'canceled'
+    updateRentInProducts(selectedRent.value._id, { status: 'canceled' })
+    if (selectedRentOrder.value) {
+      await orders.actions.update({ _id: selectedRentOrder.value._id, status: 'canceled' })
+      selectedRentOrder.value.status = 'canceled'
+    }
+    closeRentPopup()
+  } catch (err) { console.error('Error canceling rent:', err) }
+}
+
+const closeRent = async () => {
+  try {
+    await rents.actions.update({ _id: selectedRent.value._id, status: 'completed' })
+    selectedRent.value.status = 'completed'
+    updateRentInProducts(selectedRent.value._id, { status: 'completed' })
+    if (selectedRentOrder.value) {
+      await orders.actions.update({ _id: selectedRentOrder.value._id, status: 'finished' })
+      selectedRentOrder.value.status = 'finished'
+    }
+    closeRentPopup()
+  } catch (err) { console.error('Error closing rent:', err) }
+}
+
+const closeRentNow = async () => {
+  const now = new Date().toISOString()
+  try {
+    await rents.actions.update({ _id: selectedRent.value._id, status: 'completed', endDate: now })
+    selectedRent.value.status = 'completed'
+    selectedRent.value.endDate = now
+    updateRentInProducts(selectedRent.value._id, { status: 'completed', endDate: now })
+    if (selectedRentOrder.value) {
+      await orders.actions.update({ _id: selectedRentOrder.value._id, status: 'finished' })
+      selectedRentOrder.value.status = 'finished'
+    }
+    closeRentPopup()
+  } catch (err) { console.error('Error closing rent:', err) }
+}
+
+const togglePaymentStatus = async () => {
+  if (!selectedRentOrder.value) return
+  const newStatus = selectedRentOrder.value.payment?.status === 'paid' ? 'unpaid' : 'paid'
+  try {
+    await orders.actions.update({ _id: selectedRentOrder.value._id, payment: { ...selectedRentOrder.value.payment, status: newStatus } })
+    selectedRentOrder.value.payment = { ...selectedRentOrder.value.payment, status: newStatus }
+  } catch (err) { console.error('Error toggling payment:', err) }
+}
 </script>
 
 <style lang="scss">