Enhance market module with new chat and events features

- Introduce chat module with components, services, and composables for real-time messaging.
- Implement events module with API service, components, and ticket purchasing functionality.
- Update app configuration to include new modules and their respective settings.
- Refactor existing components to integrate with the new chat and events features.
- Enhance market store and services to support new functionalities and improve order management.
- Update routing to accommodate new views for chat and events, ensuring seamless navigation.

src/modules/market/views/MarketDashboard.vue

@@ -0,0 +1,125 @@
+<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 '@/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>
+