Streamline Market Dashboard UI

- 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>
This commit is contained in:
padreug 2026-01-06 18:30:42 +01:00
parent caad99a645
commit 721b13afc8
2 changed files with 27 additions and 148 deletions

View file

@ -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()

View file

@ -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 () => {