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>
|
||||||
</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 -->
|
<!-- Recent Activity -->
|
||||||
<div class="bg-card p-6 rounded-lg border shadow-sm">
|
<div class="bg-card p-6 rounded-lg border shadow-sm">
|
||||||
<h3 class="text-lg font-semibold text-foreground mb-4">Recent Activity</h3>
|
<h3 class="text-lg font-semibold text-foreground mb-4">Recent Activity</h3>
|
||||||
|
|
@ -216,15 +145,12 @@
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed, ref, onMounted } from 'vue'
|
import { computed, ref, onMounted } from 'vue'
|
||||||
import { useRouter } from 'vue-router'
|
|
||||||
import { useAuth } from '@/composables/useAuthService'
|
import { useAuth } from '@/composables/useAuthService'
|
||||||
import { useMarket } from '../composables/useMarket'
|
import { useMarket } from '../composables/useMarket'
|
||||||
import { Button } from '@/components/ui/button'
|
|
||||||
import { Badge } from '@/components/ui/badge'
|
import { Badge } from '@/components/ui/badge'
|
||||||
import {
|
import {
|
||||||
Package,
|
Package,
|
||||||
Store,
|
Store,
|
||||||
ShoppingCart,
|
|
||||||
DollarSign,
|
DollarSign,
|
||||||
BarChart3,
|
BarChart3,
|
||||||
Clock
|
Clock
|
||||||
|
|
@ -233,7 +159,6 @@ import type { OrderApiResponse, NostrmarketAPI } from '../services/nostrmarketAP
|
||||||
import { injectService, SERVICE_TOKENS } from '@/core/di-container'
|
import { injectService, SERVICE_TOKENS } from '@/core/di-container'
|
||||||
import type { PaymentService } from '@/core/services/PaymentService'
|
import type { PaymentService } from '@/core/services/PaymentService'
|
||||||
|
|
||||||
const router = useRouter()
|
|
||||||
const auth = useAuth()
|
const auth = useAuth()
|
||||||
const { isConnected } = useMarket()
|
const { isConnected } = useMarket()
|
||||||
const nostrmarketAPI = injectService(SERVICE_TOKENS.NOSTRMARKET_API) as NostrmarketAPI
|
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
|
// Load orders when component mounts
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
fetchOrders()
|
fetchOrders()
|
||||||
|
|
|
||||||
|
|
@ -49,73 +49,42 @@
|
||||||
|
|
||||||
<!-- Stores Grid (shown when merchant profile exists) -->
|
<!-- Stores Grid (shown when merchant profile exists) -->
|
||||||
<div v-else>
|
<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 -->
|
<!-- Loading State for Stalls -->
|
||||||
<div v-if="isLoadingStalls" class="flex justify-center py-12">
|
<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 class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Stores Cards Grid -->
|
<!-- No Store - Create First Store -->
|
||||||
<div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
|
<div v-else-if="userStalls.length === 0" class="flex flex-col items-center justify-center py-12">
|
||||||
<!-- Existing Store Cards -->
|
<div class="w-24 h-24 bg-muted rounded-full flex items-center justify-center mb-6">
|
||||||
<StoreCard
|
<Store class="w-12 h-12 text-muted-foreground" />
|
||||||
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>
|
</div>
|
||||||
<h3 class="text-lg font-semibold text-foreground mb-1">Create New Store</h3>
|
<h2 class="text-2xl font-bold text-foreground mb-2">Create Your Store</h2>
|
||||||
<p class="text-sm text-muted-foreground text-center">
|
<p class="text-muted-foreground text-center mb-6 max-w-md">
|
||||||
Add another store to expand your marketplace presence
|
Set up your store to start selling products on the Nostr marketplace.
|
||||||
</p>
|
</p>
|
||||||
</button>
|
<Button
|
||||||
</div>
|
@click="showCreateStoreDialog = true"
|
||||||
|
variant="default"
|
||||||
|
size="lg"
|
||||||
|
>
|
||||||
|
<Plus class="w-5 h-5 mr-2" />
|
||||||
|
Create Store
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Active Store Dashboard (shown when a store is selected) -->
|
<!-- Active Store Dashboard (shown when user has a store) -->
|
||||||
<div v-if="activeStall">
|
<div v-else-if="activeStall">
|
||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
<div class="space-y-4 mb-6">
|
<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 -->
|
<!-- Store info and actions -->
|
||||||
<div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
|
<div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
|
||||||
<div class="flex-1">
|
<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>
|
<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>
|
||||||
<div class="flex flex-col sm:flex-row gap-2 sm:gap-3">
|
<div class="flex flex-col sm:flex-row gap-2 sm:gap-3">
|
||||||
<Button @click="navigateToMarket" variant="outline" class="w-full sm:w-auto">
|
<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 CreateStoreDialog from './CreateStoreDialog.vue'
|
||||||
import CreateProductDialog from './CreateProductDialog.vue'
|
import CreateProductDialog from './CreateProductDialog.vue'
|
||||||
import DeleteConfirmDialog from './DeleteConfirmDialog.vue'
|
import DeleteConfirmDialog from './DeleteConfirmDialog.vue'
|
||||||
import StoreCard from './StoreCard.vue'
|
|
||||||
import MerchantOrders from './MerchantOrders.vue'
|
import MerchantOrders from './MerchantOrders.vue'
|
||||||
|
|
||||||
const router = useRouter()
|
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 navigateToMarket = () => router.push('/market')
|
||||||
|
|
||||||
const checkMerchantProfile = async () => {
|
const checkMerchantProfile = async () => {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue