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/orders/components/DesktopOrdersPage.vue
+241
View File
@@ -0,0 +1,241 @@
<script setup lang="ts">
import AdminIcon from '@/components/icons/AdminIcon.vue'
import StatusBadge from '@/components/ui/StatusBadge.vue'
import BaseModal from '@/components/ui/BaseModal.vue'
import OrderDetailContent from '@/views/orders/components/OrderDetailContent.vue'
import OrderAddModal from '@/views/orders/components/OrderAddModal.vue'
import { useOrdersPageContext } from '@/composables/useOrdersPage'
import { ORDER_TABS } from '@/utils/orderStatus'
import { formatCurrency, formatDateTime, formatMeterage } from '@/utils/format'
const {
activeTab,
selectedOrderId,
searchQuery,
filteredOrders,
selectedOrder,
showDetailModal,
openOrderDetail,
closeDetailModal,
settlementLabel,
goPricing,
goChecks,
openAddModal,
} = useOrdersPageContext()
function handlePricing() {
if (!selectedOrder.value) return
closeDetailModal()
goPricing(selectedOrder.value)
}
function handleChecks() {
if (!selectedOrder.value) return
closeDetailModal()
goChecks(selectedOrder.value)
}
</script>
<template>
<div class="orders-page">
<div class="orders-page__list-panel admin-card">
<div class="orders-page__list-header">
<div>
<h2 class="orders-page__list-title">سفارش‌ها</h2>
<p class="orders-page__breadcrumb">داشبورد / سفارش‌ها</p>
</div>
<div class="orders-page__list-actions">
<button type="button" class="admin-btn admin-btn--outline admin-btn--sm">
<AdminIcon name="filter" :size="16" />
فیلتر
</button>
<button type="button" class="admin-btn admin-btn--primary admin-btn--sm" @click="openAddModal">
سفارش جدید
</button>
</div>
</div>
<div class="orders-page__search">
<AdminIcon name="search" :size="18" />
<input
v-model="searchQuery"
type="search"
placeholder="جستجو در شماره سفارش، مشتری..."
class="orders-page__search-input"
/>
</div>
<div class="admin-tabs">
<button
v-for="tab in ORDER_TABS"
:key="tab.key"
type="button"
class="admin-tab"
:class="{ active: activeTab === tab.key }"
@click="activeTab = tab.key"
>
{{ tab.label }}
<template v-if="'count' in tab && tab.count"> ({{ tab.count }})</template>
</button>
</div>
<div class="admin-table-wrap">
<table class="admin-table admin-table--compact">
<thead>
<tr>
<th>شماره سفارش</th>
<th>مشتری</th>
<th>روش تسویه</th>
<th>مبلغ کل</th>
<th>متراژ</th>
<th>وضعیت</th>
<th>تاریخ ثبت</th>
<th>عملیات</th>
</tr>
</thead>
<tbody>
<tr
v-for="order in filteredOrders"
:key="order.id"
:class="{ 'is-selected': selectedOrderId === order.id }"
@click="openOrderDetail(order)"
>
<td>{{ order.orderNumber }}</td>
<td>{{ order.customerName }}</td>
<td>{{ settlementLabel(order.settlementMethod) }}</td>
<td>{{ order.totalAmount ? formatCurrency(order.totalAmount) : '—' }}</td>
<td>{{ formatMeterage(order.meterage) }}</td>
<td><StatusBadge :status="order.status" /></td>
<td>{{ formatDateTime(order.createdAt) }}</td>
<td>
<button type="button" class="orders-page__more-btn" @click.stop>
<AdminIcon name="more" :size="18" />
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="admin-pagination">
<span>نمایش ۱ تا ۷ از ۱۰۳ سفارش</span>
<div class="admin-pagination__pages">
<button type="button" class="admin-pagination__page active">۱</button>
<button type="button" class="admin-pagination__page">۲</button>
<button type="button" class="admin-pagination__page">۳</button>
<span>...</span>
<button type="button" class="admin-pagination__page">۱۲</button>
</div>
</div>
</div>
<BaseModal
:open="showDetailModal && !!selectedOrder"
title="جزئیات سفارش"
size="xl"
@close="closeDetailModal"
>
<template v-if="selectedOrder">
<p class="orders-page__breadcrumb orders-page__modal-breadcrumb">
سفارش‌ها / جزئیات سفارش
</p>
<OrderDetailContent
:order="selectedOrder"
layout="desktop"
:settlement-label="settlementLabel"
@pricing="handlePricing"
@checks="handleChecks"
/>
</template>
<template #footer>
<button type="button" class="admin-btn admin-btn--outline admin-btn--sm">
<AdminIcon name="sms" :size="16" />
ارسال پیامک
</button>
<button type="button" class="admin-btn admin-btn--outline admin-btn--sm">
<AdminIcon name="print" :size="16" />
چاپ
</button>
</template>
</BaseModal>
<OrderAddModal />
</div>
</template>
<style scoped>
.orders-page {
min-height: calc(100dvh - var(--header-height) - 48px);
}
.orders-page__list-panel {
padding: 20px;
min-width: 0;
}
.orders-page__list-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 16px;
}
.orders-page__list-title {
margin: 0;
font-size: 1.125rem;
font-weight: 700;
}
.orders-page__breadcrumb {
margin: 4px 0 0;
font-size: 0.8125rem;
color: var(--color-text-muted);
}
.orders-page__list-actions {
display: flex;
gap: 8px;
}
.orders-page__search {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-border-light);
margin-bottom: 16px;
color: var(--color-text-muted);
}
.orders-page__search-input {
flex: 1;
border: none;
background: transparent;
font-size: 0.875rem;
outline: none;
}
.orders-page__more-btn {
border: none;
background: transparent;
color: var(--color-text-muted);
padding: 4px;
border-radius: var(--radius-sm);
}
.admin-table tbody tr {
cursor: pointer;
}
.admin-table tbody tr.is-selected {
background: var(--color-primary-soft);
}
.orders-page__modal-breadcrumb {
margin: 0 0 16px;
}
</style>