fabric_trade/fabric_trade_admin
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: fabric-trade-admin panel with responsive layouts and UI refinements.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
safavimohadeseh78
2026-08-03 12:14:12 +02:00
co-authored by Cursor
commit a8501f4604
75 changed files with 14787 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/checks/CheckManagementView.vue
+211
View File
@@ -0,0 +1,211 @@
<script setup lang="ts">
import { computed, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import AdminIcon from '@/components/icons/AdminIcon.vue'
import StatusBadge from '@/components/ui/StatusBadge.vue'
import { checks, orders } from '@/data/mockData'
import { formatCurrency, formatNumber } from '@/utils/format'
const route = useRoute()
const router = useRouter()
const activeTab = ref<'info' | 'images' | 'history'>('info')
const order = computed(() => orders.find((o) => o.id === route.params.id) ?? orders[0]!)
const orderChecks = computed(() => checks.filter((c) => c.orderId === order.value.id))
const totalCheckAmount = computed(() =>
orderChecks.value.reduce((sum, c) => sum + c.amount, 0),
)
function goBack() {
router.push('/orders')
}
</script>
<template>
<div class="checks-page">
<div class="admin-page-header">
<div>
<h1 class="admin-page-header__title">مدیریت چک‌ها</h1>
<p class="admin-page-header__breadcrumb">سفارش‌ها / مدیریت سفارش</p>
</div>
<div class="checks-page__order-meta">
<strong>{{ order.orderNumber }}</strong>
<StatusBadge status="pending_check" />
</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 === 'images' }"
@click="activeTab = 'images'"
>
تصاویر چک‌ها
</button>
<button
type="button"
class="admin-tab"
:class="{ active: activeTab === 'history' }"
@click="activeTab = 'history'"
>
تاریخچه بررسی
</button>
</div>
<template v-if="activeTab === 'info'">
<div class="admin-summary-grid">
<div class="admin-summary-item">
<p class="admin-summary-item__label">تعداد چک‌ها</p>
<p class="admin-summary-item__value">{{ orderChecks.length }} فقره</p>
</div>
<div class="admin-summary-item">
<p class="admin-summary-item__label">راس چک‌ها</p>
<p class="admin-summary-item__value">
<AdminIcon name="check" :size="14" />
۲ روز
</p>
<p class="checks-page__rass-date">تاریخ راس: ۱۴۰۳/۰۸/۰۶</p>
</div>
<div class="admin-summary-item">
<p class="admin-summary-item__label">مجموع چک‌ها</p>
<p class="admin-summary-item__value">{{ formatCurrency(totalCheckAmount) }}</p>
</div>
<div class="admin-summary-item">
<p class="admin-summary-item__label">مبلغ کل سفارش</p>
<p class="admin-summary-item__value">
{{ order.totalAmount ? formatCurrency(order.totalAmount) : '—' }}
</p>
</div>
</div>
<div class="checks-page__table admin-card desktop-only">
<div class="admin-table-wrap">
<table class="admin-table">
<thead>
<tr>
<th>ردیف</th>
<th>مبلغ (تومان)</th>
<th>بانک</th>
<th>شناسه صیادی</th>
<th>تاریخ سررسید</th>
<th>وضعیت</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="check in orderChecks" :key="check.id">
<td>{{ check.row }}</td>
<td>{{ formatNumber(check.amount) }}</td>
<td>{{ check.bankName }}</td>
<td>{{ check.sayadId }}</td>
<td>{{ check.dueDate }}</td>
<td><StatusBadge status="pending_check_review" /></td>
<td>
<div class="admin-action-group">
<button type="button" class="admin-btn admin-btn--outline-success admin-btn--xs">
تأیید
<AdminIcon name="chevron-down" :size="12" />
</button>
<button type="button" class="admin-btn admin-btn--outline admin-btn--xs">
مشاهده
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="compact-only admin-card-list">
<article v-for="check in orderChecks" :key="check.id" class="admin-card-item">
<div class="admin-card-item__header">
<p class="admin-card-item__title">چک {{ check.row }} — {{ formatNumber(check.amount) }} تومان</p>
<StatusBadge status="pending_check_review" />
</div>
<div class="admin-card-item__meta">
<span>بانک {{ check.bankName }}</span>
<span>سررسید {{ check.dueDate }}</span>
<span dir="ltr">{{ check.sayadId }}</span>
</div>
<div class="admin-card-item__actions">
<button type="button" class="admin-btn admin-btn--outline-success admin-btn--xs">
تأیید
</button>
<button type="button" class="admin-btn admin-btn--outline admin-btn--xs">
مشاهده
</button>
</div>
</article>
</div>
<div class="checks-page__footer">
<p class="checks-page__note">
راس چک‌ها بر اساس تاریخ ثبت سفارش محاسبه شده است.
</p>
<div class="admin-action-group">
<button type="button" class="admin-btn admin-btn--success">تأیید همه چک‌ها</button>
<button type="button" class="admin-btn admin-btn--outline">
<AdminIcon name="print" :size="16" />
چاپ لیست‌ها
</button>
<button type="button" class="admin-btn admin-btn--outline admin-btn--sm" @click="goBack">
بازگشت
</button>
</div>
</div>
</template>
<div v-else class="admin-empty-placeholder admin-card">
{{ activeTab === 'images' ? 'تصاویر چک‌ها' : 'تاریخچه بررسی' }} — به‌زودی
</div>
</div>
</template>
<style scoped>
.checks-page__order-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
font-size: 0.9375rem;
}
.checks-page__rass-date {
margin: 4px 0 0;
font-size: 0.75rem;
color: var(--color-text-muted);
font-weight: 400;
}
.checks-page__table {
margin-top: 16px;
overflow: hidden;
}
.checks-page__footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 20px;
gap: 16px;
}
.checks-page__note {
margin: 0;
font-size: 0.8125rem;
color: var(--color-text-muted);
}
</style>