Refactor MerchantStore component for improved layout and user experience

- Update the layout of the active store dashboard to enhance visual hierarchy and spacing.
- Improve button accessibility and responsiveness by adjusting sizes and adding conditional rendering for text.
- Refactor store stats display to use a more consistent structure, enhancing readability and alignment.
- Adjust padding and margins for better overall presentation of store information and statistics.

These changes streamline the MerchantStore interface, providing a more intuitive and visually appealing experience for users managing their stores.

src/modules/market/components/MerchantStore.vue

@@ -101,101 +101,106 @@
       <!-- Active Store Dashboard (shown when a store is selected) -->
       <div v-if="activeStall">
         <!-- Header -->
-        <div class="flex items-center justify-between mb-6">
-          <div>
-            <div class="flex items-center gap-3 mb-2">
+        <div class="space-y-4 mb-6">
+          <!-- Top row with back button and currency -->
+          <div class="flex items-center gap-3">
             <Button @click="activeStallId = null" variant="ghost" size="sm">
               ← Back to Stores
             </Button>
             <div class="h-4 w-px bg-border"></div>
             <Badge variant="secondary">{{ activeStall.currency }}</Badge>
           </div>
-            <h2 class="text-2xl font-bold text-foreground">{{ activeStall.name }}</h2>
-            <p class="text-muted-foreground mt-1">{{ activeStall.config?.description || 'Manage incoming orders and your products' }}</p>
+          
+          <!-- Store info and actions -->
+          <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
+            <div class="flex-1">
+              <h2 class="text-xl sm:text-2xl font-bold text-foreground">{{ activeStall.name }}</h2>
+              <p class="text-sm sm:text-base text-muted-foreground mt-1">{{ activeStall.config?.description || 'Manage incoming orders and your products' }}</p>
             </div>
-          <div class="flex items-center gap-3">
-            <Button @click="navigateToMarket" variant="outline">
+            <div class="flex flex-col sm:flex-row gap-2 sm:gap-3">
+              <Button @click="navigateToMarket" variant="outline" class="w-full sm:w-auto">
                 <Store class="w-4 h-4 mr-2" />
-              Browse Market
+                <span class="sm:inline">Browse Market</span>
               </Button>
-            <Button @click="showCreateProductDialog = true" variant="default">
+              <Button @click="showCreateProductDialog = true" variant="default" class="w-full sm:w-auto">
                 <Plus class="w-4 h-4 mr-2" />
-              Add Product
+                <span>Add Product</span>
               </Button>
             </div>
           </div>
+        </div>
 
         <!-- Store Stats -->
-        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
+        <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-6">
           <!-- Incoming Orders -->
-          <div class="bg-card p-6 rounded-lg border shadow-sm">
-            <div class="flex items-center justify-between">
-              <div>
-                <p class="text-sm font-medium text-muted-foreground">Incoming Orders</p>
-                <p class="text-2xl font-bold text-foreground">{{ storeStats.incomingOrders }}</p>
+          <div class="bg-card p-4 sm:p-6 rounded-lg border shadow-sm">
+            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
+              <div class="flex-1">
+                <p class="text-xs sm:text-sm font-medium text-muted-foreground">Incoming Orders</p>
+                <p class="text-xl sm:text-2xl font-bold text-foreground">{{ storeStats.incomingOrders }}</p>
               </div>
-              <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
-                <Package class="w-6 h-6 text-primary" />
+              <div class="w-10 h-10 sm:w-12 sm:h-12 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0">
+                <Package class="w-5 h-5 sm:w-6 sm:h-6 text-primary" />
               </div>
             </div>
-            <div class="mt-4">
-              <div class="flex items-center text-sm text-muted-foreground">
+            <div class="mt-3 sm:mt-4">
+              <div class="flex flex-wrap items-center text-xs sm:text-sm text-muted-foreground gap-1">
                 <span>{{ storeStats.pendingOrders }} pending</span>
-                <span class="mx-2">•</span>
+                <span class="hidden sm:inline mx-1">•</span>
                 <span>{{ storeStats.paidOrders }} paid</span>
               </div>
             </div>
           </div>
 
           <!-- Total Sales -->
-          <div class="bg-card p-6 rounded-lg border shadow-sm">
-            <div class="flex items-center justify-between">
-              <div>
-                <p class="text-sm font-medium text-muted-foreground">Total Sales</p>
-                <p class="text-2xl font-bold text-foreground">{{ formatPrice(storeStats.totalSales, 'sat') }}</p>
+          <div class="bg-card p-4 sm:p-6 rounded-lg border shadow-sm">
+            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
+              <div class="flex-1">
+                <p class="text-xs sm:text-sm font-medium text-muted-foreground">Total Sales</p>
+                <p class="text-xl sm:text-2xl font-bold text-foreground">{{ formatPrice(storeStats.totalSales, 'sat') }}</p>
               </div>
-              <div class="w-12 h-12 bg-green-500/10 rounded-lg flex items-center justify-center">
-                <DollarSign class="w-6 h-6 text-green-500" />
+              <div class="w-10 h-10 sm:w-12 sm:h-12 bg-green-500/10 rounded-lg flex items-center justify-center flex-shrink-0">
+                <DollarSign class="w-5 h-5 sm:w-6 sm:h-6 text-green-500" />
               </div>
             </div>
-            <div class="mt-4">
-              <div class="flex items-center text-sm text-muted-foreground">
+            <div class="mt-3 sm:mt-4">
+              <div class="flex items-center text-xs sm:text-sm text-muted-foreground">
                 <span>Last 30 days</span>
               </div>
             </div>
           </div>
 
           <!-- Products -->
-          <div class="bg-card p-6 rounded-lg border shadow-sm">
-            <div class="flex items-center justify-between">
-              <div>
-                <p class="text-sm font-medium text-muted-foreground">Products</p>
-                <p class="text-2xl font-bold text-foreground">{{ stallProducts.length }}</p>
+          <div class="bg-card p-4 sm:p-6 rounded-lg border shadow-sm">
+            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
+              <div class="flex-1">
+                <p class="text-xs sm:text-sm font-medium text-muted-foreground">Products</p>
+                <p class="text-xl sm:text-2xl font-bold text-foreground">{{ stallProducts.length }}</p>
               </div>
-              <div class="w-12 h-12 bg-purple-500/10 rounded-lg flex items-center justify-center">
-                <Store class="w-6 h-6 text-purple-500" />
+              <div class="w-10 h-10 sm:w-12 sm:h-12 bg-purple-500/10 rounded-lg flex items-center justify-center flex-shrink-0">
+                <Store class="w-5 h-5 sm:w-6 sm:h-6 text-purple-500" />
               </div>
             </div>
-            <div class="mt-4">
-              <div class="flex items-center text-sm text-muted-foreground">
+            <div class="mt-3 sm:mt-4">
+              <div class="flex items-center text-xs sm:text-sm text-muted-foreground">
                 <span>{{ stallProducts.filter(p => p.active).length }} active</span>
               </div>
             </div>
           </div>
 
           <!-- Customer Satisfaction -->
-          <div class="bg-card p-6 rounded-lg border shadow-sm">
-            <div class="flex items-center justify-between">
-              <div>
-                <p class="text-sm font-medium text-muted-foreground">Satisfaction</p>
-                <p class="text-2xl font-bold text-foreground">{{ storeStats.satisfaction }}%</p>
+          <div class="bg-card p-4 sm:p-6 rounded-lg border shadow-sm">
+            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
+              <div class="flex-1">
+                <p class="text-xs sm:text-sm font-medium text-muted-foreground">Satisfaction</p>
+                <p class="text-xl sm:text-2xl font-bold text-foreground">{{ storeStats.satisfaction }}%</p>
               </div>
-              <div class="w-12 h-12 bg-yellow-500/10 rounded-lg flex items-center justify-center">
-                <Star class="w-6 h-6 text-yellow-500" />
+              <div class="w-10 h-10 sm:w-12 sm:h-12 bg-yellow-500/10 rounded-lg flex items-center justify-center flex-shrink-0">
+                <Star class="w-5 h-5 sm:w-6 sm:h-6 text-yellow-500" />
               </div>
             </div>
-            <div class="mt-4">
-              <div class="flex items-center text-sm text-muted-foreground">
+            <div class="mt-3 sm:mt-4">
+              <div class="flex items-center text-xs sm:text-sm text-muted-foreground">
                 <span>{{ storeStats.totalReviews }} reviews</span>
               </div>
             </div>