padreug/web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor MerchantStore component for improved layout and user experience

Browse source 
- Update the layout of the active store dashboard to enhance visual hierarchy and spacing.
- Improve button accessibility and responsiveness by adjusting sizes and adding conditional rendering for text.
- Refactor store stats display to use a more consistent structure, enhancing readability and alignment.
- Adjust padding and margins for better overall presentation of store information and statistics.

These changes streamline the MerchantStore interface, providing a more intuitive and visually appealing experience for users managing their stores.
This commit is contained in:
padreug 2025-09-08 23:39:13 +02:00
parent 91c3dec064
commit a5764621c2
1 changed files with 62 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

101
src/modules/market/components/MerchantStore.vue
View file

@ -101,101 +101,106 @@
<!-- Active Store Dashboard (shown when a store is selected) --> <!-- Active Store Dashboard (shown when a store is selected) -->
<div v-if="activeStall"> <div v-if="activeStall">
<!-- Header --> <!-- Header -->
<div class="flex items-center justify-between mb-6"> <div class="space-y-4 mb-6">
<div> <!-- Top row with back button and currency -->
<div class="flex items-center gap-3 mb-2"> <div class="flex items-center gap-3">
<Button @click="activeStallId = null" variant="ghost" size="sm"> <Button @click="activeStallId = null" variant="ghost" size="sm">
← Back to Stores ← Back to Stores
</Button> </Button>
<div class="h-4 w-px bg-border"></div> <div class="h-4 w-px bg-border"></div>
<Badge variant="secondary">{{ activeStall.currency }}</Badge> <Badge variant="secondary">{{ activeStall.currency }}</Badge>
</div> </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> <!-- Store info and actions -->
<div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
<div class="flex-1">
<h2 class="text-xl sm:text-2xl font-bold text-foreground">{{ activeStall.name }}</h2>
<p class="text-sm sm:text-base text-muted-foreground mt-1">{{ activeStall.config?.description || 'Manage incoming orders and your products' }}</p>
</div> </div>
<div class="flex items-center gap-3"> <div class="flex flex-col sm:flex-row gap-2 sm:gap-3">
<Button @click="navigateToMarket" variant="outline"> <Button @click="navigateToMarket" variant="outline" class="w-full sm:w-auto">
<Store class="w-4 h-4 mr-2" /> <Store class="w-4 h-4 mr-2" />
Browse Market <span class="sm:inline">Browse Market</span>
</Button> </Button>
<Button @click="showCreateProductDialog = true" variant="default"> <Button @click="showCreateProductDialog = true" variant="default" class="w-full sm:w-auto">
<Plus class="w-4 h-4 mr-2" /> <Plus class="w-4 h-4 mr-2" />
Add Product <span>Add Product</span>
</Button> </Button>
</div> </div>
</div> </div>
</div>
<!-- Store Stats --> <!-- Store Stats -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-6"> <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-6">
<!-- Incoming Orders --> <!-- Incoming Orders -->
<div class="bg-card p-6 rounded-lg border shadow-sm"> <div class="bg-card p-4 sm:p-6 rounded-lg border shadow-sm">
<div class="flex items-center justify-between"> <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
<div> <div class="flex-1">
<p class="text-sm font-medium text-muted-foreground">Incoming Orders</p> <p class="text-xs sm:text-sm font-medium text-muted-foreground">Incoming Orders</p>
<p class="text-2xl font-bold text-foreground">{{ storeStats.incomingOrders }}</p> <p class="text-xl sm:text-2xl font-bold text-foreground">{{ storeStats.incomingOrders }}</p>
</div> </div>
<div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center"> <div class="w-10 h-10 sm:w-12 sm:h-12 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0">
<Package class="w-6 h-6 text-primary" /> <Package class="w-5 h-5 sm:w-6 sm:h-6 text-primary" />
</div> </div>
</div> </div>
<div class="mt-4"> <div class="mt-3 sm:mt-4">
<div class="flex items-center text-sm text-muted-foreground"> <div class="flex flex-wrap items-center text-xs sm:text-sm text-muted-foreground gap-1">
<span>{{ storeStats.pendingOrders }} pending</span> <span>{{ storeStats.pendingOrders }} pending</span>
<span class="mx-2">•</span> <span class="hidden sm:inline mx-1">•</span>
<span>{{ storeStats.paidOrders }} paid</span> <span>{{ storeStats.paidOrders }} paid</span>
</div> </div>
</div> </div>
</div> </div>
<!-- Total Sales --> <!-- Total Sales -->
<div class="bg-card p-6 rounded-lg border shadow-sm"> <div class="bg-card p-4 sm:p-6 rounded-lg border shadow-sm">
<div class="flex items-center justify-between"> <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
<div> <div class="flex-1">
<p class="text-sm font-medium text-muted-foreground">Total Sales</p> <p class="text-xs sm:text-sm font-medium text-muted-foreground">Total Sales</p>
<p class="text-2xl font-bold text-foreground">{{ formatPrice(storeStats.totalSales, 'sat') }}</p> <p class="text-xl sm:text-2xl font-bold text-foreground">{{ formatPrice(storeStats.totalSales, 'sat') }}</p>
</div> </div>
<div class="w-12 h-12 bg-green-500/10 rounded-lg flex items-center justify-center"> <div class="w-10 h-10 sm:w-12 sm:h-12 bg-green-500/10 rounded-lg flex items-center justify-center flex-shrink-0">
<DollarSign class="w-6 h-6 text-green-500" /> <DollarSign class="w-5 h-5 sm:w-6 sm:h-6 text-green-500" />
</div> </div>
</div> </div>
<div class="mt-4"> <div class="mt-3 sm:mt-4">
<div class="flex items-center text-sm text-muted-foreground"> <div class="flex items-center text-xs sm:text-sm text-muted-foreground">
<span>Last 30 days</span> <span>Last 30 days</span>
</div> </div>
</div> </div>
</div> </div>
<!-- Products --> <!-- Products -->
<div class="bg-card p-6 rounded-lg border shadow-sm"> <div class="bg-card p-4 sm:p-6 rounded-lg border shadow-sm">
<div class="flex items-center justify-between"> <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
<div> <div class="flex-1">
<p class="text-sm font-medium text-muted-foreground">Products</p> <p class="text-xs sm:text-sm font-medium text-muted-foreground">Products</p>
<p class="text-2xl font-bold text-foreground">{{ stallProducts.length }}</p> <p class="text-xl sm:text-2xl font-bold text-foreground">{{ stallProducts.length }}</p>
</div> </div>
<div class="w-12 h-12 bg-purple-500/10 rounded-lg flex items-center justify-center"> <div class="w-10 h-10 sm:w-12 sm:h-12 bg-purple-500/10 rounded-lg flex items-center justify-center flex-shrink-0">
<Store class="w-6 h-6 text-purple-500" /> <Store class="w-5 h-5 sm:w-6 sm:h-6 text-purple-500" />
</div> </div>
</div> </div>
<div class="mt-4"> <div class="mt-3 sm:mt-4">
<div class="flex items-center text-sm text-muted-foreground"> <div class="flex items-center text-xs sm:text-sm text-muted-foreground">
<span>{{ stallProducts.filter(p => p.active).length }} active</span> <span>{{ stallProducts.filter(p => p.active).length }} active</span>
</div> </div>
</div> </div>
</div> </div>
<!-- Customer Satisfaction --> <!-- Customer Satisfaction -->
<div class="bg-card p-6 rounded-lg border shadow-sm"> <div class="bg-card p-4 sm:p-6 rounded-lg border shadow-sm">
<div class="flex items-center justify-between"> <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
<div> <div class="flex-1">
<p class="text-sm font-medium text-muted-foreground">Satisfaction</p> <p class="text-xs sm:text-sm font-medium text-muted-foreground">Satisfaction</p>
<p class="text-2xl font-bold text-foreground">{{ storeStats.satisfaction }}%</p> <p class="text-xl sm:text-2xl font-bold text-foreground">{{ storeStats.satisfaction }}%</p>
</div> </div>
<div class="w-12 h-12 bg-yellow-500/10 rounded-lg flex items-center justify-center"> <div class="w-10 h-10 sm:w-12 sm:h-12 bg-yellow-500/10 rounded-lg flex items-center justify-center flex-shrink-0">
<Star class="w-6 h-6 text-yellow-500" /> <Star class="w-5 h-5 sm:w-6 sm:h-6 text-yellow-500" />
</div> </div>
</div> </div>
<div class="mt-4"> <div class="mt-3 sm:mt-4">
<div class="flex items-center text-sm text-muted-foreground"> <div class="flex items-center text-xs sm:text-sm text-muted-foreground">
<span>{{ storeStats.totalReviews }} reviews</span> <span>{{ storeStats.totalReviews }} reviews</span>
</div> </div>
</div> </div>