Compare commits
22 commits
f62cb87445
...
d91b4a50d5
| Author | SHA1 | Date | |
|---|---|---|---|
| d91b4a50d5 | |||
| c8ef436c3c | |||
|
b49acf3206 | ||
|
|
7f4b1f1e9e | ||
|
|
718212668a | ||
|
|
4aa18a2705 | ||
|
|
6e2df155c4 | ||
|
|
e653ff6d0a | ||
|
|
f8f0631421 | ||
|
|
e947768407 | ||
|
|
f7e7ee49c4 | ||
|
|
4391a658d3 | ||
|
|
c74ceaaf85 | ||
|
|
8def8484b5 | ||
|
|
624eff12ea | ||
|
|
464f6ae98c | ||
|
|
9c8abe2f5c | ||
|
|
43c762fdf9 | ||
|
|
8315a8ee99 | ||
|
|
c0840912c7 | ||
|
|
e533eafa89 | ||
|
|
078220c2f0 |
7 changed files with 502 additions and 829 deletions
|
|
@ -47,14 +47,10 @@
|
||||||
<FormField v-slot="{ componentField }" name="currency">
|
<FormField v-slot="{ componentField }" name="currency">
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>Currency *</FormLabel>
|
<FormLabel>Currency *</FormLabel>
|
||||||
<Select
|
<Select :disabled="isCreating" v-bind="componentField">
|
||||||
:key="`currency-select-${availableCurrencies.length}`"
|
|
||||||
:disabled="isCreating || isLoadingCurrencies"
|
|
||||||
v-bind="componentField"
|
|
||||||
>
|
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<SelectTrigger class="w-full">
|
<SelectTrigger class="w-full">
|
||||||
<SelectValue :placeholder="isLoadingCurrencies ? 'Loading...' : 'Select currency'" />
|
<SelectValue placeholder="Select currency" />
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<SelectContent>
|
<SelectContent>
|
||||||
|
|
@ -279,7 +275,6 @@ const toast = useToast()
|
||||||
// Local state
|
// Local state
|
||||||
const isCreating = ref(false)
|
const isCreating = ref(false)
|
||||||
const createError = ref<string | null>(null)
|
const createError = ref<string | null>(null)
|
||||||
const isLoadingCurrencies = ref(false)
|
|
||||||
const availableCurrencies = ref<string[]>(['sat'])
|
const availableCurrencies = ref<string[]>(['sat'])
|
||||||
const availableZones = ref<Zone[]>([])
|
const availableZones = ref<Zone[]>([])
|
||||||
const showNewZoneForm = ref(false)
|
const showNewZoneForm = ref(false)
|
||||||
|
|
@ -336,27 +331,11 @@ const onSubmit = form.handleSubmit(async (values) => {
|
||||||
|
|
||||||
// Methods
|
// Methods
|
||||||
const loadAvailableCurrencies = async () => {
|
const loadAvailableCurrencies = async () => {
|
||||||
isLoadingCurrencies.value = true
|
|
||||||
try {
|
try {
|
||||||
const currencies = await nostrmarketAPI.getCurrencies()
|
const currencies = await nostrmarketAPI.getCurrencies()
|
||||||
if (currencies.length > 0) {
|
|
||||||
// Ensure 'sat' is always first in the list
|
|
||||||
const satIndex = currencies.indexOf('sat')
|
|
||||||
if (satIndex === -1) {
|
|
||||||
// Add 'sat' at the beginning if not present
|
|
||||||
availableCurrencies.value = ['sat', ...currencies]
|
|
||||||
} else if (satIndex > 0) {
|
|
||||||
// Move 'sat' to the beginning if present but not first
|
|
||||||
const withoutSat = currencies.filter(c => c !== 'sat')
|
|
||||||
availableCurrencies.value = ['sat', ...withoutSat]
|
|
||||||
} else {
|
|
||||||
availableCurrencies.value = currencies
|
availableCurrencies.value = currencies
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Failed to load currencies:', error)
|
console.error('Failed to load currencies:', error)
|
||||||
} finally {
|
|
||||||
isLoadingCurrencies.value = false
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -77,6 +77,77 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Quick Actions -->
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<!-- Customer Actions -->
|
||||||
|
<div class="bg-card p-6 rounded-lg border shadow-sm">
|
||||||
|
<h3 class="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
|
||||||
|
<ShoppingCart class="w-5 h-5 text-primary" />
|
||||||
|
Customer Actions
|
||||||
|
</h3>
|
||||||
|
<div class="space-y-3">
|
||||||
|
<Button
|
||||||
|
@click="navigateToMarket"
|
||||||
|
variant="default"
|
||||||
|
class="w-full justify-start"
|
||||||
|
>
|
||||||
|
<Store class="w-4 h-4 mr-2" />
|
||||||
|
Browse Market
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
@click="navigateToOrders"
|
||||||
|
variant="outline"
|
||||||
|
class="w-full justify-start"
|
||||||
|
>
|
||||||
|
<Package class="w-4 h-4 mr-2" />
|
||||||
|
View All Orders
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
@click="navigateToCart"
|
||||||
|
variant="outline"
|
||||||
|
class="w-full justify-start"
|
||||||
|
>
|
||||||
|
<ShoppingCart class="w-4 h-4 mr-2" />
|
||||||
|
Shopping Cart
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Merchant Actions -->
|
||||||
|
<div class="bg-card p-6 rounded-lg border shadow-sm">
|
||||||
|
<h3 class="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
|
||||||
|
<Store class="w-5 h-5 text-green-500" />
|
||||||
|
Merchant Actions
|
||||||
|
</h3>
|
||||||
|
<div class="space-y-3">
|
||||||
|
<Button
|
||||||
|
@click="navigateToStore"
|
||||||
|
variant="default"
|
||||||
|
class="w-full justify-start"
|
||||||
|
>
|
||||||
|
<Store class="w-4 h-4 mr-2" />
|
||||||
|
Manage Store
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
@click="navigateToProducts"
|
||||||
|
variant="outline"
|
||||||
|
class="w-full justify-start"
|
||||||
|
>
|
||||||
|
<Package class="w-4 h-4 mr-2" />
|
||||||
|
Manage Products
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
@click="navigateToOrders"
|
||||||
|
variant="outline"
|
||||||
|
class="w-full justify-start"
|
||||||
|
>
|
||||||
|
<Package class="w-4 h-4 mr-2" />
|
||||||
|
View Orders
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Recent Activity -->
|
<!-- Recent Activity -->
|
||||||
<div class="bg-card p-6 rounded-lg border shadow-sm">
|
<div class="bg-card p-6 rounded-lg border shadow-sm">
|
||||||
<h3 class="text-lg font-semibold text-foreground mb-4">Recent Activity</h3>
|
<h3 class="text-lg font-semibold text-foreground mb-4">Recent Activity</h3>
|
||||||
|
|
@ -145,12 +216,15 @@
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed, ref, onMounted } from 'vue'
|
import { computed, ref, onMounted } from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
import { useAuth } from '@/composables/useAuthService'
|
import { useAuth } from '@/composables/useAuthService'
|
||||||
import { useMarket } from '../composables/useMarket'
|
import { useMarket } from '../composables/useMarket'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
import { Badge } from '@/components/ui/badge'
|
import { Badge } from '@/components/ui/badge'
|
||||||
import {
|
import {
|
||||||
Package,
|
Package,
|
||||||
Store,
|
Store,
|
||||||
|
ShoppingCart,
|
||||||
DollarSign,
|
DollarSign,
|
||||||
BarChart3,
|
BarChart3,
|
||||||
Clock
|
Clock
|
||||||
|
|
@ -159,6 +233,7 @@ import type { OrderApiResponse, NostrmarketAPI } from '../services/nostrmarketAP
|
||||||
import { injectService, SERVICE_TOKENS } from '@/core/di-container'
|
import { injectService, SERVICE_TOKENS } from '@/core/di-container'
|
||||||
import type { PaymentService } from '@/core/services/PaymentService'
|
import type { PaymentService } from '@/core/services/PaymentService'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
const auth = useAuth()
|
const auth = useAuth()
|
||||||
const { isConnected } = useMarket()
|
const { isConnected } = useMarket()
|
||||||
const nostrmarketAPI = injectService(SERVICE_TOKENS.NOSTRMARKET_API) as NostrmarketAPI
|
const nostrmarketAPI = injectService(SERVICE_TOKENS.NOSTRMARKET_API) as NostrmarketAPI
|
||||||
|
|
@ -266,6 +341,12 @@ const getActivityVariant = (type: string) => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const navigateToMarket = () => router.push('/market')
|
||||||
|
const navigateToOrders = () => router.push('/market-dashboard?tab=orders')
|
||||||
|
const navigateToCart = () => router.push('/cart')
|
||||||
|
const navigateToStore = () => router.push('/market-dashboard?tab=store')
|
||||||
|
const navigateToProducts = () => router.push('/market-dashboard?tab=store')
|
||||||
|
|
||||||
// Load orders when component mounts
|
// Load orders when component mounts
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
fetchOrders()
|
fetchOrders()
|
||||||
|
|
|
||||||
|
|
@ -2,518 +2,331 @@
|
||||||
<div class="space-y-6">
|
<div class="space-y-6">
|
||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
<div>
|
<div>
|
||||||
<h2 class="text-2xl font-bold text-foreground">Store Settings</h2>
|
<h2 class="text-2xl font-bold text-foreground">Market Settings</h2>
|
||||||
<p class="text-muted-foreground mt-1">Configure your store information</p>
|
<p class="text-muted-foreground mt-1">Configure your store and market preferences</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Loading State -->
|
<!-- Settings Tabs -->
|
||||||
<div v-if="isLoading" class="flex justify-center py-12">
|
<div class="border-b border-border">
|
||||||
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
|
<nav class="flex space-x-8">
|
||||||
|
<button
|
||||||
|
v-for="tab in settingsTabs"
|
||||||
|
:key="tab.id"
|
||||||
|
@click="activeSettingsTab = tab.id"
|
||||||
|
:class="[
|
||||||
|
'py-2 px-1 border-b-2 font-medium text-sm transition-colors',
|
||||||
|
activeSettingsTab === tab.id
|
||||||
|
? 'border-primary text-primary'
|
||||||
|
: 'border-transparent text-muted-foreground hover:text-foreground hover:border-muted-foreground'
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
{{ tab.name }}
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- No Store State -->
|
<!-- Settings Content -->
|
||||||
<div v-else-if="!currentStall" class="text-center py-12">
|
<div class="min-h-[500px]">
|
||||||
<div class="w-16 h-16 bg-muted rounded-full flex items-center justify-center mx-auto mb-4">
|
<!-- Store Settings Tab -->
|
||||||
<Store class="w-8 h-8 text-muted-foreground" />
|
<div v-if="activeSettingsTab === 'store'" class="space-y-6">
|
||||||
</div>
|
|
||||||
<h3 class="text-lg font-medium text-foreground mb-2">No Store Found</h3>
|
|
||||||
<p class="text-muted-foreground">
|
|
||||||
Create a store first to manage its settings
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Store Settings Form -->
|
|
||||||
<div v-else class="space-y-6">
|
|
||||||
<!-- Store Information -->
|
|
||||||
<div class="bg-card p-6 rounded-lg border shadow-sm">
|
<div class="bg-card p-6 rounded-lg border shadow-sm">
|
||||||
<h3 class="text-lg font-semibold text-foreground mb-4">Store Information</h3>
|
<h3 class="text-lg font-semibold text-foreground mb-4">Store Information</h3>
|
||||||
<form @submit="onSubmit" class="space-y-4">
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
<FormField v-slot="{ componentField }" name="name">
|
<div>
|
||||||
<FormItem>
|
<label class="block text-sm font-medium text-foreground mb-2">Store Name</label>
|
||||||
<FormLabel>Store Name *</FormLabel>
|
<Input v-model="storeSettings.name" placeholder="Enter store name" />
|
||||||
<FormControl>
|
|
||||||
<Input
|
|
||||||
placeholder="Enter store name"
|
|
||||||
:disabled="isSaving"
|
|
||||||
v-bind="componentField"
|
|
||||||
/>
|
|
||||||
</FormControl>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
</FormField>
|
|
||||||
|
|
||||||
<FormField v-slot="{ componentField }" name="description">
|
|
||||||
<FormItem>
|
|
||||||
<FormLabel>Description</FormLabel>
|
|
||||||
<FormControl>
|
|
||||||
<Textarea
|
|
||||||
placeholder="Describe your store and what you sell"
|
|
||||||
:disabled="isSaving"
|
|
||||||
v-bind="componentField"
|
|
||||||
rows="3"
|
|
||||||
/>
|
|
||||||
</FormControl>
|
|
||||||
<FormDescription>
|
|
||||||
This description will be shown to customers browsing your store
|
|
||||||
</FormDescription>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
</FormField>
|
|
||||||
|
|
||||||
<FormField v-slot="{ componentField }" name="imageUrl">
|
|
||||||
<FormItem>
|
|
||||||
<FormLabel>Store Image URL</FormLabel>
|
|
||||||
<FormControl>
|
|
||||||
<Input
|
|
||||||
placeholder="https://example.com/store-image.jpg"
|
|
||||||
:disabled="isSaving"
|
|
||||||
v-bind="componentField"
|
|
||||||
/>
|
|
||||||
</FormControl>
|
|
||||||
<FormDescription>
|
|
||||||
Optional image to represent your store
|
|
||||||
</FormDescription>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
</FormField>
|
|
||||||
|
|
||||||
<!-- Read-only Currency Field -->
|
|
||||||
<div class="pt-4 border-t">
|
|
||||||
<label class="block text-sm font-medium text-muted-foreground mb-1">Currency</label>
|
|
||||||
<div class="text-foreground">{{ currentStall.currency }}</div>
|
|
||||||
<p class="text-xs text-muted-foreground mt-1">Currency is set when the store is created and cannot be changed</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
<div class="pt-4">
|
<label class="block text-sm font-medium text-foreground mb-2">Store Description</label>
|
||||||
<Button type="submit" :disabled="isSaving || !isFormValid">
|
<Input v-model="storeSettings.description" placeholder="Enter store description" />
|
||||||
<span v-if="isSaving">Saving...</span>
|
</div>
|
||||||
<span v-else>Save Changes</span>
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-foreground mb-2">Contact Email</label>
|
||||||
|
<Input v-model="storeSettings.contactEmail" type="email" placeholder="Enter contact email" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-foreground mb-2">Store Category</label>
|
||||||
|
<select v-model="storeSettings.category" class="w-full px-3 py-2 border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring bg-background text-foreground">
|
||||||
|
<option value="">Select category</option>
|
||||||
|
<option value="electronics">Electronics</option>
|
||||||
|
<option value="clothing">Clothing</option>
|
||||||
|
<option value="books">Books</option>
|
||||||
|
<option value="food">Food & Beverages</option>
|
||||||
|
<option value="services">Services</option>
|
||||||
|
<option value="other">Other</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-6">
|
||||||
|
<Button @click="saveStoreSettings" variant="default">
|
||||||
|
Save Store Settings
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Shipping Zones Section -->
|
<!-- Payment Settings Tab -->
|
||||||
|
<div v-else-if="activeSettingsTab === 'payment'" class="space-y-6">
|
||||||
<div class="bg-card p-6 rounded-lg border shadow-sm">
|
<div class="bg-card p-6 rounded-lg border shadow-sm">
|
||||||
<div class="flex items-center justify-between mb-4">
|
<h3 class="text-lg font-semibold text-foreground mb-4">Payment Configuration</h3>
|
||||||
|
<div class="space-y-4">
|
||||||
<div>
|
<div>
|
||||||
<h3 class="text-lg font-semibold text-foreground">Shipping Zones</h3>
|
<label class="block text-sm font-medium text-foreground mb-2">Default Currency</label>
|
||||||
<p class="text-sm text-muted-foreground">Configure where you ship and the associated costs</p>
|
<select v-model="paymentSettings.defaultCurrency" class="w-full px-3 py-2 border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring bg-background text-foreground">
|
||||||
|
<option value="sat">Satoshi (sats)</option>
|
||||||
|
<option value="btc">Bitcoin (BTC)</option>
|
||||||
|
<option value="usd">US Dollar (USD)</option>
|
||||||
|
<option value="eur">Euro (EUR)</option>
|
||||||
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<Button
|
<div>
|
||||||
v-if="!showAddZoneForm"
|
<label class="block text-sm font-medium text-foreground mb-2">Invoice Expiry (minutes)</label>
|
||||||
@click="showAddZoneForm = true"
|
<Input v-model="paymentSettings.invoiceExpiry" type="number" min="5" max="1440" placeholder="60" />
|
||||||
size="sm"
|
</div>
|
||||||
:disabled="isZoneLoading"
|
<div>
|
||||||
>
|
<label class="block text-sm font-medium text-foreground mb-2">Auto-generate Invoices</label>
|
||||||
<Plus class="w-4 h-4 mr-2" />
|
<div class="flex items-center">
|
||||||
Add Zone
|
<input
|
||||||
|
v-model="paymentSettings.autoGenerateInvoices"
|
||||||
|
type="checkbox"
|
||||||
|
class="h-4 w-4 text-primary focus:ring-primary border-input rounded"
|
||||||
|
/>
|
||||||
|
<label class="ml-2 text-sm text-foreground">
|
||||||
|
Automatically generate Lightning invoices for new orders
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-6">
|
||||||
|
<Button @click="savePaymentSettings" variant="default">
|
||||||
|
Save Payment Settings
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Add Zone Form -->
|
|
||||||
<div v-if="showAddZoneForm" class="mb-6 p-4 bg-muted/50 rounded-lg border">
|
|
||||||
<h4 class="font-medium text-foreground mb-4">{{ editingZone ? 'Edit Zone' : 'Add New Zone' }}</h4>
|
|
||||||
<form @submit.prevent="saveZone" class="space-y-4">
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
||||||
<div>
|
|
||||||
<label class="block text-sm font-medium text-foreground mb-1">Zone Name *</label>
|
|
||||||
<Input
|
|
||||||
v-model="zoneForm.name"
|
|
||||||
placeholder="e.g., Domestic, International"
|
|
||||||
:disabled="isZoneSaving"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label class="block text-sm font-medium text-foreground mb-1">Shipping Cost *</label>
|
|
||||||
<Input
|
|
||||||
v-model.number="zoneForm.cost"
|
|
||||||
type="number"
|
|
||||||
min="0"
|
|
||||||
step="0.01"
|
|
||||||
placeholder="0"
|
|
||||||
:disabled="isZoneSaving"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Nostr Settings Tab -->
|
||||||
|
<div v-else-if="activeSettingsTab === 'nostr'" class="space-y-6">
|
||||||
|
<div class="bg-card p-6 rounded-lg border shadow-sm">
|
||||||
|
<h3 class="text-lg font-semibold text-foreground mb-4">Nostr Network Configuration</h3>
|
||||||
|
<div class="space-y-4">
|
||||||
<div>
|
<div>
|
||||||
<label class="block text-sm font-medium text-foreground mb-1">Countries/Regions</label>
|
<label class="block text-sm font-medium text-foreground mb-2">Relay Connections</label>
|
||||||
<Input
|
<div class="space-y-2">
|
||||||
v-model="zoneForm.countriesInput"
|
<div v-for="relay in nostrSettings.relays" :key="relay" class="flex items-center gap-2">
|
||||||
placeholder="e.g., USA, Canada, Mexico (comma-separated)"
|
<Input :value="relay" readonly class="flex-1" />
|
||||||
:disabled="isZoneSaving"
|
<Button @click="removeRelay(relay)" variant="outline" size="sm">
|
||||||
/>
|
<X class="w-4 h-4" />
|
||||||
<p class="text-xs text-muted-foreground mt-1">Comma-separated list of countries or regions this zone covers</p>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex gap-2">
|
<div class="flex gap-2">
|
||||||
<Button type="submit" :disabled="isZoneSaving || !isZoneFormValid" size="sm">
|
<Input v-model="newRelay" placeholder="wss://relay.example.com" class="flex-1" />
|
||||||
<span v-if="isZoneSaving">Saving...</span>
|
<Button @click="addRelay" variant="outline">
|
||||||
<span v-else>{{ editingZone ? 'Update Zone' : 'Add Zone' }}</span>
|
Add Relay
|
||||||
</Button>
|
|
||||||
<Button type="button" variant="outline" @click="cancelZoneForm" size="sm" :disabled="isZoneSaving">
|
|
||||||
Cancel
|
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Zones List -->
|
|
||||||
<div v-if="isZoneLoading" class="flex justify-center py-8">
|
|
||||||
<div class="animate-spin rounded-full h-6 w-6 border-b-2 border-primary"></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
<div v-else-if="zones.length === 0 && !showAddZoneForm" class="text-center py-8 text-muted-foreground">
|
<label class="block text-sm font-medium text-foreground mb-2">Nostr Public Key</label>
|
||||||
<Truck class="w-12 h-12 mx-auto mb-3 opacity-50" />
|
<Input :value="nostrSettings.pubkey" readonly class="font-mono text-sm" />
|
||||||
<p>No shipping zones configured</p>
|
<p class="text-xs text-muted-foreground mt-1">Your Nostr public key for receiving orders</p>
|
||||||
<p class="text-sm">Add a shipping zone to enable shipping for your products</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
<div v-else class="space-y-3">
|
<label class="block text-sm font-medium text-foreground mb-2">Connection Status</label>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
<div
|
<div
|
||||||
v-for="zone in zones"
|
class="w-3 h-3 rounded-full"
|
||||||
:key="zone.id"
|
:class="orderEvents.isSubscribed ? 'bg-green-500' : 'bg-yellow-500'"
|
||||||
class="flex items-center justify-between p-4 bg-muted/30 rounded-lg border"
|
></div>
|
||||||
>
|
<span class="text-sm text-muted-foreground">
|
||||||
<div class="flex-1">
|
{{ orderEvents.isSubscribed ? 'Connected to Nostr network' : 'Connecting to Nostr network...' }}
|
||||||
<div class="font-medium text-foreground">{{ zone.name }}</div>
|
|
||||||
<div class="text-sm text-muted-foreground">
|
|
||||||
<span>{{ formatCost(zone.cost) }} {{ zone.currency }}</span>
|
|
||||||
<span v-if="zone.countries?.length" class="ml-2">
|
|
||||||
· {{ zone.countries.join(', ') }}
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex gap-2">
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
@click="editZone(zone)"
|
|
||||||
:disabled="isZoneSaving"
|
|
||||||
>
|
|
||||||
<Pencil class="w-4 h-4" />
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
@click="confirmDeleteZone(zone)"
|
|
||||||
:disabled="isZoneSaving"
|
|
||||||
class="text-destructive hover:text-destructive"
|
|
||||||
>
|
|
||||||
<Trash2 class="w-4 h-4" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="mt-6">
|
||||||
|
<Button @click="saveNostrSettings" variant="default">
|
||||||
|
Save Nostr Settings
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Delete Zone Confirmation Dialog -->
|
<!-- Shipping Settings Tab -->
|
||||||
<Dialog :open="showDeleteConfirm" @update:open="showDeleteConfirm = $event">
|
<div v-else-if="activeSettingsTab === 'shipping'" class="space-y-6">
|
||||||
<DialogContent>
|
<div class="bg-card p-6 rounded-lg border shadow-sm">
|
||||||
<DialogHeader>
|
<h3 class="text-lg font-semibold text-foreground mb-4">Shipping Zones</h3>
|
||||||
<DialogTitle>Delete Shipping Zone</DialogTitle>
|
<div class="space-y-4">
|
||||||
<DialogDescription>
|
<div v-for="zone in shippingSettings.zones" :key="zone.id" class="border border-border rounded-lg p-4">
|
||||||
Are you sure you want to delete "{{ zoneToDelete?.name }}"?
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
This action cannot be undone.
|
<div>
|
||||||
</DialogDescription>
|
<label class="block text-sm font-medium text-foreground mb-1">Zone Name</label>
|
||||||
</DialogHeader>
|
<Input v-model="zone.name" placeholder="Zone name" />
|
||||||
<DialogFooter>
|
</div>
|
||||||
<Button variant="outline" @click="showDeleteConfirm = false" :disabled="isZoneSaving">
|
<div>
|
||||||
Cancel
|
<label class="block text-sm font-medium text-foreground mb-1">Cost</label>
|
||||||
|
<Input v-model="zone.cost" type="number" min="0" step="0.01" placeholder="0.00" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-foreground mb-1">Currency</label>
|
||||||
|
<select v-model="zone.currency" class="w-full px-3 py-2 border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring bg-background text-foreground">
|
||||||
|
<option value="sat">Satoshi (sats)</option>
|
||||||
|
<option value="btc">Bitcoin (BTC)</option>
|
||||||
|
<option value="usd">US Dollar (USD)</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-3 flex justify-end">
|
||||||
|
<Button @click="removeShippingZone(zone.id)" variant="outline" size="sm">
|
||||||
|
Remove Zone
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
</div>
|
||||||
@click="deleteZone"
|
</div>
|
||||||
:disabled="isZoneSaving"
|
<Button @click="addShippingZone" variant="outline">
|
||||||
variant="destructive"
|
<Plus class="w-4 h-4 mr-2" />
|
||||||
>
|
Add Shipping Zone
|
||||||
<span v-if="isZoneSaving">Deleting...</span>
|
|
||||||
<span v-else>Delete</span>
|
|
||||||
</Button>
|
</Button>
|
||||||
</DialogFooter>
|
</div>
|
||||||
</DialogContent>
|
<div class="mt-6">
|
||||||
</Dialog>
|
<Button @click="saveShippingSettings" variant="default">
|
||||||
|
Save Shipping Settings
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, computed, onMounted, watch } from 'vue'
|
import { ref, onMounted } from 'vue'
|
||||||
import { useForm } from 'vee-validate'
|
// import { useOrderEvents } from '@/composables/useOrderEvents' // TODO: Move to market module
|
||||||
import { toTypedSchema } from '@vee-validate/zod'
|
|
||||||
import * as z from 'zod'
|
|
||||||
import { Button } from '@/components/ui/button'
|
import { Button } from '@/components/ui/button'
|
||||||
import { Input } from '@/components/ui/input'
|
import { Input } from '@/components/ui/input'
|
||||||
import { Textarea } from '@/components/ui/textarea'
|
import { Plus, X } from 'lucide-vue-next'
|
||||||
import {
|
|
||||||
FormControl,
|
|
||||||
FormDescription,
|
|
||||||
FormField,
|
|
||||||
FormItem,
|
|
||||||
FormLabel,
|
|
||||||
FormMessage,
|
|
||||||
} from '@/components/ui/form'
|
|
||||||
import {
|
|
||||||
Dialog,
|
|
||||||
DialogContent,
|
|
||||||
DialogDescription,
|
|
||||||
DialogFooter,
|
|
||||||
DialogHeader,
|
|
||||||
DialogTitle,
|
|
||||||
} from '@/components/ui/dialog'
|
|
||||||
import { Store, Plus, Pencil, Trash2, Truck } from 'lucide-vue-next'
|
|
||||||
import { injectService, SERVICE_TOKENS } from '@/core/di-container'
|
|
||||||
import type { NostrmarketAPI, Stall, Zone } from '../services/nostrmarketAPI'
|
|
||||||
import { auth } from '@/composables/useAuthService'
|
|
||||||
import { useToast } from '@/core/composables/useToast'
|
|
||||||
|
|
||||||
// Services
|
// const marketStore = useMarketStore()
|
||||||
const nostrmarketAPI = injectService(SERVICE_TOKENS.NOSTRMARKET_API) as NostrmarketAPI
|
// const orderEvents = useOrderEvents() // TODO: Move to market module
|
||||||
const paymentService = injectService(SERVICE_TOKENS.PAYMENT_SERVICE) as any
|
const orderEvents = { isSubscribed: ref(false) } // Temporary mock
|
||||||
const toast = useToast()
|
|
||||||
|
|
||||||
// State
|
// Local state
|
||||||
const isLoading = ref(true)
|
const activeSettingsTab = ref('store')
|
||||||
const isSaving = ref(false)
|
const newRelay = ref('')
|
||||||
const currentStall = ref<Stall | null>(null)
|
|
||||||
|
|
||||||
// Zone state
|
// Settings data
|
||||||
const zones = ref<Zone[]>([])
|
const storeSettings = ref({
|
||||||
const isZoneLoading = ref(false)
|
name: 'My Store',
|
||||||
const isZoneSaving = ref(false)
|
description: 'A great place to shop',
|
||||||
const showAddZoneForm = ref(false)
|
contactEmail: 'store@example.com',
|
||||||
const editingZone = ref<Zone | null>(null)
|
category: 'other'
|
||||||
const showDeleteConfirm = ref(false)
|
})
|
||||||
const zoneToDelete = ref<Zone | null>(null)
|
|
||||||
|
|
||||||
// Zone form
|
const paymentSettings = ref({
|
||||||
const zoneForm = ref({
|
defaultCurrency: 'sat',
|
||||||
name: '',
|
invoiceExpiry: 60,
|
||||||
|
autoGenerateInvoices: true
|
||||||
|
})
|
||||||
|
|
||||||
|
const nostrSettings = ref({
|
||||||
|
relays: [
|
||||||
|
'wss://relay.damus.io',
|
||||||
|
'wss://relay.snort.social',
|
||||||
|
'wss://nostr-pub.wellorder.net'
|
||||||
|
],
|
||||||
|
pubkey: 'npub1...' // TODO: Get from auth
|
||||||
|
})
|
||||||
|
|
||||||
|
const shippingSettings = ref({
|
||||||
|
zones: [
|
||||||
|
{
|
||||||
|
id: '1',
|
||||||
|
name: 'Local',
|
||||||
cost: 0,
|
cost: 0,
|
||||||
countriesInput: ''
|
currency: 'sat',
|
||||||
|
estimatedDays: '1-2 days'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '2',
|
||||||
|
name: 'Domestic',
|
||||||
|
cost: 1000,
|
||||||
|
currency: 'sat',
|
||||||
|
estimatedDays: '3-5 days'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '3',
|
||||||
|
name: 'International',
|
||||||
|
cost: 5000,
|
||||||
|
currency: 'sat',
|
||||||
|
estimatedDays: '7-14 days'
|
||||||
|
}
|
||||||
|
]
|
||||||
})
|
})
|
||||||
|
|
||||||
const isZoneFormValid = computed(() => {
|
// Settings tabs
|
||||||
return zoneForm.value.name.trim().length > 0 && zoneForm.value.cost >= 0
|
const settingsTabs = [
|
||||||
})
|
{ id: 'store', name: 'Store Settings' },
|
||||||
|
{ id: 'payment', name: 'Payment Settings' },
|
||||||
|
{ id: 'nostr', name: 'Nostr Network' },
|
||||||
|
{ id: 'shipping', name: 'Shipping Zones' }
|
||||||
|
]
|
||||||
|
|
||||||
// Form schema - only fields that exist in the Stall model
|
// Methods
|
||||||
const formSchema = toTypedSchema(z.object({
|
const saveStoreSettings = () => {
|
||||||
name: z.string().min(1, "Store name is required").max(100, "Store name must be less than 100 characters"),
|
// TODO: Save store settings
|
||||||
description: z.string().max(500, "Description must be less than 500 characters").optional(),
|
console.log('Saving store settings:', storeSettings.value)
|
||||||
imageUrl: z.string().url("Must be a valid URL").optional().or(z.literal(''))
|
|
||||||
}))
|
|
||||||
|
|
||||||
// Form setup
|
|
||||||
const form = useForm({
|
|
||||||
validationSchema: formSchema,
|
|
||||||
initialValues: {
|
|
||||||
name: '',
|
|
||||||
description: '',
|
|
||||||
imageUrl: ''
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const { resetForm, meta } = form
|
|
||||||
const isFormValid = computed(() => meta.value.valid)
|
|
||||||
|
|
||||||
// Format cost for display
|
|
||||||
const formatCost = (cost: number) => {
|
|
||||||
return cost === 0 ? 'Free' : cost.toString()
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Load store data
|
const savePaymentSettings = () => {
|
||||||
const loadStoreData = async () => {
|
// TODO: Save payment settings
|
||||||
const currentUser = auth.currentUser?.value
|
console.log('Saving payment settings:', paymentSettings.value)
|
||||||
if (!currentUser?.wallets?.length) {
|
|
||||||
isLoading.value = false
|
|
||||||
return
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const inkey = paymentService.getPreferredWalletInvoiceKey()
|
const saveNostrSettings = () => {
|
||||||
if (!inkey) {
|
// TODO: Save Nostr settings
|
||||||
isLoading.value = false
|
console.log('Saving Nostr settings:', nostrSettings.value)
|
||||||
return
|
|
||||||
}
|
}
|
||||||
|
|
||||||
try {
|
const saveShippingSettings = () => {
|
||||||
const stalls = await nostrmarketAPI.getStalls(inkey)
|
// TODO: Save shipping settings
|
||||||
if (stalls && stalls.length > 0) {
|
console.log('Saving shipping settings:', shippingSettings.value)
|
||||||
currentStall.value = stalls[0]
|
|
||||||
|
|
||||||
// Update form with current values
|
|
||||||
resetForm({
|
|
||||||
values: {
|
|
||||||
name: stalls[0].name || '',
|
|
||||||
description: stalls[0].config?.description || '',
|
|
||||||
imageUrl: stalls[0].config?.image_url || ''
|
|
||||||
}
|
}
|
||||||
})
|
|
||||||
|
|
||||||
// Load zones
|
const addRelay = () => {
|
||||||
await loadZones()
|
if (newRelay.value && !nostrSettings.value.relays.includes(newRelay.value)) {
|
||||||
}
|
nostrSettings.value.relays.push(newRelay.value)
|
||||||
} catch (error) {
|
newRelay.value = ''
|
||||||
console.error('Failed to load store data:', error)
|
|
||||||
toast.error('Failed to load store settings')
|
|
||||||
} finally {
|
|
||||||
isLoading.value = false
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Load shipping zones
|
const removeRelay = (relay: string) => {
|
||||||
const loadZones = async () => {
|
const index = nostrSettings.value.relays.indexOf(relay)
|
||||||
const inkey = paymentService.getPreferredWalletInvoiceKey()
|
if (index > -1) {
|
||||||
if (!inkey) return
|
nostrSettings.value.relays.splice(index, 1)
|
||||||
|
|
||||||
isZoneLoading.value = true
|
|
||||||
try {
|
|
||||||
zones.value = await nostrmarketAPI.getZones(inkey)
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to load zones:', error)
|
|
||||||
toast.error('Failed to load shipping zones')
|
|
||||||
} finally {
|
|
||||||
isZoneLoading.value = false
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Save store settings
|
const addShippingZone = () => {
|
||||||
const onSubmit = form.handleSubmit(async (values) => {
|
const newZone = {
|
||||||
if (!currentStall.value?.id) return
|
id: Date.now().toString(),
|
||||||
|
name: 'New Zone',
|
||||||
isSaving.value = true
|
|
||||||
|
|
||||||
try {
|
|
||||||
const adminKey = paymentService.getPreferredWalletAdminKey()
|
|
||||||
if (!adminKey) {
|
|
||||||
throw new Error('No wallet admin key available')
|
|
||||||
}
|
|
||||||
|
|
||||||
// Update the stall with new values
|
|
||||||
const updatedStall = await nostrmarketAPI.updateStall(adminKey, currentStall.value.id, {
|
|
||||||
name: values.name,
|
|
||||||
config: {
|
|
||||||
description: values.description || '',
|
|
||||||
image_url: values.imageUrl || undefined
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
currentStall.value = updatedStall
|
|
||||||
toast.success('Store settings saved successfully!')
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to save store settings:', error)
|
|
||||||
toast.error('Failed to save store settings')
|
|
||||||
} finally {
|
|
||||||
isSaving.value = false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// Zone form functions
|
|
||||||
const resetZoneForm = () => {
|
|
||||||
zoneForm.value = {
|
|
||||||
name: '',
|
|
||||||
cost: 0,
|
cost: 0,
|
||||||
countriesInput: ''
|
currency: 'sat',
|
||||||
|
estimatedDays: '3-5 days'
|
||||||
}
|
}
|
||||||
editingZone.value = null
|
shippingSettings.value.zones.push(newZone)
|
||||||
showAddZoneForm.value = false
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const cancelZoneForm = () => {
|
const removeShippingZone = (zoneId: string) => {
|
||||||
resetZoneForm()
|
const index = shippingSettings.value.zones.findIndex(z => z.id === zoneId)
|
||||||
}
|
if (index > -1) {
|
||||||
|
shippingSettings.value.zones.splice(index, 1)
|
||||||
const editZone = (zone: Zone) => {
|
|
||||||
editingZone.value = zone
|
|
||||||
zoneForm.value = {
|
|
||||||
name: zone.name,
|
|
||||||
cost: zone.cost,
|
|
||||||
countriesInput: zone.countries?.join(', ') || ''
|
|
||||||
}
|
|
||||||
showAddZoneForm.value = true
|
|
||||||
}
|
|
||||||
|
|
||||||
const saveZone = async () => {
|
|
||||||
const adminKey = paymentService.getPreferredWalletAdminKey()
|
|
||||||
if (!adminKey || !currentStall.value) return
|
|
||||||
|
|
||||||
isZoneSaving.value = true
|
|
||||||
|
|
||||||
try {
|
|
||||||
const countries = zoneForm.value.countriesInput
|
|
||||||
.split(',')
|
|
||||||
.map(c => c.trim())
|
|
||||||
.filter(c => c.length > 0)
|
|
||||||
|
|
||||||
const zoneData: Zone = {
|
|
||||||
id: editingZone.value?.id || '',
|
|
||||||
name: zoneForm.value.name.trim(),
|
|
||||||
currency: currentStall.value.currency,
|
|
||||||
cost: zoneForm.value.cost,
|
|
||||||
countries
|
|
||||||
}
|
|
||||||
|
|
||||||
if (editingZone.value) {
|
|
||||||
// Update existing zone
|
|
||||||
await nostrmarketAPI.updateZone(adminKey, editingZone.value.id, zoneData)
|
|
||||||
toast.success('Shipping zone updated!')
|
|
||||||
} else {
|
|
||||||
// Create new zone
|
|
||||||
await nostrmarketAPI.createZone(adminKey, {
|
|
||||||
name: zoneData.name,
|
|
||||||
currency: zoneData.currency,
|
|
||||||
cost: zoneData.cost,
|
|
||||||
countries: zoneData.countries
|
|
||||||
})
|
|
||||||
toast.success('Shipping zone added!')
|
|
||||||
}
|
|
||||||
|
|
||||||
// Reload zones and reset form
|
|
||||||
await loadZones()
|
|
||||||
resetZoneForm()
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to save zone:', error)
|
|
||||||
toast.error(editingZone.value ? 'Failed to update zone' : 'Failed to add zone')
|
|
||||||
} finally {
|
|
||||||
isZoneSaving.value = false
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const confirmDeleteZone = (zone: Zone) => {
|
// Lifecycle
|
||||||
zoneToDelete.value = zone
|
onMounted(() => {
|
||||||
showDeleteConfirm.value = true
|
console.log('Market Settings component loaded')
|
||||||
}
|
|
||||||
|
|
||||||
const deleteZone = async () => {
|
|
||||||
const adminKey = paymentService.getPreferredWalletAdminKey()
|
|
||||||
if (!adminKey || !zoneToDelete.value) return
|
|
||||||
|
|
||||||
isZoneSaving.value = true
|
|
||||||
|
|
||||||
try {
|
|
||||||
await nostrmarketAPI.deleteZone(adminKey, zoneToDelete.value.id)
|
|
||||||
toast.success('Shipping zone deleted!')
|
|
||||||
await loadZones()
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to delete zone:', error)
|
|
||||||
toast.error('Failed to delete zone')
|
|
||||||
} finally {
|
|
||||||
isZoneSaving.value = false
|
|
||||||
showDeleteConfirm.value = false
|
|
||||||
zoneToDelete.value = null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Watch for auth changes
|
|
||||||
watch(() => auth.currentUser?.value?.pubkey, async (newPubkey, oldPubkey) => {
|
|
||||||
if (newPubkey !== oldPubkey) {
|
|
||||||
isLoading.value = true
|
|
||||||
await loadStoreData()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// Initialize
|
|
||||||
onMounted(async () => {
|
|
||||||
await loadStoreData()
|
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -49,47 +49,84 @@
|
||||||
|
|
||||||
<!-- Stores Grid (shown when merchant profile exists) -->
|
<!-- Stores Grid (shown when merchant profile exists) -->
|
||||||
<div v-else>
|
<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 -->
|
<!-- Loading State for Stalls -->
|
||||||
<div v-if="isLoadingStalls" class="flex justify-center py-12">
|
<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 class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- No Store - Create First Store -->
|
<!-- Stores Cards Grid -->
|
||||||
<div v-else-if="userStalls.length === 0" class="flex flex-col items-center justify-center py-12">
|
<div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
|
||||||
<div class="w-24 h-24 bg-muted rounded-full flex items-center justify-center mb-6">
|
<!-- Existing Store Cards -->
|
||||||
<Store class="w-12 h-12 text-muted-foreground" />
|
<StoreCard
|
||||||
</div>
|
v-for="stall in userStalls"
|
||||||
<h2 class="text-2xl font-bold text-foreground mb-2">Create Your Store</h2>
|
:key="stall.id"
|
||||||
<p class="text-muted-foreground text-center mb-6 max-w-md">
|
:stall="stall"
|
||||||
Set up your store to start selling products on the Nostr marketplace.
|
@manage="manageStall"
|
||||||
</p>
|
@view-products="viewStallProducts"
|
||||||
<Button
|
/>
|
||||||
|
|
||||||
|
<!-- 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="showCreateStoreDialog = true"
|
@click="showCreateStoreDialog = true"
|
||||||
variant="default"
|
class="w-full h-full p-6 flex flex-col items-center justify-center min-h-[200px] hover:bg-muted/30 transition-colors"
|
||||||
size="lg"
|
|
||||||
>
|
>
|
||||||
<Plus class="w-5 h-5 mr-2" />
|
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-3">
|
||||||
Create Store
|
<Plus class="w-6 h-6 text-primary" />
|
||||||
</Button>
|
</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>
|
</div>
|
||||||
|
|
||||||
<!-- Active Store Dashboard (shown when user has a store) -->
|
<!-- Active Store Dashboard (shown when a store is selected) -->
|
||||||
<div v-else-if="activeStall">
|
<div v-if="activeStall">
|
||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
<div class="space-y-4 mb-6">
|
<div class="space-y-4 mb-6">
|
||||||
|
<!-- Top row with back button and currency -->
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<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>
|
||||||
|
|
||||||
<!-- Store info and actions -->
|
<!-- Store info and actions -->
|
||||||
<div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
|
<div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
|
||||||
<div class="flex-1">
|
<div class="flex-1">
|
||||||
<div class="flex items-center gap-3 mb-1">
|
|
||||||
<h2 class="text-xl sm:text-2xl font-bold text-foreground">{{ activeStall.name }}</h2>
|
<h2 class="text-xl sm:text-2xl font-bold text-foreground">{{ activeStall.name }}</h2>
|
||||||
<Badge variant="secondary">{{ activeStall.currency }}</Badge>
|
<p class="text-sm sm:text-base text-muted-foreground mt-1">{{ activeStall.config?.description || 'Manage incoming orders and your products' }}</p>
|
||||||
</div>
|
|
||||||
<p class="text-sm sm:text-base text-muted-foreground">{{ activeStall.config?.description || 'Manage incoming orders and your products' }}</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="flex flex-col sm:flex-row gap-2 sm:gap-3">
|
||||||
<Button @click="navigateToMarket" variant="outline" class="w-full sm:w-auto">
|
<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" />
|
||||||
<span class="sm:inline">Browse Market</span>
|
<span class="sm:inline">Browse Market</span>
|
||||||
</Button>
|
</Button>
|
||||||
|
<Button @click="showCreateProductDialog = true" variant="default" class="w-full sm:w-auto">
|
||||||
|
<Plus class="w-4 h-4 mr-2" />
|
||||||
|
<span>Add Product</span>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -151,23 +188,20 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Customer Satisfaction (Coming Soon) -->
|
<!-- Customer Satisfaction -->
|
||||||
<div class="bg-card p-4 sm:p-6 rounded-lg border shadow-sm opacity-50 relative">
|
<div class="bg-card p-4 sm:p-6 rounded-lg border shadow-sm">
|
||||||
<div class="absolute top-2 right-2">
|
|
||||||
<Badge variant="outline" class="text-xs">Coming Soon</Badge>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
|
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
|
||||||
<div class="flex-1">
|
<div class="flex-1">
|
||||||
<p class="text-xs sm: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-xl sm:text-2xl font-bold text-muted-foreground">--%</p>
|
<p class="text-xl sm:text-2xl font-bold text-foreground">{{ storeStats.satisfaction }}%</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-10 h-10 sm:w-12 sm:h-12 bg-muted rounded-lg flex items-center justify-center flex-shrink-0">
|
<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-5 h-5 sm:w-6 sm:h-6 text-muted-foreground" />
|
<Star class="w-5 h-5 sm:w-6 sm:h-6 text-yellow-500" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-3 sm:mt-4">
|
<div class="mt-3 sm:mt-4">
|
||||||
<div class="flex items-center text-xs sm:text-sm text-muted-foreground">
|
<div class="flex items-center text-xs sm:text-sm text-muted-foreground">
|
||||||
<span>No reviews yet</span>
|
<span>{{ storeStats.totalReviews }} reviews</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -396,6 +430,7 @@ import { injectService, SERVICE_TOKENS } from '@/core/di-container'
|
||||||
import CreateStoreDialog from './CreateStoreDialog.vue'
|
import CreateStoreDialog from './CreateStoreDialog.vue'
|
||||||
import CreateProductDialog from './CreateProductDialog.vue'
|
import CreateProductDialog from './CreateProductDialog.vue'
|
||||||
import DeleteConfirmDialog from './DeleteConfirmDialog.vue'
|
import DeleteConfirmDialog from './DeleteConfirmDialog.vue'
|
||||||
|
import StoreCard from './StoreCard.vue'
|
||||||
import MerchantOrders from './MerchantOrders.vue'
|
import MerchantOrders from './MerchantOrders.vue'
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
@ -617,6 +652,14 @@ const loadStallProducts = async () => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const manageStall = (stallId: string) => {
|
||||||
|
activeStallId.value = stallId
|
||||||
|
}
|
||||||
|
|
||||||
|
const viewStallProducts = (stallId: string) => {
|
||||||
|
activeStallId.value = stallId
|
||||||
|
}
|
||||||
|
|
||||||
const navigateToMarket = () => router.push('/market')
|
const navigateToMarket = () => router.push('/market')
|
||||||
|
|
||||||
const checkMerchantProfile = async () => {
|
const checkMerchantProfile = async () => {
|
||||||
|
|
@ -654,6 +697,7 @@ const checkMerchantProfile = async () => {
|
||||||
// Event handlers
|
// Event handlers
|
||||||
const onStoreCreated = async (_stall: Stall) => {
|
const onStoreCreated = async (_stall: Stall) => {
|
||||||
await loadStallsList()
|
await loadStallsList()
|
||||||
|
toast.success('Store created successfully!')
|
||||||
}
|
}
|
||||||
|
|
||||||
const onProductCreated = async (_product: Product) => {
|
const onProductCreated = async (_product: Product) => {
|
||||||
|
|
|
||||||
|
|
@ -212,6 +212,19 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Debug Information (Development Only) -->
|
||||||
|
<div v-if="isDevelopment" class="mt-8 p-4 bg-gray-100 rounded-lg">
|
||||||
|
<h4 class="font-medium mb-2">Debug Information</h4>
|
||||||
|
<div class="text-sm space-y-1">
|
||||||
|
<div>Total Orders in Store: {{ Object.keys(marketStore.orders).length }}</div>
|
||||||
|
<div>Filtered Orders: {{ filteredOrders.length }}</div>
|
||||||
|
<div>Order Events Subscribed: {{ orderEvents.isSubscribed ? 'Yes' : 'No' }}</div>
|
||||||
|
<div>Relay Hub Connected: {{ relayHub.isConnected ? 'Yes' : 'No' }}</div>
|
||||||
|
<div>Auth Status: {{ auth.isAuthenticated ? 'Authenticated' : 'Not Authenticated' }}</div>
|
||||||
|
<div>Current User: {{ auth.currentUser?.value?.pubkey ? 'Yes' : 'No' }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Empty State -->
|
<!-- Empty State -->
|
||||||
<div v-else class="text-center py-12">
|
<div v-else class="text-center py-12">
|
||||||
<div class="w-16 h-16 bg-muted rounded-full flex items-center justify-center mx-auto mb-4">
|
<div class="w-16 h-16 bg-muted rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
|
@ -299,6 +312,8 @@ const pendingOrders = computed(() => allOrders.value.filter(o => o.status === 'p
|
||||||
const paidOrders = computed(() => allOrders.value.filter(o => o.status === 'paid').length)
|
const paidOrders = computed(() => allOrders.value.filter(o => o.status === 'paid').length)
|
||||||
const pendingPayments = computed(() => allOrders.value.filter(o => !isOrderPaid(o)).length)
|
const pendingPayments = computed(() => allOrders.value.filter(o => !isOrderPaid(o)).length)
|
||||||
|
|
||||||
|
const isDevelopment = computed(() => import.meta.env.DEV)
|
||||||
|
|
||||||
// Methods
|
// Methods
|
||||||
const isOrderPaid = (order: any) => {
|
const isOrderPaid = (order: any) => {
|
||||||
// Prioritize the 'paid' field from Nostr status updates (type 2)
|
// Prioritize the 'paid' field from Nostr status updates (type 2)
|
||||||
|
|
@ -482,9 +497,34 @@ onMounted(() => {
|
||||||
paymentService.forceResetPaymentState()
|
paymentService.forceResetPaymentState()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Orders are already loaded in the market store
|
||||||
|
console.log('Order History component loaded with', allOrders.value.length, 'orders')
|
||||||
|
console.log('Market store orders:', marketStore.orders)
|
||||||
|
|
||||||
|
// Debug: Log order details for orders with payment requests
|
||||||
|
allOrders.value.forEach(order => {
|
||||||
|
if (order.paymentRequest) {
|
||||||
|
console.log('Order with payment request:', {
|
||||||
|
id: order.id,
|
||||||
|
paymentRequest: order.paymentRequest.substring(0, 50) + '...',
|
||||||
|
hasPaymentRequest: !!order.paymentRequest,
|
||||||
|
status: order.status,
|
||||||
|
paymentStatus: order.paymentStatus
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
console.log('Order events status:', orderEvents.isSubscribed.value)
|
||||||
|
console.log('Relay hub connected:', relayHub.isConnected.value)
|
||||||
|
console.log('Auth status:', auth.isAuthenticated)
|
||||||
|
console.log('Current user:', auth.currentUser?.value?.pubkey)
|
||||||
|
|
||||||
// Start listening for order events if not already listening
|
// Start listening for order events if not already listening
|
||||||
if (!orderEvents.isSubscribed.value) {
|
if (!orderEvents.isSubscribed.value) {
|
||||||
|
console.log('Starting order events listener...')
|
||||||
orderEvents.initialize()
|
orderEvents.initialize()
|
||||||
|
} else {
|
||||||
|
console.log('Order events already listening')
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -329,34 +329,6 @@ export class NostrmarketAPI extends BaseService {
|
||||||
return stall
|
return stall
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Update an existing stall
|
|
||||||
*/
|
|
||||||
async updateStall(
|
|
||||||
walletAdminkey: string,
|
|
||||||
stallId: string,
|
|
||||||
stallData: Partial<{
|
|
||||||
name: string
|
|
||||||
config: {
|
|
||||||
description?: string
|
|
||||||
image_url?: string
|
|
||||||
}
|
|
||||||
}>
|
|
||||||
): Promise<Stall> {
|
|
||||||
const stall = await this.request<Stall>(
|
|
||||||
`/api/v1/stall/${stallId}`,
|
|
||||||
walletAdminkey,
|
|
||||||
{
|
|
||||||
method: 'PATCH',
|
|
||||||
body: JSON.stringify(stallData),
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
this.debug('Updated stall:', { stallId: stall.id, stallName: stall.name })
|
|
||||||
|
|
||||||
return stall
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Get available shipping zones
|
* Get available shipping zones
|
||||||
*/
|
*/
|
||||||
|
|
@ -399,70 +371,30 @@ export class NostrmarketAPI extends BaseService {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Update an existing shipping zone
|
* Get available currencies
|
||||||
*/
|
|
||||||
async updateZone(
|
|
||||||
walletAdminkey: string,
|
|
||||||
zoneId: string,
|
|
||||||
zoneData: Zone
|
|
||||||
): Promise<Zone> {
|
|
||||||
const zone = await this.request<Zone>(
|
|
||||||
`/api/v1/zone/${zoneId}`,
|
|
||||||
walletAdminkey,
|
|
||||||
{
|
|
||||||
method: 'PATCH',
|
|
||||||
body: JSON.stringify(zoneData),
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
this.debug('Updated zone:', { zoneId: zone.id, zoneName: zone.name })
|
|
||||||
|
|
||||||
return zone
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Delete a shipping zone
|
|
||||||
*/
|
|
||||||
async deleteZone(walletAdminkey: string, zoneId: string): Promise<void> {
|
|
||||||
await this.request<void>(
|
|
||||||
`/api/v1/zone/${zoneId}`,
|
|
||||||
walletAdminkey,
|
|
||||||
{ method: 'DELETE' }
|
|
||||||
)
|
|
||||||
|
|
||||||
this.debug('Deleted zone:', { zoneId })
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get available currencies from the LNbits core API
|
|
||||||
* This endpoint returns currencies allowed by the server configuration
|
|
||||||
*/
|
*/
|
||||||
async getCurrencies(): Promise<string[]> {
|
async getCurrencies(): Promise<string[]> {
|
||||||
// Call the LNbits core API directly (not under /nostrmarket)
|
const baseCurrencies = ['sat']
|
||||||
const url = `${this.baseUrl}/api/v1/currencies`
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const response = await fetch(url, {
|
const apiCurrencies = await this.request<string[]>(
|
||||||
method: 'GET',
|
'/api/v1/currencies',
|
||||||
headers: { 'Content-Type': 'application/json' }
|
'', // No authentication needed for currencies endpoint
|
||||||
})
|
{ method: 'GET' }
|
||||||
|
)
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error(`Failed to fetch currencies: ${response.status}`)
|
|
||||||
}
|
|
||||||
|
|
||||||
const apiCurrencies = await response.json()
|
|
||||||
|
|
||||||
if (apiCurrencies && Array.isArray(apiCurrencies)) {
|
if (apiCurrencies && Array.isArray(apiCurrencies)) {
|
||||||
this.debug('Retrieved currencies from LNbits core:', { count: apiCurrencies.length, currencies: apiCurrencies })
|
// Combine base currencies with API currencies, removing duplicates
|
||||||
return apiCurrencies
|
const allCurrencies = [...baseCurrencies, ...apiCurrencies.filter(currency => !baseCurrencies.includes(currency))]
|
||||||
|
this.debug('Retrieved currencies:', { count: allCurrencies.length, currencies: allCurrencies })
|
||||||
|
return allCurrencies
|
||||||
}
|
}
|
||||||
|
|
||||||
this.debug('No currencies returned from server, using default')
|
this.debug('No API currencies returned, using base currencies only')
|
||||||
return ['sat']
|
return baseCurrencies
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
this.debug('Failed to get currencies, using default:', error)
|
this.debug('Failed to get currencies, falling back to base currencies:', error)
|
||||||
return ['sat']
|
return baseCurrencies
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
216
target-ui.md
216
target-ui.md
|
|
@ -1,216 +0,0 @@
|
||||||
<template>
|
|
||||||
<!--
|
|
||||||
This example requires updating your template:
|
|
||||||
|
|
||||||
```
|
|
||||||
<html class="h-full bg-white dark:bg-gray-900">
|
|
||||||
<body class="h-full">
|
|
||||||
```
|
|
||||||
-->
|
|
||||||
<div>
|
|
||||||
<TransitionRoot as="template" :show="sidebarOpen">
|
|
||||||
<Dialog class="relative z-50 lg:hidden" @close="sidebarOpen = false">
|
|
||||||
<TransitionChild as="template" enter="transition-opacity ease-linear duration-300" enter-from="opacity-0" enter-to="" leave="transition-opacity ease-linear duration-300" leave-from="" leave-to="opacity-0">
|
|
||||||
<div class="fixed inset-0 bg-gray-900/80"></div>
|
|
||||||
</TransitionChild>
|
|
||||||
|
|
||||||
<div class="fixed inset-0 flex">
|
|
||||||
<TransitionChild as="template" enter="transition ease-in-out duration-300 transform" enter-from="-translate-x-full" enter-to="translate-x-0" leave="transition ease-in-out duration-300 transform" leave-from="translate-x-0" leave-to="-translate-x-full">
|
|
||||||
<DialogPanel class="relative mr-16 flex w-full max-w-xs flex-1">
|
|
||||||
<TransitionChild as="template" enter="ease-in-out duration-300" enter-from="opacity-0" enter-to="" leave="ease-in-out duration-300" leave-from="" leave-to="opacity-0">
|
|
||||||
<div class="absolute left-full top-0 flex w-16 justify-center pt-5">
|
|
||||||
<button type="button" class="-m-2.5 p-2.5" @click="sidebarOpen = false">
|
|
||||||
<span class="sr-only">Close sidebar</span>
|
|
||||||
<XMarkIcon class="size-6 text-white" aria-hidden="true" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</TransitionChild>
|
|
||||||
|
|
||||||
<!-- Sidebar component, swap this element with another sidebar if you like -->
|
|
||||||
<div class="relative flex grow flex-col gap-y-5 overflow-y-auto bg-white px-6 pb-4 dark:bg-gray-900 dark:ring dark:ring-white/10 dark:before:pointer-events-none dark:before:absolute dark:before:inset-0 dark:before:bg-black/10">
|
|
||||||
<div class="relative flex h-16 shrink-0 items-center">
|
|
||||||
<img class="h-8 w-auto dark:hidden" src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600" alt="Your Company" />
|
|
||||||
<img class="hidden h-8 w-auto dark:block" src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company" />
|
|
||||||
</div>
|
|
||||||
<nav class="relative flex flex-1 flex-col">
|
|
||||||
<ul role="list" class="flex flex-1 flex-col gap-y-7">
|
|
||||||
<li>
|
|
||||||
<ul role="list" class="-mx-2 space-y-1">
|
|
||||||
<li v-for="item in navigation" :key="item.name">
|
|
||||||
<a :href="item.href" :class="[item.current ? 'bg-gray-50 text-indigo-600 dark:bg-white/5 dark:text-white' : 'text-gray-700 hover:bg-gray-50 hover:text-indigo-600 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-white', 'group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold']">
|
|
||||||
<component :is="item.icon" :class="[item.current ? 'text-indigo-600 dark:text-white' : 'text-gray-400 group-hover:text-indigo-600 dark:group-hover:text-white', 'size-6 shrink-0']" aria-hidden="true" />
|
|
||||||
{{ item.name }}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<div class="text-xs/6 font-semibold text-gray-400">Your teams</div>
|
|
||||||
<ul role="list" class="-mx-2 mt-2 space-y-1">
|
|
||||||
<li v-for="team in teams" :key="team.name">
|
|
||||||
<a :href="team.href" :class="[team.current ? 'bg-gray-50 text-indigo-600 dark:bg-white/5 dark:text-white' : 'text-gray-700 hover:bg-gray-50 hover:text-indigo-600 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-white', 'group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold']">
|
|
||||||
<span :class="[team.current ? 'border-indigo-600 text-indigo-600 dark:border-white/20 dark:text-white' : 'border-gray-200 text-gray-400 group-hover:border-indigo-600 group-hover:text-indigo-600 dark:border-white/10 dark:group-hover:border-white/20 dark:group-hover:text-white', 'flex size-6 shrink-0 items-center justify-center rounded-lg border bg-white text-[0.625rem] font-medium dark:bg-white/5']">{{ team.initial }}</span>
|
|
||||||
<span class="truncate">{{ team.name }}</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li class="mt-auto">
|
|
||||||
<a href="#" class="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600 dark:text-gray-300 dark:hover:bg-white/5 dark:hover:text-white">
|
|
||||||
<Cog6ToothIcon class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600 dark:group-hover:text-white" aria-hidden="true" />
|
|
||||||
Settings
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</DialogPanel>
|
|
||||||
</TransitionChild>
|
|
||||||
</div>
|
|
||||||
</Dialog>
|
|
||||||
</TransitionRoot>
|
|
||||||
|
|
||||||
<!-- Static sidebar for desktop -->
|
|
||||||
<div class="hidden bg-gray-900 lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
|
|
||||||
<!-- Sidebar component, swap this element with another sidebar if you like -->
|
|
||||||
<div class="flex grow flex-col gap-y-5 overflow-y-auto border-r border-gray-200 bg-white px-6 pb-4 dark:border-white/10 dark:bg-black/10">
|
|
||||||
<div class="flex h-16 shrink-0 items-center">
|
|
||||||
<img class="h-8 w-auto dark:hidden" src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600" alt="Your Company" />
|
|
||||||
<img class="hidden h-8 w-auto dark:block" src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company" />
|
|
||||||
</div>
|
|
||||||
<nav class="flex flex-1 flex-col">
|
|
||||||
<ul role="list" class="flex flex-1 flex-col gap-y-7">
|
|
||||||
<li>
|
|
||||||
<ul role="list" class="-mx-2 space-y-1">
|
|
||||||
<li v-for="item in navigation" :key="item.name">
|
|
||||||
<a :href="item.href" :class="[item.current ? 'bg-gray-50 text-indigo-600 dark:bg-white/5 dark:text-white' : 'text-gray-700 hover:bg-gray-50 hover:text-indigo-600 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-white', 'group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold']">
|
|
||||||
<component :is="item.icon" :class="[item.current ? 'text-indigo-600 dark:text-white' : 'text-gray-400 group-hover:text-indigo-600 dark:group-hover:text-white', 'size-6 shrink-0']" aria-hidden="true" />
|
|
||||||
{{ item.name }}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<div class="text-xs/6 font-semibold text-gray-400">Your teams</div>
|
|
||||||
<ul role="list" class="-mx-2 mt-2 space-y-1">
|
|
||||||
<li v-for="team in teams" :key="team.name">
|
|
||||||
<a :href="team.href" :class="[team.current ? 'bg-gray-50 text-indigo-600 dark:bg-white/5 dark:text-white' : 'text-gray-700 hover:bg-gray-50 hover:text-indigo-600 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-white', 'group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold']">
|
|
||||||
<span :class="[team.current ? 'border-indigo-600 text-indigo-600 dark:border-white/20 dark:text-white' : 'border-gray-200 text-gray-400 group-hover:border-indigo-600 group-hover:text-indigo-600 dark:border-white/10 dark:group-hover:border-white/20 dark:group-hover:text-white', 'flex size-6 shrink-0 items-center justify-center rounded-lg border bg-white text-[0.625rem] font-medium dark:bg-white/5']">{{ team.initial }}</span>
|
|
||||||
<span class="truncate">{{ team.name }}</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li class="mt-auto">
|
|
||||||
<a href="#" class="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600 dark:text-gray-300 dark:hover:bg-white/5 dark:hover:text-white">
|
|
||||||
<Cog6ToothIcon class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600 dark:group-hover:text-white" aria-hidden="true" />
|
|
||||||
Settings
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="lg:pl-72">
|
|
||||||
<div class="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 border-b border-gray-200 bg-white px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8 dark:border-white/10 dark:bg-gray-900 dark:shadow-none">
|
|
||||||
<button type="button" class="-m-2.5 p-2.5 text-gray-700 hover:text-gray-900 lg:hidden dark:text-gray-400 dark:hover:text-white" @click="sidebarOpen = true">
|
|
||||||
<span class="sr-only">Open sidebar</span>
|
|
||||||
<Bars3Icon class="size-6" aria-hidden="true" />
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<!-- Separator -->
|
|
||||||
<div class="h-6 w-px bg-gray-200 lg:hidden dark:bg-white/10" aria-hidden="true"></div>
|
|
||||||
|
|
||||||
<div class="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
|
|
||||||
<form class="grid flex-1 grid-cols-1" action="#" method="GET">
|
|
||||||
<input name="search" aria-label="Search" class="col-start-1 row-start-1 block size-full bg-white pl-8 text-base text-gray-900 outline-none placeholder:text-gray-400 sm:text-sm/6 dark:bg-gray-900 dark:text-white dark:placeholder:text-gray-500" placeholder="Search" />
|
|
||||||
<MagnifyingGlassIcon class="pointer-events-none col-start-1 row-start-1 size-5 self-center text-gray-400" aria-hidden="true" />
|
|
||||||
</form>
|
|
||||||
<div class="flex items-center gap-x-4 lg:gap-x-6">
|
|
||||||
<button type="button" class="-m-2.5 p-2.5 text-gray-400 hover:text-gray-500 dark:hover:text-white">
|
|
||||||
<span class="sr-only">View notifications</span>
|
|
||||||
<BellIcon class="size-6" aria-hidden="true" />
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<!-- Separator -->
|
|
||||||
<div class="hidden lg:block lg:h-6 lg:w-px lg:bg-gray-200 dark:lg:bg-white/10" aria-hidden="true"></div>
|
|
||||||
|
|
||||||
<!-- Profile dropdown -->
|
|
||||||
<Menu as="div" class="relative">
|
|
||||||
<MenuButton class="relative flex items-center">
|
|
||||||
<span class="absolute -inset-1.5"></span>
|
|
||||||
<span class="sr-only">Open user menu</span>
|
|
||||||
<img class="size-8 rounded-full bg-gray-50 outline outline-1 -outline-offset-1 outline-black/5 dark:bg-gray-800 dark:outline-white/10" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
|
|
||||||
<span class="hidden lg:flex lg:items-center">
|
|
||||||
<span class="ml-4 text-sm/6 font-semibold text-gray-900 dark:text-white" aria-hidden="true">Tom Cook</span>
|
|
||||||
<ChevronDownIcon class="ml-2 size-5 text-gray-400 dark:text-gray-500" aria-hidden="true" />
|
|
||||||
</span>
|
|
||||||
</MenuButton>
|
|
||||||
<transition enter-active-class="transition ease-out duration-100" enter-from-class="transform opacity-0 scale-95" enter-to-class="transform scale-100" leave-active-class="transition ease-in duration-75" leave-from-class="transform scale-100" leave-to-class="transform opacity-0 scale-95">
|
|
||||||
<MenuItems class="absolute right-0 z-10 mt-2.5 w-32 origin-top-right rounded-md bg-white py-2 shadow-lg outline outline-1 outline-gray-900/5 dark:bg-gray-800 dark:shadow-none dark:-outline-offset-1 dark:outline-white/10">
|
|
||||||
<MenuItem v-for="item in userNavigation" :key="item.name" v-slot="{ active }">
|
|
||||||
<a :href="item.href" :class="[active ? 'bg-gray-50 outline-none dark:bg-white/5' : '', 'block px-3 py-1 text-sm/6 text-gray-900 dark:text-white']">{{ item.name }}</a>
|
|
||||||
</MenuItem>
|
|
||||||
</MenuItems>
|
|
||||||
</transition>
|
|
||||||
</Menu>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<main class="py-10">
|
|
||||||
<div class="px-4 sm:px-6 lg:px-8">
|
|
||||||
<!-- Your content -->
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref } from 'vue'
|
|
||||||
import {
|
|
||||||
Dialog,
|
|
||||||
DialogPanel,
|
|
||||||
Menu,
|
|
||||||
MenuButton,
|
|
||||||
MenuItem,
|
|
||||||
MenuItems,
|
|
||||||
TransitionChild,
|
|
||||||
TransitionRoot,
|
|
||||||
} from '@headlessui/vue'
|
|
||||||
import {
|
|
||||||
Bars3Icon,
|
|
||||||
BellIcon,
|
|
||||||
CalendarIcon,
|
|
||||||
ChartPieIcon,
|
|
||||||
Cog6ToothIcon,
|
|
||||||
DocumentDuplicateIcon,
|
|
||||||
FolderIcon,
|
|
||||||
HomeIcon,
|
|
||||||
UsersIcon,
|
|
||||||
XMarkIcon,
|
|
||||||
} from '@heroicons/vue/24/outline'
|
|
||||||
import { ChevronDownIcon, MagnifyingGlassIcon } from '@heroicons/vue/20/solid'
|
|
||||||
|
|
||||||
const navigation = [
|
|
||||||
{ name: 'Dashboard', href: '#', icon: HomeIcon, current: true },
|
|
||||||
{ name: 'Team', href: '#', icon: UsersIcon, current: false },
|
|
||||||
{ name: 'Projects', href: '#', icon: FolderIcon, current: false },
|
|
||||||
{ name: 'Calendar', href: '#', icon: CalendarIcon, current: false },
|
|
||||||
{ name: 'Documents', href: '#', icon: DocumentDuplicateIcon, current: false },
|
|
||||||
{ name: 'Reports', href: '#', icon: ChartPieIcon, current: false },
|
|
||||||
]
|
|
||||||
const teams = [
|
|
||||||
{ id: 1, name: 'Heroicons', href: '#', initial: 'H', current: false },
|
|
||||||
{ id: 2, name: 'Tailwind Labs', href: '#', initial: 'T', current: false },
|
|
||||||
{ id: 3, name: 'Workcation', href: '#', initial: 'W', current: false },
|
|
||||||
]
|
|
||||||
const userNavigation = [
|
|
||||||
{ name: 'Your profile', href: '#' },
|
|
||||||
{ name: 'Sign out', href: '#' },
|
|
||||||
]
|
|
||||||
|
|
||||||
const sidebarOpen = ref(false)
|
|
||||||
</script>
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue