Implement product management features in MerchantStore component

- Add a new section for displaying products, including loading states and messages for when no products are available.
- Introduce a dialog for adding new products, with a placeholder message indicating that the product creation form is in development.
- Enhance the NostrmarketAPI with new methods for product management, including fetching, creating, updating, and deleting products.
- Implement state management for product loading and display, improving the overall user experience for merchants managing their inventory.

These changes provide a foundational structure for product management within the MerchantStore, enhancing functionality and user engagement.

src/modules/market/components/MerchantStore.vue

@@ -443,6 +443,102 @@
         </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 -->
 
@@ -660,6 +756,35 @@
       </form>
     </DialogContent>
   </Dialog>
+
+  <!-- Create Product Dialog -->
+  <Dialog v-model:open="showProductDialog">
+    <DialogContent class="sm:max-w-2xl">
+      <DialogHeader>
+        <DialogTitle>Add New Product</DialogTitle>
+      </DialogHeader>
+      
+      <div class="space-y-6 py-4">
+        <div class="text-center py-8">
+          <Package class="w-16 h-16 mx-auto mb-4 text-muted-foreground" />
+          <h3 class="text-lg font-medium text-foreground mb-2">Product Creation Coming Soon</h3>
+          <p class="text-muted-foreground">
+            We're working on the product creation form. This will allow you to add products with images, descriptions, pricing, and inventory management.
+          </p>
+        </div>
+        
+        <div class="flex justify-end space-x-2 pt-4">
+          <Button 
+            type="button"
+            @click="showProductDialog = false" 
+            variant="outline"
+          >
+            Close
+          </Button>
+        </div>
+      </div>
+    </DialogContent>
+  </Dialog>
 </template>
 
 <script setup lang="ts">
@@ -703,7 +828,7 @@ import {
 } 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 } from '../services/nostrmarketAPI'
+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'
@@ -748,6 +873,13 @@ const countries = ref([
   '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"),
@@ -1015,11 +1147,6 @@ const processOrder = (orderId: string) => {
   console.log('Processing order:', orderId)
 }
 
-const addProduct = () => {
-  // TODO: Navigate to add product form
-  console.log('Adding new product')
-}
-
 const createMerchantProfile = async () => {
   const currentUser = auth.currentUser?.value
   if (!currentUser) {
@@ -1399,6 +1526,33 @@ const checkMerchantProfile = async () => {
   }
 }
 
+// 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
+  showProductDialog.value = true
+}
+
 // Lifecycle
 onMounted(async () => {
   console.log('Merchant Store component loaded')
@@ -1420,5 +1574,14 @@ watch(() => auth.currentUser?.value?.pubkey, async (newPubkey, oldPubkey) => {
     await checkMerchantProfile()
   }
 })
+
+// Watch for active stall changes and load products
+watch(() => activeStallId.value, async (newStallId) => {
+  if (newStallId) {
+    await loadStallProducts()
+  } else {
+    stallProducts.value = []
+  }
+})
 </script>
 

src/modules/market/services/nostrmarketAPI.ts

@@ -55,6 +55,45 @@ export interface Zone {
   countries: string[]
 }
 
+export interface ProductShippingCost {
+  id: string
+  cost: number
+}
+
+export interface ProductConfig {
+  description?: string
+  currency?: string
+  use_autoreply?: boolean
+  autoreply_message?: string
+  shipping: ProductShippingCost[]
+}
+
+export interface Product {
+  id?: string
+  stall_id: string
+  name: string
+  categories: string[]
+  images: string[]
+  price: number
+  quantity: number
+  active: boolean
+  pending: boolean
+  config: ProductConfig
+  event_id?: string
+  event_created_at?: number
+}
+
+export interface CreateProductRequest {
+  stall_id: string
+  name: string
+  categories: string[]
+  images: string[]
+  price: number
+  quantity: number
+  active: boolean
+  config: ProductConfig
+}
+
 export interface CreateZoneRequest {
   name: string
   currency: string
@@ -315,4 +354,109 @@ export class NostrmarketAPI extends BaseService {
       return baseCurrencies
     }
   }
+
+  /**
+   * Get products for a stall
+   */
+  async getProducts(walletInkey: string, stallId: string, pending: boolean = false): Promise<Product[]> {
+    const products = await this.request<Product[]>(
+      `/api/v1/stall/product/${stallId}?pending=${pending}`,
+      walletInkey,
+      { method: 'GET' }
+    )
+    
+    this.debug('Retrieved products:', { 
+      stallId,
+      count: products?.length || 0,
+      pending 
+    })
+    
+    return products || []
+  }
+
+  /**
+   * Create a new product
+   */
+  async createProduct(
+    walletAdminkey: string, 
+    productData: CreateProductRequest
+  ): Promise<Product> {
+    const product = await this.request<Product>(
+      '/api/v1/product',
+      walletAdminkey,
+      {
+        method: 'POST',
+        body: JSON.stringify(productData),
+      }
+    )
+    
+    this.debug('Created product:', { 
+      productId: product.id, 
+      productName: product.name,
+      stallId: product.stall_id 
+    })
+    
+    return product
+  }
+
+  /**
+   * Update an existing product
+   */
+  async updateProduct(
+    walletAdminkey: string, 
+    productId: string,
+    productData: Product
+  ): Promise<Product> {
+    const product = await this.request<Product>(
+      `/api/v1/product/${productId}`,
+      walletAdminkey,
+      {
+        method: 'PATCH',
+        body: JSON.stringify(productData),
+      }
+    )
+    
+    this.debug('Updated product:', { 
+      productId: product.id, 
+      productName: product.name 
+    })
+    
+    return product
+  }
+
+  /**
+   * Get a single product by ID
+   */
+  async getProduct(walletInkey: string, productId: string): Promise<Product | null> {
+    try {
+      const product = await this.request<Product>(
+        `/api/v1/product/${productId}`,
+        walletInkey,
+        { method: 'GET' }
+      )
+      
+      this.debug('Retrieved product:', { 
+        productId: product?.id,
+        productName: product?.name 
+      })
+      
+      return product
+    } catch (error) {
+      this.debug('Failed to get product:', error)
+      return null
+    }
+  }
+
+  /**
+   * Delete a product
+   */
+  async deleteProduct(walletAdminkey: string, productId: string): Promise<void> {
+    await this.request<void>(
+      `/api/v1/product/${productId}`,
+      walletAdminkey,
+      { method: 'DELETE' }
+    )
+    
+    this.debug('Deleted product:', { productId })
+  }
 }