Дмитрий
143cc458c1
Q.DEFER.002 sub-B closure: manual Pa11y audit-pass via Playwright MCP login + axe-core CDN inject on 16 auth-required views. Found ~13 unique violation patterns, 12 fixed, 3 deferred to Q.DEFER.004. ROOT CAUSE found: AdminLayout `<v-navigation-drawer color="secondary" theme="dark">` resolved to Vuetify default-dark `secondary=#54b6b2` (Teal mid) instead of liderraForest `#012019` теало-нуар. Switching to direct hex preserves design intent + restores white-text contrast across all 8 admin views (~50 nodes color-contrast violations cleared). Patterns fixed: 1. AdminLayout sidebar palette (8 admin views): - color="secondary" → color="#012019" (root cause) - .brand-sub red #b94837 → #e06155 (3.41 → 5.08) - .nav-count gray #7a8c87 → #8a9c95 (4.26 → 5.34) - <v-list nav> + role="navigation" + aria-label (aria-required-children fix: <v-list role=list> had [role=link] children — undefined для list) 2. DashboardBalance .runway-bar — role="img" (aria-prohibited-attr fix) 3. DashboardKpiRow .delta-up — #2e8b57 → #1b6e3b (4.27 → 6.25) 4. TransactionsTable .tx-amount-up — #2e8b57 → #1b6e3b (same fix) 5. RemindersList .empty-hint — #9a9690 → #6b6356 (2.98 → 5.74; +liderra-muted alignment) 6. KanbanView .kanban-board — tabindex="0" role="region" aria-label (scrollable-region-focusable fix) 7. ProjectCard: - .v-progress-linear + :aria-label="Прогресс дневной нормы: N%" - icon menu :aria-label="Меню действий проекта «...»" - bulk-select .card-check input :aria-label="Выбрать проект «...»" 8. useStatusPill in_progress #3F7C95 → #2A5A6E (4.07 → 6.11); useStatusPill.spec.ts sync 9. ProjectsView toolbar select-all input aria-label 10. AdminTenants impersonate v-btn aria-label 11. Global app.css: `.v-messages, .v-field-label { --v-medium-emphasis-opacity: 0.7; }` Vuetify default ~0.52 → rendered #7a7a7a/#767471 fails 4.20-4.29:1; 0.7 → rendered ≈#595959 → 7.9:1+ passes WCAG AA. Re-verified post-fix via axe-core on all affected views: all clean except DEV-only `.dev-index-num` chip (tree-shaked в prod, not a real violation). Vitest verified post-fix: 79 files / 614 passed / 3 skipped / 0 failed (baseline preserved). 3 patterns deferred to Q.DEFER.004: - DealsTable VDataTable show-select bulk-checkboxes (6 nodes) — Vuetify slot rewrite needed - AdminSupplierPrices 9 form inputs — v-text-field/v-switch label props - Vuetify v-tooltip eager-mount aria-tooltip-name — library-level cosmetic Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
105 lines
3.4 KiB
Vue
105 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* TransactionsTable — VDataTable истории транзакций с табами фильтрации
|
|
* (Все / Пополнения / Списания / Возвраты). Sprint 4 Phase B/2 — split BillingView.
|
|
*/
|
|
import { computed, ref } from 'vue';
|
|
import { BILLING_TABS, MOCK_TRANSACTIONS, type BillingTransaction } from '../../composables/mockBilling';
|
|
import { formatCost, statusChipColor, statusLabel, txAmountClass } from '../../composables/billingFormatters';
|
|
|
|
const activeTab = ref<(typeof BILLING_TABS)[number]['id']>('all');
|
|
|
|
const filteredTransactions = computed<BillingTransaction[]>(() => {
|
|
const tab = BILLING_TABS.find((t) => t.id === activeTab.value);
|
|
const types = tab?.types;
|
|
if (!types) return MOCK_TRANSACTIONS;
|
|
return MOCK_TRANSACTIONS.filter((tx) => types.includes(tx.type));
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<v-card variant="outlined" class="mt-4 panel">
|
|
<div class="panel-h pa-4">
|
|
<h2 class="text-h6 panel-title ma-0">История транзакций</h2>
|
|
<v-btn-toggle v-model="activeTab" mandatory color="primary" density="comfortable" variant="text">
|
|
<v-btn v-for="tab in BILLING_TABS" :key="tab.id" :value="tab.id" size="small">
|
|
{{ tab.label }}
|
|
</v-btn>
|
|
</v-btn-toggle>
|
|
</div>
|
|
|
|
<v-data-table
|
|
:items="filteredTransactions"
|
|
:headers="[
|
|
{ title: 'Дата', key: 'when', sortable: false },
|
|
{ title: 'Операция', key: 'description', sortable: false },
|
|
{ title: 'ID', key: 'code', sortable: false },
|
|
{ title: 'Статус', key: 'status', sortable: false },
|
|
{ title: 'Сумма', key: 'amount', align: 'end', sortable: false },
|
|
]"
|
|
items-per-page="-1"
|
|
hide-default-footer
|
|
density="comfortable"
|
|
>
|
|
<template #[`item.when`]="{ item }">
|
|
<span class="tx-when num">{{ item.when }}</span>
|
|
</template>
|
|
<template #[`item.code`]="{ item }">
|
|
<span class="tx-id">#{{ item.code }}</span>
|
|
</template>
|
|
<template #[`item.status`]="{ item }">
|
|
<v-chip size="small" variant="tonal" :color="statusChipColor(item.status)">
|
|
{{ statusLabel(item.status) }}
|
|
</v-chip>
|
|
</template>
|
|
<template #[`item.amount`]="{ item }">
|
|
<span class="num" :class="txAmountClass(item)">
|
|
{{ item.status === 'rejected' ? '— 0 ₽' : formatCost(item.amount) }}
|
|
</span>
|
|
</template>
|
|
</v-data-table>
|
|
</v-card>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.num {
|
|
font-family: 'JetBrains Mono', ui-monospace, monospace;
|
|
font-feature-settings: 'tnum';
|
|
font-weight: 500;
|
|
}
|
|
|
|
.panel {
|
|
background: #fff;
|
|
}
|
|
.panel-h {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
}
|
|
.panel-title {
|
|
font-variation-settings: 'opsz' 18;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.tx-when {
|
|
font-size: 12px;
|
|
color: #66635c;
|
|
}
|
|
.tx-id {
|
|
font-family: 'JetBrains Mono', ui-monospace, monospace;
|
|
font-size: 12px;
|
|
color: #66635c;
|
|
}
|
|
.tx-amount-up {
|
|
color: #1b6e3b;
|
|
}
|
|
.tx-amount-down {
|
|
color: #b83a3a;
|
|
}
|
|
.tx-amount-neutral {
|
|
color: #66635c;
|
|
}
|
|
</style>
|