fix: added page PageProductCardFull and Addresses

bo/src/components/customer/PageAddresses.vue

@@ -0,0 +1,154 @@
+<template>
+    <div class="container">
+        <div class="p-6 bg-white dark:bg-(--black) min-h-screen font-sans">
+            <div class="flex justify-between items-center mb-6">
+                <h1 class="text-2xl font-bold text-black dark:text-white">
+                    {{ t('addresses.title') }}
+                </h1>
+                <UButton @click="showModal = true"
+                    class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-blue-600 transition-colors flex items-center gap-2">
+                    <span class="i-lucide-plus" />
+                    {{ t('addresses.addNew') }}
+                </UButton>
+
+            </div>
+            <div class="mb-6">
+                    <UInput v-model="searchQuery" type="text" :placeholder="t('addresses.searchPlaceholder')"
+                        class="bg-white dark:bg-gray-800 text-black dark:text-white w-[30%]" />
+            </div>
+            <div v-if="paginatedAddresses.length > 0" class="space-y-4">
+                <div v-for="address in paginatedAddresses" :key="address.id"
+                    class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 bg-white dark:bg-gray-800 hover:shadow-md transition-shadow">
+                    <div class="flex justify-between items-start">
+                        <div class="flex-1">
+                            <p class="text-black dark:text-white mt-1">
+                                {{ address.street }}
+                            </p>
+                            <p class="text-black dark:text-white flex gap-2">
+                                {{ address.zipCode }}, <span>{{ address.city }}</span>
+                            </p>
+                            <p class="text-black dark:text-white">{{ address.country }}</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div v-else class="text-center py-12 text-gray-500 dark:text-gray-400">
+                <span class="i-lucide-map-pin text-4xl mb-4 block" />
+                <p class="text-lg">{{ t('addresses.noAddresses') }}</p>
+                <UButton @click="showModal"
+                    class="mt-4 px-4 py-2 bg-primary text-white rounded-lg hover:bg-blue-600 transition-colors">
+                    {{ t('addresses.addFirst') }}
+                </UButton>
+            </div>
+            <form @submit.prevent="saveAddress" class="space-y-4 mt-4">
+                <div>
+                    <label class="block text-sm font-medium text-black dark:text-white mb-1">Street *</label>
+                    <UInput v-model="formData.street" placeholder="Enter street" />
+                </div>
+
+                <div>
+                    <label class="block text-sm font-medium text-black dark:text-white mb-1">Zip Code *</label>
+                    <UInput v-model="formData.zipCode" placeholder="Enter zip code" />
+                </div>
+
+                <div>
+                    <label class="block text-sm font-medium text-black dark:text-white mb-1">City *</label>
+                    <UInput v-model="formData.city" placeholder="Enter city" />
+                </div>
+
+                <div>
+                    <label class="block text-sm font-medium text-black dark:text-white mb-1">Country *</label>
+                    <UInput v-model="formData.country" placeholder="Enter country" />
+                </div>
+
+                <div class="flex justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
+                    <UButton color="neutral" variant="outline" @click="closeModal">Cancel</UButton>
+                    <UButton type="submit" color="primary">Save</UButton>
+                </div>
+            </form>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAddressStore, type Address, type AddressFormData } from '@/stores/address'
+import { useI18n } from 'vue-i18n'
+
+const router = useRouter()
+const addressStore = useAddressStore()
+const { t } = useI18n()
+
+const showModal = ref(false)
+const isEditing = ref(false)
+const editingAddressId = ref<number | null>(null)
+
+const formData = ref<AddressFormData>({
+    street: '',
+    zipCode: '',
+    city: '',
+    country: ''
+})
+
+const formErrors = ref<Record<string, string>>({})
+const searchQuery = ref('')
+
+let searchTimeout: ReturnType<typeof setTimeout> | null = null
+
+watch(searchQuery, (newValue) => {
+    if (searchTimeout) clearTimeout(searchTimeout)
+    searchTimeout = setTimeout(() => {
+        addressStore.setSearchQuery(newValue)
+    }, 300)
+})
+
+const paginatedAddresses = computed(() => addressStore.paginatedAddresses)
+
+function resetForm() {
+    formData.value = {
+        street: '',
+        zipCode: '',
+        city: '',
+        country: ''
+    }
+    formErrors.value = {}
+}
+
+function closeModal() {
+    showModal.value = false
+    resetForm()
+}
+
+function validateForm(): boolean {
+    formErrors.value = {}
+
+    if (!formData.value.street.trim()) {
+        formErrors.value.street = 'Street is required'
+    }
+    if (!formData.value.zipCode.trim()) {
+        formErrors.value.zipCode = 'Zip Code is required'
+    }
+    if (!formData.value.city.trim()) {
+        formErrors.value.city = 'City is required'
+    }
+    if (!formData.value.country.trim()) {
+        formErrors.value.country = 'Country is required'
+    }
+
+    return Object.keys(formErrors.value).length === 0
+}
+
+function saveAddress() {
+    if (!validateForm()) return
+
+    if (isEditing.value && editingAddressId.value) {
+        (editingAddressId.value, formData.value)
+    } else {
+        addressStore.addAddress(formData.value)
+    }
+
+    closeModal()
+}
+
+</script>