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

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-03 12:14:12 +02:00
commit a8501f4604
75 changed files with 14787 additions and 0 deletions
@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import AdminIcon from '@/components/icons/AdminIcon.vue'
+import StatusBadge from '@/components/ui/StatusBadge.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,
+  showDetailPanel,
+  selectOrder,
+  closeDetailPanel,
+  settlementLabel,
+  goPricing,
+  goChecks,
+  openAddModal,
+} = useOrdersPageContext()
+</script>
+
+<template>
+  <div class="compact-orders">
+    <div class="compact-page-header">
+      <div class="compact-page-header__row">
+        <div>
+          <h2 class="compact-page-header__title">سفارش‌ها</h2>
+          <p class="compact-page-header__breadcrumb">داشبورد / سفارش‌ها</p>
+        </div>
+        <div class="compact-page-header__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>
+
+    <div class="orders-page__search admin-card">
+      <AdminIcon name="search" :size="18" />
+      <input
+        v-model="searchQuery"
+        type="search"
+        placeholder="جستجو در شماره سفارش، مشتری..."
+        class="orders-page__search-input"
+      />
+    </div>
+
+    <div class="admin-tabs compact-orders__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-card-list">
+      <button
+        v-for="order in filteredOrders"
+        :key="order.id"
+        type="button"
+        class="admin-card-item"
+        :class="{ selected: selectedOrderId === order.id }"
+        @click="selectOrder(order, true)"
+      >
+        <div class="admin-card-item__header">
+          <p class="admin-card-item__title">{{ order.orderNumber }}</p>
+          <StatusBadge :status="order.status" />
+        </div>
+        <div class="admin-card-item__meta">
+          <span><strong>مشتری:</strong> {{ order.customerName }}</span>
+          <span><strong>متراژ:</strong> {{ formatMeterage(order.meterage) }}</span>
+          <span><strong>مبلغ:</strong> {{ order.totalAmount ? formatCurrency(order.totalAmount) : '—' }}</span>
+          <span>{{ formatDateTime(order.createdAt) }}</span>
+        </div>
+      </button>
+    </div>
+
+    <div class="admin-detail-panel" :class="{ open: showDetailPanel && selectedOrder }">
+      <div v-if="selectedOrder" class="admin-detail-panel__inner">
+        <div class="admin-detail-panel__header">
+          <button
+            type="button"
+            class="admin-detail-panel__back"
+            aria-label="بازگشت به لیست"
+            @click="closeDetailPanel"
+          >
+            <AdminIcon name="chevron-left" :size="20" />
+          </button>
+          <h2 class="admin-detail-panel__title">جزئیات سفارش</h2>
+        </div>
+        <div class="admin-detail-panel__body">
+          <OrderDetailContent
+            :order="selectedOrder"
+            :settlement-label="settlementLabel"
+            @pricing="goPricing(selectedOrder)"
+            @checks="goChecks(selectedOrder)"
+          />
+        </div>
+      </div>
+    </div>
+
+    <OrderAddModal />
+  </div>
+</template>
+
+<style scoped>
+.compact-orders__tabs {
+  margin-bottom: 16px;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: 4px 8px 0;
+  border-bottom: 1px solid var(--color-border);
+  overflow: visible;
+}
+
+.orders-page__search {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  margin-bottom: 12px;
+  color: var(--color-text-muted);
+}
+
+.orders-page__search-input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  font-size: 0.875rem;
+  outline: none;
+}
+
+.admin-card-item {
+  cursor: pointer;
+  text-align: right;
+}
+
+.admin-detail-panel__inner {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--color-bg);
+}
+</style>