167 lines
6.3 KiB
Vue
167 lines
6.3 KiB
Vue
<script setup lang="ts">
|
||
definePageMeta({
|
||
layout: 'manager',
|
||
middleware: ['auth-oidc'],
|
||
})
|
||
|
||
type QuotationCard = {
|
||
id: string
|
||
client: string
|
||
from: string
|
||
to: string
|
||
mode: string
|
||
weight: string
|
||
status: 'draft' | 'pricing' | 'graph-ready'
|
||
note: string
|
||
}
|
||
|
||
const search = ref('')
|
||
const quotations = useState<QuotationCard[]>('manager-quotation-cards', () => [
|
||
{
|
||
id: 'qt-001',
|
||
client: 'Client 42A7',
|
||
from: 'Guangzhou',
|
||
to: 'Moscow',
|
||
mode: 'Multimodal',
|
||
weight: '800 kg',
|
||
status: 'pricing',
|
||
note: 'Базовый сценарий для переноса quotation flow из logistics.',
|
||
},
|
||
{
|
||
id: 'qt-002',
|
||
client: 'Client 90F2',
|
||
from: 'Shenzhen',
|
||
to: 'Novorossiysk',
|
||
mode: 'Sea + truck',
|
||
weight: '1 200 kg',
|
||
status: 'graph-ready',
|
||
note: 'Маршрут уже мыслится как graph-native corridor без Odoo-связки.',
|
||
},
|
||
{
|
||
id: 'qt-003',
|
||
client: 'Client 18D1',
|
||
from: 'Yiwu',
|
||
to: 'Kazan',
|
||
mode: 'Rail',
|
||
weight: '2 400 kg',
|
||
status: 'draft',
|
||
note: 'Черновик manager workspace под tariffs и decision rules.',
|
||
},
|
||
])
|
||
|
||
const filteredCards = computed(() => {
|
||
const query = search.value.trim().toLowerCase()
|
||
if (!query) return quotations.value
|
||
|
||
return quotations.value.filter((item) => {
|
||
return [item.client, item.from, item.to, item.mode, item.note, item.status]
|
||
.join(' ')
|
||
.toLowerCase()
|
||
.includes(query)
|
||
})
|
||
})
|
||
|
||
function createNewQuotation() {
|
||
quotations.value = [
|
||
{
|
||
id: `qt-${String(quotations.value.length + 1).padStart(3, '0')}`,
|
||
client: `Client ${(Math.random().toString(16).slice(2, 6)).toUpperCase()}`,
|
||
from: 'Shanghai',
|
||
to: 'Saint Petersburg',
|
||
mode: 'Multimodal',
|
||
weight: '950 kg',
|
||
status: 'draft',
|
||
note: 'Новый manager draft. Дальше его нужно привязать к реальному quotation microservice.',
|
||
},
|
||
...quotations.value,
|
||
]
|
||
}
|
||
|
||
function statusMeta(status: QuotationCard['status']) {
|
||
if (status === 'graph-ready') return { label: 'Graph ready', className: 'bg-emerald-100 text-emerald-700' }
|
||
if (status === 'pricing') return { label: 'Pricing', className: 'bg-amber-100 text-amber-700' }
|
||
return { label: 'Draft', className: 'bg-stone-200 text-stone-700' }
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div>
|
||
<section class="grid gap-3 lg:grid-cols-[minmax(0,1.3fr)_minmax(0,0.7fr)]">
|
||
<article class="rounded-[28px] bg-white p-6">
|
||
<p class="text-xs font-bold uppercase tracking-[0.16em] text-[#8c7b67]">Quotations workspace</p>
|
||
<h2 class="mt-2 text-3xl font-black text-[#2f2418]">Exact logistics shell, Optovia logic next</h2>
|
||
<p class="mt-4 max-w-[760px] text-sm leading-6 text-[#5f4b33]">
|
||
Этот экран уже переведён в визуальный паттерн `logistic`: те же теплые поверхности, те же rounded cards, тот же manager rhythm.
|
||
Следующий шаг здесь очевидный: посадить quotation CRUD и tariff selection на ваши microservices и graph-модель.
|
||
</p>
|
||
</article>
|
||
|
||
<article class="rounded-[28px] bg-[#2f2418] p-6 text-white shadow-[0_20px_44px_rgba(47,36,24,0.18)]">
|
||
<p class="text-xs font-bold uppercase tracking-[0.16em] text-white/60">Migration note</p>
|
||
<h3 class="mt-2 text-2xl font-black">No Odoo frontend path</h3>
|
||
<p class="mt-4 text-sm leading-6 text-white/78">
|
||
Quotation UI here is ready to stop depending on old Odoo-driven flows. Сейчас это staging surface, дальше сюда подключается новый graph-native backend contract.
|
||
</p>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="mt-6 flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
|
||
<label class="block flex-1">
|
||
<span class="sr-only">Search quotations</span>
|
||
<input
|
||
v-model="search"
|
||
class="input h-12 w-full rounded-full border-0 bg-white px-5 shadow-none"
|
||
placeholder="Поиск по клиенту, маршруту или статусу"
|
||
>
|
||
</label>
|
||
<button class="btn rounded-full border-0 bg-[#2f2418] px-6 text-white hover:bg-[#493824]" @click="createNewQuotation">
|
||
Создать quotation draft
|
||
</button>
|
||
</section>
|
||
|
||
<section class="mt-6 space-y-3">
|
||
<article
|
||
v-for="item in filteredCards"
|
||
:key="item.id"
|
||
class="rounded-[28px] bg-white px-6 py-5 shadow-none transition-[transform,box-shadow] hover:-translate-y-0.5 hover:shadow-[0_18px_34px_rgba(62,47,26,0.12)]"
|
||
>
|
||
<div class="grid gap-3 md:grid-cols-[minmax(0,2fr)_auto_minmax(0,1.3fr)_auto] md:items-center">
|
||
<div class="flex min-w-0 items-center gap-3 text-lg font-black leading-tight text-[#2f2418]">
|
||
<p class="truncate">{{ item.from }}</p>
|
||
<span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[#efe7da] text-[#7a684f]">
|
||
<svg viewBox="0 0 20 20" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||
<path d="M3.5 10h13" />
|
||
<path d="M12 5.5 16.5 10 12 14.5" />
|
||
</svg>
|
||
</span>
|
||
<p class="truncate">{{ item.to }}</p>
|
||
</div>
|
||
|
||
<p class="whitespace-nowrap text-sm font-medium text-[#6f6353]">
|
||
{{ item.weight }}
|
||
</p>
|
||
|
||
<div class="min-w-0">
|
||
<p class="truncate text-sm font-semibold text-[#2f2418]">{{ item.client }}</p>
|
||
<p class="mt-1 truncate text-sm text-[#6f6353]">{{ item.mode }} · {{ item.note }}</p>
|
||
</div>
|
||
|
||
<div class="md:text-right">
|
||
<span class="inline-flex rounded-full px-3 py-1 text-xs font-semibold" :class="statusMeta(item.status).className">
|
||
{{ statusMeta(item.status).label }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article
|
||
v-if="filteredCards.length === 0"
|
||
class="rounded-[28px] bg-white p-8 text-center"
|
||
>
|
||
<p class="text-lg font-semibold text-[#2f2418]">Quotation cards не найдены</p>
|
||
<p class="mt-2 text-sm text-[#6f6353]">Измени строку поиска или добавь новый draft.</p>
|
||
</article>
|
||
</section>
|
||
</div>
|
||
</template>
|