850 lines
23 KiB
Vue
850 lines
23 KiB
Vue
<script setup lang="ts">
|
||
import { onMounted, reactive, ref } from 'vue';
|
||
import { RouterLink } from 'vue-router';
|
||
import axios from 'axios';
|
||
import { api } from '@/lib/api';
|
||
import type {
|
||
CreateTahesabConnectionRequest,
|
||
TahesabConnectionDto,
|
||
UpdateTahesabConnectionRequest,
|
||
} from '@mento/shared';
|
||
|
||
const loading = ref(false);
|
||
const saving = ref(false);
|
||
const error = ref('');
|
||
const ok = ref('');
|
||
const items = ref<TahesabConnectionDto[]>([]);
|
||
const editingId = ref<string | null>(null);
|
||
|
||
const form = reactive({
|
||
label: '',
|
||
baseUrl: '',
|
||
dbName: 'DB',
|
||
token: '',
|
||
isDefault: false,
|
||
allowInsecureTls: false,
|
||
enabled: true,
|
||
});
|
||
|
||
const sync = reactive({
|
||
connectionId: '',
|
||
phone: '',
|
||
name: '',
|
||
moshtariCode: '' as string | number,
|
||
fromCode: '',
|
||
toCode: '',
|
||
});
|
||
const syncBusy = ref(false);
|
||
type SyncResult = {
|
||
moshtariCode: number | null;
|
||
name: string;
|
||
tel: string;
|
||
alreadyLinked?: boolean;
|
||
personId?: string | null;
|
||
personName?: string | null;
|
||
};
|
||
const syncResults = ref<SyncResult[]>([]);
|
||
|
||
function pendingImportCodes() {
|
||
return syncResults.value
|
||
.filter((r) => r.moshtariCode != null && !r.alreadyLinked)
|
||
.map((r) => r.moshtariCode as number);
|
||
}
|
||
|
||
function apiErr(e: unknown, fallback: string) {
|
||
if (!axios.isAxiosError(e)) return fallback;
|
||
const msg = (e.response?.data as { message?: string | string[] })?.message;
|
||
if (Array.isArray(msg)) return msg.join('، ') || fallback;
|
||
if (typeof msg === 'string' && msg.trim()) return msg;
|
||
return fallback;
|
||
}
|
||
|
||
function resetForm() {
|
||
editingId.value = null;
|
||
form.label = '';
|
||
form.baseUrl = '';
|
||
form.dbName = 'DB';
|
||
form.token = '';
|
||
form.isDefault = items.value.length === 0;
|
||
form.allowInsecureTls = false;
|
||
form.enabled = true;
|
||
}
|
||
|
||
function looksLikePrivateHttps(url: string) {
|
||
return /^https:\/\/(\d{1,3}\.){3}\d{1,3}(:\d+)?/i.test(url.trim());
|
||
}
|
||
|
||
function isTlsError(text: string | null | undefined) {
|
||
if (!text) return false;
|
||
return /self-signed|certificate|UNABLE_TO_VERIFY|CERT_|گواهی/i.test(text);
|
||
}
|
||
|
||
function onBaseUrlBlur() {
|
||
if (!editingId.value && looksLikePrivateHttps(form.baseUrl)) {
|
||
form.allowInsecureTls = true;
|
||
}
|
||
}
|
||
|
||
function startEdit(row: TahesabConnectionDto) {
|
||
editingId.value = row.id;
|
||
form.label = row.label;
|
||
form.baseUrl = row.baseUrl;
|
||
form.dbName = row.dbName;
|
||
form.token = '';
|
||
form.isDefault = row.isDefault;
|
||
form.allowInsecureTls = row.allowInsecureTls;
|
||
form.enabled = row.enabled;
|
||
}
|
||
|
||
async function load() {
|
||
loading.value = true;
|
||
error.value = '';
|
||
try {
|
||
const { data } = await api.get<TahesabConnectionDto[]>(
|
||
'/integrations/tahesab/connections',
|
||
);
|
||
items.value = data;
|
||
if (!editingId.value) form.isDefault = data.length === 0;
|
||
if (!sync.connectionId && data[0]) sync.connectionId = data[0].id;
|
||
} catch (e) {
|
||
error.value = axios.isAxiosError(e)
|
||
? String(
|
||
(e.response?.data as { message?: string })?.message ??
|
||
'بارگذاری اتصالات ناموفق بود.',
|
||
)
|
||
: 'بارگذاری اتصالات ناموفق بود.';
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
}
|
||
|
||
async function save() {
|
||
saving.value = true;
|
||
error.value = '';
|
||
ok.value = '';
|
||
try {
|
||
if (editingId.value) {
|
||
const body: UpdateTahesabConnectionRequest = {
|
||
label: form.label.trim(),
|
||
baseUrl: form.baseUrl.trim(),
|
||
dbName: form.dbName.trim(),
|
||
isDefault: form.isDefault,
|
||
allowInsecureTls: form.allowInsecureTls,
|
||
enabled: form.enabled,
|
||
};
|
||
if (form.token.trim()) body.token = form.token.trim();
|
||
await api.patch(
|
||
`/integrations/tahesab/connections/${editingId.value}`,
|
||
body,
|
||
);
|
||
ok.value = 'اتصال به‌روزرسانی شد.';
|
||
} else {
|
||
if (!form.token.trim()) {
|
||
error.value = 'توکن الزامی است.';
|
||
return;
|
||
}
|
||
const body: CreateTahesabConnectionRequest = {
|
||
label: form.label.trim(),
|
||
baseUrl: form.baseUrl.trim(),
|
||
dbName: form.dbName.trim(),
|
||
token: form.token.trim(),
|
||
isDefault: form.isDefault,
|
||
allowInsecureTls: form.allowInsecureTls,
|
||
enabled: form.enabled,
|
||
};
|
||
await api.post('/integrations/tahesab/connections', body);
|
||
ok.value = 'اتصال افزوده شد.';
|
||
}
|
||
resetForm();
|
||
await load();
|
||
} catch (e) {
|
||
if (axios.isAxiosError(e)) {
|
||
const msg = (e.response?.data as { message?: string | string[] })?.message;
|
||
error.value = Array.isArray(msg) ? msg.join('، ') : (msg ?? 'ذخیره ناموفق بود');
|
||
} else {
|
||
error.value = 'ذخیره ناموفق بود';
|
||
}
|
||
} finally {
|
||
saving.value = false;
|
||
}
|
||
}
|
||
|
||
async function testConn(id: string) {
|
||
error.value = '';
|
||
ok.value = '';
|
||
try {
|
||
const { data } = await api.post<{ ok: boolean; error?: string }>(
|
||
`/integrations/tahesab/connections/${id}/test`,
|
||
);
|
||
if (data.ok) ok.value = 'اتصال سالم است.';
|
||
else {
|
||
error.value = data.error ?? 'تست اتصال ناموفق بود.';
|
||
if (isTlsError(data.error)) {
|
||
error.value +=
|
||
' → دکمه «فعال‌سازی SSL خودامضا» را بزنید یا در ویرایش اتصال تیک آن را بگذارید.';
|
||
}
|
||
}
|
||
await load();
|
||
} catch (e) {
|
||
error.value = apiErr(e, 'تست ناموفق');
|
||
}
|
||
}
|
||
|
||
async function enableInsecureTls(id: string) {
|
||
error.value = '';
|
||
ok.value = '';
|
||
try {
|
||
await api.patch(`/integrations/tahesab/connections/${id}`, {
|
||
allowInsecureTls: true,
|
||
});
|
||
ok.value = 'پذیرش گواهی خودامضا فعال شد. در حال تست…';
|
||
await load();
|
||
await testConn(id);
|
||
} catch (e) {
|
||
error.value = apiErr(e, 'فعال‌سازی ناموفق بود');
|
||
}
|
||
}
|
||
|
||
async function removeConn(id: string) {
|
||
if (!confirm('این اتصال حذف شود؟ لینک مشتریان مرتبط هم پاک می‌شود.')) return;
|
||
error.value = '';
|
||
try {
|
||
await api.delete(`/integrations/tahesab/connections/${id}`);
|
||
ok.value = 'اتصال حذف شد.';
|
||
if (editingId.value === id) resetForm();
|
||
await load();
|
||
} catch (e) {
|
||
error.value = axios.isAxiosError(e)
|
||
? String((e.response?.data as { message?: string })?.message ?? 'حذف ناموفق')
|
||
: 'حذف ناموفق';
|
||
}
|
||
}
|
||
|
||
async function searchTahesab(mode: 'filter' | 'range' = 'filter') {
|
||
error.value = '';
|
||
ok.value = '';
|
||
syncResults.value = [];
|
||
if (!sync.connectionId) {
|
||
error.value = 'ابتدا اتصال را انتخاب کنید.';
|
||
return;
|
||
}
|
||
try {
|
||
syncBusy.value = true;
|
||
const body: Record<string, unknown> = {
|
||
connectionId: sync.connectionId,
|
||
};
|
||
if (mode === 'range') {
|
||
const fromRaw = String(sync.fromCode ?? '').trim();
|
||
const toRaw = String(sync.toCode ?? '').trim();
|
||
if (!fromRaw && !toRaw) {
|
||
body.listAll = true;
|
||
} else {
|
||
const fromCode = Number(fromRaw);
|
||
const toCode = Number(toRaw);
|
||
if (!Number.isFinite(fromCode) || !Number.isFinite(toCode)) {
|
||
error.value = 'بازهٔ کد را درست وارد کنید، یا هر دو را خالی بگذارید تا همه نمایش داده شوند.';
|
||
return;
|
||
}
|
||
body.fromCode = fromCode;
|
||
body.toCode = toCode;
|
||
}
|
||
} else if (sync.moshtariCode !== '' && sync.moshtariCode != null) {
|
||
body.moshtariCode = Number(sync.moshtariCode);
|
||
} else if (sync.phone.trim()) {
|
||
body.phone = sync.phone.trim();
|
||
} else if (sync.name.trim()) {
|
||
body.name = sync.name.trim();
|
||
} else {
|
||
error.value = 'موبایل، نام، کد مشتری یا بازهٔ کد را وارد کنید.';
|
||
return;
|
||
}
|
||
const { data } = await api.post<{ results: SyncResult[] }>(
|
||
'/integrations/tahesab/sync/search',
|
||
body,
|
||
{ timeout: 60_000 },
|
||
);
|
||
syncResults.value = data.results ?? [];
|
||
if (!syncResults.value.length) {
|
||
ok.value = 'نتیجه‌ای یافت نشد.';
|
||
} else {
|
||
const linked = syncResults.value.filter((r) => r.alreadyLinked).length;
|
||
ok.value = `${syncResults.value.length} مشتری پیدا شد` + (linked ? ` (${linked} قبلاً لینک شده)` : '');
|
||
}
|
||
} catch (e) {
|
||
error.value = apiErr(e, 'جستجو ناموفق');
|
||
} finally {
|
||
syncBusy.value = false;
|
||
}
|
||
}
|
||
|
||
async function importOne(moshtariCode: number) {
|
||
error.value = '';
|
||
ok.value = '';
|
||
try {
|
||
syncBusy.value = true;
|
||
const { data } = await api.post<{ personId: string }>(
|
||
'/integrations/tahesab/sync/import',
|
||
{ connectionId: sync.connectionId, moshtariCode },
|
||
);
|
||
ok.value = `وارد شد — در مخاطبین با شناسه ${data.personId}`;
|
||
const row = syncResults.value.find((r) => r.moshtariCode === moshtariCode);
|
||
if (row) {
|
||
row.alreadyLinked = true;
|
||
row.personId = data.personId;
|
||
}
|
||
} catch (e) {
|
||
error.value = apiErr(e, 'وارد کردن ناموفق');
|
||
} finally {
|
||
syncBusy.value = false;
|
||
}
|
||
}
|
||
|
||
async function importBulk(mode: 'results' | 'range') {
|
||
error.value = '';
|
||
ok.value = '';
|
||
if (!sync.connectionId) {
|
||
error.value = 'ابتدا اتصال را انتخاب کنید.';
|
||
return;
|
||
}
|
||
const body: Record<string, unknown> = { connectionId: sync.connectionId };
|
||
if (mode === 'results') {
|
||
const codes = pendingImportCodes();
|
||
if (!codes.length) {
|
||
error.value = 'مشتری جدیدی در نتایج برای وارد کردن نیست (همه لینک شده‌اند یا لیست خالی است).';
|
||
return;
|
||
}
|
||
if (
|
||
!confirm(
|
||
`${codes.length} مشتری جدید از ته‌حساب به‌عنوان شخص در منتو ساخته و لینک می‌شوند. ادامه؟`,
|
||
)
|
||
) {
|
||
return;
|
||
}
|
||
body.moshtariCodes = codes;
|
||
} else {
|
||
const fromRaw = String(sync.fromCode ?? '').trim();
|
||
const toRaw = String(sync.toCode ?? '').trim();
|
||
if (!fromRaw && !toRaw) {
|
||
if (
|
||
!confirm(
|
||
'همهٔ مشتریان ته‌حساب وارد منتو می‌شوند (قبلاً لینک‌شده‌ها رد می‌شوند). ممکن است کمی طول بکشد. ادامه؟',
|
||
)
|
||
) {
|
||
return;
|
||
}
|
||
body.listAll = true;
|
||
} else {
|
||
const fromCode = Number(fromRaw);
|
||
const toCode = Number(toRaw);
|
||
if (!Number.isFinite(fromCode) || !Number.isFinite(toCode)) {
|
||
error.value = 'بازهٔ کد را درست وارد کنید، یا هر دو را خالی بگذارید تا همه وارد شوند.';
|
||
return;
|
||
}
|
||
if (
|
||
!confirm(
|
||
`همهٔ مشتریان ته‌حساب با کد ${fromCode} تا ${toCode} وارد منتو می‌شوند (قبلاً لینک‌شده‌ها رد می‌شوند). ادامه؟`,
|
||
)
|
||
) {
|
||
return;
|
||
}
|
||
body.fromCode = fromCode;
|
||
body.toCode = toCode;
|
||
}
|
||
}
|
||
try {
|
||
syncBusy.value = true;
|
||
const { data } = await api.post<{
|
||
imported: number;
|
||
skipped: number;
|
||
failed: number;
|
||
}>('/integrations/tahesab/sync/import-bulk', body);
|
||
ok.value = `وارد شد: ${data.imported} · قبلاً بود: ${data.skipped} · ناموفق: ${data.failed}`;
|
||
await searchTahesab(mode === 'range' ? 'range' : 'filter');
|
||
} catch (e) {
|
||
error.value = apiErr(e, 'وارد کردن دسته‌ای ناموفق');
|
||
} finally {
|
||
syncBusy.value = false;
|
||
}
|
||
}
|
||
|
||
onMounted(load);
|
||
</script>
|
||
|
||
<template>
|
||
<section class="page">
|
||
<header class="page-head">
|
||
<div class="head-copy">
|
||
<h1>اتصال ته‌حساب</h1>
|
||
<p class="lead">
|
||
هر نسخه/دیتابیس ته‌حساب یک اتصال جدا است (آدرس وب‌سرویس + توکن + نام DB).
|
||
اگر فقط یک اتصال دارید، همان به‌عنوان پیش‌فرض استفاده می‌شود.
|
||
</p>
|
||
</div>
|
||
</header>
|
||
|
||
<p v-if="loading" class="muted">در حال بارگذاری…</p>
|
||
<p v-if="error" class="error">{{ error }}</p>
|
||
<p v-if="ok" class="ok">{{ ok }}</p>
|
||
|
||
<div
|
||
v-if="items.some((r) => !r.allowInsecureTls && isTlsError(r.lastError))"
|
||
class="banner warn"
|
||
>
|
||
اتصال شما به‌خاطر گواهی SSL خودامضا قطع است. روی همان کارت اتصال،
|
||
<strong>فعال‌سازی SSL خودامضا</strong> را بزنید؛ بعد دوباره «نمایش بازه» را امتحان کنید.
|
||
</div>
|
||
|
||
<div v-if="!loading && items.length" class="list">
|
||
<article v-for="row in items" :key="row.id" class="card row">
|
||
<div class="row-main">
|
||
<strong>{{ row.label }}</strong>
|
||
<span class="muted">{{ row.baseUrl }}</span>
|
||
<span class="meta">
|
||
DB: {{ row.dbName }} · توکن: {{ row.tokenMasked }}
|
||
<template v-if="row.isDefault"> · پیش‌فرض</template>
|
||
<template v-if="!row.enabled"> · غیرفعال</template>
|
||
<template v-if="row.allowInsecureTls"> · SSL خودامضا مجاز</template>
|
||
</span>
|
||
<span
|
||
v-if="row.lastHealthAt"
|
||
class="health"
|
||
:class="row.lastHealthOk ? 'ok' : 'bad'"
|
||
>
|
||
آخرین تست:
|
||
{{ row.lastHealthOk ? 'موفق' : 'ناموفق' }}
|
||
<template v-if="row.lastError"> — {{ row.lastError }}</template>
|
||
</span>
|
||
</div>
|
||
<div class="row-actions">
|
||
<button
|
||
v-if="!row.allowInsecureTls && isTlsError(row.lastError)"
|
||
type="button"
|
||
class="btn primary"
|
||
@click="enableInsecureTls(row.id)"
|
||
>
|
||
فعال‌سازی SSL خودامضا
|
||
</button>
|
||
<button type="button" class="btn ghost" @click="startEdit(row)">ویرایش</button>
|
||
<button type="button" class="btn ghost" @click="testConn(row.id)">تست</button>
|
||
<button type="button" class="btn danger" @click="removeConn(row.id)">حذف</button>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
|
||
<form class="card" @submit.prevent="save">
|
||
<h2>{{ editingId ? 'ویرایش اتصال' : 'افزودن اتصال' }}</h2>
|
||
<div class="field">
|
||
<label>برچسب</label>
|
||
<input v-model="form.label" required maxlength="120" placeholder="مثلاً شعبه بازار" />
|
||
</div>
|
||
<div class="field">
|
||
<label>آدرس وب‌سرویس (base URL)</label>
|
||
<input
|
||
v-model="form.baseUrl"
|
||
required
|
||
dir="ltr"
|
||
placeholder="https://api-test.tahesab.ir یا https://IP:8081"
|
||
@blur="onBaseUrlBlur"
|
||
/>
|
||
</div>
|
||
<div class="field">
|
||
<label>نام دیتابیس (DBname)</label>
|
||
<input v-model="form.dbName" required dir="ltr" placeholder="DB یا TahesabDB" />
|
||
</div>
|
||
<div class="field">
|
||
<label>
|
||
توکن
|
||
<span v-if="editingId" class="muted">(خالی بگذارید تا عوض نشود)</span>
|
||
</label>
|
||
<input
|
||
v-model="form.token"
|
||
:required="!editingId"
|
||
type="password"
|
||
dir="ltr"
|
||
autocomplete="new-password"
|
||
placeholder="Bearer token"
|
||
/>
|
||
</div>
|
||
<label class="check">
|
||
<input v-model="form.isDefault" type="checkbox" />
|
||
اتصال پیش‌فرض
|
||
</label>
|
||
<label class="check">
|
||
<input v-model="form.enabled" type="checkbox" />
|
||
فعال
|
||
</label>
|
||
<label class="check highlight">
|
||
<input v-model="form.allowInsecureTls" type="checkbox" />
|
||
پذیرش گواهی SSL خودامضا (برای IP داخلی / https بدون گواهی معتبر — معمولاً لازم است)
|
||
</label>
|
||
<div class="form-actions">
|
||
<button class="btn primary" type="submit" :disabled="saving">
|
||
{{ saving ? 'در حال ذخیره…' : editingId ? 'به‌روزرسانی' : 'افزودن' }}
|
||
</button>
|
||
<button v-if="editingId" type="button" class="btn ghost" @click="resetForm">انصراف</button>
|
||
</div>
|
||
</form>
|
||
|
||
<section class="card sync">
|
||
<h2>وارد کردن مشتریان از ته‌حساب</h2>
|
||
<p class="muted">
|
||
فقط «افزودن اتصال» مشتری‌ها را نمی‌آورد. باید با بازهٔ کد یا جستجو آن‌ها را از ته‌حساب
|
||
<strong>وارد</strong> کنید تا در «اشخاص و شرکت‌ها» دیده شوند. جزئیات مانده/اسناد بعد از لینک، در پروفایل شخص → تب دارایی است.
|
||
</p>
|
||
<div class="field">
|
||
<label>اتصال</label>
|
||
<select v-model="sync.connectionId">
|
||
<option disabled value="">انتخاب اتصال</option>
|
||
<option v-for="row in items" :key="row.id" :value="row.id">
|
||
{{ row.label }} ({{ row.dbName }})
|
||
</option>
|
||
</select>
|
||
</div>
|
||
|
||
<h3 class="subhead">۱) وارد کردن دسته‌ای با بازهٔ کد مشتری</h3>
|
||
<p class="muted small">
|
||
اگر «از» و «تا» خالی باشند، مشتریان با کد ۱ تا ۵۰۰۰ از ته‌حساب لیست می‌شوند.
|
||
برای کدهای بالاتر بازه را دستی بگذارید (حداکثر ۲۰۰۰ کد در هر درخواست محدود).
|
||
</p>
|
||
<div class="sync-grid range">
|
||
<input v-model="sync.fromCode" type="number" min="1" dir="ltr" placeholder="از کد (خالی = همه)" />
|
||
<input v-model="sync.toCode" type="number" min="1" dir="ltr" placeholder="تا کد (خالی = همه)" />
|
||
</div>
|
||
<div class="sync-actions">
|
||
<button
|
||
type="button"
|
||
class="btn ghost"
|
||
:disabled="!sync.connectionId || syncBusy"
|
||
@click="searchTahesab('range')"
|
||
>
|
||
نمایش بازه
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="btn primary"
|
||
:disabled="!sync.connectionId || syncBusy"
|
||
@click="importBulk('range')"
|
||
>
|
||
وارد کردن کل بازه
|
||
</button>
|
||
</div>
|
||
|
||
<h3 class="subhead">۲) جستجوی تکی</h3>
|
||
<div class="sync-grid">
|
||
<input v-model="sync.phone" dir="ltr" placeholder="موبایل" />
|
||
<input v-model="sync.name" placeholder="نام" />
|
||
<input v-model="sync.moshtariCode" type="number" dir="ltr" placeholder="کد مشتری" />
|
||
</div>
|
||
<div class="sync-actions">
|
||
<button
|
||
type="button"
|
||
class="btn ghost"
|
||
:disabled="!sync.connectionId || syncBusy"
|
||
@click="searchTahesab('filter')"
|
||
>
|
||
جستجو
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="btn primary"
|
||
:disabled="!sync.connectionId || syncBusy || !pendingImportCodes().length"
|
||
@click="importBulk('results')"
|
||
>
|
||
وارد کردن نتایج جدید ({{ pendingImportCodes().length }})
|
||
</button>
|
||
</div>
|
||
|
||
<ul v-if="syncResults.length" class="sync-results">
|
||
<li v-for="r in syncResults" :key="String(r.moshtariCode)">
|
||
<span>
|
||
{{ r.moshtariCode }} — {{ r.name || 'بدون نام' }}
|
||
<span class="muted">{{ r.tel }}</span>
|
||
<span v-if="r.alreadyLinked" class="linked">لینک‌شده{{ r.personName ? ` · ${r.personName}` : '' }}</span>
|
||
</span>
|
||
<button
|
||
v-if="!r.alreadyLinked"
|
||
type="button"
|
||
class="btn"
|
||
:disabled="!r.moshtariCode || syncBusy"
|
||
@click="importOne(r.moshtariCode!)"
|
||
>
|
||
وارد کردن
|
||
</button>
|
||
<RouterLink
|
||
v-else-if="r.personId"
|
||
class="btn ghost"
|
||
:to="{ name: 'person-detail', params: { id: r.personId } }"
|
||
>
|
||
مشاهده شخص
|
||
</RouterLink>
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
</section>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.page {
|
||
display: grid;
|
||
gap: 1rem;
|
||
max-width: 720px;
|
||
min-width: 0;
|
||
overflow-x: clip;
|
||
}
|
||
|
||
.page-head {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 1rem;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.head-copy {
|
||
min-width: 0;
|
||
}
|
||
|
||
h1 {
|
||
margin: 0 0 0.3rem;
|
||
font-size: clamp(1.45rem, 2.5vw, 1.85rem);
|
||
font-weight: 800;
|
||
}
|
||
|
||
h2 {
|
||
margin: 0;
|
||
font-size: 1.05rem;
|
||
font-weight: 700;
|
||
color: #0f172a;
|
||
}
|
||
|
||
.lead,
|
||
.muted {
|
||
margin: 0;
|
||
color: #64748b;
|
||
}
|
||
|
||
.list {
|
||
display: grid;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.card {
|
||
display: grid;
|
||
gap: 0.75rem;
|
||
background: #fff;
|
||
border: 1px solid #e2e8f0;
|
||
border-radius: 18px;
|
||
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
|
||
padding: 1.1rem;
|
||
}
|
||
|
||
.row {
|
||
grid-template-columns: 1fr auto;
|
||
align-items: start;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.row-main {
|
||
display: grid;
|
||
gap: 0.25rem;
|
||
min-width: 0;
|
||
}
|
||
|
||
.meta {
|
||
font-size: 0.85rem;
|
||
color: #64748b;
|
||
}
|
||
|
||
.health.ok {
|
||
color: #15803d;
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.health.bad {
|
||
color: #b91c1c;
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.row-actions {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.35rem;
|
||
}
|
||
|
||
.field {
|
||
display: grid;
|
||
gap: 0.35rem;
|
||
}
|
||
|
||
label {
|
||
color: #64748b;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
input[type='text'],
|
||
input:not([type]),
|
||
input[type='password'],
|
||
input[type='url'],
|
||
input[type='number'] {
|
||
border: 1px solid #e2e8f0;
|
||
border-radius: 12px;
|
||
padding: 0.55rem 0.7rem;
|
||
background: #fff;
|
||
color: #0f172a;
|
||
font: inherit;
|
||
width: 100%;
|
||
}
|
||
|
||
select {
|
||
border: 1px solid #e2e8f0;
|
||
border-radius: 12px;
|
||
padding: 0.55rem 0.7rem;
|
||
background: #fff;
|
||
color: #0f172a;
|
||
font: inherit;
|
||
width: 100%;
|
||
}
|
||
|
||
.check {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.45rem;
|
||
color: #0f172a;
|
||
}
|
||
|
||
.check.highlight {
|
||
padding: 0.65rem 0.75rem;
|
||
border-radius: 12px;
|
||
background: #fff7ed;
|
||
border: 1px solid #fdba74;
|
||
font-weight: 700;
|
||
color: #9a3412;
|
||
}
|
||
|
||
.banner.warn {
|
||
padding: 0.85rem 1rem;
|
||
border-radius: 14px;
|
||
background: #fff7ed;
|
||
border: 1px solid #fdba74;
|
||
color: #9a3412;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.form-actions {
|
||
display: flex;
|
||
gap: 0.5rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 42px;
|
||
padding: 0.55rem 0.9rem;
|
||
border-radius: 12px;
|
||
font-weight: 700;
|
||
border: 1px solid transparent;
|
||
cursor: pointer;
|
||
font: inherit;
|
||
}
|
||
|
||
.btn.primary {
|
||
background: #14b8a6;
|
||
color: #fff;
|
||
box-shadow: 0 8px 18px rgba(20, 184, 166, 0.24);
|
||
}
|
||
|
||
.btn.ghost {
|
||
background: #fff;
|
||
color: #0f766e;
|
||
border-color: #99f6e4;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.btn.danger {
|
||
background: #fff;
|
||
color: #b91c1c;
|
||
border-color: #fecaca;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.error {
|
||
margin: 0;
|
||
color: #b91c1c;
|
||
}
|
||
|
||
.ok {
|
||
margin: 0;
|
||
color: #0f766e;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.sync-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.sync-grid.range {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
|
||
.sync-actions {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.subhead {
|
||
margin: 0.35rem 0 0;
|
||
font-size: 0.95rem;
|
||
color: #0f766e;
|
||
}
|
||
|
||
.muted.small {
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.linked {
|
||
display: inline-block;
|
||
margin-inline-start: 0.35rem;
|
||
font-size: 0.78rem;
|
||
font-weight: 700;
|
||
color: #047857;
|
||
}
|
||
|
||
.sync-results {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
display: grid;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.sync-results li {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
padding: 0.5rem 0;
|
||
border-bottom: 1px solid #e2e8f0;
|
||
}
|
||
|
||
@media (max-width: 700px) {
|
||
.row {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.sync-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.row-actions,
|
||
.form-actions,
|
||
.sync-results li {
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
}
|
||
}
|
||
</style>
|