optovia/webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: pin home capsule flow and switch explore panel to white left dock

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-03-12 15:42:56 +07:00
parent 530c97b912
commit c940369c81
8 changed files with 113 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
app/components/catalog/InfoPanel.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="flex flex-col h-full">
<!-- Header with close button -->
<div class="flex-shrink-0 p-4 border-b border-white/10">
<div class="flex-shrink-0 p-4 border-b border-base-300">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<div
@@ -10,19 +10,19 @@
>
<Icon :name="entityIcon" size="14" class="text-white" />
</div>
<h3 class="font-semibold text-base text-white">{{ entityName }}</h3>
<h3 class="font-semibold text-base text-base-content">{{ entityName }}</h3>
</div>
<div class="flex items-center gap-2">
<button
v-if="(entityType === 'hub' || entityType === 'supplier') && entity?.uuid"
class="rounded-full glass-bright border border-white/30 shadow-lg p-1.5 transition-transform hover:scale-105"
class="rounded-full bg-base-100 border border-base-300 shadow-lg p-1.5 transition-transform hover:scale-105"
@click="emit('pin', entityType, { uuid: entity?.uuid, name: entity?.name })"
aria-label="Pin"
title="Pin"
>
<Icon name="lucide:pin" size="16" class="text-white" />
<Icon name="lucide:pin" size="16" class="text-base-content" />
</button>
<button class="btn btn-ghost btn-xs btn-circle text-white/60 hover:text-white" @click="emit('close')">
<button class="btn btn-ghost btn-xs btn-circle text-base-content/60 hover:text-base-content" @click="emit('close')">
<Icon name="lucide:x" size="16" />
</button>
</div>
@@ -33,7 +33,7 @@
<div class="flex-1 overflow-y-auto p-4">
<!-- Loading state -->
<div v-if="loading" class="flex items-center justify-center py-8">
<span class="loading loading-spinner loading-md text-white" />
<span class="loading loading-spinner loading-md text-base-content" />
</div>
<!-- Content -->
@@ -41,13 +41,13 @@
<!-- Entity Info Header (text, not card) -->
<div class="mb-2">
<!-- Location for hub/supplier -->
<p v-if="entityLocation" class="text-sm text-white/70 flex items-center gap-1">
<p v-if="entityLocation" class="text-sm text-base-content/70 flex items-center gap-1">
<Icon name="lucide:map-pin" size="14" />
{{ entityLocation }}
</p>
<!-- Price for offer -->
<p v-if="entityType === 'offer' && entity?.pricePerUnit" class="text-sm text-white/70 flex items-center gap-1">
<p v-if="entityType === 'offer' && entity?.pricePerUnit" class="text-sm text-base-content/70 flex items-center gap-1">
<Icon name="lucide:tag" size="14" />
{{ formatPrice(entity.pricePerUnit) }} {{ entity.currency || 'RUB' }}/{{ entity.unit || 't' }}
</p>
@@ -65,8 +65,8 @@
</div>
<!-- KYC Teaser Section (for supplier) -->
<section v-if="entityType === 'supplier' && kycTeaser" class="bg-white/5 rounded-lg p-3">
<h3 class="text-sm font-semibold text-white/80 mb-2 flex items-center gap-2">
<section v-if="entityType === 'supplier' && kycTeaser" class="bg-base-200/50 rounded-lg p-3">
<h3 class="text-sm font-semibold text-base-content/80 mb-2 flex items-center gap-2">
<Icon name="lucide:shield-check" size="16" />
{{ $t('catalog.info.kycTeaser') }}
</h3>
@@ -74,19 +74,19 @@
<div class="flex flex-col gap-2 text-sm">
<!-- Company Type -->
<div class="flex items-center justify-between">
<span class="text-white/60">{{ $t('catalog.info.companyType') }}</span>
<span class="text-white">{{ kycTeaser.companyType }}</span>
<span class="text-base-content/60">{{ $t('catalog.info.companyType') }}</span>
<span class="text-base-content">{{ kycTeaser.companyType }}</span>
</div>
<!-- Registration Year -->
<div class="flex items-center justify-between">
<span class="text-white/60">{{ $t('catalog.info.registrationYear') }}</span>
<span class="text-white">{{ kycTeaser.registrationYear }}</span>
<span class="text-base-content/60">{{ $t('catalog.info.registrationYear') }}</span>
<span class="text-base-content">{{ kycTeaser.registrationYear }}</span>
</div>
<!-- Status -->
<div class="flex items-center justify-between">
<span class="text-white/60">{{ $t('catalog.info.status') }}</span>
<span class="text-base-content/60">{{ $t('catalog.info.status') }}</span>
<span :class="kycTeaser.isActive ? 'text-success' : 'text-error'">
{{ kycTeaser.isActive ? $t('catalog.info.active') : $t('catalog.info.inactive') }}
</span>
@@ -94,8 +94,8 @@
<!-- Sources Count -->
<div class="flex items-center justify-between">
<span class="text-white/60">{{ $t('catalog.info.sourcesCount') }}</span>
<span class="text-white">{{ kycTeaser.sourcesCount }}</span>
<span class="text-base-content/60">{{ $t('catalog.info.sourcesCount') }}</span>
<span class="text-base-content">{{ kycTeaser.sourcesCount }}</span>
</div>
</div>
@@ -111,14 +111,14 @@
<!-- Products Section (for hub/supplier) - hide when product selected -->
<section v-if="(entityType === 'hub' || entityType === 'supplier') && !selectedProduct">
<h3 class="text-sm font-semibold text-white/80 mb-2 flex items-center gap-2">
<h3 class="text-sm font-semibold text-base-content/80 mb-2 flex items-center gap-2">
<Icon name="lucide:package" size="16" />
{{ productsSectionTitle }}
<span v-if="loadingProducts" class="loading loading-spinner loading-xs" />
<span v-else-if="relatedProducts.length > 0" class="text-white/50">({{ relatedProducts.length }})</span>
<span v-else-if="relatedProducts.length > 0" class="text-base-content/50">({{ relatedProducts.length }})</span>
</h3>
<div v-if="!loadingProducts && relatedProducts.length === 0" class="text-white/50 text-sm py-2">
<div v-if="!loadingProducts && relatedProducts.length === 0" class="text-base-content/50 text-sm py-2">
{{ $t('catalog.empty.noProducts') }}
</div>
<div v-else-if="!loadingProducts" class="flex flex-col gap-2">
@@ -134,12 +134,12 @@
@select="onProductSelect(product)"
/>
<button
class="absolute -top-2 -right-2 opacity-0 group-hover:opacity-100 transition-opacity rounded-full glass-bright border border-white/30 shadow-lg p-1.5 hover:scale-105"
class="absolute -top-2 -right-2 opacity-0 group-hover:opacity-100 transition-opacity rounded-full bg-base-100 border border-base-300 shadow-lg p-1.5 hover:scale-105"
@click.stop="emit('pin', 'product', product)"
aria-label="Pin product"
title="Pin"
>
<Icon name="lucide:pin" size="16" class="text-white" />
<Icon name="lucide:pin" size="16" class="text-base-content" />
</button>
</div>
</div>
@@ -148,14 +148,14 @@
<!-- Offers Section (after product selected) -->
<section v-if="(entityType === 'hub' || entityType === 'supplier') && selectedProduct">
<div class="flex items-center justify-between mb-2">
<h3 class="text-sm font-semibold text-white/80 flex items-center gap-2">
<h3 class="text-sm font-semibold text-base-content/80 flex items-center gap-2">
<Icon name="lucide:shopping-bag" size="16" />
{{ $t('catalog.headers.offers') }}
<span v-if="loadingOffers" class="loading loading-spinner loading-xs" />
<span v-else-if="offersWithPrice.length > 0" class="text-white/50">({{ offersWithPrice.length }})</span>
<span v-else-if="offersWithPrice.length > 0" class="text-base-content/50">({{ offersWithPrice.length }})</span>
</h3>
<button
class="flex items-center gap-2 px-2 py-1 rounded-full border border-white/15 bg-white/10 text-xs text-white/80 hover:bg-white/20 transition-colors"
class="flex items-center gap-2 px-2 py-1 rounded-full border border-base-300/70 bg-base-200/70 text-xs text-base-content/80 hover:bg-base-200 transition-colors"
@click="emit('select-product', null)"
>
<Icon name="lucide:package" size="12" />
@@ -164,7 +164,7 @@
</button>
</div>
<div v-if="!loadingOffers && offersWithPrice.length === 0" class="text-white/50 text-sm py-2">
<div v-if="!loadingOffers && offersWithPrice.length === 0" class="text-base-content/50 text-sm py-2">
{{ $t('catalog.empty.noOffers') }}
</div>
<div v-else-if="!loadingOffers" class="flex flex-col gap-2">
@@ -187,14 +187,14 @@
<!-- Suppliers Section (for hub only) -->
<section v-if="entityType === 'hub' && !selectedProduct">
<h3 class="text-sm font-semibold text-white/80 mb-2 flex items-center gap-2">
<h3 class="text-sm font-semibold text-base-content/80 mb-2 flex items-center gap-2">
<Icon name="lucide:factory" size="16" />
{{ $t('catalog.info.suppliersNearby') }}
<span v-if="loadingSuppliers" class="loading loading-spinner loading-xs" />
<span v-else-if="relatedSuppliers.length > 0" class="text-white/50">({{ relatedSuppliers.length }})</span>
<span v-else-if="relatedSuppliers.length > 0" class="text-base-content/50">({{ relatedSuppliers.length }})</span>
</h3>
<div v-if="!loadingSuppliers && relatedSuppliers.length === 0" class="text-white/50 text-sm py-2">
<div v-if="!loadingSuppliers && relatedSuppliers.length === 0" class="text-base-content/50 text-sm py-2">
{{ $t('catalog.info.noSuppliers') }}
</div>
<div v-else-if="!loadingSuppliers" class="flex flex-col gap-2">
@@ -209,12 +209,12 @@
@select="onSupplierSelect(supplier)"
/>
<button
class="absolute -top-2 -right-2 opacity-0 group-hover:opacity-100 transition-opacity rounded-full glass-bright border border-white/30 shadow-lg p-1.5 hover:scale-105"
class="absolute -top-2 -right-2 opacity-0 group-hover:opacity-100 transition-opacity rounded-full bg-base-100 border border-base-300 shadow-lg p-1.5 hover:scale-105"
@click.stop="emit('pin', 'supplier', supplier)"
aria-label="Pin supplier"
title="Pin"
>
<Icon name="lucide:pin" size="16" class="text-white" />
<Icon name="lucide:pin" size="16" class="text-base-content" />
</button>
</div>
</div>
@@ -222,25 +222,25 @@
<!-- Hubs Section (for supplier/offer) -->
<section v-if="entityType === 'supplier' || entityType === 'offer'">
<h3 class="text-sm font-semibold text-white/80 mb-2 flex items-center gap-2">
<h3 class="text-sm font-semibold text-base-content/80 mb-2 flex items-center gap-2">
<Icon name="lucide:warehouse" size="16" />
{{ $t('catalog.info.nearestHubs') }}
<span v-if="loadingHubs" class="loading loading-spinner loading-xs" />
<span v-else-if="relatedHubs.length > 0" class="text-white/50">({{ relatedHubs.length }})</span>
<span v-else-if="relatedHubs.length > 0" class="text-base-content/50">({{ relatedHubs.length }})</span>
</h3>
<div v-if="!loadingHubs && relatedHubs.length === 0" class="text-white/50 text-sm py-2">
<div v-if="!loadingHubs && relatedHubs.length === 0" class="text-base-content/50 text-sm py-2">
{{ $t('catalog.info.noHubs') }}
</div>
<div v-else-if="!loadingHubs" class="space-y-4">
<template v-if="railHubs.length">
<div class="grid grid-cols-2 gap-2">
<Card padding="small" class="border border-white/10 bg-white/5">
<Card padding="small" class="border border-base-300 bg-base-200/50">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg bg-white/10 flex items-center justify-center">
<Icon name="lucide:train-front" size="16" class="text-white/80" />
<div class="w-8 h-8 rounded-lg bg-base-200/70 flex items-center justify-center">
<Icon name="lucide:train-front" size="16" class="text-base-content/80" />
</div>
<div class="text-sm text-white/80">{{ $t('catalog.info.railHubs') }}</div>
<div class="text-sm text-base-content/80">{{ $t('catalog.info.railHubs') }}</div>
</div>
</Card>
<div
@@ -255,12 +255,12 @@
@select="onHubSelect(hub)"
/>
<button
class="absolute -top-2 -right-2 opacity-0 group-hover:opacity-100 transition-opacity rounded-full glass-bright border border-white/30 shadow-lg p-1.5 hover:scale-105"
class="absolute -top-2 -right-2 opacity-0 group-hover:opacity-100 transition-opacity rounded-full bg-base-100 border border-base-300 shadow-lg p-1.5 hover:scale-105"
@click.stop="emit('pin', 'hub', hub)"
aria-label="Pin hub"
title="Pin"
>
<Icon name="lucide:pin" size="16" class="text-white" />
<Icon name="lucide:pin" size="16" class="text-base-content" />
</button>
</div>
</div>
@@ -268,12 +268,12 @@
<template v-if="seaHubs.length">
<div class="grid grid-cols-2 gap-2">
<Card padding="small" class="border border-white/10 bg-white/5">
<Card padding="small" class="border border-base-300 bg-base-200/50">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg bg-white/10 flex items-center justify-center">
<Icon name="lucide:ship" size="16" class="text-white/80" />
<div class="w-8 h-8 rounded-lg bg-base-200/70 flex items-center justify-center">
<Icon name="lucide:ship" size="16" class="text-base-content/80" />
</div>
<div class="text-sm text-white/80">{{ $t('catalog.info.seaHubs') }}</div>
<div class="text-sm text-base-content/80">{{ $t('catalog.info.seaHubs') }}</div>
</div>
</Card>
<div
@@ -288,12 +288,12 @@
@select="onHubSelect(hub)"
/>
<button
class="absolute -top-2 -right-2 opacity-0 group-hover:opacity-100 transition-opacity rounded-full glass-bright border border-white/30 shadow-lg p-1.5 hover:scale-105"
class="absolute -top-2 -right-2 opacity-0 group-hover:opacity-100 transition-opacity rounded-full bg-base-100 border border-base-300 shadow-lg p-1.5 hover:scale-105"
@click.stop="emit('pin', 'hub', hub)"
aria-label="Pin hub"
title="Pin"
>
<Icon name="lucide:pin" size="16" class="text-white" />
<Icon name="lucide:pin" size="16" class="text-base-content" />
</button>
</div>
</div>