padreug
c284ad5778
- Delete src/stores/market.ts compatibility re-export file - Update 15 files to import from proper module path @/modules/market/stores/market - Add necessary type exports to market store for external consumers - Remove empty src/stores/ directory completely - Enforce clean modular architecture without global store shortcuts 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
125 lines
3.3 KiB
Vue
125 lines
3.3 KiB
Vue
<template>
|
|
<div class="container mx-auto px-4 py-8">
|
|
<!-- Page Header -->
|
|
<div class="mb-8">
|
|
<h1 class="text-3xl font-bold text-foreground">Market Dashboard</h1>
|
|
<p class="text-muted-foreground mt-2">
|
|
Manage your market activities as both a customer and merchant
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Dashboard Tabs -->
|
|
<div class="mb-6">
|
|
<nav class="flex space-x-8 border-b border-border">
|
|
<button
|
|
v-for="tab in tabs"
|
|
:key="tab.id"
|
|
@click="activeTab = tab.id"
|
|
:class="[
|
|
'py-2 px-1 border-b-2 font-medium text-sm transition-colors',
|
|
activeTab === tab.id
|
|
? 'border-primary text-primary'
|
|
: 'border-transparent text-muted-foreground hover:text-foreground hover:border-muted-foreground'
|
|
]"
|
|
>
|
|
<div class="flex items-center space-x-2">
|
|
<component :is="tab.icon" class="w-4 h-4" />
|
|
<span>{{ tab.name }}</span>
|
|
<Badge v-if="tab.badge" variant="secondary" class="text-xs">
|
|
{{ tab.badge }}
|
|
</Badge>
|
|
</div>
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Tab Content -->
|
|
<div class="min-h-[600px]">
|
|
<!-- Overview Tab -->
|
|
<div v-if="activeTab === 'overview'" class="space-y-6">
|
|
<DashboardOverview />
|
|
</div>
|
|
|
|
<!-- My Orders Tab (Customer) -->
|
|
<div v-else-if="activeTab === 'orders'" class="space-y-6">
|
|
<OrderHistory />
|
|
</div>
|
|
|
|
<!-- My Store Tab (Merchant) -->
|
|
<div v-else-if="activeTab === 'store'" class="space-y-6">
|
|
<MerchantStore />
|
|
</div>
|
|
|
|
<!-- Settings Tab -->
|
|
<div v-else-if="activeTab === 'settings'" class="space-y-6">
|
|
<MarketSettings />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed, onMounted } from 'vue'
|
|
import { useMarketStore } from '@/modules/market/stores/market'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import {
|
|
BarChart3,
|
|
Package,
|
|
Store,
|
|
Settings,
|
|
|
|
} from 'lucide-vue-next'
|
|
import DashboardOverview from '../components/DashboardOverview.vue'
|
|
import OrderHistory from '../components/OrderHistory.vue'
|
|
import MerchantStore from '../components/MerchantStore.vue'
|
|
import MarketSettings from '../components/MarketSettings.vue'
|
|
|
|
// const auth = useAuth()
|
|
const marketStore = useMarketStore()
|
|
|
|
// Local state
|
|
const activeTab = ref('overview')
|
|
|
|
// Computed properties for tab badges
|
|
const orderCount = computed(() => Object.keys(marketStore.orders).length)
|
|
const pendingOrders = computed(() =>
|
|
Object.values(marketStore.orders).filter(o => o.status === 'pending').length
|
|
)
|
|
// const pendingPayments = computed(() =>
|
|
// Object.values(marketStore.orders).filter(o => o.paymentStatus === 'pending').length
|
|
// )
|
|
|
|
// Dashboard tabs
|
|
const tabs = computed(() => [
|
|
{
|
|
id: 'overview',
|
|
name: 'Overview',
|
|
icon: BarChart3,
|
|
badge: null
|
|
},
|
|
{
|
|
id: 'orders',
|
|
name: 'My Orders',
|
|
icon: Package,
|
|
badge: orderCount.value > 0 ? orderCount.value : null
|
|
},
|
|
{
|
|
id: 'store',
|
|
name: 'My Store',
|
|
icon: Store,
|
|
badge: pendingOrders.value > 0 ? pendingOrders.value : null
|
|
},
|
|
{
|
|
id: 'settings',
|
|
name: 'Settings',
|
|
icon: Settings,
|
|
badge: null
|
|
}
|
|
])
|
|
|
|
// Lifecycle
|
|
onMounted(() => {
|
|
console.log('Market Dashboard mounted')
|
|
})
|
|
</script>
|
|
|