Initial commit: fabric-trade-user Vue 3 app with mobile and desktop layouts

Co-authored-by: Cursor <cursoragent@cursor.com>

src/components/ui/CapacitySummary.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { formatMeterage } from '@/utils/format'
+
+const props = defineProps<{
+  current: number
+  max: number
+}>()
+
+const remaining = computed(() => Math.max(0, props.max - props.current))
+</script>
+
+<template>
+  <div class="capacity-summary">
+    <div class="capacity-summary__row">
+      <span class="capacity-summary__label">جمع متراژ</span>
+      <span class="capacity-summary__value">{{ formatMeterage(current) }}</span>
+    </div>
+    <div class="capacity-summary__row">
+      <span class="capacity-summary__label">حداکثر مجاز</span>
+      <span class="capacity-summary__value">{{ formatMeterage(max) }}</span>
+    </div>
+    <div class="capacity-summary__row">
+      <span class="capacity-summary__label">باقی‌مانده</span>
+      <span class="capacity-summary__value capacity-summary__value--accent">
+        {{ formatMeterage(remaining) }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.capacity-summary {
+  background: var(--color-summary-bg);
+  border-radius: var(--radius-md);
+  padding: 14px 16px;
+  border: 1px solid var(--color-border);
+}
+
+.capacity-summary__row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 6px 0;
+  font-size: 0.875rem;
+}
+
+.capacity-summary__row:not(:last-child) {
+  border-bottom: 1px solid var(--color-border);
+}
+
+.capacity-summary__label {
+  color: var(--color-text-muted);
+}
+
+.capacity-summary__value {
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.capacity-summary__value--accent {
+  color: var(--color-primary);
+}
+</style>