fix: page Addresses

bo/components.d.ts

@@ -17,6 +17,7 @@ declare module 'vue' {
     En_TermsAndConditionsView: typeof import('./src/components/terms/en_TermsAndConditionsView.vue')['default']
     LangSwitch: typeof import('./src/components/inner/langSwitch.vue')['default']
     PageAddresses: typeof import('./src/components/customer/PageAddresses.vue')['default']
+    PageCart: typeof import('./src/components/customer/PageCart.vue')['default']
     PageProductCardFull: typeof import('./src/components/customer/PageProductCardFull.vue')['default']
     Pl_PrivacyPolicyView: typeof import('./src/components/terms/pl_PrivacyPolicyView.vue')['default']
     Pl_TermsAndConditionsView: typeof import('./src/components/terms/pl_TermsAndConditionsView.vue')['default']

bo/src/app.config.ts

@@ -2,10 +2,6 @@ import type { NuxtUIOptions } from '@nuxt/ui/unplugin'
 
 export const uiOptions: NuxtUIOptions = {
     ui: {
-        colors: {
-            primary: 'blue',
-            neutral: 'zink',
-        },
         pagination: {
             slots: {
                 root: '',
@@ -56,6 +52,12 @@ export const uiOptions: NuxtUIOptions = {
                 tr: 'border-b! border-(--border-light)! dark:border-(--border-dark)! outline-0! ring-0! text-(--black)! dark:text-white!',
             }
 
+        },
+        modal: {
+            slots: {
+                content: 'border! border-(--border-light)! dark:border-(--border-dark)! outline-0! ring-0! bg-(--second-light) dark:bg-(--main-dark)',
+            }
+
         }
     }
 }

bo/src/components/TopBar.vue

@@ -9,7 +9,7 @@ const authStore = useAuthStore()
 <template>
   <header
     class="fixed top-0 left-0 right-0 z-50 bg-white/80 dark:bg-(--black) backdrop-blur-md border-b border-(--border-light) dark:border-(--border-dark)">
-    <div class="container px-4 sm:px-6 lg:px-8">
+    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
       <div class="flex items-center justify-between h-14">
         <!-- Logo -->
         <RouterLink :to="{ name: 'home' }" class="flex items-center gap-2">

bo/src/components/admin/ProductDetailView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container my-10 ">
+  <div class="container my-10 mx-auto ">
 
     <div
       class="flex items-end justify-between gap-4 mb-6 bg-(--second-light) dark:bg-(--main-dark) border border-(--border-light) dark:border-(--border-dark) p-4 rounded-md">

bo/src/components/customer/PageAddresses.vue

@@ -1,118 +1,148 @@
 <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') }}
+    <div class="container mx-auto mt-10">
+        <div class="flex flex-col mb-6">
+            <h1 class="text-2xl font-bold text-black dark:text-white">{{ t('Addresses') }}</h1>
+            <div class="flex justify-between items-center">
+                <div class="flex gap-2 items-center">
+                    <UInput v-model="searchQuery" type="text" :placeholder="t('Search address')"
+                        class="bg-white dark:bg-gray-800 text-black dark:text-white absolute" />
+                    <UIcon name="ic:baseline-search"
+                        class="text-[20px] text-(--accent-blue-light) dark:text-(--accent-blue-dark) relative left-40" />
+                </div>
+                <UButton color="primary" @click="openCreateModal"
+                    class="bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) text-white hover:bg-(--accent-blue-dark) dark:hover:bg-(--accent-blue-light)">
+                    <UIcon name="mdi:add-bold" />
+                    {{ t('Add Address') }}
                 </UButton>
+            </div>
+        </div>
 
+        <div v-if="paginatedAddresses.length" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+            <div v-for="address in paginatedAddresses" :key="address.id"
+                class="border border-(--border-light) dark:border-(--border-dark) rounded-md p-4 bg-(--second-light) dark:bg-(--main-dark) hover:shadow-md transition-shadow">
+                <p class="text-black dark:text-white">{{ address.street }}</p>
+                <p class="text-black dark:text-white">{{ address.zipCode }}, {{ address.city }}</p>
+                <p class="text-black dark:text-white">{{ address.country }}</p>
+                <div class="flex gap-2 mt-2">
+                    <UButton size="sm" color="neutral" variant="outline" @click="openEditModal(address)"
+                        class="text-(--accent-blue-light) dark:text-(--accent-blue-dark)">{{ t('edit') }}
+                    </UButton>
+                    <button size="sm" color="destructive" variant="outline" @click="confirmDelete(address.id)"
+                        class="text-red-500 hover:bg-red-100 dark:hover:bg-red-900 dark:hover:text-red-100 rounded transition-colors p-2">
+                        <UIcon name="material-symbols:delete" class="text-[16px]" />
+                    </button>
+                </div>
             </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 v-else class="text-center py-8 text-gray-500 dark:text-gray-400">{{ t('No addresses found') }}</div>
+
+        <div class="mt-6 flex justify-center">
+            <UPagination v-model:page="page" :total="totalItems" :page-size="pageSize" />
+        </div>
+
+        <UModal v-model:open="showModal" :overlay="true" class="max-w-md mx-auto">
+            <template #content>
+                <div class="p-6 flex flex-col gap-6">
+                    <p class="text-[20px] text-black dark:text-white ">Address</p>
+                    <UForm @submit.prevent="saveAddress" class="space-y-4" :validate="validate">
+                        <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" name="street" class="w-full" />
                         </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" name="zipCode"
+                                class="w-full" />
+                        </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" name="city" class="w-full" />
+                        </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" name="country"
+                                class="w-full" />
+                        </div>
+                    </UForm>
+                    <div class="flex justify-end gap-2">
+                        <UButton variant="outline" color="neutral" @click="closeModal"
+                            class="text-black dark:text-white">{{ t('Cancel') }}</UButton>
+                        <UButton variant="outline" color="neutral" @click="saveAddress"
+                            class="text-white bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) hover:bg-(--accent-blue-dark) dark:hover:bg-(--accent-blue-light)">
+                            {{ t('Save') }}</UButton>
                     </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>
+            </template>
+        </UModal>
 
-                <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" />
+        <UModal v-model:open="showDeleteConfirm" :overlay="true" class="max-w-md mx-auto">
+            <template #content>
+                <div class="p-6 flex flex-col gap-3">
+                    <div class="flex flex-col gap-2 justify-center items-center">
+                        <p class="flex items-end gap-2 dark:text-white text-black">
+                            <UIcon name='f7:exclamationmark-triangle' class="text-[35px] text-red-700" />
+                            Confirm Delete
+                        </p>
+                        <p class="text-gray-700 dark:text-gray-300">
+                            {{ t('Are you sure you want to delete this address?') }}</p>
+                    </div>
+                    <div class="flex justify-center gap-5">
+                        <UButton variant="outline" color="neutral" @click="showDeleteConfirm = false"
+                            class="dark:text-white text-black">{{ t('Cancel') }}
+                        </UButton>
+                        <UButton variant="outline" color="neutral" @click="deleteAddress" class="text-red-700">
+                            {{ t('Delete') }}</UButton>
+                    </div>
                 </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>
+            </template>
+        </UModal>
     </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 { useAddressStore } from '@/stores/address'
 import { useI18n } from 'vue-i18n'
 
-const router = useRouter()
 const addressStore = useAddressStore()
 const { t } = useI18n()
 
+const searchQuery = ref('')
 const showModal = ref(false)
 const isEditing = ref(false)
 const editingAddressId = ref<number | null>(null)
+const formData = ref({ street: '', zipCode: '', city: '', country: '' })
 
-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 showDeleteConfirm = ref(false)
+const addressToDelete = ref<number | null>(null)
 
+const page = ref(addressStore.currentPage)
 const paginatedAddresses = computed(() => addressStore.paginatedAddresses)
+const totalItems = computed(() => addressStore.totalItems)
+const pageSize = addressStore.pageSize
+
+watch(page, (newPage) => addressStore.setPage(newPage))
+
+watch(searchQuery, (val) => {
+    addressStore.setSearchQuery(val)
+})
+
+function openCreateModal() {
+    resetForm()
+    isEditing.value = false
+    showModal.value = true
+}
+
+function openEditModal(address: any) {
+    formData.value = { ...address }
+    isEditing.value = true
+    editingAddressId.value = address.id
+    showModal.value = true
+}
 
 function resetForm() {
-    formData.value = {
-        street: '',
-        zipCode: '',
-        city: '',
-        country: ''
-    }
-    formErrors.value = {}
+    formData.value = { street: '', zipCode: '', city: '', country: '' }
+    editingAddressId.value = null
 }
 
 function closeModal() {
@@ -120,35 +150,35 @@ function closeModal() {
     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 validate() {
+    const errors = []
+    if (!formData.value.street) errors.push({ name: 'street', message: 'Street required' })
+    if (!formData.value.zipCode) errors.push({ name: 'zipCode', message: 'Zip Code required' })
+    if (!formData.value.city) errors.push({ name: 'city', message: 'City required' })
+    if (!formData.value.country) errors.push({ name: 'country', message: 'Country required' })
+    return errors.length ? errors : null
 }
 
 function saveAddress() {
-    if (!validateForm()) return
-
+    if (validate()) return
     if (isEditing.value && editingAddressId.value) {
-        (editingAddressId.value, formData.value)
+        addressStore.updateAddress(editingAddressId.value, formData.value)
     } else {
         addressStore.addAddress(formData.value)
     }
-
     closeModal()
 }
 
+function confirmDelete(id: number) {
+    addressToDelete.value = id
+    showDeleteConfirm.value = true
+}
+
+function deleteAddress() {
+    if (addressToDelete.value) {
+        addressStore.deleteAddress(addressToDelete.value)
+    }
+    showDeleteConfirm.value = false
+    addressToDelete.value = null
+}
 </script>

bo/src/components/customer/PageCart.vue

@@ -0,0 +1,9 @@
+<template>
+    <div class="container mx-auto">
+
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>

bo/src/components/customer/PageProductCardFull.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="container mt-14">
+    <div class="container mt-14 mx-auto">
         <div class="flex justify-between gap-8 mb-6">
             <div class="flex-1">
                 <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-8 flex items-center justify-center min-h-[300px]">

bo/src/stores/address.ts

@@ -22,42 +22,20 @@ export const useAddressStore = defineStore('address', () => {
   const error = ref<string | null>(null)
 
   const currentPage = ref(1)
-  const pageSize = 10
-  const totalItems = computed(() => filteredAddresses.value.length)
-  const totalPages = computed(() => Math.ceil(totalItems.value / pageSize))
+  const pageSize = 20
 
   const searchQuery = ref('')
 
   function initMockData() {
     addresses.value = [
-      {
-        id: 1,
-        street: 'Main Street 123',
-        zipCode: '10-001',
-        city: 'New York',
-        country: 'United States'
-      },
-      {
-        id: 2,
-        street: 'Oak Avenue 123',
-        zipCode: '90-001',
-        city: 'Los Angeles',
-        country: 'United States'
-      },
-      {
-        id: 3,
-        street: 'Pine Road 123 ',
-        zipCode: '60-601',
-        city: 'Chicago',
-        country: 'United States'
-      }
+      { id: 1, street: 'Main Street 123', zipCode: '10-001', city: 'New York', country: 'United States' },
+      { id: 2, street: 'Oak Avenue 123', zipCode: '90-001', city: 'Los Angeles', country: 'United States' },
+      { id: 3, street: 'Pine Road 123', zipCode: '60-601', city: 'Chicago', country: 'United States' }
     ]
   }
 
   const filteredAddresses = computed(() => {
-    if (!searchQuery.value) {
-      return addresses.value
-    }
+    if (!searchQuery.value) return addresses.value
 
     const query = searchQuery.value.toLowerCase()
 
@@ -68,34 +46,62 @@ export const useAddressStore = defineStore('address', () => {
       addr.zipCode.toLowerCase().includes(query)
     )
   })
+
+  const totalItems = computed(() => filteredAddresses.value.length)
+  const totalPages = computed(() => Math.ceil(totalItems.value / pageSize))
+
   const paginatedAddresses = computed(() => {
     const start = (currentPage.value - 1) * pageSize
-    const end = start + pageSize
-    return filteredAddresses.value.slice(start, end)
+    return filteredAddresses.value.slice(start, start + pageSize)
   })
 
-  function getAddressById(id: number): Address | undefined {
+  function getAddressById(id: number) {
     return addresses.value.find(addr => addr.id === id)
   }
 
-  function addAddress(formData: AddressFormData): Address {
-    const now = new Date().toISOString()
+  function normalize(data: AddressFormData): AddressFormData {
+    return {
+      street: data.street.trim(),
+      zipCode: data.zipCode.trim(),
+      city: data.city.trim(),
+      country: data.country.trim()
+    }
+  }
 
+  function generateId(): number {
+    return Math.max(0, ...addresses.value.map(a => a.id)) + 1
+  }
+
+  function addAddress(formData: AddressFormData): Address {
     const newAddress: Address = {
-      id: Date.now(),
-      ...formData,
+      id: generateId(),
+      ...normalize(formData)
     }
 
-    addresses.value.push(newAddress)
+    addresses.value.unshift(newAddress)
+    resetPagination()
 
     return newAddress
   }
 
+  function updateAddress(id: number, formData: AddressFormData): boolean {
+    const index = addresses.value.findIndex(a => a.id === id)
+    if (index === -1) return false
+
+    addresses.value[index] = {
+      ...addresses.value[index],
+      ...normalize(formData)
+    }
+
+    return true
+  }
+
   function deleteAddress(id: number): boolean {
-    const index = addresses.value.findIndex(addr => addr.id === id)
+    const index = addresses.value.findIndex(a => a.id === id)
     if (index === -1) return false
 
     addresses.value.splice(index, 1)
+    resetPagination()
 
     return true
   }
@@ -128,6 +134,7 @@ export const useAddressStore = defineStore('address', () => {
     paginatedAddresses,
     getAddressById,
     addAddress,
+    updateAddress,
     deleteAddress,
     setPage,
     setSearchQuery,