771 lines
20 KiB
Vue
771 lines
20 KiB
Vue
<script setup lang="ts">
|
||
import { computed, onMounted, ref } from 'vue'
|
||
import { useRoute, useRouter } from 'vue-router'
|
||
import StatusBadge from '@/components/ui/StatusBadge.vue'
|
||
import { checksApi, mapAdminOrder, ordersApi, type ApiOrder } from '@/services/api'
|
||
import { ApiError } from '@/services/http'
|
||
import { formatCurrency, formatDate, formatDateTime as formatPersianDateTime } from '@/utils/format'
|
||
import { useToast } from '@/composables/useToast'
|
||
import { confirm } from '@/composables/useConfirm'
|
||
import { rawStatusLabel } from '@/utils/orderStatus'
|
||
import type { Check, RawOrderStatus } from '@/types'
|
||
|
||
const route = useRoute()
|
||
const router = useRouter()
|
||
const toast = useToast()
|
||
|
||
const activeTab = ref<'info' | 'history'>('info')
|
||
const order = ref<ApiOrder | null>(null)
|
||
const orderChecks = ref<Check[]>([])
|
||
const busyId = ref<string | null>(null)
|
||
const expandedId = ref<string | null>(null)
|
||
const previewImage = ref<string | null>(null)
|
||
|
||
const displayOrder = computed(() =>
|
||
order.value ? mapAdminOrder(order.value) : null,
|
||
)
|
||
|
||
const totalCheckAmount = computed(() =>
|
||
orderChecks.value.reduce((sum, c) => sum + c.amount, 0),
|
||
)
|
||
|
||
const pendingChecks = computed(() =>
|
||
orderChecks.value.filter((c) => c.status === 'pending_review'),
|
||
)
|
||
|
||
const allChecksApproved = computed(
|
||
() =>
|
||
orderChecks.value.length > 0 &&
|
||
orderChecks.value.every((c) => c.status === 'approved'),
|
||
)
|
||
|
||
const canFinalApprove = computed(() => {
|
||
if (!allChecksApproved.value || !order.value) return false
|
||
const status = (order.value.rawStatus ?? order.value.status) as RawOrderStatus
|
||
return status === 'checks_approved'
|
||
})
|
||
|
||
const finalizing = ref(false)
|
||
|
||
const reviewHistory = computed(() => {
|
||
const items = order.value?.statusHistory ?? []
|
||
const checkRelated = new Set([
|
||
'check_in_progress',
|
||
'awaiting_check_review',
|
||
'check_needs_fix',
|
||
'check_rejected',
|
||
'checks_approved',
|
||
])
|
||
const filtered = items.filter(
|
||
(h) =>
|
||
checkRelated.has(h.toStatus) ||
|
||
(h.fromStatus && checkRelated.has(h.fromStatus)) ||
|
||
/چک/.test(h.note || '') ||
|
||
/چک/.test(h.reason || ''),
|
||
)
|
||
const source = filtered.length ? filtered : items
|
||
return [...source].sort(
|
||
(a, b) => new Date(b.changedAt).getTime() - new Date(a.changedAt).getTime(),
|
||
)
|
||
})
|
||
|
||
const checkReviewNotes = computed(() =>
|
||
orderChecks.value
|
||
.filter((c) => c.notes?.trim())
|
||
.map((c) => ({
|
||
id: c.id,
|
||
row: c.row,
|
||
status: c.status,
|
||
notes: c.notes!,
|
||
updatedAt: c.updatedAt,
|
||
})),
|
||
)
|
||
|
||
async function loadData() {
|
||
const orderId = String(route.params.id)
|
||
try {
|
||
const [orderData, checksData] = await Promise.all([
|
||
ordersApi.get(orderId),
|
||
checksApi.listByOrder(orderId),
|
||
])
|
||
order.value = orderData
|
||
orderChecks.value = checksData
|
||
if (checksData.length === 1) expandedId.value = checksData[0]!.id
|
||
} catch (err) {
|
||
toast.error(err instanceof ApiError ? err.message : 'بارگذاری چکها انجام نشد.')
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
void loadData()
|
||
})
|
||
|
||
function goBack() {
|
||
router.push('/orders')
|
||
}
|
||
|
||
function checkBadgeStatus(status: Check['status']) {
|
||
if (status === 'approved') return 'check_approved'
|
||
if (status === 'rejected') return 'check_rejected'
|
||
return 'pending_check_review'
|
||
}
|
||
|
||
function actorLabel(changedBy?: string) {
|
||
if (!changedBy) return '—'
|
||
if (changedBy === 'customer') return 'مشتری'
|
||
if (changedBy.startsWith('admin:')) return 'ادمین'
|
||
return changedBy
|
||
}
|
||
|
||
function formatDateTime(iso?: string) {
|
||
return formatPersianDateTime(iso)
|
||
}
|
||
|
||
function ownerName(check: Check) {
|
||
return [check.ownerFirstName, check.ownerLastName].filter(Boolean).join(' ')
|
||
}
|
||
|
||
function detailFields(check: Check) {
|
||
return [
|
||
{ label: 'بانک', value: check.bankName },
|
||
{ label: 'شعبه', value: check.branchName },
|
||
{ label: 'شناسه صیادی', value: check.sayadId, ltr: true },
|
||
{ label: 'شماره چک', value: check.checkNumber, ltr: true },
|
||
{ label: 'صاحب چک', value: ownerName(check) },
|
||
{ label: 'کد ملی', value: check.ownerNationalId, ltr: true },
|
||
{ label: 'یادداشت', value: check.notes },
|
||
].filter((f) => !!f.value?.trim())
|
||
}
|
||
|
||
function toggleExpand(check: Check) {
|
||
expandedId.value = expandedId.value === check.id ? null : check.id
|
||
}
|
||
|
||
async function applyCheckStatus(check: Check, status: 'approved' | 'rejected') {
|
||
busyId.value = check.id
|
||
try {
|
||
const updated = await checksApi.updateStatus(check.id, { status })
|
||
const index = orderChecks.value.findIndex((c) => c.id === check.id)
|
||
if (index !== -1) orderChecks.value[index] = updated
|
||
order.value = await ordersApi.get(String(route.params.id))
|
||
return true
|
||
} catch (err) {
|
||
toast.error(err instanceof ApiError ? err.message : 'بهروزرسانی وضعیت چک انجام نشد.')
|
||
return false
|
||
} finally {
|
||
busyId.value = null
|
||
}
|
||
}
|
||
|
||
async function updateCheckStatus(check: Check, status: Check['status']) {
|
||
if (status !== 'approved' && status !== 'rejected') return
|
||
|
||
const amountLabel = formatCurrency(check.amount)
|
||
const ok = await confirm(
|
||
status === 'approved'
|
||
? {
|
||
title: 'تأیید چک',
|
||
message: `آیا از تأیید چک ردیف ${check.row} به مبلغ ${amountLabel} مطمئن هستید؟`,
|
||
tone: 'primary',
|
||
confirmLabel: 'تأیید چک',
|
||
cancelLabel: 'انصراف',
|
||
}
|
||
: {
|
||
title: 'رد چک',
|
||
message: `آیا از رد چک ردیف ${check.row} به مبلغ ${amountLabel} مطمئن هستید؟`,
|
||
tone: 'danger',
|
||
confirmLabel: 'رد چک',
|
||
cancelLabel: 'انصراف',
|
||
},
|
||
)
|
||
if (!ok) return
|
||
|
||
const success = await applyCheckStatus(check, status)
|
||
if (success) {
|
||
toast.success(status === 'approved' ? 'چک تأیید شد.' : 'چک رد شد.')
|
||
}
|
||
}
|
||
|
||
async function approveAll() {
|
||
const pending = pendingChecks.value
|
||
if (!pending.length) {
|
||
toast.error('چکی برای تأیید وجود ندارد.')
|
||
return
|
||
}
|
||
|
||
const ok = await confirm({
|
||
title: 'تأیید همه چکها',
|
||
message: `آیا از تأیید ${pending.length} چک در انتظار بررسی مطمئن هستید؟`,
|
||
tone: 'primary',
|
||
confirmLabel: 'تأیید همه',
|
||
cancelLabel: 'انصراف',
|
||
})
|
||
if (!ok) return
|
||
|
||
for (const check of pending) {
|
||
const success = await applyCheckStatus(check, 'approved')
|
||
if (!success) return
|
||
}
|
||
toast.success('همه چکهای در انتظار تأیید شدند.')
|
||
}
|
||
|
||
async function finalApproveOrder() {
|
||
if (!order.value || finalizing.value) return
|
||
|
||
const ok = await confirm({
|
||
title: 'تأیید نهایی سفارش',
|
||
message:
|
||
'با تأیید نهایی، سفارش از مرحله بررسی چک خارج میشود و وارد آمادهسازی میگردد. ادامه میدهید؟',
|
||
tone: 'primary',
|
||
confirmLabel: 'تأیید نهایی',
|
||
cancelLabel: 'انصراف',
|
||
})
|
||
if (!ok) return
|
||
|
||
finalizing.value = true
|
||
try {
|
||
const updated = await ordersApi.updateStatus(order.value.id, {
|
||
status: 'final_approved',
|
||
note: 'تأیید نهایی پس از تأیید همه چکها',
|
||
})
|
||
order.value = updated
|
||
toast.success('سفارش تأیید نهایی شد.')
|
||
} catch (err) {
|
||
toast.error(err instanceof ApiError ? err.message : 'تأیید نهایی انجام نشد.')
|
||
} finally {
|
||
finalizing.value = false
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="checks-page">
|
||
<div class="admin-page-header">
|
||
<div>
|
||
<h1 class="admin-page-header__title">مدیریت چکهای سفارش</h1>
|
||
</div>
|
||
<div v-if="displayOrder" class="checks-page__order-meta">
|
||
<StatusBadge :status="displayOrder.status" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="checks-page__stats">
|
||
<div class="checks-page__stat">
|
||
<span>تعداد</span>
|
||
<strong>{{ orderChecks.length }}</strong>
|
||
</div>
|
||
<div class="checks-page__stat">
|
||
<span>راس</span>
|
||
<strong>{{ order?.checkRassDays ?? '—' }} روز</strong>
|
||
</div>
|
||
<div class="checks-page__stat">
|
||
<span>مجموع چک</span>
|
||
<strong>{{ formatCurrency(totalCheckAmount) }}</strong>
|
||
</div>
|
||
<div class="checks-page__stat">
|
||
<span>مبلغ سفارش</span>
|
||
<strong>{{ displayOrder?.totalAmount ? formatCurrency(displayOrder.totalAmount) : '—' }}</strong>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="admin-tabs">
|
||
<button
|
||
type="button"
|
||
class="admin-tab"
|
||
:class="{ active: activeTab === 'info' }"
|
||
@click="activeTab = 'info'"
|
||
>
|
||
چکها ({{ orderChecks.length }})
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="admin-tab"
|
||
:class="{ active: activeTab === 'history' }"
|
||
@click="activeTab = 'history'"
|
||
>
|
||
تاریخچه
|
||
</button>
|
||
</div>
|
||
|
||
<template v-if="activeTab === 'info'">
|
||
<div v-if="!orderChecks.length" class="admin-empty-placeholder admin-card">
|
||
چکی برای این سفارش ثبت نشده است.
|
||
</div>
|
||
|
||
<div v-else class="checks-page__list admin-card">
|
||
<div
|
||
v-for="check in orderChecks"
|
||
:key="check.id"
|
||
class="check-row"
|
||
:class="{ open: expandedId === check.id }"
|
||
>
|
||
<button type="button" class="check-row__main" @click="toggleExpand(check)">
|
||
<span class="check-row__chevron" aria-hidden="true">{{ expandedId === check.id ? '▾' : '◂' }}</span>
|
||
|
||
<span
|
||
v-if="check.frontImage || check.backImage"
|
||
class="check-row__thumb"
|
||
@click.stop="previewImage = (check.frontImage || check.backImage)!"
|
||
>
|
||
<img :src="check.frontImage || check.backImage" alt="" />
|
||
</span>
|
||
<span v-else class="check-row__thumb check-row__thumb--empty">بدون عکس</span>
|
||
|
||
<span class="check-row__meta">
|
||
<strong>چک {{ check.row }}</strong>
|
||
<small>
|
||
{{ formatCurrency(check.amount) }}
|
||
<template v-if="check.bankName"> · {{ check.bankName }}</template>
|
||
· {{ formatDate(check.dueDate) }}
|
||
</small>
|
||
</span>
|
||
|
||
<StatusBadge :status="checkBadgeStatus(check.status)" />
|
||
</button>
|
||
|
||
<div class="check-row__actions" @click.stop>
|
||
<template v-if="check.status === 'pending_review'">
|
||
<button
|
||
type="button"
|
||
class="admin-btn admin-btn--outline-success admin-btn--xs"
|
||
:disabled="busyId === check.id"
|
||
@click="updateCheckStatus(check, 'approved')"
|
||
>
|
||
تأیید
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="admin-btn admin-btn--outline-danger admin-btn--xs"
|
||
:disabled="busyId === check.id"
|
||
@click="updateCheckStatus(check, 'rejected')"
|
||
>
|
||
رد
|
||
</button>
|
||
</template>
|
||
</div>
|
||
|
||
<div v-if="expandedId === check.id" class="check-row__panel">
|
||
<div v-if="detailFields(check).length" class="check-row__fields">
|
||
<div
|
||
v-for="field in detailFields(check)"
|
||
:key="field.label"
|
||
class="check-row__field"
|
||
>
|
||
<span>{{ field.label }}</span>
|
||
<strong :dir="field.ltr ? 'ltr' : undefined">{{ field.value }}</strong>
|
||
</div>
|
||
</div>
|
||
<p v-else class="check-row__hint">جزئیات متنی بیشتری ثبت نشده است.</p>
|
||
|
||
<div class="check-row__photos">
|
||
<button
|
||
v-if="check.frontImage"
|
||
type="button"
|
||
class="check-row__photo"
|
||
@click="previewImage = check.frontImage!"
|
||
>
|
||
<img :src="check.frontImage" alt="روی چک" />
|
||
<span>روی</span>
|
||
</button>
|
||
<button
|
||
v-if="check.backImage"
|
||
type="button"
|
||
class="check-row__photo"
|
||
@click="previewImage = check.backImage!"
|
||
>
|
||
<img :src="check.backImage" alt="پشت چک" />
|
||
<span>پشت</span>
|
||
</button>
|
||
<p v-if="!check.frontImage && !check.backImage" class="check-row__hint">
|
||
تصویری ثبت نشده.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="checks-page__footer">
|
||
<p class="checks-page__note">
|
||
<template v-if="canFinalApprove">
|
||
همه چکها تأیید شدهاند. برای ادامه، تأیید نهایی سفارش را ثبت کنید.
|
||
</template>
|
||
<template v-else-if="order?.checkRassDate">
|
||
راس: {{ formatDate(order.checkRassDate) }}
|
||
</template>
|
||
<template v-else>راس نسبت به تاریخ صدور فاکتور ثابت است.</template>
|
||
</p>
|
||
<div class="admin-action-group">
|
||
<button
|
||
v-if="canFinalApprove"
|
||
type="button"
|
||
class="admin-btn admin-btn--success admin-btn--sm"
|
||
:disabled="finalizing"
|
||
@click="finalApproveOrder"
|
||
>
|
||
{{ finalizing ? 'در حال ثبت…' : 'تأیید نهایی سفارش' }}
|
||
</button>
|
||
<button
|
||
v-if="pendingChecks.length"
|
||
type="button"
|
||
class="admin-btn admin-btn--success admin-btn--sm"
|
||
@click="approveAll"
|
||
>
|
||
تأیید همه چکها
|
||
</button>
|
||
<button type="button" class="admin-btn admin-btn--outline admin-btn--sm" @click="goBack">
|
||
بازگشت
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<template v-else>
|
||
<div
|
||
v-if="!reviewHistory.length && !checkReviewNotes.length"
|
||
class="admin-empty-placeholder admin-card"
|
||
>
|
||
هنوز تاریخچهای ثبت نشده است.
|
||
</div>
|
||
<div v-else class="checks-page__history">
|
||
<article
|
||
v-for="item in reviewHistory"
|
||
:key="item.id"
|
||
class="admin-card checks-page__history-item"
|
||
>
|
||
<div class="checks-page__history-item-head">
|
||
<strong>
|
||
{{ item.fromStatus ? rawStatusLabel(item.fromStatus) : '—' }}
|
||
→
|
||
{{ rawStatusLabel(item.toStatus) }}
|
||
</strong>
|
||
<span>{{ formatDateTime(item.changedAt) }}</span>
|
||
</div>
|
||
<p class="checks-page__history-meta">توسط {{ actorLabel(item.changedBy) }}</p>
|
||
<p v-if="item.note" class="checks-page__history-note">{{ item.note }}</p>
|
||
<p v-if="item.reason" class="checks-page__history-note">دلیل: {{ item.reason }}</p>
|
||
</article>
|
||
|
||
<article
|
||
v-for="note in checkReviewNotes"
|
||
:key="`note-${note.id}`"
|
||
class="admin-card checks-page__history-item"
|
||
>
|
||
<div class="checks-page__history-item-head">
|
||
<strong>یادداشت چک {{ note.row }}</strong>
|
||
<span>{{ formatDateTime(note.updatedAt) }}</span>
|
||
</div>
|
||
<StatusBadge :status="checkBadgeStatus(note.status)" />
|
||
<p class="checks-page__history-note">{{ note.notes }}</p>
|
||
</article>
|
||
</div>
|
||
</template>
|
||
|
||
<Teleport to="body">
|
||
<div
|
||
v-if="previewImage"
|
||
class="checks-page__lightbox"
|
||
@click.self="previewImage = null"
|
||
>
|
||
<button type="button" class="checks-page__lightbox-close" @click="previewImage = null">
|
||
بستن
|
||
</button>
|
||
<img :src="previewImage" alt="پیشنمایش" />
|
||
</div>
|
||
</Teleport>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.checks-page__order-meta {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.checks-page__stats {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
gap: 8px;
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.checks-page__stat {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
padding: 10px 12px;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--radius-md);
|
||
background: var(--color-surface);
|
||
}
|
||
|
||
.checks-page__stat span {
|
||
font-size: 0.75rem;
|
||
color: var(--color-text-muted);
|
||
}
|
||
|
||
.checks-page__stat strong {
|
||
font-size: 0.875rem;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.checks-page__list {
|
||
overflow: hidden;
|
||
}
|
||
|
||
.check-row {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) auto;
|
||
gap: 8px 12px;
|
||
align-items: center;
|
||
padding: 8px 12px;
|
||
border-bottom: 1px solid var(--color-border-light);
|
||
}
|
||
|
||
.check-row:last-child {
|
||
border-bottom: 0;
|
||
}
|
||
|
||
.check-row.open {
|
||
background: color-mix(in srgb, var(--color-primary-soft) 55%, transparent);
|
||
}
|
||
|
||
.check-row__main {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
min-width: 0;
|
||
border: 0;
|
||
background: transparent;
|
||
color: inherit;
|
||
text-align: start;
|
||
cursor: pointer;
|
||
padding: 4px 0;
|
||
}
|
||
|
||
.check-row__chevron {
|
||
width: 14px;
|
||
color: var(--color-text-muted);
|
||
font-size: 0.75rem;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.check-row__thumb {
|
||
width: 44px;
|
||
height: 32px;
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
border: 1px solid var(--color-border);
|
||
flex-shrink: 0;
|
||
padding: 0;
|
||
background: #111;
|
||
display: grid;
|
||
place-items: center;
|
||
cursor: zoom-in;
|
||
}
|
||
|
||
.check-row__thumb img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
|
||
.check-row__thumb--empty {
|
||
font-size: 0.625rem;
|
||
color: var(--color-text-muted);
|
||
cursor: default;
|
||
}
|
||
|
||
.check-row__meta {
|
||
min-width: 0;
|
||
display: grid;
|
||
gap: 2px;
|
||
flex: 1;
|
||
}
|
||
|
||
.check-row__meta strong {
|
||
font-size: 0.875rem;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.check-row__meta small {
|
||
font-size: 0.75rem;
|
||
color: var(--color-text-muted);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.check-row__actions {
|
||
display: flex;
|
||
gap: 6px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.check-row__panel {
|
||
grid-column: 1 / -1;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 12px 16px;
|
||
align-items: flex-start;
|
||
padding: 8px 0 4px 24px;
|
||
border-top: 1px dashed var(--color-border);
|
||
}
|
||
|
||
.check-row__fields {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
flex: 1;
|
||
min-width: 200px;
|
||
}
|
||
|
||
.check-row__field {
|
||
display: inline-flex;
|
||
align-items: baseline;
|
||
gap: 6px;
|
||
padding: 4px 8px;
|
||
border-radius: 999px;
|
||
background: var(--color-border-light);
|
||
font-size: 0.75rem;
|
||
}
|
||
|
||
.check-row__field span {
|
||
color: var(--color-text-muted);
|
||
}
|
||
|
||
.check-row__field strong {
|
||
font-weight: 600;
|
||
}
|
||
|
||
.check-row__photos {
|
||
display: flex;
|
||
gap: 8px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.check-row__photo {
|
||
width: 96px;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
background: transparent;
|
||
color: inherit;
|
||
padding: 0;
|
||
cursor: zoom-in;
|
||
text-align: center;
|
||
}
|
||
|
||
.check-row__photo img {
|
||
width: 100%;
|
||
height: 60px;
|
||
object-fit: cover;
|
||
display: block;
|
||
background: #111;
|
||
}
|
||
|
||
.check-row__photo span {
|
||
display: block;
|
||
padding: 4px;
|
||
font-size: 0.6875rem;
|
||
color: var(--color-text-muted);
|
||
}
|
||
|
||
.check-row__hint {
|
||
margin: 0;
|
||
font-size: 0.75rem;
|
||
color: var(--color-text-muted);
|
||
}
|
||
|
||
.checks-page__footer {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
margin-top: 14px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.checks-page__note {
|
||
margin: 0;
|
||
font-size: 0.75rem;
|
||
color: var(--color-text-muted);
|
||
}
|
||
|
||
.checks-page__history {
|
||
display: grid;
|
||
gap: 8px;
|
||
}
|
||
|
||
.checks-page__history-item {
|
||
padding: 12px;
|
||
display: grid;
|
||
gap: 6px;
|
||
}
|
||
|
||
.checks-page__history-item-head {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
flex-wrap: wrap;
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.checks-page__history-meta,
|
||
.checks-page__history-note {
|
||
margin: 0;
|
||
font-size: 0.8125rem;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.checks-page__history-meta {
|
||
color: var(--color-text-muted);
|
||
}
|
||
|
||
.checks-page__lightbox {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 300000;
|
||
display: grid;
|
||
place-items: center;
|
||
background: rgba(0, 0, 0, 0.84);
|
||
padding: 20px;
|
||
}
|
||
|
||
.checks-page__lightbox img {
|
||
max-width: min(900px, 100%);
|
||
max-height: 88vh;
|
||
object-fit: contain;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.checks-page__lightbox-close {
|
||
position: absolute;
|
||
top: 14px;
|
||
inset-inline-end: 14px;
|
||
border: 0;
|
||
border-radius: 8px;
|
||
padding: 8px 12px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
@media (max-width: 800px) {
|
||
.checks-page__stats {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
|
||
.check-row {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.check-row__actions {
|
||
padding-inline-start: 24px;
|
||
}
|
||
|
||
.check-row__panel {
|
||
padding-inline-start: 0;
|
||
}
|
||
}
|
||
</style>
|