From 721b13afc8952ff1be8900c3287ee512febd2234 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Tue, 6 Jan 2026 18:30:42 +0100
Subject: [PATCH] Streamline Market Dashboard UI
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove Customer Actions and Merchant Actions cards from Overview
- Simplify My Store to single-store management (remove multi-store grid)
- Auto-select user's store when available
- Remove "Back to Stores" navigation (no longer needed)
- Clean up unused imports and functions

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../market/components/DashboardOverview.vue   | 81 ----------------
 .../market/components/MerchantStore.vue       | 94 ++++++-------------
 2 files changed, 27 insertions(+), 148 deletions(-)

diff --git a/src/modules/market/components/DashboardOverview.vue b/src/modules/market/components/DashboardOverview.vue
index 103c07a..804d77c 100644
--- a/src/modules/market/components/DashboardOverview.vue
+++ b/src/modules/market/components/DashboardOverview.vue
@@ -77,77 +77,6 @@
       </div>
     </div>
 
-    <!-- Quick Actions -->
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-      <!-- Customer Actions -->
-      <div class="bg-card p-6 rounded-lg border shadow-sm">
-        <h3 class="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
-          <ShoppingCart class="w-5 h-5 text-primary" />
-          Customer Actions
-        </h3>
-        <div class="space-y-3">
-          <Button 
-            @click="navigateToMarket" 
-            variant="default" 
-            class="w-full justify-start"
-          >
-            <Store class="w-4 h-4 mr-2" />
-            Browse Market
-          </Button>
-          <Button 
-            @click="navigateToOrders" 
-            variant="outline" 
-            class="w-full justify-start"
-          >
-            <Package class="w-4 h-4 mr-2" />
-            View All Orders
-          </Button>
-          <Button 
-            @click="navigateToCart" 
-            variant="outline" 
-            class="w-full justify-start"
-          >
-            <ShoppingCart class="w-4 h-4 mr-2" />
-            Shopping Cart
-          </Button>
-        </div>
-      </div>
-
-      <!-- Merchant Actions -->
-      <div class="bg-card p-6 rounded-lg border shadow-sm">
-        <h3 class="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
-          <Store class="w-5 h-5 text-green-500" />
-          Merchant Actions
-        </h3>
-        <div class="space-y-3">
-          <Button 
-            @click="navigateToStore" 
-            variant="default" 
-            class="w-full justify-start"
-          >
-            <Store class="w-4 h-4 mr-2" />
-            Manage Store
-          </Button>
-          <Button 
-            @click="navigateToProducts" 
-            variant="outline" 
-            class="w-full justify-start"
-          >
-            <Package class="w-4 h-4 mr-2" />
-            Manage Products
-          </Button>
-          <Button 
-            @click="navigateToOrders" 
-            variant="outline" 
-            class="w-full justify-start"
-          >
-            <Package class="w-4 h-4 mr-2" />
-            View Orders
-          </Button>
-        </div>
-      </div>
-    </div>
-
     <!-- Recent Activity -->
     <div class="bg-card p-6 rounded-lg border shadow-sm">
       <h3 class="text-lg font-semibold text-foreground mb-4">Recent Activity</h3>
@@ -216,15 +145,12 @@
 
 <script setup lang="ts">
 import { computed, ref, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
 import { useAuth } from '@/composables/useAuthService'
 import { useMarket } from '../composables/useMarket'
-import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
 import {
   Package,
   Store,
-  ShoppingCart,
   DollarSign,
   BarChart3,
   Clock
@@ -233,7 +159,6 @@ import type { OrderApiResponse, NostrmarketAPI } from '../services/nostrmarketAP
 import { injectService, SERVICE_TOKENS } from '@/core/di-container'
 import type { PaymentService } from '@/core/services/PaymentService'
 
-const router = useRouter()
 const auth = useAuth()
 const { isConnected } = useMarket()
 const nostrmarketAPI = injectService(SERVICE_TOKENS.NOSTRMARKET_API) as NostrmarketAPI
@@ -341,12 +266,6 @@ const getActivityVariant = (type: string) => {
   }
 }
 
-const navigateToMarket = () => router.push('/market')
-const navigateToOrders = () => router.push('/market-dashboard?tab=orders')
-const navigateToCart = () => router.push('/cart')
-const navigateToStore = () => router.push('/market-dashboard?tab=store')
-const navigateToProducts = () => router.push('/market-dashboard?tab=store')
-
 // Load orders when component mounts
 onMounted(() => {
   fetchOrders()
diff --git a/src/modules/market/components/MerchantStore.vue b/src/modules/market/components/MerchantStore.vue
index 50da407..c5fc016 100644
--- a/src/modules/market/components/MerchantStore.vue
+++ b/src/modules/market/components/MerchantStore.vue
@@ -49,73 +49,42 @@
 
       <!-- Stores Grid (shown when merchant profile exists) -->
       <div v-else>
-        <!-- Header Section -->
-        <div class="mb-8">
-        <div class="flex items-center justify-between mb-2">
-          <div>
-            <h2 class="text-2xl font-bold text-foreground">My Stores</h2>
-            <p class="text-muted-foreground mt-1">
-              Manage your stores and products
-            </p>
+        <!-- Loading State for Stalls -->
+        <div v-if="isLoadingStalls" class="flex justify-center py-12">
+          <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+        </div>
+
+        <!-- No Store - Create First Store -->
+        <div v-else-if="userStalls.length === 0" class="flex flex-col items-center justify-center py-12">
+          <div class="w-24 h-24 bg-muted rounded-full flex items-center justify-center mb-6">
+            <Store class="w-12 h-12 text-muted-foreground" />
           </div>
-          <Button @click="navigateToMarket" variant="outline">
-            <Store class="w-4 h-4 mr-2" />
-            Browse Market
+          <h2 class="text-2xl font-bold text-foreground mb-2">Create Your Store</h2>
+          <p class="text-muted-foreground text-center mb-6 max-w-md">
+            Set up your store to start selling products on the Nostr marketplace.
+          </p>
+          <Button
+            @click="showCreateStoreDialog = true"
+            variant="default"
+            size="lg"
+          >
+            <Plus class="w-5 h-5 mr-2" />
+            Create Store
           </Button>
         </div>
-      </div>
 
-      <!-- Loading State for Stalls -->
-      <div v-if="isLoadingStalls" class="flex justify-center py-12">
-        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
-      </div>
-
-      <!-- Stores Cards Grid -->
-      <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
-        <!-- Existing Store Cards -->
-        <StoreCard
-          v-for="stall in userStalls"
-          :key="stall.id"
-          :stall="stall"
-          @manage="manageStall"
-          @view-products="viewStallProducts"
-        />
-
-        <!-- Create New Store Card -->
-        <div class="bg-card rounded-lg border-2 border-dashed border-muted-foreground/25 hover:border-primary/50 transition-colors">
-          <button 
-            @click="showCreateStoreDialog = true"
-            class="w-full h-full p-6 flex flex-col items-center justify-center min-h-[200px] hover:bg-muted/30 transition-colors"
-          >
-            <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-3">
-              <Plus class="w-6 h-6 text-primary" />
-            </div>
-            <h3 class="text-lg font-semibold text-foreground mb-1">Create New Store</h3>
-            <p class="text-sm text-muted-foreground text-center">
-              Add another store to expand your marketplace presence
-            </p>
-          </button>
-        </div>
-      </div>
-
-      <!-- Active Store Dashboard (shown when a store is selected) -->
-      <div v-if="activeStall">
+      <!-- Active Store Dashboard (shown when user has a store) -->
+      <div v-else-if="activeStall">
         <!-- Header -->
         <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>
-          
           <!-- 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 class="flex items-center gap-3 mb-1">
+                <h2 class="text-xl sm:text-2xl font-bold text-foreground">{{ activeStall.name }}</h2>
+                <Badge variant="secondary">{{ activeStall.currency }}</Badge>
+              </div>
+              <p class="text-sm sm:text-base text-muted-foreground">{{ activeStall.config?.description || 'Manage incoming orders and your products' }}</p>
             </div>
             <div class="flex flex-col sm:flex-row gap-2 sm:gap-3">
               <Button @click="navigateToMarket" variant="outline" class="w-full sm:w-auto">
@@ -430,7 +399,6 @@ import { injectService, SERVICE_TOKENS } from '@/core/di-container'
 import CreateStoreDialog from './CreateStoreDialog.vue'
 import CreateProductDialog from './CreateProductDialog.vue'
 import DeleteConfirmDialog from './DeleteConfirmDialog.vue'
-import StoreCard from './StoreCard.vue'
 import MerchantOrders from './MerchantOrders.vue'
 
 const router = useRouter()
@@ -652,14 +620,6 @@ const loadStallProducts = async () => {
   }
 }
 
-const manageStall = (stallId: string) => {
-  activeStallId.value = stallId
-}
-
-const viewStallProducts = (stallId: string) => {
-  activeStallId.value = stallId
-}
-
 const navigateToMarket = () => router.push('/market')
 
 const checkMerchantProfile = async () => {