From 0c931cf457f75bd65870061d35b28e32c360356a Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Mon, 8 Sep 2025 22:13:17 +0200
Subject: [PATCH] Add CreateProductDialog and CreateStoreDialog components

- Introduce CreateProductDialog for adding new products with comprehensive form fields including name, price, description, quantity, and active status.
- Implement validation using Zod and integrate auto-reply settings.
- Add CreateStoreDialog for creating new stores, allowing input for store name, description, currency, and shipping zones.
- Enhance user experience with loading states and error handling in both dialogs.
- Refactor MerchantStore component to utilize StoreCard for displaying user stalls, improving code organization and readability.

These changes enhance the merchant experience by streamlining product and store creation processes, ensuring better validation and user feedback.
---
 .../market/components/CreateProductDialog.vue |  367 ++++
 .../market/components/CreateStoreDialog.vue   |  471 +++++
 .../market/components/MerchantStore.vue       | 1779 +++-------------
 .../market/components/MerchantStore.vue.bak   | 1864 +++++++++++++++++
 src/modules/market/components/StoreCard.vue   |   69 +
 5 files changed, 3021 insertions(+), 1529 deletions(-)
 create mode 100644 src/modules/market/components/CreateProductDialog.vue
 create mode 100644 src/modules/market/components/CreateStoreDialog.vue
 create mode 100644 src/modules/market/components/MerchantStore.vue.bak
 create mode 100644 src/modules/market/components/StoreCard.vue

diff --git a/src/modules/market/components/CreateProductDialog.vue b/src/modules/market/components/CreateProductDialog.vue
new file mode 100644
index 0000000..313084a
--- /dev/null
+++ b/src/modules/market/components/CreateProductDialog.vue
@@ -0,0 +1,367 @@
+<template>
+  <Dialog :open="isOpen" @update:open="(open) => !open && $emit('close')">
+    <DialogContent class="sm:max-w-3xl max-h-[90vh] overflow-y-auto">
+      <DialogHeader>
+        <DialogTitle>Add New Product to {{ stall?.name }}</DialogTitle>
+      </DialogHeader>
+      
+      <form @submit="onSubmit" class="space-y-6 py-4" autocomplete="off">
+        <!-- Basic Product Info -->
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <!-- Product Name -->
+          <FormField v-slot="{ componentField }" name="name">
+            <FormItem>
+              <FormLabel>Product Name *</FormLabel>
+              <FormControl>
+                <Input 
+                  placeholder="Enter product name"
+                  :disabled="isCreating"
+                  v-bind="componentField"
+                />
+              </FormControl>
+              <FormDescription>Choose a clear, descriptive name</FormDescription>
+              <FormMessage />
+            </FormItem>
+          </FormField>
+
+          <!-- Price -->
+          <FormField v-slot="{ componentField }" name="price">
+            <FormItem>
+              <FormLabel>Price * ({{ stall?.currency || 'sat' }})</FormLabel>
+              <FormControl>
+                <Input 
+                  type="number"
+                  step="0.01"
+                  min="0.01"
+                  placeholder="0.00"
+                  :disabled="isCreating"
+                  v-bind="componentField"
+                />
+              </FormControl>
+              <FormDescription>Price in {{ stall?.currency || 'sat' }}</FormDescription>
+              <FormMessage />
+            </FormItem>
+          </FormField>
+        </div>
+
+        <!-- Description -->
+        <FormField v-slot="{ componentField }" name="description">
+          <FormItem>
+            <FormLabel>Description</FormLabel>
+            <FormControl>
+              <Textarea
+                placeholder="Describe your product, its features, and benefits"
+                :disabled="isCreating"
+                v-bind="componentField"
+                rows="4"
+              />
+            </FormControl>
+            <FormDescription>Detailed description to help customers understand your product</FormDescription>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <!-- Quantity and Active Status -->
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <!-- Quantity -->
+          <FormField v-slot="{ componentField }" name="quantity">
+            <FormItem>
+              <FormLabel>Quantity *</FormLabel>
+              <FormControl>
+                <Input 
+                  type="number"
+                  min="0"
+                  placeholder="1"
+                  :disabled="isCreating"
+                  v-bind="componentField"
+                />
+              </FormControl>
+              <FormDescription>Available quantity (0 = unlimited)</FormDescription>
+              <FormMessage />
+            </FormItem>
+          </FormField>
+
+          <!-- Active Status -->
+          <FormField v-slot="{ value, handleChange }" name="active">
+            <FormItem>
+              <div class="space-y-3">
+                <FormLabel>Product Status</FormLabel>
+                <FormControl>
+                  <div class="flex items-center space-x-2">
+                    <Checkbox
+                      :checked="value"
+                      @update:checked="handleChange"
+                      :disabled="isCreating"
+                    />
+                    <Label>Product is active and visible</Label>
+                  </div>
+                </FormControl>
+                <FormDescription>Inactive products won't be shown to customers</FormDescription>
+                <FormMessage />
+              </div>
+            </FormItem>
+          </FormField>
+        </div>
+
+        <!-- Categories -->
+        <FormField name="categories">
+          <FormItem>
+            <FormLabel>Categories</FormLabel>
+            <FormDescription>Add categories to help customers find your product</FormDescription>
+            <div class="text-center py-8 border-2 border-dashed rounded-lg">
+              <Package class="w-8 h-8 mx-auto mb-2 text-muted-foreground" />
+              <p class="text-sm text-muted-foreground">Category management coming soon</p>
+            </div>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <!-- Images -->
+        <FormField name="images">
+          <FormItem>
+            <FormLabel>Product Images</FormLabel>
+            <FormDescription>Add images to showcase your product</FormDescription>
+            <div class="text-center py-8 border-2 border-dashed rounded-lg">
+              <Package class="w-8 h-8 mx-auto mb-2 text-muted-foreground" />
+              <p class="text-sm text-muted-foreground">Image upload coming soon</p>
+            </div>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <!-- Auto-reply Settings -->
+        <div class="border-t pt-6">
+          <FormField v-slot="{ value, handleChange }" name="use_autoreply">
+            <FormItem>
+              <div class="flex items-center space-x-2">
+                <FormControl>
+                  <Checkbox
+                    :checked="value"
+                    @update:checked="handleChange"
+                    :disabled="isCreating"
+                  />
+                </FormControl>
+                <FormLabel>Enable auto-reply to customer messages</FormLabel>
+              </div>
+              <FormDescription>Automatically respond to customer inquiries about this product</FormDescription>
+              <FormMessage />
+            </FormItem>
+          </FormField>
+
+          <FormField v-slot="{ componentField }" name="autoreply_message">
+            <FormItem class="mt-4">
+              <FormLabel>Auto-reply Message</FormLabel>
+              <FormControl>
+                <Textarea
+                  placeholder="Thank you for your interest! I'll get back to you soon..."
+                  :disabled="isCreating"
+                  v-bind="componentField"
+                  rows="3"
+                />
+              </FormControl>
+              <FormDescription>Message sent automatically when customers inquire about this product</FormDescription>
+              <FormMessage />
+            </FormItem>
+          </FormField>
+        </div>
+
+        <!-- Error Display -->
+        <div v-if="createError" class="text-sm text-destructive">
+          {{ createError }}
+        </div>
+
+        <div class="flex justify-end space-x-2 pt-4">
+          <Button 
+            type="button"
+            @click="$emit('close')" 
+            variant="outline"
+            :disabled="isCreating"
+          >
+            Cancel
+          </Button>
+          <Button 
+            type="submit"
+            :disabled="isCreating || !isFormValid"
+          >
+            <span v-if="isCreating">Creating...</span>
+            <span v-else>Create Product</span>
+          </Button>
+        </div>
+      </form>
+    </DialogContent>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, nextTick } from 'vue'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+import { Button } from '@/components/ui/button'
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Textarea } from '@/components/ui/textarea'
+import { Checkbox } from '@/components/ui/checkbox'
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form'
+import { Package } from 'lucide-vue-next'
+import type { NostrmarketAPI, Stall, CreateProductRequest } from '../services/nostrmarketAPI'
+import { auth } from '@/composables/useAuthService'
+import { useToast } from '@/core/composables/useToast'
+import { injectService, SERVICE_TOKENS } from '@/core/di-container'
+
+// Props and emits
+interface Props {
+  isOpen: boolean
+  stall?: Stall | null
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  close: []
+  created: [product: any]
+}>()
+
+// Services
+const nostrmarketAPI = injectService(SERVICE_TOKENS.NOSTRMARKET_API) as NostrmarketAPI
+const toast = useToast()
+
+// Local state
+const isCreating = ref(false)
+const createError = ref<string | null>(null)
+
+// Product form schema
+const productFormSchema = toTypedSchema(z.object({
+  name: z.string().min(1, "Product name is required").max(100, "Product name must be less than 100 characters"),
+  description: z.string().max(1000, "Description must be less than 1000 characters"),
+  price: z.number().min(0.01, "Price must be greater than 0"),
+  quantity: z.number().int().min(0, "Quantity must be 0 or greater"),
+  categories: z.array(z.string()).max(10, "Maximum 10 categories allowed"),
+  images: z.array(z.string().url("Invalid image URL")).max(5, "Maximum 5 images allowed"),
+  active: z.boolean(),
+  use_autoreply: z.boolean(),
+  autoreply_message: z.string().max(500, "Auto-reply message must be less than 500 characters")
+}))
+
+// Product form setup with vee-validate
+const form = useForm({
+  validationSchema: productFormSchema,
+  initialValues: {
+    name: '',
+    description: '',
+    price: 0,
+    quantity: 1,
+    categories: [] as string[],
+    images: [] as string[],
+    active: true,
+    use_autoreply: false,
+    autoreply_message: ''
+  }
+})
+
+// Destructure product form methods
+const { resetForm, values, meta } = form
+
+// Product form validation computed
+const isFormValid = computed(() => meta.value.valid)
+
+// Product form submit handler
+const onSubmit = form.handleSubmit(async (values) => {
+  await createProduct(values)
+})
+
+// Methods
+const createProduct = async (formData: any) => {
+  const currentUser = auth.currentUser?.value
+  if (!currentUser?.wallets?.length || !props.stall) {
+    toast.error('No active store or wallets available')
+    return
+  }
+
+  const { 
+    name, 
+    description, 
+    price, 
+    quantity, 
+    categories, 
+    images, 
+    active, 
+    use_autoreply, 
+    autoreply_message 
+  } = formData
+
+  isCreating.value = true
+  createError.value = null
+
+  try {
+    const productData: CreateProductRequest = {
+      stall_id: props.stall.id!,
+      name,
+      categories: categories || [],
+      images: images || [],
+      price: Number(price),
+      quantity: Number(quantity),
+      active,
+      config: {
+        description: description || '',
+        currency: props.stall.currency,
+        use_autoreply,
+        autoreply_message: use_autoreply ? autoreply_message || '' : '',
+        shipping: [] // Will be populated from shipping zones if needed
+      }
+    }
+
+    const newProduct = await nostrmarketAPI.createProduct(
+      currentUser.wallets[0].adminkey,
+      productData
+    )
+
+    // Reset form and close dialog
+    resetForm()
+    emit('created', newProduct)
+    emit('close')
+    
+    toast.success(`Product "${name}" created successfully!`)
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : 'Failed to create product'
+    console.error('Error creating product:', error)
+    createError.value = errorMessage
+    toast.error(`Failed to create product: ${errorMessage}`)
+  } finally {
+    isCreating.value = false
+  }
+}
+
+// Initialize data when dialog opens
+watch(() => props.isOpen, async (isOpen) => {
+  if (isOpen) {
+    // Reset form to initial state
+    resetForm({
+      values: {
+        name: '',
+        description: '',
+        price: 0,
+        quantity: 1,
+        categories: [],
+        images: [],
+        active: true,
+        use_autoreply: false,
+        autoreply_message: ''
+      }
+    })
+    
+    // Wait for reactivity
+    await nextTick()
+    
+    // Clear any previous errors
+    createError.value = null
+  }
+})
+</script>
\ No newline at end of file
diff --git a/src/modules/market/components/CreateStoreDialog.vue b/src/modules/market/components/CreateStoreDialog.vue
new file mode 100644
index 0000000..361fee7
--- /dev/null
+++ b/src/modules/market/components/CreateStoreDialog.vue
@@ -0,0 +1,471 @@
+<template>
+  <Dialog :open="isOpen" @update:open="(open) => !open && $emit('close')">
+    <DialogContent class="sm:max-w-2xl">
+      <DialogHeader>
+        <DialogTitle>Create New Store</DialogTitle>
+      </DialogHeader>
+      
+      <form @submit="onSubmit" class="space-y-6 py-4" autocomplete="off">
+        <!-- Basic Store Info -->
+        <div class="space-y-4">
+          <FormField v-slot="{ componentField }" name="name">
+            <FormItem>
+              <FormLabel>Store Name *</FormLabel>
+              <FormControl>
+                <Input 
+                  placeholder="Enter your store name"
+                  :disabled="isCreating"
+                  v-bind="componentField"
+                  autocomplete="off"
+                  spellcheck="false"
+                />
+              </FormControl>
+              <FormDescription>
+                Choose a unique name for your store
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          </FormField>
+          
+          <FormField v-slot="{ componentField }" name="description">
+            <FormItem>
+              <FormLabel>Description</FormLabel>
+              <FormControl>
+                <Textarea
+                  placeholder="Describe your store and products"
+                  :disabled="isCreating"
+                  v-bind="componentField"
+                  autocomplete="off"
+                  spellcheck="false"
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          </FormField>
+
+          <FormField v-slot="{ componentField }" name="currency">
+            <FormItem>
+              <FormLabel>Currency *</FormLabel>
+              <Select :disabled="isCreating" v-bind="componentField">
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select currency" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  <SelectItem v-for="currency in availableCurrencies" :key="currency" :value="currency">
+                    {{ currency }}
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+              <FormMessage />
+            </FormItem>
+          </FormField>
+        </div>
+
+        <!-- Shipping Zones Section -->
+        <FormField name="selectedZones">
+          <FormItem>
+            <div class="mb-4">
+              <FormLabel class="text-base">Shipping Zones *</FormLabel>
+              <FormDescription>
+                Select existing zones or create new ones for your store
+              </FormDescription>
+            </div>
+
+            <!-- Existing Zones -->
+            <div v-if="availableZones.length > 0" class="space-y-3">
+              <FormLabel class="text-sm font-medium">Available Zones:</FormLabel>
+              <div class="space-y-2 max-h-32 overflow-y-auto">
+                <FormField
+                  v-for="zone in availableZones"
+                  :key="zone.id"
+                  v-slot="{ value, handleChange }"
+                  type="checkbox"
+                  :value="zone.id"
+                  :unchecked-value="false"
+                  name="selectedZones"
+                >
+                  <FormItem class="flex flex-row items-start space-x-3 space-y-0">
+                    <FormControl>
+                      <Checkbox
+                        :model-value="Array.isArray(value) && value.includes(zone.id)"
+                        @update:model-value="handleChange"
+                        :disabled="isCreating"
+                      />
+                    </FormControl>
+                    <FormLabel class="text-sm cursor-pointer font-normal">
+                      {{ zone.name }} - {{ zone.cost }} {{ zone.currency }}
+                      <span class="text-muted-foreground ml-1">({{ zone.countries.slice(0, 2).join(', ') }}{{ zone.countries.length > 2 ? '...' : '' }})</span>
+                    </FormLabel>
+                  </FormItem>
+                </FormField>
+              </div>
+            </div>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <!-- Create New Zone -->
+        <div class="border-t pt-4">
+          <Label class="text-sm font-medium">Create New Zone:</Label>
+          <div class="space-y-3 mt-2">
+            <FormField v-slot="{ componentField }" name="newZone.name">
+              <FormItem>
+                <FormLabel>Zone Name</FormLabel>
+                <FormControl>
+                  <Input 
+                    placeholder="e.g., Europe, Worldwide"
+                    :disabled="isCreating"
+                    v-bind="componentField"
+                    autocomplete="off"
+                    spellcheck="false"
+                  />
+                </FormControl>
+              </FormItem>
+            </FormField>
+            
+            <FormField v-slot="{ componentField }" name="newZone.cost">
+              <FormItem>
+                <FormLabel>Shipping Cost</FormLabel>
+                <FormControl>
+                  <Input 
+                    type="number"
+                    min="0"
+                    :placeholder="`Cost in ${values.currency || 'sat'}`"
+                    :disabled="isCreating"
+                    v-bind="componentField"
+                  />
+                </FormControl>
+              </FormItem>
+            </FormField>
+
+            <FormField v-slot="{ componentField }" name="newZone.selectedCountries">
+              <FormItem>
+                <FormLabel>Countries/Regions</FormLabel>
+                <FormControl>
+                  <Select multiple :disabled="isCreating" v-bind="componentField">
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select countries/regions" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem v-for="country in countries" :key="country" :value="country">
+                        {{ country }}
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                </FormControl>
+                <div v-if="values.newZone?.selectedCountries?.length > 0" class="mt-2">
+                  <div class="flex flex-wrap gap-1">
+                    <Badge 
+                      v-for="country in values.newZone.selectedCountries" 
+                      :key="country"
+                      variant="secondary"
+                      class="text-xs"
+                    >
+                      {{ country }}
+                    </Badge>
+                  </div>
+                </div>
+              </FormItem>
+            </FormField>
+
+            <Button 
+              @click="addNewZone"
+              type="button"
+              variant="outline"
+              size="sm"
+              :disabled="isCreating || !values.newZone?.name || !values.newZone?.selectedCountries?.length"
+            >
+              <Plus class="w-4 h-4 mr-2" />
+              Add Zone
+            </Button>
+          </div>
+        </div>
+
+        <!-- Error Display -->
+        <div v-if="createError" class="text-sm text-destructive">
+          {{ createError }}
+        </div>
+
+        <div class="flex justify-end space-x-2 pt-4">
+          <Button 
+            type="button"
+            @click="$emit('close')" 
+            variant="outline"
+            :disabled="isCreating"
+          >
+            Cancel
+          </Button>
+          <Button 
+            type="submit"
+            :disabled="isCreating || !isFormValid"
+          >
+            <span v-if="isCreating">Creating...</span>
+            <span v-else>Create Store</span>
+          </Button>
+        </div>
+      </form>
+    </DialogContent>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, watch, nextTick } from 'vue'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Textarea } from '@/components/ui/textarea'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Checkbox } from '@/components/ui/checkbox'
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form'
+import { Plus } from 'lucide-vue-next'
+import type { NostrmarketAPI, Zone, CreateStallRequest } from '../services/nostrmarketAPI'
+import { auth } from '@/composables/useAuthService'
+import { useToast } from '@/core/composables/useToast'
+import { injectService, SERVICE_TOKENS } from '@/core/di-container'
+
+// Props and emits
+interface Props {
+  isOpen: boolean
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  close: []
+  created: [stall: any]
+}>()
+
+// Services
+const nostrmarketAPI = injectService(SERVICE_TOKENS.NOSTRMARKET_API) as NostrmarketAPI
+const toast = useToast()
+
+// Local state
+const isCreating = ref(false)
+const createError = ref<string | null>(null)
+const availableCurrencies = ref<string[]>(['sat'])
+const availableZones = ref<Zone[]>([])
+const countries = ref([
+  'Free (digital)', 'Worldwide', 'Europe', 'Australia', 'Austria', 'Belgium', 'Brazil', 'Canada',
+  'Denmark', 'Finland', 'France', 'Germany', 'Greece', 'Hong Kong', 'Hungary',
+  'Ireland', 'Indonesia', 'Israel', 'Italy', 'Japan', 'Kazakhstan', 'Korea',
+  'Luxembourg', 'Malaysia', 'Mexico', 'Netherlands', 'New Zealand', 'Norway',
+  'Poland', 'Portugal', 'Romania', 'Russia', 'Saudi Arabia', 'Singapore',
+  'Spain', 'Sweden', 'Switzerland', 'Thailand', 'Turkey', 'Ukraine',
+  'United Kingdom', 'United States', 'Vietnam', 'China'
+])
+
+// Form schema
+const formSchema = toTypedSchema(z.object({
+  name: z.string().min(1, "Store name is required").max(100, "Store name must be less than 100 characters"),
+  description: z.string().max(500, "Description must be less than 500 characters"),
+  currency: z.string().min(1, "Currency is required"),
+  selectedZones: z.array(z.string()).min(1, "Select at least one shipping zone"),
+  newZone: z.object({
+    name: z.string().optional(),
+    cost: z.number().min(0, "Cost must be 0 or greater").optional(),
+    selectedCountries: z.array(z.string()).optional()
+  }).optional()
+}))
+
+// Form setup with vee-validate
+const form = useForm({
+  validationSchema: formSchema,
+  initialValues: {
+    name: '',
+    description: '',
+    currency: 'sat',
+    selectedZones: [] as string[],
+    newZone: {
+      name: '',
+      cost: 0,
+      selectedCountries: [] as string[]
+    }
+  }
+})
+
+// Destructure form methods
+const { setFieldValue, resetForm, values, meta } = form
+
+// Form validation computed
+const isFormValid = computed(() => meta.value.valid)
+
+// Form submit handler
+const onSubmit = form.handleSubmit(async (values) => {
+  await createStore(values)
+})
+
+// Methods
+const loadAvailableCurrencies = async () => {
+  try {
+    const currencies = await nostrmarketAPI.getCurrencies()
+    availableCurrencies.value = currencies
+  } catch (error) {
+    console.error('Failed to load currencies:', error)
+  }
+}
+
+const loadAvailableZones = async () => {
+  const currentUser = auth.currentUser?.value
+  if (!currentUser?.wallets?.length) return
+  
+  try {
+    const zones = await nostrmarketAPI.getZones(currentUser.wallets[0].inkey)
+    availableZones.value = zones
+    
+    // Auto-select the first available zone to make form valid
+    const currentSelectedZones = values.selectedZones || []
+    if (zones.length > 0 && Array.isArray(currentSelectedZones) && currentSelectedZones.length === 0) {
+      setFieldValue('selectedZones', [zones[0].id])
+    }
+  } catch (error) {
+    console.error('Failed to load zones:', error)
+  }
+}
+
+const addNewZone = async () => {
+  const currentUser = auth.currentUser?.value
+  if (!currentUser?.wallets?.length) {
+    toast.error('No wallets available')
+    return
+  }
+
+  const newZone = values.newZone
+  
+  if (!newZone?.name || !newZone.selectedCountries?.length || (newZone.cost ?? -1) < 0) {
+    toast.error('Please fill in all zone details')
+    return
+  }
+
+  try {
+    const createdZone = await nostrmarketAPI.createZone(
+      currentUser.wallets[0].adminkey,
+      {
+        name: newZone.name,
+        currency: values.currency,
+        cost: newZone.cost,
+        countries: newZone.selectedCountries
+      }
+    )
+    
+    // Add to available zones and select it
+    availableZones.value.push(createdZone)
+    const currentSelectedZones = values.selectedZones || []
+    setFieldValue('selectedZones', [...currentSelectedZones, createdZone.id])
+    
+    // Reset the new zone form
+    setFieldValue('newZone', {
+      name: '',
+      cost: 0,
+      selectedCountries: []
+    })
+    
+    toast.success(`Zone "${newZone.name}" created successfully`)
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : 'Failed to create zone'
+    toast.error(`Failed to create zone: ${errorMessage}`)
+  }
+}
+
+const createStore = async (formData: any) => {
+  const currentUser = auth.currentUser?.value
+  if (!currentUser?.wallets?.length) {
+    toast.error('No wallets available')
+    return
+  }
+
+  const { name, description, currency, selectedZones } = formData
+
+  isCreating.value = true
+  createError.value = null
+
+  try {
+    // Get the selected zones data
+    const selectedZoneData = availableZones.value.filter(zone => 
+      selectedZones.includes(zone.id)
+    )
+
+    const stallData: CreateStallRequest = {
+      name,
+      wallet: currentUser.wallets[0].id,
+      currency,
+      shipping_zones: selectedZoneData,
+      config: {
+        description: description || ''
+      }
+    }
+
+    const newStall = await nostrmarketAPI.createStall(
+      currentUser.wallets[0].adminkey,
+      stallData
+    )
+
+    // Reset form
+    resetForm()
+    
+    // Close dialog and emit created event
+    emit('created', newStall)
+    emit('close')
+    
+    toast.success('Store created successfully! You can now add products.')
+
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : 'Failed to create store'
+    console.error('Error creating stall:', error)
+    createError.value = errorMessage
+    toast.error(`Failed to create store: ${errorMessage}`)
+  } finally {
+    isCreating.value = false
+  }
+}
+
+// Initialize data when dialog opens
+watch(() => props.isOpen, async (isOpen) => {
+  if (isOpen) {
+    const currentUser = auth.currentUser?.value
+    if (!currentUser?.wallets?.length) {
+      toast.error('No wallets available')
+      return
+    }
+    
+    // Reset form to initial state
+    resetForm({
+      values: {
+        name: '',
+        description: '',
+        currency: 'sat',
+        selectedZones: [],
+        newZone: {
+          name: '',
+          cost: 0,
+          selectedCountries: []
+        }
+      }
+    })
+    
+    // Wait for reactivity
+    await nextTick()
+    
+    // Clear any previous errors
+    createError.value = null
+    
+    // Load currencies and zones
+    await Promise.all([
+      loadAvailableCurrencies(),
+      loadAvailableZones()
+    ])
+  }
+})
+</script>
\ No newline at end of file
diff --git a/src/modules/market/components/MerchantStore.vue b/src/modules/market/components/MerchantStore.vue
index a0acd1a..7640410 100644
--- a/src/modules/market/components/MerchantStore.vue
+++ b/src/modules/market/components/MerchantStore.vue
@@ -73,59 +73,18 @@
       <!-- 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 -->
-        <div v-for="stall in userStalls" :key="stall.id" 
-             class="bg-card rounded-lg border shadow-sm hover:shadow-md transition-shadow">
-          <div class="p-6">
-            <div class="flex items-start justify-between mb-4">
-              <div class="flex-1">
-                <h3 class="text-lg font-semibold text-foreground">{{ stall.name }}</h3>
-                <p class="text-sm text-muted-foreground mt-1">
-                  {{ stall.config?.description || 'No description' }}
-                </p>
-              </div>
-              <Badge variant="secondary">{{ stall.currency }}</Badge>
-            </div>
-            
-            <div class="space-y-3">
-              <!-- Store Metrics -->
-              <div class="flex items-center justify-between text-sm">
-                <span class="text-muted-foreground">Products</span>
-                <span class="font-medium">{{ stall.products?.length || 0 }}</span>
-              </div>
-              <div class="flex items-center justify-between text-sm">
-                <span class="text-muted-foreground">Shipping Zones</span>
-                <span class="font-medium">{{ stall.shipping_zones?.length || 0 }}</span>
-              </div>
-              
-              <!-- Action Buttons -->
-              <div class="flex gap-2 pt-3">
-                <Button 
-                  @click="manageStall(stall.id)" 
-                  variant="default" 
-                  size="sm"
-                  class="flex-1"
-                >
-                  <Settings class="w-4 h-4 mr-1" />
-                  Manage
-                </Button>
-                <Button 
-                  @click="viewStallProducts(stall.id)" 
-                  variant="outline" 
-                  size="sm"
-                  class="flex-1"
-                >
-                  <Package class="w-4 h-4 mr-1" />
-                  Products
-                </Button>
-              </div>
-            </div>
-          </div>
-        </div>
+        <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="initializeStallCreation"
+            @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">
@@ -141,875 +100,256 @@
 
       <!-- Active Store Dashboard (shown when a store is selected) -->
       <div v-if="activeStall">
-      <!-- Header -->
-      <div class="flex items-center justify-between mb-6">
-        <div>
-          <div class="flex items-center gap-3 mb-2">
-            <Button @click="activeStallId = null" variant="ghost" size="sm">
-              ← Back to Stores
+        <!-- Header -->
+        <div class="flex items-center justify-between mb-6">
+          <div>
+            <div class="flex items-center gap-3 mb-2">
+              <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>
+            <h2 class="text-2xl font-bold text-foreground">{{ activeStall.name }}</h2>
+            <p class="text-muted-foreground mt-1">{{ activeStall.config?.description || 'Manage incoming orders and your products' }}</p>
+          </div>
+          <div class="flex items-center gap-3">
+            <Button @click="navigateToMarket" variant="outline">
+              <Store class="w-4 h-4 mr-2" />
+              Browse Market
+            </Button>
+            <Button @click="showCreateProductDialog = true" variant="default">
+              <Plus class="w-4 h-4 mr-2" />
+              Add Product
             </Button>
-            <div class="h-4 w-px bg-border"></div>
-            <Badge variant="secondary">{{ activeStall.currency }}</Badge>
-          </div>
-          <h2 class="text-2xl font-bold text-foreground">{{ activeStall.name }}</h2>
-          <p class="text-muted-foreground mt-1">{{ activeStall.config?.description || 'Manage incoming orders and your products' }}</p>
-        </div>
-        <div class="flex items-center gap-3">
-          <Button @click="navigateToMarket" variant="outline">
-            <Store class="w-4 h-4 mr-2" />
-            Browse Market
-          </Button>
-          <Button @click="addProduct" variant="default">
-            <Plus class="w-4 h-4 mr-2" />
-            Add Product
-          </Button>
-        </div>
-      </div>
-
-    <!-- Store Stats -->
-    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
-      <!-- Incoming Orders -->
-      <div class="bg-card p-6 rounded-lg border shadow-sm">
-        <div class="flex items-center justify-between">
-          <div>
-            <p class="text-sm font-medium text-muted-foreground">Incoming Orders</p>
-            <p class="text-2xl font-bold text-foreground">{{ storeStats.incomingOrders }}</p>
-          </div>
-          <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
-            <Package class="w-6 h-6 text-primary" />
           </div>
         </div>
-        <div class="mt-4">
-          <div class="flex items-center text-sm text-muted-foreground">
-            <span>{{ storeStats.pendingOrders }} pending</span>
-            <span class="mx-2">•</span>
-            <span>{{ storeStats.paidOrders }} paid</span>
-          </div>
-        </div>
-      </div>
-
-      <!-- Total Sales -->
-      <div class="bg-card p-6 rounded-lg border shadow-sm">
-        <div class="flex items-center justify-between">
-          <div>
-            <p class="text-sm font-medium text-muted-foreground">Total Sales</p>
-            <p class="text-2xl font-bold text-foreground">{{ formatPrice(storeStats.totalSales, 'sat') }}</p>
-          </div>
-          <div class="w-12 h-12 bg-green-500/10 rounded-lg flex items-center justify-center">
-            <DollarSign class="w-6 h-6 text-green-500" />
-          </div>
-        </div>
-        <div class="mt-4">
-          <div class="flex items-center text-sm text-muted-foreground">
-            <span>Last 30 days</span>
-          </div>
-        </div>
-      </div>
-
-      <!-- Products -->
-      <div class="bg-card p-6 rounded-lg border shadow-sm">
-        <div class="flex items-center justify-between">
-          <div>
-            <p class="text-sm font-medium text-muted-foreground">Products</p>
-            <p class="text-2xl font-bold text-foreground">{{ storeStats.totalProducts }}</p>
-          </div>
-          <div class="w-12 h-12 bg-purple-500/10 rounded-lg flex items-center justify-center">
-            <Store class="w-6 h-6 text-purple-500" />
-          </div>
-        </div>
-        <div class="mt-4">
-          <div class="flex items-center text-sm text-muted-foreground">
-            <span>{{ storeStats.activeProducts }} active</span>
-          </div>
-        </div>
-      </div>
-
-      <!-- Customer Satisfaction -->
-      <div class="bg-card p-6 rounded-lg border shadow-sm">
-        <div class="flex items-center justify-between">
-          <div>
-            <p class="text-sm font-medium text-muted-foreground">Satisfaction</p>
-            <p class="text-2xl font-bold text-foreground">{{ storeStats.satisfaction }}%</p>
-          </div>
-          <div class="w-12 h-12 bg-yellow-500/10 rounded-lg flex items-center justify-center">
-            <Star class="w-6 h-6 text-yellow-500" />
-          </div>
-        </div>
-        <div class="mt-4">
-          <div class="flex items-center text-sm text-muted-foreground">
-            <span>{{ storeStats.totalReviews }} reviews</span>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Incoming Orders Section -->
-    <div class="bg-card rounded-lg border shadow-sm">
-      <div class="p-6 border-b border-border">
-        <h3 class="text-lg font-semibold text-foreground">Incoming Orders</h3>
-        <p class="text-sm text-muted-foreground mt-1">Orders waiting for your attention</p>
-      </div>
-      
-      <div v-if="incomingOrders.length > 0" class="divide-y divide-border">
-        <div
-          v-for="order in incomingOrders"
-          :key="order.id"
-          class="p-6 hover:bg-muted/50 transition-colors"
-        >
-          <!-- Order Header -->
-          <div class="flex items-center justify-between mb-4">
-            <div class="flex items-center gap-3">
-              <div class="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center">
-                <Package class="w-5 h-5 text-primary" />
-              </div>
-              <div>
-                <h4 class="font-semibold text-foreground">Order #{{ order.id.slice(-8) }}</h4>
-                <p class="text-sm text-muted-foreground">
-                  {{ formatDate(order.createdAt) }} • {{ formatPrice(order.total, order.currency) }}
-                </p>
-                <div class="flex items-center gap-2 mt-1">
-                  <Badge :variant="getStatusVariant(order.status)">
-                    {{ formatStatus(order.status) }}
-                  </Badge>
-                  <Badge v-if="order.paymentStatus === 'pending'" variant="secondary">
-                    Payment Pending
-                  </Badge>
-                </div>
-              </div>
-            </div>
-            
-            <div class="flex items-center gap-2">
-              <!-- Wallet Indicator -->
-              <div v-if="order.status === 'pending' && !order.lightningInvoice" class="text-xs text-muted-foreground mr-2">
-                <span>Wallet: {{ getFirstWalletName() }}</span>
-              </div>
-              
-              <Button
-                v-if="order.status === 'pending' && !order.lightningInvoice"
-                @click="generateInvoice(order.id)"
-                :disabled="isGeneratingInvoice === order.id"
-                size="sm"
-                variant="default"
-              >
-                <div v-if="isGeneratingInvoice === order.id" class="flex items-center space-x-2">
-                  <div class="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
-                  <span>Generating...</span>
-                </div>
-                <div v-else class="flex items-center space-x-2">
-                  <Zap class="w-4 h-4" />
-                  <span>Generate Invoice</span>
-                </div>
-              </Button>
-              <Button
-                v-if="order.lightningInvoice"
-                @click="viewOrderDetails(order.id)"
-                size="sm"
-                variant="outline"
-              >
-                <Eye class="w-4 h-4 mr-2" />
-                View Details
-              </Button>
-              <Button
-                @click="processOrder(order.id)"
-                size="sm"
-                variant="outline"
-              >
-                <Check class="w-4 h-4 mr-2" />
-                Process
-              </Button>
-            </div>
-          </div>
-
-          <!-- Order Items -->
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
-            <div>
-              <h5 class="font-medium text-foreground mb-2">Items</h5>
-              <div class="space-y-1">
-                <div
-                  v-for="item in order.items"
-                  :key="item.productId"
-                  class="text-sm text-muted-foreground"
-                >
-                  {{ item.productName }} × {{ item.quantity }}
-                </div>
-              </div>
-            </div>
-            
-            <div>
-              <h5 class="font-medium text-foreground mb-2">Customer Info</h5>
-              <div class="space-y-1 text-sm text-muted-foreground">
-                <p v-if="order.contactInfo.email">
-                  <span class="font-medium">Email:</span> {{ order.contactInfo.email }}
-                </p>
-                <p v-if="order.contactInfo.message">
-                  <span class="font-medium">Message:</span> {{ order.contactInfo.message }}
-                </p>
-                <p v-if="order.contactInfo.address">
-                  <span class="font-medium">Address:</span> {{ order.contactInfo.address }}
-                </p>
-              </div>
-            </div>
-          </div>
-
-          <!-- Payment Status -->
-          <div v-if="order.lightningInvoice" class="p-4 bg-green-500/10 border border-green-200 rounded-lg">
-            <div class="flex items-center justify-between">
-              <div class="flex items-center gap-2">
-                <CheckCircle class="w-5 h-5 text-green-600" />
-                <span class="text-sm font-medium text-green-900">Lightning Invoice Generated</span>
-              </div>
-              <div class="text-sm text-green-700">
-                Amount: {{ formatPrice(order.total, order.currency) }}
-              </div>
-            </div>
-          </div>
-          <div v-else class="p-4 bg-yellow-500/10 border border-yellow-200 rounded-lg">
-            <div class="flex items-center gap-2">
-              <AlertCircle class="w-5 h-5 text-yellow-600" />
-              <span class="text-sm font-medium text-yellow-900">Invoice Required</span>
-            </div>
-          </div>
-        </div>
-      </div>
-      
-      <div v-else class="p-6 text-center text-muted-foreground">
-        <Package class="w-12 h-12 mx-auto mb-3 text-muted-foreground/50" />
-        <p>No incoming orders</p>
-        <p class="text-sm">Orders from customers will appear here</p>
-      </div>
-    </div>
-
-    <!-- Quick Actions -->
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-      <!-- Order Management -->
-      <div class="bg-card p-6 rounded-lg border shadow-sm">
-        <h3 class="text-lg font-semibold text-foreground mb-4">Order Management</h3>
-        <div class="space-y-3">
-          <Button 
-            @click="viewAllOrders" 
-            variant="default" 
-            class="w-full justify-start"
-          >
-            <Package class="w-4 h-4 mr-2" />
-            View All Orders
-          </Button>
-          <Button 
-            @click="generateBulkInvoices" 
-            variant="outline" 
-            class="w-full justify-start"
-          >
-            <Zap class="w-4 h-4 mr-2" />
-            Generate Bulk Invoices
-          </Button>
-          <Button 
-            @click="exportOrders" 
-            variant="outline" 
-            class="w-full justify-start"
-          >
-            <Download class="w-4 h-4 mr-2" />
-            Export Orders
-          </Button>
-        </div>
-      </div>
-
-      <!-- Store Management -->
-      <div class="bg-card p-6 rounded-lg border shadow-sm">
-        <h3 class="text-lg font-semibold text-foreground mb-4">Store Management</h3>
-        <div class="space-y-3">
-          <Button 
-            @click="manageProducts" 
-            variant="default" 
-            class="w-full justify-start"
-          >
-            <Store class="w-4 h-4 mr-2" />
-            Manage Products
-          </Button>
-          <Button 
-            @click="storeSettings" 
-            variant="outline" 
-            class="w-full justify-start"
-          >
-            <Settings class="w-4 h-4 mr-2" />
-            Store Settings
-          </Button>
-          <Button 
-            @click="analytics" 
-            variant="outline" 
-            class="w-full justify-start"
-          >
-            <BarChart3 class="w-4 h-4 mr-2" />
-            View Analytics
-          </Button>
-        </div>
-      </div>
-    </div>
-
-    <!-- Products Section -->
-    <div class="mt-8">
-      <div class="flex items-center justify-between mb-6">
-        <h3 class="text-xl font-semibold text-foreground">Products</h3>
-        <Button @click="addProduct" variant="default" size="sm">
-          <Plus class="w-4 h-4 mr-2" />
-          Add Product
-        </Button>
-      </div>
-
-      <!-- Loading Products -->
-      <div v-if="isLoadingProducts" class="flex items-center justify-center py-12">
-        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
-        <span class="ml-2 text-muted-foreground">Loading products...</span>
-      </div>
-
-      <!-- No Products -->
-      <div v-else-if="stallProducts.length === 0" class="text-center py-12">
-        <div class="w-16 h-16 mx-auto mb-4 bg-muted/50 rounded-full flex items-center justify-center">
-          <Package class="w-8 h-8 text-muted-foreground" />
-        </div>
-        <h4 class="text-lg font-medium text-foreground mb-2">No Products Yet</h4>
-        <p class="text-muted-foreground mb-6">Start selling by adding your first product</p>
-        <Button @click="addProduct" variant="default">
-          <Plus class="w-4 h-4 mr-2" />
-          Add Your First Product
-        </Button>
-      </div>
-
-      <!-- Products Grid -->
-      <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        <div
-          v-for="product in stallProducts"
-          :key="product.id"
-          class="bg-card p-6 rounded-lg border shadow-sm hover:shadow-md transition-shadow"
-        >
-          <!-- Product Image -->
-          <div class="aspect-square mb-4 bg-muted rounded-lg flex items-center justify-center">
-            <img
-              v-if="product.images?.[0]"
-              :src="product.images[0]"
-              :alt="product.name"
-              class="w-full h-full object-cover rounded-lg"
-            />
-            <Package v-else class="w-12 h-12 text-muted-foreground" />
-          </div>
-
-          <!-- Product Info -->
-          <div class="space-y-3">
-            <div>
-              <h4 class="font-semibold text-foreground">{{ product.name }}</h4>
-              <p v-if="product.config.description" class="text-sm text-muted-foreground mt-1">
-                {{ product.config.description }}
-              </p>
-            </div>
 
+        <!-- Store Stats -->
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
+          <!-- Incoming Orders -->
+          <div class="bg-card p-6 rounded-lg border shadow-sm">
             <div class="flex items-center justify-between">
               <div>
-                <span class="text-lg font-bold text-foreground">
-                  {{ product.price }} {{ product.config.currency || activeStall?.currency || 'sat' }}
-                </span>
-                <div class="text-sm text-muted-foreground">
-                  Qty: {{ product.quantity }}
-                </div>
+                <p class="text-sm font-medium text-muted-foreground">Incoming Orders</p>
+                <p class="text-2xl font-bold text-foreground">{{ storeStats.incomingOrders }}</p>
               </div>
-              <div class="flex items-center gap-2">
-                <Badge :variant="product.active ? 'default' : 'secondary'">
-                  {{ product.active ? 'Active' : 'Inactive' }}
-                </Badge>
+              <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
+                <Package class="w-6 h-6 text-primary" />
               </div>
             </div>
-
-            <!-- Product Categories -->
-            <div v-if="product.categories?.length" class="flex flex-wrap gap-1">
-              <Badge
-                v-for="category in product.categories"
-                :key="category"
-                variant="outline"
-                class="text-xs"
-              >
-                {{ category }}
-              </Badge>
+            <div class="mt-4">
+              <div class="flex items-center text-sm text-muted-foreground">
+                <span>{{ storeStats.pendingOrders }} pending</span>
+                <span class="mx-2">•</span>
+                <span>{{ storeStats.paidOrders }} paid</span>
+              </div>
             </div>
+          </div>
 
-            <!-- Product Actions -->
-            <div class="flex justify-end pt-2 border-t">
-              <Button variant="ghost" size="sm">
-                Edit
-              </Button>
+          <!-- Total Sales -->
+          <div class="bg-card p-6 rounded-lg border shadow-sm">
+            <div class="flex items-center justify-between">
+              <div>
+                <p class="text-sm font-medium text-muted-foreground">Total Sales</p>
+                <p class="text-2xl font-bold text-foreground">{{ formatPrice(storeStats.totalSales, 'sat') }}</p>
+              </div>
+              <div class="w-12 h-12 bg-green-500/10 rounded-lg flex items-center justify-center">
+                <DollarSign class="w-6 h-6 text-green-500" />
+              </div>
+            </div>
+            <div class="mt-4">
+              <div class="flex items-center text-sm text-muted-foreground">
+                <span>Last 30 days</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Products -->
+          <div class="bg-card p-6 rounded-lg border shadow-sm">
+            <div class="flex items-center justify-between">
+              <div>
+                <p class="text-sm font-medium text-muted-foreground">Products</p>
+                <p class="text-2xl font-bold text-foreground">{{ stallProducts.length }}</p>
+              </div>
+              <div class="w-12 h-12 bg-purple-500/10 rounded-lg flex items-center justify-center">
+                <Store class="w-6 h-6 text-purple-500" />
+              </div>
+            </div>
+            <div class="mt-4">
+              <div class="flex items-center text-sm text-muted-foreground">
+                <span>{{ stallProducts.filter(p => p.active).length }} active</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Customer Satisfaction -->
+          <div class="bg-card p-6 rounded-lg border shadow-sm">
+            <div class="flex items-center justify-between">
+              <div>
+                <p class="text-sm font-medium text-muted-foreground">Satisfaction</p>
+                <p class="text-2xl font-bold text-foreground">{{ storeStats.satisfaction }}%</p>
+              </div>
+              <div class="w-12 h-12 bg-yellow-500/10 rounded-lg flex items-center justify-center">
+                <Star class="w-6 h-6 text-yellow-500" />
+              </div>
+            </div>
+            <div class="mt-4">
+              <div class="flex items-center text-sm text-muted-foreground">
+                <span>{{ storeStats.totalReviews }} reviews</span>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-    </div>
 
-    </div> <!-- End of Active Store Dashboard -->
-    </div> <!-- End of Stores Grid section -->
+        <!-- Products Section -->
+        <div class="mt-8">
+          <div class="flex items-center justify-between mb-6">
+            <h3 class="text-xl font-semibold text-foreground">Products</h3>
+            <Button @click="showCreateProductDialog = true" variant="default" size="sm">
+              <Plus class="w-4 h-4 mr-2" />
+              Add Product
+            </Button>
+          </div>
 
-  </div> <!-- End of main container -->
+          <!-- Loading Products -->
+          <div v-if="isLoadingProducts" class="flex items-center justify-center py-12">
+            <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+            <span class="ml-2 text-muted-foreground">Loading products...</span>
+          </div>
 
-  <!-- Create Stall Dialog -->
-  <Dialog v-model:open="showStallDialog">
-    <DialogContent class="sm:max-w-2xl">
-      <DialogHeader>
-        <DialogTitle>Create New Store</DialogTitle>
-      </DialogHeader>
-      
-      <form @submit="onSubmit" class="space-y-6 py-4" autocomplete="off">
-        <!-- Basic Store Info -->
-        <div class="space-y-4">
-          <FormField v-slot="{ componentField }" name="name">
-            <FormItem>
-              <FormLabel>Store Name *</FormLabel>
-              <FormControl>
-                <Input 
-                  placeholder="Enter your store name"
-                  :disabled="isCreatingStall"
-                  v-bind="componentField"
-                  autocomplete="off"
-                  spellcheck="false"
-                />
-              </FormControl>
-              <FormDescription>
-                Choose a unique name for your store
-              </FormDescription>
-              <FormMessage />
-            </FormItem>
-          </FormField>
-          
-          <FormField v-slot="{ componentField }" name="description">
-            <FormItem>
-              <FormLabel>Description</FormLabel>
-              <FormControl>
-                <Textarea
-                  placeholder="Describe your store and products"
-                  :disabled="isCreatingStall"
-                  v-bind="componentField"
-                  autocomplete="off"
-                  spellcheck="false"
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          </FormField>
-
-          <FormField v-slot="{ componentField }" name="currency">
-            <FormItem>
-              <FormLabel>Currency *</FormLabel>
-              <Select :disabled="isCreatingStall" v-bind="componentField">
-                <FormControl>
-                  <SelectTrigger>
-                    <SelectValue placeholder="Select currency" />
-                  </SelectTrigger>
-                </FormControl>
-                <SelectContent>
-                  <SelectItem v-for="currency in availableCurrencies" :key="currency" :value="currency">
-                    {{ currency }}
-                  </SelectItem>
-                </SelectContent>
-              </Select>
-              <FormMessage />
-            </FormItem>
-          </FormField>
-        </div>
-
-        <!-- Shipping Zones Section -->
-        <FormField name="selectedZones">
-          <FormItem>
-            <div class="mb-4">
-              <FormLabel class="text-base">Shipping Zones *</FormLabel>
-              <FormDescription>
-                Select existing zones or create new ones for your store
-              </FormDescription>
+          <!-- No Products -->
+          <div v-else-if="stallProducts.length === 0" class="text-center py-12">
+            <div class="w-16 h-16 mx-auto mb-4 bg-muted/50 rounded-full flex items-center justify-center">
+              <Package class="w-8 h-8 text-muted-foreground" />
             </div>
+            <h4 class="text-lg font-medium text-foreground mb-2">No Products Yet</h4>
+            <p class="text-muted-foreground mb-6">Start selling by adding your first product</p>
+            <Button @click="showCreateProductDialog = true" variant="default">
+              <Plus class="w-4 h-4 mr-2" />
+              Add Your First Product
+            </Button>
+          </div>
 
-            <!-- Existing Zones -->
-            <div v-if="availableZones.length > 0" class="space-y-3">
-              <FormLabel class="text-sm font-medium">Available Zones:</FormLabel>
-              <div class="space-y-2 max-h-32 overflow-y-auto">
-                <FormField
-                  v-for="zone in availableZones"
-                  :key="zone.id"
-                  v-slot="{ value, handleChange }"
-                  type="checkbox"
-                  :value="zone.id"
-                  :unchecked-value="false"
-                  name="selectedZones"
-                >
-                  <FormItem class="flex flex-row items-start space-x-3 space-y-0">
-                    <FormControl>
-                      <Checkbox
-                        :model-value="value.includes(zone.id)"
-                        @update:model-value="handleChange"
-                        :disabled="isCreatingStall"
-                      />
-                    </FormControl>
-                    <FormLabel class="text-sm cursor-pointer font-normal">
-                      {{ zone.name }} - {{ zone.cost }} {{ zone.currency }}
-                      <span class="text-muted-foreground ml-1">({{ zone.countries.slice(0, 2).join(', ') }}{{ zone.countries.length > 2 ? '...' : '' }})</span>
-                    </FormLabel>
-                  </FormItem>
-                </FormField>
+          <!-- Products Grid -->
+          <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div
+              v-for="product in stallProducts"
+              :key="product.id"
+              class="bg-card p-6 rounded-lg border shadow-sm hover:shadow-md transition-shadow"
+            >
+              <!-- Product Image -->
+              <div class="aspect-square mb-4 bg-muted rounded-lg flex items-center justify-center">
+                <img
+                  v-if="product.images?.[0]"
+                  :src="product.images[0]"
+                  :alt="product.name"
+                  class="w-full h-full object-cover rounded-lg"
+                />
+                <Package v-else class="w-12 h-12 text-muted-foreground" />
               </div>
-            </div>
-            <FormMessage />
-          </FormItem>
-        </FormField>
 
-        <!-- Create New Zone -->
-        <div class="border-t pt-4">
-          <Label class="text-sm font-medium">Create New Zone:</Label>
-          <div class="space-y-3 mt-2">
-            <FormField v-slot="{ componentField }" name="newZone.name">
-              <FormItem>
-                <FormLabel>Zone Name</FormLabel>
-                <FormControl>
-                  <Input 
-                    placeholder="e.g., Europe, Worldwide"
-                    :disabled="isCreatingStall"
-                    v-bind="componentField"
-                    :key="`zone-name-${formKey}`"
-                    autocomplete="off"
-                    spellcheck="false"
-                  />
-                </FormControl>
-              </FormItem>
-            </FormField>
-            
-            <FormField v-slot="{ componentField }" name="newZone.cost">
-              <FormItem>
-                <FormLabel>Shipping Cost</FormLabel>
-                <FormControl>
-                  <Input 
-                    type="number"
-                    min="0"
-                    :placeholder="`Cost in ${getFieldValue('currency') || 'sat'}`"
-                    :disabled="isCreatingStall"
-                    :key="`zone-cost-${formKey}`"
-                    v-bind="componentField"
-                  />
-                </FormControl>
-              </FormItem>
-            </FormField>
+              <!-- Product Info -->
+              <div class="space-y-3">
+                <div>
+                  <h4 class="font-semibold text-foreground">{{ product.name }}</h4>
+                  <p v-if="product.config.description" class="text-sm text-muted-foreground mt-1">
+                    {{ product.config.description }}
+                  </p>
+                </div>
 
-            <FormField v-slot="{ componentField }" name="newZone.selectedCountries">
-              <FormItem>
-                <FormLabel>Countries/Regions</FormLabel>
-                <FormControl>
-                  <Select multiple :disabled="isCreatingStall" v-bind="componentField">
-                    <SelectTrigger>
-                      <SelectValue placeholder="Select countries/regions" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem v-for="country in countries" :key="country" :value="country">
-                        {{ country }}
-                      </SelectItem>
-                    </SelectContent>
-                  </Select>
-                </FormControl>
-                <div v-if="getFieldValue('newZone')?.selectedCountries?.length > 0" class="mt-2">
-                  <div class="flex flex-wrap gap-1">
-                    <Badge 
-                      v-for="country in getFieldValue('newZone').selectedCountries" 
-                      :key="country"
-                      variant="secondary"
-                      class="text-xs"
-                    >
-                      {{ country }}
+                <div class="flex items-center justify-between">
+                  <div>
+                    <span class="text-lg font-bold text-foreground">
+                      {{ product.price }} {{ product.config.currency || activeStall?.currency || 'sat' }}
+                    </span>
+                    <div class="text-sm text-muted-foreground">
+                      Qty: {{ product.quantity }}
+                    </div>
+                  </div>
+                  <div class="flex items-center gap-2">
+                    <Badge :variant="product.active ? 'default' : 'secondary'">
+                      {{ product.active ? 'Active' : 'Inactive' }}
                     </Badge>
                   </div>
                 </div>
-              </FormItem>
-            </FormField>
 
-            <Button 
-              @click="addNewZone"
-              type="button"
-              variant="outline"
-              size="sm"
-              :disabled="isCreatingStall || !getFieldValue('newZone')?.name || !getFieldValue('newZone')?.selectedCountries?.length"
-            >
-              <Plus class="w-4 h-4 mr-2" />
-              Add Zone
-            </Button>
+                <!-- Product Categories -->
+                <div v-if="product.categories?.length" class="flex flex-wrap gap-1">
+                  <Badge
+                    v-for="category in product.categories"
+                    :key="category"
+                    variant="outline"
+                    class="text-xs"
+                  >
+                    {{ category }}
+                  </Badge>
+                </div>
+
+                <!-- Product Actions -->
+                <div class="flex justify-end pt-2 border-t">
+                  <Button variant="ghost" size="sm">
+                    Edit
+                  </Button>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
+      </div>
+    </div>
+  </div>
 
-        <!-- Error Display -->
-        <div v-if="stallCreateError" class="text-sm text-destructive">
-          {{ stallCreateError }}
-        </div>
-
-        <div class="flex justify-end space-x-2 pt-4">
-          <Button 
-            type="button"
-            @click="closeStallDialog" 
-            variant="outline"
-            :disabled="isCreatingStall"
-          >
-            Cancel
-          </Button>
-          <Button 
-            type="submit"
-            :disabled="isCreatingStall || !isFormValid"
-          >
-            <span v-if="isCreatingStall">Creating...</span>
-            <span v-else>Create Store</span>
-          </Button>
-        </div>
-      </form>
-    </DialogContent>
-  </Dialog>
+  <!-- Create Store Dialog -->
+  <CreateStoreDialog 
+    :is-open="showCreateStoreDialog"
+    @close="showCreateStoreDialog = false"
+    @created="onStoreCreated"
+  />
 
   <!-- Create Product Dialog -->
-  <Dialog v-model:open="showProductDialog">
-    <DialogContent class="sm:max-w-3xl max-h-[90vh] overflow-y-auto">
-      <DialogHeader>
-        <DialogTitle>Add New Product to {{ activeStall?.name }}</DialogTitle>
-      </DialogHeader>
-      
-      <form @submit="onProductSubmit" class="space-y-6 py-4" autocomplete="off">
-        <!-- Basic Product Info -->
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <!-- Product Name -->
-          <FormField v-slot="{ componentField }" name="name">
-            <FormItem>
-              <FormLabel>Product Name *</FormLabel>
-              <FormControl>
-                <Input 
-                  placeholder="Enter product name"
-                  :disabled="isCreatingProduct"
-                  v-bind="componentField"
-                />
-              </FormControl>
-              <FormDescription>Choose a clear, descriptive name</FormDescription>
-              <FormMessage />
-            </FormItem>
-          </FormField>
-
-          <!-- Price -->
-          <FormField v-slot="{ componentField }" name="price">
-            <FormItem>
-              <FormLabel>Price * ({{ activeStall?.currency || 'sat' }})</FormLabel>
-              <FormControl>
-                <Input 
-                  type="number"
-                  step="0.01"
-                  min="0.01"
-                  placeholder="0.00"
-                  :disabled="isCreatingProduct"
-                  v-bind="componentField"
-                />
-              </FormControl>
-              <FormDescription>Price in {{ activeStall?.currency || 'sat' }}</FormDescription>
-              <FormMessage />
-            </FormItem>
-          </FormField>
-        </div>
-
-        <!-- Description -->
-        <FormField v-slot="{ componentField }" name="description">
-          <FormItem>
-            <FormLabel>Description</FormLabel>
-            <FormControl>
-              <Textarea
-                placeholder="Describe your product, its features, and benefits"
-                :disabled="isCreatingProduct"
-                v-bind="componentField"
-                rows="4"
-              />
-            </FormControl>
-            <FormDescription>Detailed description to help customers understand your product</FormDescription>
-            <FormMessage />
-          </FormItem>
-        </FormField>
-
-        <!-- Quantity and Active Status -->
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <!-- Quantity -->
-          <FormField v-slot="{ componentField }" name="quantity">
-            <FormItem>
-              <FormLabel>Quantity *</FormLabel>
-              <FormControl>
-                <Input 
-                  type="number"
-                  min="0"
-                  placeholder="1"
-                  :disabled="isCreatingProduct"
-                  v-bind="componentField"
-                />
-              </FormControl>
-              <FormDescription>Available quantity (0 = unlimited)</FormDescription>
-              <FormMessage />
-            </FormItem>
-          </FormField>
-
-          <!-- Active Status -->
-          <FormField v-slot="{ value, handleChange }" name="active">
-            <FormItem>
-              <div class="space-y-3">
-                <FormLabel>Product Status</FormLabel>
-                <FormControl>
-                  <div class="flex items-center space-x-2">
-                    <Checkbox
-                      :checked="value"
-                      @update:checked="handleChange"
-                      :disabled="isCreatingProduct"
-                    />
-                    <Label>Product is active and visible</Label>
-                  </div>
-                </FormControl>
-                <FormDescription>Inactive products won't be shown to customers</FormDescription>
-                <FormMessage />
-              </div>
-            </FormItem>
-          </FormField>
-        </div>
-
-        <!-- Categories -->
-        <FormField name="categories">
-          <FormItem>
-            <FormLabel>Categories</FormLabel>
-            <FormDescription>Add categories to help customers find your product</FormDescription>
-            <div class="text-center py-8 border-2 border-dashed rounded-lg">
-              <Package class="w-8 h-8 mx-auto mb-2 text-muted-foreground" />
-              <p class="text-sm text-muted-foreground">Category management coming soon</p>
-            </div>
-            <FormMessage />
-          </FormItem>
-        </FormField>
-
-        <!-- Images -->
-        <FormField name="images">
-          <FormItem>
-            <FormLabel>Product Images</FormLabel>
-            <FormDescription>Add images to showcase your product</FormDescription>
-            <div class="text-center py-8 border-2 border-dashed rounded-lg">
-              <Package class="w-8 h-8 mx-auto mb-2 text-muted-foreground" />
-              <p class="text-sm text-muted-foreground">Image upload coming soon</p>
-            </div>
-            <FormMessage />
-          </FormItem>
-        </FormField>
-
-        <!-- Auto-reply Settings -->
-        <div class="border-t pt-6">
-          <FormField v-slot="{ value, handleChange }" name="use_autoreply">
-            <FormItem>
-              <div class="flex items-center space-x-2">
-                <FormControl>
-                  <Checkbox
-                    :checked="value"
-                    @update:checked="handleChange"
-                    :disabled="isCreatingProduct"
-                  />
-                </FormControl>
-                <FormLabel>Enable auto-reply to customer messages</FormLabel>
-              </div>
-              <FormDescription>Automatically respond to customer inquiries about this product</FormDescription>
-              <FormMessage />
-            </FormItem>
-          </FormField>
-
-          <FormField v-slot="{ componentField }" name="autoreply_message">
-            <FormItem class="mt-4">
-              <FormLabel>Auto-reply Message</FormLabel>
-              <FormControl>
-                <Textarea
-                  placeholder="Thank you for your interest! I'll get back to you soon..."
-                  :disabled="isCreatingProduct"
-                  v-bind="componentField"
-                  rows="3"
-                />
-              </FormControl>
-              <FormDescription>Message sent automatically when customers inquire about this product</FormDescription>
-              <FormMessage />
-            </FormItem>
-          </FormField>
-        </div>
-
-        <!-- Error Display -->
-        <div v-if="productCreateError" class="text-sm text-destructive">
-          {{ productCreateError }}
-        </div>
-
-        <div class="flex justify-end space-x-2 pt-4">
-          <Button 
-            type="button"
-            @click="showProductDialog = false" 
-            variant="outline"
-            :disabled="isCreatingProduct"
-          >
-            Cancel
-          </Button>
-          <Button 
-            type="submit"
-            :disabled="isCreatingProduct || !isProductFormValid"
-          >
-            <span v-if="isCreatingProduct">Creating...</span>
-            <span v-else>Create Product</span>
-          </Button>
-        </div>
-      </form>
-    </DialogContent>
-  </Dialog>
+  <CreateProductDialog 
+    :is-open="showCreateProductDialog"
+    :stall="activeStall"
+    @close="showCreateProductDialog = false"
+    @created="onProductCreated"
+  />
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, watch, nextTick } from 'vue'
+import { ref, computed, onMounted, watch } from 'vue'
 import { useRouter } from 'vue-router'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
 import { useMarketStore } from '@/modules/market/stores/market'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { Textarea } from '@/components/ui/textarea'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-import { Checkbox } from '@/components/ui/checkbox'
-import {
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form'
 import { 
   Package, 
   Store, 
   DollarSign, 
   Star, 
   Plus, 
-  Zap, 
-  Eye, 
-  Check, 
   AlertCircle,
-  CheckCircle,
-  Download,
-  Settings,
-  BarChart3,
   User
 } from 'lucide-vue-next'
 import type { OrderStatus } from '@/modules/market/stores/market'
-import type { NostrmarketService } from '../services/nostrmarketService'
-import type { NostrmarketAPI, Merchant, Zone, Stall, CreateStallRequest, Product, CreateProductRequest } from '../services/nostrmarketAPI'
+import type { NostrmarketAPI, Merchant, Stall, Product } from '../services/nostrmarketAPI'
 import { auth } from '@/composables/useAuthService'
 import { useToast } from '@/core/composables/useToast'
 import { injectService, SERVICE_TOKENS } from '@/core/di-container'
+import CreateStoreDialog from './CreateStoreDialog.vue'
+import CreateProductDialog from './CreateProductDialog.vue'
+import StoreCard from './StoreCard.vue'
 
 const router = useRouter()
 const marketStore = useMarketStore()
-const nostrmarketService = injectService(SERVICE_TOKENS.NOSTRMARKET_SERVICE) as NostrmarketService
 const nostrmarketAPI = injectService(SERVICE_TOKENS.NOSTRMARKET_API) as NostrmarketAPI
 const toast = useToast()
 
 // Local state
-const isGeneratingInvoice = ref<string | null>(null)
 const merchantProfile = ref<Merchant | null>(null)
 const isLoadingMerchant = ref(false)
 const merchantCheckError = ref<string | null>(null)
 const isCreatingMerchant = ref(false)
-const merchantCreateError = ref<string | null>(null)
 
 // Multiple stalls state management
 const userStalls = ref<Stall[]>([])
@@ -1019,131 +359,16 @@ const activeStall = computed(() =>
   userStalls.value.find(stall => stall.id === activeStallId.value)
 )
 
-// Stall creation state
-const isCreatingStall = ref(false)
-const stallCreateError = ref<string | null>(null)
-const formKey = ref(0) // Force re-render of form
-const showStallDialog = ref(false)
-const dialogKey = ref(0) // Force complete dialog re-render
-const availableCurrencies = ref<string[]>(['sat'])
-const availableZones = ref<Zone[]>([])
-const countries = ref([
-  'Free (digital)', 'Worldwide', 'Europe', 'Australia', 'Austria', 'Belgium', 'Brazil', 'Canada',
-  'Denmark', 'Finland', 'France', 'Germany', 'Greece', 'Hong Kong', 'Hungary',
-  'Ireland', 'Indonesia', 'Israel', 'Italy', 'Japan', 'Kazakhstan', 'Korea',
-  'Luxembourg', 'Malaysia', 'Mexico', 'Netherlands', 'New Zealand', 'Norway',
-  'Poland', 'Portugal', 'Romania', 'Russia', 'Saudi Arabia', 'Singapore',
-  'Spain', 'Sweden', 'Switzerland', 'Thailand', 'Turkey', 'Ukraine',
-  'United Kingdom', 'United States', 'Vietnam', 'China'
-])
-
 // Product management state
 const stallProducts = ref<Product[]>([])
 const isLoadingProducts = ref(false)
-const showProductDialog = ref(false)
-const isCreatingProduct = ref(false)
-const productCreateError = ref<string | null>(null)
 
-// Stall form schema
-const stallFormSchema = toTypedSchema(z.object({
-  name: z.string().min(1, "Store name is required").max(100, "Store name must be less than 100 characters"),
-  description: z.string().max(500, "Description must be less than 500 characters"),
-  currency: z.string().min(1, "Currency is required"),
-  wallet: z.string().optional(),
-  selectedZones: z.array(z.string()).min(1, "Select at least one shipping zone"),
-  newZone: z.object({
-    name: z.string().optional(),
-    cost: z.number().min(0, "Cost must be 0 or greater").optional(),
-    selectedCountries: z.array(z.string()).optional()
-  }).optional()
-}))
-
-// Product form schema
-const productFormSchema = toTypedSchema(z.object({
-  name: z.string().min(1, "Product name is required").max(100, "Product name must be less than 100 characters"),
-  description: z.string().max(1000, "Description must be less than 1000 characters"),
-  price: z.number().min(0.01, "Price must be greater than 0"),
-  quantity: z.number().int().min(0, "Quantity must be 0 or greater"),
-  categories: z.array(z.string()).max(10, "Maximum 10 categories allowed"),
-  images: z.array(z.string().url("Invalid image URL")).max(5, "Maximum 5 images allowed"),
-  active: z.boolean(),
-  use_autoreply: z.boolean(),
-  autoreply_message: z.string().max(500, "Auto-reply message must be less than 500 characters")
-}))
-
-// Stall form setup with vee-validate
-const form = useForm({
-  validationSchema: stallFormSchema,
-  initialValues: {
-    name: '',
-    description: '',
-    currency: 'sat',
-    wallet: '',
-    selectedZones: [] as string[],
-    newZone: {
-      name: '',
-      cost: 0,
-      selectedCountries: [] as string[]
-    }
-  }
-})
-
-// Product form setup with vee-validate
-const productForm = useForm({
-  validationSchema: productFormSchema,
-  initialValues: {
-    name: '',
-    description: '',
-    price: 0,
-    quantity: 1,
-    categories: [] as string[],
-    images: [] as string[],
-    active: true,
-    use_autoreply: false,
-    autoreply_message: ''
-  }
-})
-
-// Destructure stall form methods for easier access
-const { setFieldValue, resetForm, values, meta, validate } = form
-
-// Destructure product form methods for easier access
-const { 
-  setFieldValue: setProductFieldValue, 
-  resetForm: resetProductForm, 
-  values: productValues, 
-  meta: productMeta, 
-  validate: validateProduct 
-} = productForm
-
-// Helper function to get field values safely
-const getFieldValue = (fieldName: string) => {
-  return fieldName.split('.').reduce((obj, key) => obj?.[key], values)
-}
-
-// Stall form validation computed
-const isFormValid = computed(() => {
-  return meta.value.valid
-})
-
-// Product form validation computed
-const isProductFormValid = computed(() => {
-  return productMeta.value.valid
-})
-
-// Stall form submit handler
-const onSubmit = form.handleSubmit(async (values) => {
-  await createStall(values)
-})
-
-// Product form submit handler
-const onProductSubmit = productForm.handleSubmit(async (values) => {
-  await createProduct(values)
-})
+// Dialog state
+const showCreateStoreDialog = ref(false)
+const showCreateProductDialog = ref(false)
 
 // Computed properties
 const userHasMerchantProfile = computed(() => {
-  // Use the actual API response to determine if user has merchant profile
   return merchantProfile.value !== null
 })
 
@@ -1151,17 +376,6 @@ const userHasStalls = computed(() => {
   return userStalls.value.length > 0
 })
 
-
-const incomingOrders = computed(() => {
-  // Filter orders to only show those where the current user is the seller
-  const currentUserPubkey = auth.currentUser?.value?.pubkey
-  if (!currentUserPubkey) return []
-  
-  return Object.values(marketStore.orders)
-    .filter(order => order.sellerPubkey === currentUserPubkey && order.status === 'pending')
-    .sort((a, b) => b.createdAt - a.createdAt)
-})
-
 const storeStats = computed(() => {
   const currentUserPubkey = auth.currentUser?.value?.pubkey
   if (!currentUserPubkey) {
@@ -1170,8 +384,6 @@ const storeStats = computed(() => {
       pendingOrders: 0,
       paidOrders: 0,
       totalSales: 0,
-      totalProducts: 0,
-      activeProducts: 0,
       satisfaction: 0,
       totalReviews: 0
     }
@@ -1189,176 +401,16 @@ const storeStats = computed(() => {
     totalSales: myOrders
       .filter(o => o.status === 'paid' && o.createdAt > thirtyDaysAgo)
       .reduce((sum, o) => sum + o.total, 0),
-    totalProducts: 0, // TODO: Implement product management
-    activeProducts: 0, // TODO: Implement product management
-    satisfaction: userHasStalls.value ? 95 : 0, // TODO: Implement review system
-    totalReviews: 0 // TODO: Implement review system
+    satisfaction: userHasStalls.value ? 95 : 0,
+    totalReviews: 0
   }
 })
 
 // Methods
-const formatDate = (timestamp: number) => {
-  return new Date(timestamp * 1000).toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit'
-  })
-}
-
-const formatStatus = (status: OrderStatus) => {
-  const statusMap: Record<OrderStatus, string> = {
-    pending: 'Pending',
-    paid: 'Paid',
-    processing: 'Processing',
-    shipped: 'Shipped',
-    delivered: 'Delivered',
-    cancelled: 'Cancelled'
-  }
-  return statusMap[status] || status
-}
-
-const getStatusVariant = (status: OrderStatus) => {
-  const variantMap: Record<OrderStatus, 'default' | 'secondary' | 'outline' | 'destructive'> = {
-    pending: 'outline',
-    paid: 'secondary',
-    processing: 'secondary',
-    shipped: 'default',
-    delivered: 'default',
-    cancelled: 'destructive'
-  }
-  return variantMap[status] || 'outline'
-}
-
 const formatPrice = (price: number, currency: string) => {
   return marketStore.formatPrice(price, currency)
 }
 
-const generateInvoice = async (orderId: string) => {
-  console.log('Generating invoice for order:', orderId)
-  isGeneratingInvoice.value = orderId
-  
-  try {
-    // Get the order from the store
-    const order = marketStore.orders[orderId]
-    if (!order) {
-      throw new Error('Order not found')
-    }
-
-    // Temporary fix: If buyerPubkey is missing, try to get it from auth
-    if (!order.buyerPubkey && auth.currentUser?.value?.pubkey) {
-      console.log('Fixing missing buyerPubkey for existing order')
-      marketStore.updateOrder(order.id, { buyerPubkey: auth.currentUser.value.pubkey })
-    }
-
-    // Temporary fix: If sellerPubkey is missing, use current user's pubkey
-    if (!order.sellerPubkey && auth.currentUser?.value?.pubkey) {
-      console.log('Fixing missing sellerPubkey for existing order')
-      marketStore.updateOrder(order.id, { sellerPubkey: auth.currentUser.value.pubkey })
-    }
-
-    // Get the updated order
-    const updatedOrder = marketStore.orders[orderId]
-
-    console.log('Order details for invoice generation:', {
-      orderId: updatedOrder.id,
-      orderFields: Object.keys(updatedOrder),
-      buyerPubkey: updatedOrder.buyerPubkey,
-      sellerPubkey: updatedOrder.sellerPubkey,
-      status: updatedOrder.status,
-      total: updatedOrder.total
-    })
-
-    // Get the user's wallet list
-    const userWallets = auth.currentUser?.value?.wallets || []
-    console.log('Available wallets:', userWallets)
-    
-    if (userWallets.length === 0) {
-      throw new Error('No wallet available to generate invoice. Please ensure you have at least one wallet configured.')
-    }
-
-    // Use the first available wallet for invoice generation
-    const walletId = userWallets[0].id
-    const walletName = userWallets[0].name
-    const adminKey = userWallets[0].adminkey
-    console.log('Using wallet for invoice generation:', { walletId, walletName, balance: userWallets[0].balance_msat })
-    
-    const invoice = await marketStore.createLightningInvoice(orderId, adminKey)
-    
-    if (invoice) {
-      console.log('Lightning invoice created:', invoice)
-      
-      // Send the invoice to the customer via Nostr
-      await sendInvoiceToCustomer(updatedOrder, invoice)
-      
-      console.log('Invoice sent to customer successfully')
-      
-      // Show success message (you could add a toast notification here)
-      alert(`Invoice generated successfully using wallet: ${walletName}`)
-    } else {
-      throw new Error('Failed to create Lightning invoice')
-    }
-  } catch (error) {
-    console.error('Failed to generate invoice:', error)
-    const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred'
-    
-    // Show error message to user
-    alert(`Failed to generate invoice: ${errorMessage}`)
-  } finally {
-    isGeneratingInvoice.value = null
-  }
-}
-
-const sendInvoiceToCustomer = async (order: any, invoice: any) => {
-  try {
-    console.log('Sending invoice to customer for order:', {
-      orderId: order.id,
-      buyerPubkey: order.buyerPubkey,
-      sellerPubkey: order.sellerPubkey,
-      invoiceFields: Object.keys(invoice)
-    })
-
-    // Check if we have the buyer's public key
-    if (!order.buyerPubkey) {
-      console.error('Missing buyerPubkey in order:', order)
-      throw new Error('Cannot send invoice: buyer public key not found')
-    }
-
-    // Update the order with the invoice details
-    const updatedOrder = {
-      ...order,
-      lightningInvoice: invoice,
-      paymentHash: invoice.payment_hash,
-      paymentStatus: 'pending',
-      paymentRequest: invoice.bolt11, // Use bolt11 field from LNBits response
-      updatedAt: Math.floor(Date.now() / 1000)
-    }
-
-    // Update the order in the store
-    marketStore.updateOrder(order.id, updatedOrder)
-
-    // Send the updated order to the customer via Nostr
-    // This will include the invoice information
-    await nostrmarketService.publishOrder(updatedOrder, order.buyerPubkey)
-    
-    console.log('Updated order with invoice sent via Nostr to customer:', order.buyerPubkey)
-  } catch (error) {
-    console.error('Failed to send invoice to customer:', error)
-    throw error
-  }
-}
-
-const viewOrderDetails = (orderId: string) => {
-  // TODO: Navigate to detailed order view
-  console.log('Viewing order details:', orderId)
-}
-
-const processOrder = (orderId: string) => {
-  // TODO: Implement order processing
-  console.log('Processing order:', orderId)
-}
-
 const createMerchantProfile = async () => {
   const currentUser = auth.currentUser?.value
   if (!currentUser) {
@@ -1373,7 +425,7 @@ const createMerchantProfile = async () => {
     return
   }
   
-  const wallet = userWallets[0] // Use first wallet
+  const wallet = userWallets[0]
   if (!wallet.adminkey) {
     console.error('Wallet missing admin key for merchant creation')
     toast.error('Wallet missing admin key. Admin key is required to create merchant profiles.')
@@ -1381,134 +433,27 @@ const createMerchantProfile = async () => {
   }
   
   isCreatingMerchant.value = true
-  merchantCreateError.value = null
   
   try {
-    console.log('Creating merchant profile...', {
-      walletId: wallet.id,
-      adminKeyLength: wallet.adminkey.length,
-      adminKeyPreview: wallet.adminkey.substring(0, 8) + '...'
-    })
-    
-    // Create merchant with empty config, exactly like the nostrmarket extension
     const merchantData = {
       config: {}
     }
     
     const newMerchant = await nostrmarketAPI.createMerchant(wallet.adminkey, merchantData)
     
-    console.log('Merchant profile created successfully:', {
-      merchantId: newMerchant.id,
-      publicKey: newMerchant.public_key
-    })
-    
-    // Update local state
     merchantProfile.value = newMerchant
     
-    // Show success message
     toast.success('Merchant profile created successfully! You can now create your first store.')
     
   } catch (error) {
     const errorMessage = error instanceof Error ? error.message : 'Failed to create merchant profile'
     console.error('Error creating merchant profile:', error)
-    merchantCreateError.value = errorMessage
-    
-    // Show error to user
     toast.error(`Failed to create merchant profile: ${errorMessage}`)
   } finally {
     isCreatingMerchant.value = false
   }
 }
 
-const initializeStallCreation = async () => {
-  const currentUser = auth.currentUser?.value
-  if (!currentUser?.wallets?.length) {
-    toast.error('No wallets available')
-    return
-  }
-  
-  // Reset form to initial state first
-  resetForm({
-    values: {
-      name: '',
-      description: '',
-      currency: 'sat',  
-      wallet: currentUser.wallets[0].id,
-      selectedZones: [],
-      newZone: {
-        name: '',
-        cost: 0,
-        selectedCountries: []
-      }
-    },
-    errors: {},
-    touched: {},
-    initialValues: {
-      name: '',
-      description: '',
-      currency: 'sat',
-      wallet: currentUser.wallets[0].id,
-      selectedZones: [],
-      newZone: {
-        name: '',
-        cost: 0,
-        selectedCountries: []
-      }
-    }
-  })
-  
-  // Wait for Vue's reactivity to update
-  await nextTick()
-  
-  // Force complete dialog re-render  
-  dialogKey.value++
-  formKey.value++
-  
-  // Clear any previous errors
-  stallCreateError.value = null
-  
-  // Load currencies and zones
-  await Promise.all([
-    loadAvailableCurrencies(),
-    loadAvailableZones()
-  ])
-  
-  // Trigger validation after data is loaded to ensure form state is correct
-  await validate()
-  
-  showStallDialog.value = true
-}
-
-const loadAvailableCurrencies = async () => {
-  try {
-    const currencies = await nostrmarketAPI.getCurrencies()
-    availableCurrencies.value = currencies
-  } catch (error) {
-    console.error('Failed to load currencies:', error)
-    // Keep default 'sat'
-  }
-}
-
-const loadAvailableZones = async () => {
-  const currentUser = auth.currentUser?.value
-  if (!currentUser?.wallets?.length) return
-  
-  try {
-    const zones = await nostrmarketAPI.getZones(currentUser.wallets[0].inkey)
-    availableZones.value = zones
-    
-    // Auto-select the first available zone to make form valid
-    if (zones.length > 0) {
-      const currentSelectedZones = getFieldValue('selectedZones') || []
-      if (currentSelectedZones.length === 0) {
-        setFieldValue('selectedZones', [zones[0].id])
-      }
-    }
-  } catch (error) {
-    console.error('Failed to load zones:', error)
-  }
-}
-
 const loadStallsList = async () => {
   const currentUser = auth.currentUser?.value
   
@@ -1523,7 +468,7 @@ const loadStallsList = async () => {
     
     // If there are stalls but no active one selected, select the first
     if (stalls?.length > 0 && !activeStallId.value) {
-      activeStallId.value = stalls[0].id
+      activeStallId.value = stalls[0].id!
     }
   } catch (error) {
     console.error('Failed to load stalls:', error)
@@ -1533,212 +478,6 @@ const loadStallsList = async () => {
   }
 }
 
-const addNewZone = async () => {
-  const currentUser = auth.currentUser?.value
-  if (!currentUser?.wallets?.length) {
-    toast.error('No wallets available')
-    return
-  }
-
-  const newZone = getFieldValue('newZone')
-  
-  if (!newZone?.name || !newZone.selectedCountries?.length || (newZone.cost ?? -1) < 0) {
-    toast.error('Please fill in all zone details')
-    return
-  }
-
-  try {
-    const createdZone = await nostrmarketAPI.createZone(
-      currentUser.wallets[0].adminkey,
-      {
-        name: newZone.name,
-        currency: getFieldValue('currency'),
-        cost: newZone.cost,
-        countries: newZone.selectedCountries
-      }
-    )
-    
-    // Add to available zones and select it
-    availableZones.value.push(createdZone)
-    const currentSelectedZones = getFieldValue('selectedZones') || []
-    setFieldValue('selectedZones', [...currentSelectedZones, createdZone.id])
-    
-    // Reset the new zone form
-    setFieldValue('newZone', {
-      name: '',
-      cost: 0,
-      selectedCountries: []
-    })
-    
-    toast.success(`Zone "${newZone.name}" created successfully`)
-  } catch (error) {
-    const errorMessage = error instanceof Error ? error.message : 'Failed to create zone'
-    toast.error(`Failed to create zone: ${errorMessage}`)
-  }
-}
-
-
-const createStall = async (formData: any) => {
-  const currentUser = auth.currentUser?.value
-  if (!currentUser?.wallets?.length) {
-    toast.error('No wallets available')
-    return
-  }
-
-  const { name, description, currency, selectedZones } = formData
-
-  isCreatingStall.value = true
-  stallCreateError.value = null
-
-  try {
-    // Get the selected zones data
-    const selectedZoneData = availableZones.value.filter(zone => 
-      selectedZones.includes(zone.id)
-    )
-
-    const stallData: CreateStallRequest = {
-      name,
-      wallet: currentUser.wallets[0].id,
-      currency,
-      shipping_zones: selectedZoneData,
-      config: {
-        description: description || ''
-      }
-    }
-
-    const newStall = await nostrmarketAPI.createStall(
-      currentUser.wallets[0].adminkey,
-      stallData
-    )
-
-    // Update stalls list
-    await loadStallsList()
-    
-    // Reset form and close dialog using standard Shadcn pattern
-    resetForm({
-      values: {
-        name: '',
-        description: '',
-        currency: 'sat',
-        wallet: currentUser.wallets[0].id,
-        selectedZones: [],
-        newZone: {
-          name: '',
-          cost: 0,
-          selectedCountries: []
-        }
-      },
-      errors: {},
-      touched: {},
-      initialValues: {
-        name: '',
-        description: '',
-        currency: 'sat',
-        wallet: currentUser.wallets[0].id,
-        selectedZones: [],
-        newZone: {
-          name: '',
-          cost: 0,
-          selectedCountries: []
-        }
-      }
-    })
-    
-    // Force complete dialog re-render
-    dialogKey.value++
-    formKey.value++
-    
-    showStallDialog.value = false
-    
-    toast.success('Store created successfully! You can now add products.')
-
-  } catch (error) {
-    const errorMessage = error instanceof Error ? error.message : 'Failed to create store'
-    console.error('Error creating stall:', error)
-    stallCreateError.value = errorMessage
-    toast.error(`Failed to create store: ${errorMessage}`)
-  } finally {
-    isCreatingStall.value = false
-  }
-}
-
-// Missing functions for stall management
-const manageStall = (stallId: string) => {
-  console.log('Managing stall:', stallId)
-  // Set as active stall for the dashboard view
-  activeStallId.value = stallId
-}
-
-const viewStallProducts = (stallId: string) => {
-  console.log('Viewing products for stall:', stallId)
-  // TODO: Navigate to products view for specific stall
-  // For now, set as active stall and scroll to products section
-  activeStallId.value = stallId
-}
-
-const closeStallDialog = () => {
-  // Reset form and clear errors when closing the dialog
-  stallCreateError.value = null
-  showStallDialog.value = false
-}
-
-const navigateToMarket = () => router.push('/market')
-const viewAllOrders = () => router.push('/market-dashboard?tab=orders')
-const generateBulkInvoices = () => console.log('Generate bulk invoices')
-const exportOrders = () => console.log('Export orders')
-const manageProducts = () => console.log('Manage products')
-const storeSettings = () => router.push('/market-dashboard?tab=settings')
-const analytics = () => console.log('View analytics')
-
-const getFirstWalletName = () => {
-  const userWallets = auth.currentUser?.value?.wallets || []
-  if (userWallets.length > 0) {
-    return userWallets[0].name
-  }
-  return 'N/A'
-}
-
-// Methods
-const checkMerchantProfile = async () => {
-  const currentUser = auth.currentUser?.value
-  if (!currentUser) return
-  
-  const userWallets = currentUser.wallets || []
-  if (userWallets.length === 0) {
-    console.warn('No wallets available for merchant check')
-    return
-  }
-  
-  const wallet = userWallets[0] // Use first wallet
-  if (!wallet.inkey) {
-    console.warn('Wallet missing invoice key for merchant check')
-    return
-  }
-  
-  isLoadingMerchant.value = true
-  merchantCheckError.value = null
-  
-  try {
-    console.log('Checking for merchant profile...')
-    const merchant = await nostrmarketAPI.getMerchant(wallet.inkey)
-    merchantProfile.value = merchant
-    
-    console.log('Merchant profile check result:', {
-      hasMerchant: !!merchant,
-      merchantId: merchant?.id,
-      active: merchant?.config?.active
-    })
-  } catch (error) {
-    const errorMessage = error instanceof Error ? error.message : 'Failed to check merchant profile'
-    console.error('Error checking merchant profile:', error)
-    merchantCheckError.value = errorMessage
-    merchantProfile.value = null
-  } finally {
-    isLoadingMerchant.value = false
-  }
-}
-
-// Product management functions
 const loadStallProducts = async () => {
   if (!activeStall.value) return
   
@@ -1749,7 +488,7 @@ const loadStallProducts = async () => {
   try {
     const products = await nostrmarketAPI.getProducts(
       currentUser.wallets[0].inkey, 
-      activeStall.value.id
+      activeStall.value.id!
     )
     stallProducts.value = products || []
   } catch (error) {
@@ -1760,74 +499,57 @@ const loadStallProducts = async () => {
   }
 }
 
-const addProduct = () => {
-  if (!activeStall.value) return
-  // Reset product form to initial state
-  resetProductForm()
-  showProductDialog.value = true
+const manageStall = (stallId: string) => {
+  activeStallId.value = stallId
 }
 
-const createProduct = async (formData: any) => {
+const viewStallProducts = (stallId: string) => {
+  activeStallId.value = stallId
+}
+
+const navigateToMarket = () => router.push('/market')
+
+const checkMerchantProfile = async () => {
   const currentUser = auth.currentUser?.value
-  if (!currentUser?.wallets?.length || !activeStall.value) {
-    toast.error('No active store or wallets available')
+  if (!currentUser) return
+  
+  const userWallets = currentUser.wallets || []
+  if (userWallets.length === 0) {
+    console.warn('No wallets available for merchant check')
     return
   }
-
-  const { 
-    name, 
-    description, 
-    price, 
-    quantity, 
-    categories, 
-    images, 
-    active, 
-    use_autoreply, 
-    autoreply_message 
-  } = formData
-
-  isCreatingProduct.value = true
-  productCreateError.value = null
-
-  try {
-    const productData: CreateProductRequest = {
-      stall_id: activeStall.value.id,
-      name,
-      categories: categories || [],
-      images: images || [],
-      price: Number(price),
-      quantity: Number(quantity),
-      active,
-      config: {
-        description: description || '',
-        currency: activeStall.value.currency,
-        use_autoreply,
-        autoreply_message: use_autoreply ? autoreply_message || '' : '',
-        shipping: [] // Will be populated from shipping zones if needed
-      }
-    }
-
-    const newProduct = await nostrmarketAPI.createProduct(
-      currentUser.wallets[0].adminkey,
-      productData
-    )
-
-    // Refresh the products list
-    await loadStallProducts()
-    
-    // Reset form and close dialog
-    resetProductForm()
-    showProductDialog.value = false
-    
-    toast.success(`Product "${name}" created successfully!`)
-  } catch (error) {
-    const errorMessage = error instanceof Error ? error.message : 'Failed to create product'
-    console.error('Error creating product:', error)
-    productCreateError.value = errorMessage
-    toast.error(`Failed to create product: ${errorMessage}`)
-  } finally {
-    isCreatingProduct.value = false
+  
+  const wallet = userWallets[0]
+  if (!wallet.inkey) {
+    console.warn('Wallet missing invoice key for merchant check')
+    return
   }
+  
+  isLoadingMerchant.value = true
+  merchantCheckError.value = null
+  
+  try {
+    const merchant = await nostrmarketAPI.getMerchant(wallet.inkey)
+    merchantProfile.value = merchant
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : 'Failed to check merchant profile'
+    console.error('Error checking merchant profile:', error)
+    merchantCheckError.value = errorMessage
+    merchantProfile.value = null
+  } finally {
+    isLoadingMerchant.value = false
+  }
+}
+
+// Event handlers
+const onStoreCreated = async (stall: Stall) => {
+  await loadStallsList()
+  toast.success('Store created successfully!')
+}
+
+const onProductCreated = async (product: Product) => {
+  await loadStallProducts()
+  toast.success('Product created successfully!')
 }
 
 // Lifecycle
@@ -1860,5 +582,4 @@ watch(() => activeStallId.value, async (newStallId) => {
     stallProducts.value = []
   }
 })
-</script>
-
+</script>
\ No newline at end of file
diff --git a/src/modules/market/components/MerchantStore.vue.bak b/src/modules/market/components/MerchantStore.vue.bak
new file mode 100644
index 0000000..a0acd1a
--- /dev/null
+++ b/src/modules/market/components/MerchantStore.vue.bak
@@ -0,0 +1,1864 @@
+<template>
+  <div class="space-y-6">
+    <!-- Loading State -->
+    <div v-if="isLoadingMerchant" class="flex flex-col items-center justify-center py-12">
+      <div class="w-16 h-16 mx-auto mb-4 bg-muted/50 rounded-full flex items-center justify-center">
+        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+      </div>
+      <h3 class="text-lg font-medium text-foreground mb-2">Checking Merchant Status</h3>
+      <p class="text-muted-foreground">Loading your merchant profile...</p>
+    </div>
+
+    <!-- Error State -->
+    <div v-else-if="merchantCheckError" class="flex flex-col items-center justify-center py-12">
+      <div class="w-16 h-16 mx-auto mb-4 bg-red-500/10 rounded-full flex items-center justify-center">
+        <AlertCircle class="w-8 h-8 text-red-500" />
+      </div>
+      <h3 class="text-lg font-medium text-foreground mb-2">Error Loading Merchant Status</h3>
+      <p class="text-muted-foreground mb-4">{{ merchantCheckError }}</p>
+      <Button @click="checkMerchantProfile" variant="outline">
+        Try Again
+      </Button>
+    </div>
+
+    <!-- No Merchant Profile Empty State -->
+    <div v-else-if="!userHasMerchantProfile" 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">
+        <User class="w-12 h-12 text-muted-foreground" />
+      </div>
+      <h2 class="text-2xl font-bold text-foreground mb-2">Create Your Merchant Profile</h2>
+      <p class="text-muted-foreground text-center mb-6 max-w-md">
+        Before you can create a store, you need to set up your merchant profile. This will create your merchant identity on the Nostr marketplace.
+      </p>
+      <Button 
+        @click="createMerchantProfile" 
+        variant="default" 
+        size="lg"
+        :disabled="isCreatingMerchant"
+      >
+        <div v-if="isCreatingMerchant" class="flex items-center">
+          <div class="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2"></div>
+          <span>Creating...</span>
+        </div>
+        <div v-else class="flex items-center">
+          <Plus class="w-5 h-5 mr-2" />
+          <span>Create Merchant Profile</span>
+        </div>
+      </Button>
+    </div>
+
+    <!-- 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 -->
+        <div v-for="stall in userStalls" :key="stall.id" 
+             class="bg-card rounded-lg border shadow-sm hover:shadow-md transition-shadow">
+          <div class="p-6">
+            <div class="flex items-start justify-between mb-4">
+              <div class="flex-1">
+                <h3 class="text-lg font-semibold text-foreground">{{ stall.name }}</h3>
+                <p class="text-sm text-muted-foreground mt-1">
+                  {{ stall.config?.description || 'No description' }}
+                </p>
+              </div>
+              <Badge variant="secondary">{{ stall.currency }}</Badge>
+            </div>
+            
+            <div class="space-y-3">
+              <!-- Store Metrics -->
+              <div class="flex items-center justify-between text-sm">
+                <span class="text-muted-foreground">Products</span>
+                <span class="font-medium">{{ stall.products?.length || 0 }}</span>
+              </div>
+              <div class="flex items-center justify-between text-sm">
+                <span class="text-muted-foreground">Shipping Zones</span>
+                <span class="font-medium">{{ stall.shipping_zones?.length || 0 }}</span>
+              </div>
+              
+              <!-- Action Buttons -->
+              <div class="flex gap-2 pt-3">
+                <Button 
+                  @click="manageStall(stall.id)" 
+                  variant="default" 
+                  size="sm"
+                  class="flex-1"
+                >
+                  <Settings class="w-4 h-4 mr-1" />
+                  Manage
+                </Button>
+                <Button 
+                  @click="viewStallProducts(stall.id)" 
+                  variant="outline" 
+                  size="sm"
+                  class="flex-1"
+                >
+                  <Package class="w-4 h-4 mr-1" />
+                  Products
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 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="initializeStallCreation"
+            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">
+      <!-- Header -->
+      <div class="flex items-center justify-between mb-6">
+        <div>
+          <div class="flex items-center gap-3 mb-2">
+            <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>
+          <h2 class="text-2xl font-bold text-foreground">{{ activeStall.name }}</h2>
+          <p class="text-muted-foreground mt-1">{{ activeStall.config?.description || 'Manage incoming orders and your products' }}</p>
+        </div>
+        <div class="flex items-center gap-3">
+          <Button @click="navigateToMarket" variant="outline">
+            <Store class="w-4 h-4 mr-2" />
+            Browse Market
+          </Button>
+          <Button @click="addProduct" variant="default">
+            <Plus class="w-4 h-4 mr-2" />
+            Add Product
+          </Button>
+        </div>
+      </div>
+
+    <!-- Store Stats -->
+    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
+      <!-- Incoming Orders -->
+      <div class="bg-card p-6 rounded-lg border shadow-sm">
+        <div class="flex items-center justify-between">
+          <div>
+            <p class="text-sm font-medium text-muted-foreground">Incoming Orders</p>
+            <p class="text-2xl font-bold text-foreground">{{ storeStats.incomingOrders }}</p>
+          </div>
+          <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
+            <Package class="w-6 h-6 text-primary" />
+          </div>
+        </div>
+        <div class="mt-4">
+          <div class="flex items-center text-sm text-muted-foreground">
+            <span>{{ storeStats.pendingOrders }} pending</span>
+            <span class="mx-2">•</span>
+            <span>{{ storeStats.paidOrders }} paid</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Total Sales -->
+      <div class="bg-card p-6 rounded-lg border shadow-sm">
+        <div class="flex items-center justify-between">
+          <div>
+            <p class="text-sm font-medium text-muted-foreground">Total Sales</p>
+            <p class="text-2xl font-bold text-foreground">{{ formatPrice(storeStats.totalSales, 'sat') }}</p>
+          </div>
+          <div class="w-12 h-12 bg-green-500/10 rounded-lg flex items-center justify-center">
+            <DollarSign class="w-6 h-6 text-green-500" />
+          </div>
+        </div>
+        <div class="mt-4">
+          <div class="flex items-center text-sm text-muted-foreground">
+            <span>Last 30 days</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Products -->
+      <div class="bg-card p-6 rounded-lg border shadow-sm">
+        <div class="flex items-center justify-between">
+          <div>
+            <p class="text-sm font-medium text-muted-foreground">Products</p>
+            <p class="text-2xl font-bold text-foreground">{{ storeStats.totalProducts }}</p>
+          </div>
+          <div class="w-12 h-12 bg-purple-500/10 rounded-lg flex items-center justify-center">
+            <Store class="w-6 h-6 text-purple-500" />
+          </div>
+        </div>
+        <div class="mt-4">
+          <div class="flex items-center text-sm text-muted-foreground">
+            <span>{{ storeStats.activeProducts }} active</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Customer Satisfaction -->
+      <div class="bg-card p-6 rounded-lg border shadow-sm">
+        <div class="flex items-center justify-between">
+          <div>
+            <p class="text-sm font-medium text-muted-foreground">Satisfaction</p>
+            <p class="text-2xl font-bold text-foreground">{{ storeStats.satisfaction }}%</p>
+          </div>
+          <div class="w-12 h-12 bg-yellow-500/10 rounded-lg flex items-center justify-center">
+            <Star class="w-6 h-6 text-yellow-500" />
+          </div>
+        </div>
+        <div class="mt-4">
+          <div class="flex items-center text-sm text-muted-foreground">
+            <span>{{ storeStats.totalReviews }} reviews</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Incoming Orders Section -->
+    <div class="bg-card rounded-lg border shadow-sm">
+      <div class="p-6 border-b border-border">
+        <h3 class="text-lg font-semibold text-foreground">Incoming Orders</h3>
+        <p class="text-sm text-muted-foreground mt-1">Orders waiting for your attention</p>
+      </div>
+      
+      <div v-if="incomingOrders.length > 0" class="divide-y divide-border">
+        <div
+          v-for="order in incomingOrders"
+          :key="order.id"
+          class="p-6 hover:bg-muted/50 transition-colors"
+        >
+          <!-- Order Header -->
+          <div class="flex items-center justify-between mb-4">
+            <div class="flex items-center gap-3">
+              <div class="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center">
+                <Package class="w-5 h-5 text-primary" />
+              </div>
+              <div>
+                <h4 class="font-semibold text-foreground">Order #{{ order.id.slice(-8) }}</h4>
+                <p class="text-sm text-muted-foreground">
+                  {{ formatDate(order.createdAt) }} • {{ formatPrice(order.total, order.currency) }}
+                </p>
+                <div class="flex items-center gap-2 mt-1">
+                  <Badge :variant="getStatusVariant(order.status)">
+                    {{ formatStatus(order.status) }}
+                  </Badge>
+                  <Badge v-if="order.paymentStatus === 'pending'" variant="secondary">
+                    Payment Pending
+                  </Badge>
+                </div>
+              </div>
+            </div>
+            
+            <div class="flex items-center gap-2">
+              <!-- Wallet Indicator -->
+              <div v-if="order.status === 'pending' && !order.lightningInvoice" class="text-xs text-muted-foreground mr-2">
+                <span>Wallet: {{ getFirstWalletName() }}</span>
+              </div>
+              
+              <Button
+                v-if="order.status === 'pending' && !order.lightningInvoice"
+                @click="generateInvoice(order.id)"
+                :disabled="isGeneratingInvoice === order.id"
+                size="sm"
+                variant="default"
+              >
+                <div v-if="isGeneratingInvoice === order.id" class="flex items-center space-x-2">
+                  <div class="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+                  <span>Generating...</span>
+                </div>
+                <div v-else class="flex items-center space-x-2">
+                  <Zap class="w-4 h-4" />
+                  <span>Generate Invoice</span>
+                </div>
+              </Button>
+              <Button
+                v-if="order.lightningInvoice"
+                @click="viewOrderDetails(order.id)"
+                size="sm"
+                variant="outline"
+              >
+                <Eye class="w-4 h-4 mr-2" />
+                View Details
+              </Button>
+              <Button
+                @click="processOrder(order.id)"
+                size="sm"
+                variant="outline"
+              >
+                <Check class="w-4 h-4 mr-2" />
+                Process
+              </Button>
+            </div>
+          </div>
+
+          <!-- Order Items -->
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+            <div>
+              <h5 class="font-medium text-foreground mb-2">Items</h5>
+              <div class="space-y-1">
+                <div
+                  v-for="item in order.items"
+                  :key="item.productId"
+                  class="text-sm text-muted-foreground"
+                >
+                  {{ item.productName }} × {{ item.quantity }}
+                </div>
+              </div>
+            </div>
+            
+            <div>
+              <h5 class="font-medium text-foreground mb-2">Customer Info</h5>
+              <div class="space-y-1 text-sm text-muted-foreground">
+                <p v-if="order.contactInfo.email">
+                  <span class="font-medium">Email:</span> {{ order.contactInfo.email }}
+                </p>
+                <p v-if="order.contactInfo.message">
+                  <span class="font-medium">Message:</span> {{ order.contactInfo.message }}
+                </p>
+                <p v-if="order.contactInfo.address">
+                  <span class="font-medium">Address:</span> {{ order.contactInfo.address }}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <!-- Payment Status -->
+          <div v-if="order.lightningInvoice" class="p-4 bg-green-500/10 border border-green-200 rounded-lg">
+            <div class="flex items-center justify-between">
+              <div class="flex items-center gap-2">
+                <CheckCircle class="w-5 h-5 text-green-600" />
+                <span class="text-sm font-medium text-green-900">Lightning Invoice Generated</span>
+              </div>
+              <div class="text-sm text-green-700">
+                Amount: {{ formatPrice(order.total, order.currency) }}
+              </div>
+            </div>
+          </div>
+          <div v-else class="p-4 bg-yellow-500/10 border border-yellow-200 rounded-lg">
+            <div class="flex items-center gap-2">
+              <AlertCircle class="w-5 h-5 text-yellow-600" />
+              <span class="text-sm font-medium text-yellow-900">Invoice Required</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <div v-else class="p-6 text-center text-muted-foreground">
+        <Package class="w-12 h-12 mx-auto mb-3 text-muted-foreground/50" />
+        <p>No incoming orders</p>
+        <p class="text-sm">Orders from customers will appear here</p>
+      </div>
+    </div>
+
+    <!-- Quick Actions -->
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+      <!-- Order Management -->
+      <div class="bg-card p-6 rounded-lg border shadow-sm">
+        <h3 class="text-lg font-semibold text-foreground mb-4">Order Management</h3>
+        <div class="space-y-3">
+          <Button 
+            @click="viewAllOrders" 
+            variant="default" 
+            class="w-full justify-start"
+          >
+            <Package class="w-4 h-4 mr-2" />
+            View All Orders
+          </Button>
+          <Button 
+            @click="generateBulkInvoices" 
+            variant="outline" 
+            class="w-full justify-start"
+          >
+            <Zap class="w-4 h-4 mr-2" />
+            Generate Bulk Invoices
+          </Button>
+          <Button 
+            @click="exportOrders" 
+            variant="outline" 
+            class="w-full justify-start"
+          >
+            <Download class="w-4 h-4 mr-2" />
+            Export Orders
+          </Button>
+        </div>
+      </div>
+
+      <!-- Store Management -->
+      <div class="bg-card p-6 rounded-lg border shadow-sm">
+        <h3 class="text-lg font-semibold text-foreground mb-4">Store Management</h3>
+        <div class="space-y-3">
+          <Button 
+            @click="manageProducts" 
+            variant="default" 
+            class="w-full justify-start"
+          >
+            <Store class="w-4 h-4 mr-2" />
+            Manage Products
+          </Button>
+          <Button 
+            @click="storeSettings" 
+            variant="outline" 
+            class="w-full justify-start"
+          >
+            <Settings class="w-4 h-4 mr-2" />
+            Store Settings
+          </Button>
+          <Button 
+            @click="analytics" 
+            variant="outline" 
+            class="w-full justify-start"
+          >
+            <BarChart3 class="w-4 h-4 mr-2" />
+            View Analytics
+          </Button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Products Section -->
+    <div class="mt-8">
+      <div class="flex items-center justify-between mb-6">
+        <h3 class="text-xl font-semibold text-foreground">Products</h3>
+        <Button @click="addProduct" variant="default" size="sm">
+          <Plus class="w-4 h-4 mr-2" />
+          Add Product
+        </Button>
+      </div>
+
+      <!-- Loading Products -->
+      <div v-if="isLoadingProducts" class="flex items-center justify-center py-12">
+        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+        <span class="ml-2 text-muted-foreground">Loading products...</span>
+      </div>
+
+      <!-- No Products -->
+      <div v-else-if="stallProducts.length === 0" class="text-center py-12">
+        <div class="w-16 h-16 mx-auto mb-4 bg-muted/50 rounded-full flex items-center justify-center">
+          <Package class="w-8 h-8 text-muted-foreground" />
+        </div>
+        <h4 class="text-lg font-medium text-foreground mb-2">No Products Yet</h4>
+        <p class="text-muted-foreground mb-6">Start selling by adding your first product</p>
+        <Button @click="addProduct" variant="default">
+          <Plus class="w-4 h-4 mr-2" />
+          Add Your First Product
+        </Button>
+      </div>
+
+      <!-- Products Grid -->
+      <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <div
+          v-for="product in stallProducts"
+          :key="product.id"
+          class="bg-card p-6 rounded-lg border shadow-sm hover:shadow-md transition-shadow"
+        >
+          <!-- Product Image -->
+          <div class="aspect-square mb-4 bg-muted rounded-lg flex items-center justify-center">
+            <img
+              v-if="product.images?.[0]"
+              :src="product.images[0]"
+              :alt="product.name"
+              class="w-full h-full object-cover rounded-lg"
+            />
+            <Package v-else class="w-12 h-12 text-muted-foreground" />
+          </div>
+
+          <!-- Product Info -->
+          <div class="space-y-3">
+            <div>
+              <h4 class="font-semibold text-foreground">{{ product.name }}</h4>
+              <p v-if="product.config.description" class="text-sm text-muted-foreground mt-1">
+                {{ product.config.description }}
+              </p>
+            </div>
+
+            <div class="flex items-center justify-between">
+              <div>
+                <span class="text-lg font-bold text-foreground">
+                  {{ product.price }} {{ product.config.currency || activeStall?.currency || 'sat' }}
+                </span>
+                <div class="text-sm text-muted-foreground">
+                  Qty: {{ product.quantity }}
+                </div>
+              </div>
+              <div class="flex items-center gap-2">
+                <Badge :variant="product.active ? 'default' : 'secondary'">
+                  {{ product.active ? 'Active' : 'Inactive' }}
+                </Badge>
+              </div>
+            </div>
+
+            <!-- Product Categories -->
+            <div v-if="product.categories?.length" class="flex flex-wrap gap-1">
+              <Badge
+                v-for="category in product.categories"
+                :key="category"
+                variant="outline"
+                class="text-xs"
+              >
+                {{ category }}
+              </Badge>
+            </div>
+
+            <!-- Product Actions -->
+            <div class="flex justify-end pt-2 border-t">
+              <Button variant="ghost" size="sm">
+                Edit
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    </div> <!-- End of Active Store Dashboard -->
+    </div> <!-- End of Stores Grid section -->
+
+  </div> <!-- End of main container -->
+
+  <!-- Create Stall Dialog -->
+  <Dialog v-model:open="showStallDialog">
+    <DialogContent class="sm:max-w-2xl">
+      <DialogHeader>
+        <DialogTitle>Create New Store</DialogTitle>
+      </DialogHeader>
+      
+      <form @submit="onSubmit" class="space-y-6 py-4" autocomplete="off">
+        <!-- Basic Store Info -->
+        <div class="space-y-4">
+          <FormField v-slot="{ componentField }" name="name">
+            <FormItem>
+              <FormLabel>Store Name *</FormLabel>
+              <FormControl>
+                <Input 
+                  placeholder="Enter your store name"
+                  :disabled="isCreatingStall"
+                  v-bind="componentField"
+                  autocomplete="off"
+                  spellcheck="false"
+                />
+              </FormControl>
+              <FormDescription>
+                Choose a unique name for your store
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          </FormField>
+          
+          <FormField v-slot="{ componentField }" name="description">
+            <FormItem>
+              <FormLabel>Description</FormLabel>
+              <FormControl>
+                <Textarea
+                  placeholder="Describe your store and products"
+                  :disabled="isCreatingStall"
+                  v-bind="componentField"
+                  autocomplete="off"
+                  spellcheck="false"
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          </FormField>
+
+          <FormField v-slot="{ componentField }" name="currency">
+            <FormItem>
+              <FormLabel>Currency *</FormLabel>
+              <Select :disabled="isCreatingStall" v-bind="componentField">
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select currency" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  <SelectItem v-for="currency in availableCurrencies" :key="currency" :value="currency">
+                    {{ currency }}
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+              <FormMessage />
+            </FormItem>
+          </FormField>
+        </div>
+
+        <!-- Shipping Zones Section -->
+        <FormField name="selectedZones">
+          <FormItem>
+            <div class="mb-4">
+              <FormLabel class="text-base">Shipping Zones *</FormLabel>
+              <FormDescription>
+                Select existing zones or create new ones for your store
+              </FormDescription>
+            </div>
+
+            <!-- Existing Zones -->
+            <div v-if="availableZones.length > 0" class="space-y-3">
+              <FormLabel class="text-sm font-medium">Available Zones:</FormLabel>
+              <div class="space-y-2 max-h-32 overflow-y-auto">
+                <FormField
+                  v-for="zone in availableZones"
+                  :key="zone.id"
+                  v-slot="{ value, handleChange }"
+                  type="checkbox"
+                  :value="zone.id"
+                  :unchecked-value="false"
+                  name="selectedZones"
+                >
+                  <FormItem class="flex flex-row items-start space-x-3 space-y-0">
+                    <FormControl>
+                      <Checkbox
+                        :model-value="value.includes(zone.id)"
+                        @update:model-value="handleChange"
+                        :disabled="isCreatingStall"
+                      />
+                    </FormControl>
+                    <FormLabel class="text-sm cursor-pointer font-normal">
+                      {{ zone.name }} - {{ zone.cost }} {{ zone.currency }}
+                      <span class="text-muted-foreground ml-1">({{ zone.countries.slice(0, 2).join(', ') }}{{ zone.countries.length > 2 ? '...' : '' }})</span>
+                    </FormLabel>
+                  </FormItem>
+                </FormField>
+              </div>
+            </div>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <!-- Create New Zone -->
+        <div class="border-t pt-4">
+          <Label class="text-sm font-medium">Create New Zone:</Label>
+          <div class="space-y-3 mt-2">
+            <FormField v-slot="{ componentField }" name="newZone.name">
+              <FormItem>
+                <FormLabel>Zone Name</FormLabel>
+                <FormControl>
+                  <Input 
+                    placeholder="e.g., Europe, Worldwide"
+                    :disabled="isCreatingStall"
+                    v-bind="componentField"
+                    :key="`zone-name-${formKey}`"
+                    autocomplete="off"
+                    spellcheck="false"
+                  />
+                </FormControl>
+              </FormItem>
+            </FormField>
+            
+            <FormField v-slot="{ componentField }" name="newZone.cost">
+              <FormItem>
+                <FormLabel>Shipping Cost</FormLabel>
+                <FormControl>
+                  <Input 
+                    type="number"
+                    min="0"
+                    :placeholder="`Cost in ${getFieldValue('currency') || 'sat'}`"
+                    :disabled="isCreatingStall"
+                    :key="`zone-cost-${formKey}`"
+                    v-bind="componentField"
+                  />
+                </FormControl>
+              </FormItem>
+            </FormField>
+
+            <FormField v-slot="{ componentField }" name="newZone.selectedCountries">
+              <FormItem>
+                <FormLabel>Countries/Regions</FormLabel>
+                <FormControl>
+                  <Select multiple :disabled="isCreatingStall" v-bind="componentField">
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select countries/regions" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem v-for="country in countries" :key="country" :value="country">
+                        {{ country }}
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                </FormControl>
+                <div v-if="getFieldValue('newZone')?.selectedCountries?.length > 0" class="mt-2">
+                  <div class="flex flex-wrap gap-1">
+                    <Badge 
+                      v-for="country in getFieldValue('newZone').selectedCountries" 
+                      :key="country"
+                      variant="secondary"
+                      class="text-xs"
+                    >
+                      {{ country }}
+                    </Badge>
+                  </div>
+                </div>
+              </FormItem>
+            </FormField>
+
+            <Button 
+              @click="addNewZone"
+              type="button"
+              variant="outline"
+              size="sm"
+              :disabled="isCreatingStall || !getFieldValue('newZone')?.name || !getFieldValue('newZone')?.selectedCountries?.length"
+            >
+              <Plus class="w-4 h-4 mr-2" />
+              Add Zone
+            </Button>
+          </div>
+        </div>
+
+        <!-- Error Display -->
+        <div v-if="stallCreateError" class="text-sm text-destructive">
+          {{ stallCreateError }}
+        </div>
+
+        <div class="flex justify-end space-x-2 pt-4">
+          <Button 
+            type="button"
+            @click="closeStallDialog" 
+            variant="outline"
+            :disabled="isCreatingStall"
+          >
+            Cancel
+          </Button>
+          <Button 
+            type="submit"
+            :disabled="isCreatingStall || !isFormValid"
+          >
+            <span v-if="isCreatingStall">Creating...</span>
+            <span v-else>Create Store</span>
+          </Button>
+        </div>
+      </form>
+    </DialogContent>
+  </Dialog>
+
+  <!-- Create Product Dialog -->
+  <Dialog v-model:open="showProductDialog">
+    <DialogContent class="sm:max-w-3xl max-h-[90vh] overflow-y-auto">
+      <DialogHeader>
+        <DialogTitle>Add New Product to {{ activeStall?.name }}</DialogTitle>
+      </DialogHeader>
+      
+      <form @submit="onProductSubmit" class="space-y-6 py-4" autocomplete="off">
+        <!-- Basic Product Info -->
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <!-- Product Name -->
+          <FormField v-slot="{ componentField }" name="name">
+            <FormItem>
+              <FormLabel>Product Name *</FormLabel>
+              <FormControl>
+                <Input 
+                  placeholder="Enter product name"
+                  :disabled="isCreatingProduct"
+                  v-bind="componentField"
+                />
+              </FormControl>
+              <FormDescription>Choose a clear, descriptive name</FormDescription>
+              <FormMessage />
+            </FormItem>
+          </FormField>
+
+          <!-- Price -->
+          <FormField v-slot="{ componentField }" name="price">
+            <FormItem>
+              <FormLabel>Price * ({{ activeStall?.currency || 'sat' }})</FormLabel>
+              <FormControl>
+                <Input 
+                  type="number"
+                  step="0.01"
+                  min="0.01"
+                  placeholder="0.00"
+                  :disabled="isCreatingProduct"
+                  v-bind="componentField"
+                />
+              </FormControl>
+              <FormDescription>Price in {{ activeStall?.currency || 'sat' }}</FormDescription>
+              <FormMessage />
+            </FormItem>
+          </FormField>
+        </div>
+
+        <!-- Description -->
+        <FormField v-slot="{ componentField }" name="description">
+          <FormItem>
+            <FormLabel>Description</FormLabel>
+            <FormControl>
+              <Textarea
+                placeholder="Describe your product, its features, and benefits"
+                :disabled="isCreatingProduct"
+                v-bind="componentField"
+                rows="4"
+              />
+            </FormControl>
+            <FormDescription>Detailed description to help customers understand your product</FormDescription>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <!-- Quantity and Active Status -->
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <!-- Quantity -->
+          <FormField v-slot="{ componentField }" name="quantity">
+            <FormItem>
+              <FormLabel>Quantity *</FormLabel>
+              <FormControl>
+                <Input 
+                  type="number"
+                  min="0"
+                  placeholder="1"
+                  :disabled="isCreatingProduct"
+                  v-bind="componentField"
+                />
+              </FormControl>
+              <FormDescription>Available quantity (0 = unlimited)</FormDescription>
+              <FormMessage />
+            </FormItem>
+          </FormField>
+
+          <!-- Active Status -->
+          <FormField v-slot="{ value, handleChange }" name="active">
+            <FormItem>
+              <div class="space-y-3">
+                <FormLabel>Product Status</FormLabel>
+                <FormControl>
+                  <div class="flex items-center space-x-2">
+                    <Checkbox
+                      :checked="value"
+                      @update:checked="handleChange"
+                      :disabled="isCreatingProduct"
+                    />
+                    <Label>Product is active and visible</Label>
+                  </div>
+                </FormControl>
+                <FormDescription>Inactive products won't be shown to customers</FormDescription>
+                <FormMessage />
+              </div>
+            </FormItem>
+          </FormField>
+        </div>
+
+        <!-- Categories -->
+        <FormField name="categories">
+          <FormItem>
+            <FormLabel>Categories</FormLabel>
+            <FormDescription>Add categories to help customers find your product</FormDescription>
+            <div class="text-center py-8 border-2 border-dashed rounded-lg">
+              <Package class="w-8 h-8 mx-auto mb-2 text-muted-foreground" />
+              <p class="text-sm text-muted-foreground">Category management coming soon</p>
+            </div>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <!-- Images -->
+        <FormField name="images">
+          <FormItem>
+            <FormLabel>Product Images</FormLabel>
+            <FormDescription>Add images to showcase your product</FormDescription>
+            <div class="text-center py-8 border-2 border-dashed rounded-lg">
+              <Package class="w-8 h-8 mx-auto mb-2 text-muted-foreground" />
+              <p class="text-sm text-muted-foreground">Image upload coming soon</p>
+            </div>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <!-- Auto-reply Settings -->
+        <div class="border-t pt-6">
+          <FormField v-slot="{ value, handleChange }" name="use_autoreply">
+            <FormItem>
+              <div class="flex items-center space-x-2">
+                <FormControl>
+                  <Checkbox
+                    :checked="value"
+                    @update:checked="handleChange"
+                    :disabled="isCreatingProduct"
+                  />
+                </FormControl>
+                <FormLabel>Enable auto-reply to customer messages</FormLabel>
+              </div>
+              <FormDescription>Automatically respond to customer inquiries about this product</FormDescription>
+              <FormMessage />
+            </FormItem>
+          </FormField>
+
+          <FormField v-slot="{ componentField }" name="autoreply_message">
+            <FormItem class="mt-4">
+              <FormLabel>Auto-reply Message</FormLabel>
+              <FormControl>
+                <Textarea
+                  placeholder="Thank you for your interest! I'll get back to you soon..."
+                  :disabled="isCreatingProduct"
+                  v-bind="componentField"
+                  rows="3"
+                />
+              </FormControl>
+              <FormDescription>Message sent automatically when customers inquire about this product</FormDescription>
+              <FormMessage />
+            </FormItem>
+          </FormField>
+        </div>
+
+        <!-- Error Display -->
+        <div v-if="productCreateError" class="text-sm text-destructive">
+          {{ productCreateError }}
+        </div>
+
+        <div class="flex justify-end space-x-2 pt-4">
+          <Button 
+            type="button"
+            @click="showProductDialog = false" 
+            variant="outline"
+            :disabled="isCreatingProduct"
+          >
+            Cancel
+          </Button>
+          <Button 
+            type="submit"
+            :disabled="isCreatingProduct || !isProductFormValid"
+          >
+            <span v-if="isCreatingProduct">Creating...</span>
+            <span v-else>Create Product</span>
+          </Button>
+        </div>
+      </form>
+    </DialogContent>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, watch, nextTick } from 'vue'
+import { useRouter } from 'vue-router'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+import { useMarketStore } from '@/modules/market/stores/market'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Textarea } from '@/components/ui/textarea'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Checkbox } from '@/components/ui/checkbox'
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form'
+import { 
+  Package, 
+  Store, 
+  DollarSign, 
+  Star, 
+  Plus, 
+  Zap, 
+  Eye, 
+  Check, 
+  AlertCircle,
+  CheckCircle,
+  Download,
+  Settings,
+  BarChart3,
+  User
+} from 'lucide-vue-next'
+import type { OrderStatus } from '@/modules/market/stores/market'
+import type { NostrmarketService } from '../services/nostrmarketService'
+import type { NostrmarketAPI, Merchant, Zone, Stall, CreateStallRequest, Product, CreateProductRequest } from '../services/nostrmarketAPI'
+import { auth } from '@/composables/useAuthService'
+import { useToast } from '@/core/composables/useToast'
+import { injectService, SERVICE_TOKENS } from '@/core/di-container'
+
+const router = useRouter()
+const marketStore = useMarketStore()
+const nostrmarketService = injectService(SERVICE_TOKENS.NOSTRMARKET_SERVICE) as NostrmarketService
+const nostrmarketAPI = injectService(SERVICE_TOKENS.NOSTRMARKET_API) as NostrmarketAPI
+const toast = useToast()
+
+// Local state
+const isGeneratingInvoice = ref<string | null>(null)
+const merchantProfile = ref<Merchant | null>(null)
+const isLoadingMerchant = ref(false)
+const merchantCheckError = ref<string | null>(null)
+const isCreatingMerchant = ref(false)
+const merchantCreateError = ref<string | null>(null)
+
+// Multiple stalls state management
+const userStalls = ref<Stall[]>([])
+const activeStallId = ref<string | null>(null)
+const isLoadingStalls = ref(false)
+const activeStall = computed(() => 
+  userStalls.value.find(stall => stall.id === activeStallId.value)
+)
+
+// Stall creation state
+const isCreatingStall = ref(false)
+const stallCreateError = ref<string | null>(null)
+const formKey = ref(0) // Force re-render of form
+const showStallDialog = ref(false)
+const dialogKey = ref(0) // Force complete dialog re-render
+const availableCurrencies = ref<string[]>(['sat'])
+const availableZones = ref<Zone[]>([])
+const countries = ref([
+  'Free (digital)', 'Worldwide', 'Europe', 'Australia', 'Austria', 'Belgium', 'Brazil', 'Canada',
+  'Denmark', 'Finland', 'France', 'Germany', 'Greece', 'Hong Kong', 'Hungary',
+  'Ireland', 'Indonesia', 'Israel', 'Italy', 'Japan', 'Kazakhstan', 'Korea',
+  'Luxembourg', 'Malaysia', 'Mexico', 'Netherlands', 'New Zealand', 'Norway',
+  'Poland', 'Portugal', 'Romania', 'Russia', 'Saudi Arabia', 'Singapore',
+  'Spain', 'Sweden', 'Switzerland', 'Thailand', 'Turkey', 'Ukraine',
+  'United Kingdom', 'United States', 'Vietnam', 'China'
+])
+
+// Product management state
+const stallProducts = ref<Product[]>([])
+const isLoadingProducts = ref(false)
+const showProductDialog = ref(false)
+const isCreatingProduct = ref(false)
+const productCreateError = ref<string | null>(null)
+
+// Stall form schema
+const stallFormSchema = toTypedSchema(z.object({
+  name: z.string().min(1, "Store name is required").max(100, "Store name must be less than 100 characters"),
+  description: z.string().max(500, "Description must be less than 500 characters"),
+  currency: z.string().min(1, "Currency is required"),
+  wallet: z.string().optional(),
+  selectedZones: z.array(z.string()).min(1, "Select at least one shipping zone"),
+  newZone: z.object({
+    name: z.string().optional(),
+    cost: z.number().min(0, "Cost must be 0 or greater").optional(),
+    selectedCountries: z.array(z.string()).optional()
+  }).optional()
+}))
+
+// Product form schema
+const productFormSchema = toTypedSchema(z.object({
+  name: z.string().min(1, "Product name is required").max(100, "Product name must be less than 100 characters"),
+  description: z.string().max(1000, "Description must be less than 1000 characters"),
+  price: z.number().min(0.01, "Price must be greater than 0"),
+  quantity: z.number().int().min(0, "Quantity must be 0 or greater"),
+  categories: z.array(z.string()).max(10, "Maximum 10 categories allowed"),
+  images: z.array(z.string().url("Invalid image URL")).max(5, "Maximum 5 images allowed"),
+  active: z.boolean(),
+  use_autoreply: z.boolean(),
+  autoreply_message: z.string().max(500, "Auto-reply message must be less than 500 characters")
+}))
+
+// Stall form setup with vee-validate
+const form = useForm({
+  validationSchema: stallFormSchema,
+  initialValues: {
+    name: '',
+    description: '',
+    currency: 'sat',
+    wallet: '',
+    selectedZones: [] as string[],
+    newZone: {
+      name: '',
+      cost: 0,
+      selectedCountries: [] as string[]
+    }
+  }
+})
+
+// Product form setup with vee-validate
+const productForm = useForm({
+  validationSchema: productFormSchema,
+  initialValues: {
+    name: '',
+    description: '',
+    price: 0,
+    quantity: 1,
+    categories: [] as string[],
+    images: [] as string[],
+    active: true,
+    use_autoreply: false,
+    autoreply_message: ''
+  }
+})
+
+// Destructure stall form methods for easier access
+const { setFieldValue, resetForm, values, meta, validate } = form
+
+// Destructure product form methods for easier access
+const { 
+  setFieldValue: setProductFieldValue, 
+  resetForm: resetProductForm, 
+  values: productValues, 
+  meta: productMeta, 
+  validate: validateProduct 
+} = productForm
+
+// Helper function to get field values safely
+const getFieldValue = (fieldName: string) => {
+  return fieldName.split('.').reduce((obj, key) => obj?.[key], values)
+}
+
+// Stall form validation computed
+const isFormValid = computed(() => {
+  return meta.value.valid
+})
+
+// Product form validation computed
+const isProductFormValid = computed(() => {
+  return productMeta.value.valid
+})
+
+// Stall form submit handler
+const onSubmit = form.handleSubmit(async (values) => {
+  await createStall(values)
+})
+
+// Product form submit handler
+const onProductSubmit = productForm.handleSubmit(async (values) => {
+  await createProduct(values)
+})
+
+// Computed properties
+const userHasMerchantProfile = computed(() => {
+  // Use the actual API response to determine if user has merchant profile
+  return merchantProfile.value !== null
+})
+
+const userHasStalls = computed(() => {
+  return userStalls.value.length > 0
+})
+
+
+const incomingOrders = computed(() => {
+  // Filter orders to only show those where the current user is the seller
+  const currentUserPubkey = auth.currentUser?.value?.pubkey
+  if (!currentUserPubkey) return []
+  
+  return Object.values(marketStore.orders)
+    .filter(order => order.sellerPubkey === currentUserPubkey && order.status === 'pending')
+    .sort((a, b) => b.createdAt - a.createdAt)
+})
+
+const storeStats = computed(() => {
+  const currentUserPubkey = auth.currentUser?.value?.pubkey
+  if (!currentUserPubkey) {
+    return {
+      incomingOrders: 0,
+      pendingOrders: 0,
+      paidOrders: 0,
+      totalSales: 0,
+      totalProducts: 0,
+      activeProducts: 0,
+      satisfaction: 0,
+      totalReviews: 0
+    }
+  }
+  
+  // Filter orders to only count those where current user is the seller
+  const myOrders = Object.values(marketStore.orders).filter(o => o.sellerPubkey === currentUserPubkey)
+  const now = Date.now() / 1000
+  const thirtyDaysAgo = now - (30 * 24 * 60 * 60)
+
+  return {
+    incomingOrders: myOrders.filter(o => o.status === 'pending').length,
+    pendingOrders: myOrders.filter(o => o.status === 'pending').length,
+    paidOrders: myOrders.filter(o => o.status === 'paid').length,
+    totalSales: myOrders
+      .filter(o => o.status === 'paid' && o.createdAt > thirtyDaysAgo)
+      .reduce((sum, o) => sum + o.total, 0),
+    totalProducts: 0, // TODO: Implement product management
+    activeProducts: 0, // TODO: Implement product management
+    satisfaction: userHasStalls.value ? 95 : 0, // TODO: Implement review system
+    totalReviews: 0 // TODO: Implement review system
+  }
+})
+
+// Methods
+const formatDate = (timestamp: number) => {
+  return new Date(timestamp * 1000).toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+}
+
+const formatStatus = (status: OrderStatus) => {
+  const statusMap: Record<OrderStatus, string> = {
+    pending: 'Pending',
+    paid: 'Paid',
+    processing: 'Processing',
+    shipped: 'Shipped',
+    delivered: 'Delivered',
+    cancelled: 'Cancelled'
+  }
+  return statusMap[status] || status
+}
+
+const getStatusVariant = (status: OrderStatus) => {
+  const variantMap: Record<OrderStatus, 'default' | 'secondary' | 'outline' | 'destructive'> = {
+    pending: 'outline',
+    paid: 'secondary',
+    processing: 'secondary',
+    shipped: 'default',
+    delivered: 'default',
+    cancelled: 'destructive'
+  }
+  return variantMap[status] || 'outline'
+}
+
+const formatPrice = (price: number, currency: string) => {
+  return marketStore.formatPrice(price, currency)
+}
+
+const generateInvoice = async (orderId: string) => {
+  console.log('Generating invoice for order:', orderId)
+  isGeneratingInvoice.value = orderId
+  
+  try {
+    // Get the order from the store
+    const order = marketStore.orders[orderId]
+    if (!order) {
+      throw new Error('Order not found')
+    }
+
+    // Temporary fix: If buyerPubkey is missing, try to get it from auth
+    if (!order.buyerPubkey && auth.currentUser?.value?.pubkey) {
+      console.log('Fixing missing buyerPubkey for existing order')
+      marketStore.updateOrder(order.id, { buyerPubkey: auth.currentUser.value.pubkey })
+    }
+
+    // Temporary fix: If sellerPubkey is missing, use current user's pubkey
+    if (!order.sellerPubkey && auth.currentUser?.value?.pubkey) {
+      console.log('Fixing missing sellerPubkey for existing order')
+      marketStore.updateOrder(order.id, { sellerPubkey: auth.currentUser.value.pubkey })
+    }
+
+    // Get the updated order
+    const updatedOrder = marketStore.orders[orderId]
+
+    console.log('Order details for invoice generation:', {
+      orderId: updatedOrder.id,
+      orderFields: Object.keys(updatedOrder),
+      buyerPubkey: updatedOrder.buyerPubkey,
+      sellerPubkey: updatedOrder.sellerPubkey,
+      status: updatedOrder.status,
+      total: updatedOrder.total
+    })
+
+    // Get the user's wallet list
+    const userWallets = auth.currentUser?.value?.wallets || []
+    console.log('Available wallets:', userWallets)
+    
+    if (userWallets.length === 0) {
+      throw new Error('No wallet available to generate invoice. Please ensure you have at least one wallet configured.')
+    }
+
+    // Use the first available wallet for invoice generation
+    const walletId = userWallets[0].id
+    const walletName = userWallets[0].name
+    const adminKey = userWallets[0].adminkey
+    console.log('Using wallet for invoice generation:', { walletId, walletName, balance: userWallets[0].balance_msat })
+    
+    const invoice = await marketStore.createLightningInvoice(orderId, adminKey)
+    
+    if (invoice) {
+      console.log('Lightning invoice created:', invoice)
+      
+      // Send the invoice to the customer via Nostr
+      await sendInvoiceToCustomer(updatedOrder, invoice)
+      
+      console.log('Invoice sent to customer successfully')
+      
+      // Show success message (you could add a toast notification here)
+      alert(`Invoice generated successfully using wallet: ${walletName}`)
+    } else {
+      throw new Error('Failed to create Lightning invoice')
+    }
+  } catch (error) {
+    console.error('Failed to generate invoice:', error)
+    const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred'
+    
+    // Show error message to user
+    alert(`Failed to generate invoice: ${errorMessage}`)
+  } finally {
+    isGeneratingInvoice.value = null
+  }
+}
+
+const sendInvoiceToCustomer = async (order: any, invoice: any) => {
+  try {
+    console.log('Sending invoice to customer for order:', {
+      orderId: order.id,
+      buyerPubkey: order.buyerPubkey,
+      sellerPubkey: order.sellerPubkey,
+      invoiceFields: Object.keys(invoice)
+    })
+
+    // Check if we have the buyer's public key
+    if (!order.buyerPubkey) {
+      console.error('Missing buyerPubkey in order:', order)
+      throw new Error('Cannot send invoice: buyer public key not found')
+    }
+
+    // Update the order with the invoice details
+    const updatedOrder = {
+      ...order,
+      lightningInvoice: invoice,
+      paymentHash: invoice.payment_hash,
+      paymentStatus: 'pending',
+      paymentRequest: invoice.bolt11, // Use bolt11 field from LNBits response
+      updatedAt: Math.floor(Date.now() / 1000)
+    }
+
+    // Update the order in the store
+    marketStore.updateOrder(order.id, updatedOrder)
+
+    // Send the updated order to the customer via Nostr
+    // This will include the invoice information
+    await nostrmarketService.publishOrder(updatedOrder, order.buyerPubkey)
+    
+    console.log('Updated order with invoice sent via Nostr to customer:', order.buyerPubkey)
+  } catch (error) {
+    console.error('Failed to send invoice to customer:', error)
+    throw error
+  }
+}
+
+const viewOrderDetails = (orderId: string) => {
+  // TODO: Navigate to detailed order view
+  console.log('Viewing order details:', orderId)
+}
+
+const processOrder = (orderId: string) => {
+  // TODO: Implement order processing
+  console.log('Processing order:', orderId)
+}
+
+const createMerchantProfile = async () => {
+  const currentUser = auth.currentUser?.value
+  if (!currentUser) {
+    console.error('No authenticated user for merchant creation')
+    return
+  }
+  
+  const userWallets = currentUser.wallets || []
+  if (userWallets.length === 0) {
+    console.error('No wallets available for merchant creation')
+    toast.error('No wallet available. Please ensure you have at least one wallet configured.')
+    return
+  }
+  
+  const wallet = userWallets[0] // Use first wallet
+  if (!wallet.adminkey) {
+    console.error('Wallet missing admin key for merchant creation')
+    toast.error('Wallet missing admin key. Admin key is required to create merchant profiles.')
+    return
+  }
+  
+  isCreatingMerchant.value = true
+  merchantCreateError.value = null
+  
+  try {
+    console.log('Creating merchant profile...', {
+      walletId: wallet.id,
+      adminKeyLength: wallet.adminkey.length,
+      adminKeyPreview: wallet.adminkey.substring(0, 8) + '...'
+    })
+    
+    // Create merchant with empty config, exactly like the nostrmarket extension
+    const merchantData = {
+      config: {}
+    }
+    
+    const newMerchant = await nostrmarketAPI.createMerchant(wallet.adminkey, merchantData)
+    
+    console.log('Merchant profile created successfully:', {
+      merchantId: newMerchant.id,
+      publicKey: newMerchant.public_key
+    })
+    
+    // Update local state
+    merchantProfile.value = newMerchant
+    
+    // Show success message
+    toast.success('Merchant profile created successfully! You can now create your first store.')
+    
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : 'Failed to create merchant profile'
+    console.error('Error creating merchant profile:', error)
+    merchantCreateError.value = errorMessage
+    
+    // Show error to user
+    toast.error(`Failed to create merchant profile: ${errorMessage}`)
+  } finally {
+    isCreatingMerchant.value = false
+  }
+}
+
+const initializeStallCreation = async () => {
+  const currentUser = auth.currentUser?.value
+  if (!currentUser?.wallets?.length) {
+    toast.error('No wallets available')
+    return
+  }
+  
+  // Reset form to initial state first
+  resetForm({
+    values: {
+      name: '',
+      description: '',
+      currency: 'sat',  
+      wallet: currentUser.wallets[0].id,
+      selectedZones: [],
+      newZone: {
+        name: '',
+        cost: 0,
+        selectedCountries: []
+      }
+    },
+    errors: {},
+    touched: {},
+    initialValues: {
+      name: '',
+      description: '',
+      currency: 'sat',
+      wallet: currentUser.wallets[0].id,
+      selectedZones: [],
+      newZone: {
+        name: '',
+        cost: 0,
+        selectedCountries: []
+      }
+    }
+  })
+  
+  // Wait for Vue's reactivity to update
+  await nextTick()
+  
+  // Force complete dialog re-render  
+  dialogKey.value++
+  formKey.value++
+  
+  // Clear any previous errors
+  stallCreateError.value = null
+  
+  // Load currencies and zones
+  await Promise.all([
+    loadAvailableCurrencies(),
+    loadAvailableZones()
+  ])
+  
+  // Trigger validation after data is loaded to ensure form state is correct
+  await validate()
+  
+  showStallDialog.value = true
+}
+
+const loadAvailableCurrencies = async () => {
+  try {
+    const currencies = await nostrmarketAPI.getCurrencies()
+    availableCurrencies.value = currencies
+  } catch (error) {
+    console.error('Failed to load currencies:', error)
+    // Keep default 'sat'
+  }
+}
+
+const loadAvailableZones = async () => {
+  const currentUser = auth.currentUser?.value
+  if (!currentUser?.wallets?.length) return
+  
+  try {
+    const zones = await nostrmarketAPI.getZones(currentUser.wallets[0].inkey)
+    availableZones.value = zones
+    
+    // Auto-select the first available zone to make form valid
+    if (zones.length > 0) {
+      const currentSelectedZones = getFieldValue('selectedZones') || []
+      if (currentSelectedZones.length === 0) {
+        setFieldValue('selectedZones', [zones[0].id])
+      }
+    }
+  } catch (error) {
+    console.error('Failed to load zones:', error)
+  }
+}
+
+const loadStallsList = async () => {
+  const currentUser = auth.currentUser?.value
+  
+  if (!currentUser?.wallets?.length) {
+    return
+  }
+  
+  isLoadingStalls.value = true
+  try {
+    const stalls = await nostrmarketAPI.getStalls(currentUser.wallets[0].inkey)
+    userStalls.value = stalls || []
+    
+    // If there are stalls but no active one selected, select the first
+    if (stalls?.length > 0 && !activeStallId.value) {
+      activeStallId.value = stalls[0].id
+    }
+  } catch (error) {
+    console.error('Failed to load stalls:', error)
+    userStalls.value = []
+  } finally {
+    isLoadingStalls.value = false
+  }
+}
+
+const addNewZone = async () => {
+  const currentUser = auth.currentUser?.value
+  if (!currentUser?.wallets?.length) {
+    toast.error('No wallets available')
+    return
+  }
+
+  const newZone = getFieldValue('newZone')
+  
+  if (!newZone?.name || !newZone.selectedCountries?.length || (newZone.cost ?? -1) < 0) {
+    toast.error('Please fill in all zone details')
+    return
+  }
+
+  try {
+    const createdZone = await nostrmarketAPI.createZone(
+      currentUser.wallets[0].adminkey,
+      {
+        name: newZone.name,
+        currency: getFieldValue('currency'),
+        cost: newZone.cost,
+        countries: newZone.selectedCountries
+      }
+    )
+    
+    // Add to available zones and select it
+    availableZones.value.push(createdZone)
+    const currentSelectedZones = getFieldValue('selectedZones') || []
+    setFieldValue('selectedZones', [...currentSelectedZones, createdZone.id])
+    
+    // Reset the new zone form
+    setFieldValue('newZone', {
+      name: '',
+      cost: 0,
+      selectedCountries: []
+    })
+    
+    toast.success(`Zone "${newZone.name}" created successfully`)
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : 'Failed to create zone'
+    toast.error(`Failed to create zone: ${errorMessage}`)
+  }
+}
+
+
+const createStall = async (formData: any) => {
+  const currentUser = auth.currentUser?.value
+  if (!currentUser?.wallets?.length) {
+    toast.error('No wallets available')
+    return
+  }
+
+  const { name, description, currency, selectedZones } = formData
+
+  isCreatingStall.value = true
+  stallCreateError.value = null
+
+  try {
+    // Get the selected zones data
+    const selectedZoneData = availableZones.value.filter(zone => 
+      selectedZones.includes(zone.id)
+    )
+
+    const stallData: CreateStallRequest = {
+      name,
+      wallet: currentUser.wallets[0].id,
+      currency,
+      shipping_zones: selectedZoneData,
+      config: {
+        description: description || ''
+      }
+    }
+
+    const newStall = await nostrmarketAPI.createStall(
+      currentUser.wallets[0].adminkey,
+      stallData
+    )
+
+    // Update stalls list
+    await loadStallsList()
+    
+    // Reset form and close dialog using standard Shadcn pattern
+    resetForm({
+      values: {
+        name: '',
+        description: '',
+        currency: 'sat',
+        wallet: currentUser.wallets[0].id,
+        selectedZones: [],
+        newZone: {
+          name: '',
+          cost: 0,
+          selectedCountries: []
+        }
+      },
+      errors: {},
+      touched: {},
+      initialValues: {
+        name: '',
+        description: '',
+        currency: 'sat',
+        wallet: currentUser.wallets[0].id,
+        selectedZones: [],
+        newZone: {
+          name: '',
+          cost: 0,
+          selectedCountries: []
+        }
+      }
+    })
+    
+    // Force complete dialog re-render
+    dialogKey.value++
+    formKey.value++
+    
+    showStallDialog.value = false
+    
+    toast.success('Store created successfully! You can now add products.')
+
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : 'Failed to create store'
+    console.error('Error creating stall:', error)
+    stallCreateError.value = errorMessage
+    toast.error(`Failed to create store: ${errorMessage}`)
+  } finally {
+    isCreatingStall.value = false
+  }
+}
+
+// Missing functions for stall management
+const manageStall = (stallId: string) => {
+  console.log('Managing stall:', stallId)
+  // Set as active stall for the dashboard view
+  activeStallId.value = stallId
+}
+
+const viewStallProducts = (stallId: string) => {
+  console.log('Viewing products for stall:', stallId)
+  // TODO: Navigate to products view for specific stall
+  // For now, set as active stall and scroll to products section
+  activeStallId.value = stallId
+}
+
+const closeStallDialog = () => {
+  // Reset form and clear errors when closing the dialog
+  stallCreateError.value = null
+  showStallDialog.value = false
+}
+
+const navigateToMarket = () => router.push('/market')
+const viewAllOrders = () => router.push('/market-dashboard?tab=orders')
+const generateBulkInvoices = () => console.log('Generate bulk invoices')
+const exportOrders = () => console.log('Export orders')
+const manageProducts = () => console.log('Manage products')
+const storeSettings = () => router.push('/market-dashboard?tab=settings')
+const analytics = () => console.log('View analytics')
+
+const getFirstWalletName = () => {
+  const userWallets = auth.currentUser?.value?.wallets || []
+  if (userWallets.length > 0) {
+    return userWallets[0].name
+  }
+  return 'N/A'
+}
+
+// Methods
+const checkMerchantProfile = async () => {
+  const currentUser = auth.currentUser?.value
+  if (!currentUser) return
+  
+  const userWallets = currentUser.wallets || []
+  if (userWallets.length === 0) {
+    console.warn('No wallets available for merchant check')
+    return
+  }
+  
+  const wallet = userWallets[0] // Use first wallet
+  if (!wallet.inkey) {
+    console.warn('Wallet missing invoice key for merchant check')
+    return
+  }
+  
+  isLoadingMerchant.value = true
+  merchantCheckError.value = null
+  
+  try {
+    console.log('Checking for merchant profile...')
+    const merchant = await nostrmarketAPI.getMerchant(wallet.inkey)
+    merchantProfile.value = merchant
+    
+    console.log('Merchant profile check result:', {
+      hasMerchant: !!merchant,
+      merchantId: merchant?.id,
+      active: merchant?.config?.active
+    })
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : 'Failed to check merchant profile'
+    console.error('Error checking merchant profile:', error)
+    merchantCheckError.value = errorMessage
+    merchantProfile.value = null
+  } finally {
+    isLoadingMerchant.value = false
+  }
+}
+
+// Product management functions
+const loadStallProducts = async () => {
+  if (!activeStall.value) return
+  
+  const currentUser = auth.currentUser?.value
+  if (!currentUser?.wallets?.length) return
+  
+  isLoadingProducts.value = true
+  try {
+    const products = await nostrmarketAPI.getProducts(
+      currentUser.wallets[0].inkey, 
+      activeStall.value.id
+    )
+    stallProducts.value = products || []
+  } catch (error) {
+    console.error('Failed to load products:', error)
+    stallProducts.value = []
+  } finally {
+    isLoadingProducts.value = false
+  }
+}
+
+const addProduct = () => {
+  if (!activeStall.value) return
+  // Reset product form to initial state
+  resetProductForm()
+  showProductDialog.value = true
+}
+
+const createProduct = async (formData: any) => {
+  const currentUser = auth.currentUser?.value
+  if (!currentUser?.wallets?.length || !activeStall.value) {
+    toast.error('No active store or wallets available')
+    return
+  }
+
+  const { 
+    name, 
+    description, 
+    price, 
+    quantity, 
+    categories, 
+    images, 
+    active, 
+    use_autoreply, 
+    autoreply_message 
+  } = formData
+
+  isCreatingProduct.value = true
+  productCreateError.value = null
+
+  try {
+    const productData: CreateProductRequest = {
+      stall_id: activeStall.value.id,
+      name,
+      categories: categories || [],
+      images: images || [],
+      price: Number(price),
+      quantity: Number(quantity),
+      active,
+      config: {
+        description: description || '',
+        currency: activeStall.value.currency,
+        use_autoreply,
+        autoreply_message: use_autoreply ? autoreply_message || '' : '',
+        shipping: [] // Will be populated from shipping zones if needed
+      }
+    }
+
+    const newProduct = await nostrmarketAPI.createProduct(
+      currentUser.wallets[0].adminkey,
+      productData
+    )
+
+    // Refresh the products list
+    await loadStallProducts()
+    
+    // Reset form and close dialog
+    resetProductForm()
+    showProductDialog.value = false
+    
+    toast.success(`Product "${name}" created successfully!`)
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : 'Failed to create product'
+    console.error('Error creating product:', error)
+    productCreateError.value = errorMessage
+    toast.error(`Failed to create product: ${errorMessage}`)
+  } finally {
+    isCreatingProduct.value = false
+  }
+}
+
+// Lifecycle
+onMounted(async () => {
+  console.log('Merchant Store component loaded')
+  await checkMerchantProfile()
+  
+  // Load stalls if merchant profile exists
+  if (merchantProfile.value) {
+    console.log('Merchant profile exists, loading stalls...')
+    await loadStallsList()
+  } else {
+    console.log('No merchant profile found, skipping stalls loading')
+  }
+})
+
+// Watch for auth changes and re-check merchant profile
+watch(() => auth.currentUser?.value?.pubkey, async (newPubkey, oldPubkey) => {
+  if (newPubkey !== oldPubkey) {
+    console.log('User changed, re-checking merchant profile')
+    await checkMerchantProfile()
+  }
+})
+
+// Watch for active stall changes and load products
+watch(() => activeStallId.value, async (newStallId) => {
+  if (newStallId) {
+    await loadStallProducts()
+  } else {
+    stallProducts.value = []
+  }
+})
+</script>
+
diff --git a/src/modules/market/components/StoreCard.vue b/src/modules/market/components/StoreCard.vue
new file mode 100644
index 0000000..a15f9ae
--- /dev/null
+++ b/src/modules/market/components/StoreCard.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="bg-card rounded-lg border shadow-sm hover:shadow-md transition-shadow">
+    <div class="p-6">
+      <div class="flex items-start justify-between mb-4">
+        <div class="flex-1">
+          <h3 class="text-lg font-semibold text-foreground">{{ stall.name }}</h3>
+          <p class="text-sm text-muted-foreground mt-1">
+            {{ stall.config?.description || 'No description' }}
+          </p>
+        </div>
+        <Badge variant="secondary">{{ stall.currency }}</Badge>
+      </div>
+      
+      <div class="space-y-3">
+        <!-- Store Metrics -->
+        <div class="flex items-center justify-between text-sm">
+          <span class="text-muted-foreground">Products</span>
+          <span class="font-medium">{{ stall.products?.length || 0 }}</span>
+        </div>
+        <div class="flex items-center justify-between text-sm">
+          <span class="text-muted-foreground">Shipping Zones</span>
+          <span class="font-medium">{{ stall.shipping_zones?.length || 0 }}</span>
+        </div>
+        
+        <!-- Action Buttons -->
+        <div class="flex gap-2 pt-3">
+          <Button 
+            @click="$emit('manage', stall.id)" 
+            variant="default" 
+            size="sm"
+            class="flex-1"
+          >
+            <Settings class="w-4 h-4 mr-1" />
+            Manage
+          </Button>
+          <Button 
+            @click="$emit('view-products', stall.id)" 
+            variant="outline" 
+            size="sm"
+            class="flex-1"
+          >
+            <Package class="w-4 h-4 mr-1" />
+            Products
+          </Button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Settings, Package } from 'lucide-vue-next'
+import type { Stall } from '../services/nostrmarketAPI'
+
+// Props
+interface Props {
+  stall: Stall
+}
+
+defineProps<Props>()
+
+// Emits
+defineEmits<{
+  manage: [stallId: string]
+  'view-products': [stallId: string]
+}>()
+</script>
\ No newline at end of file