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:
parent
caad99a645
commit
721b13afc8
2 changed files with 27 additions and 148 deletions
|
|
@ -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()
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</div>
|
||||
<Button @click="navigateToMarket" variant="outline">
|
||||
<Store class="w-4 h-4 mr-2" />
|
||||
Browse Market
|
||||
</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" />
|
||||
<!-- 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>
|
||||
<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
|
||||
<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>
|
||||
</div>
|
||||
<Button
|
||||
@click="showCreateStoreDialog = true"
|
||||
variant="default"
|
||||
size="lg"
|
||||
>
|
||||
<Plus class="w-5 h-5 mr-2" />
|
||||
Create Store
|
||||
</Button>
|
||||
</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">
|
||||
<div class="flex items-center gap-3 mb-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>
|
||||
<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 () => {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue