@awes-io/ui 2.142.0 → 2.143.0

package/docs/cookbook/advanced-patterns.md

@@ -0,0 +1,1388 @@
+# Advanced Patterns
+
+Complex patterns for sophisticated application features.
+
+## Table of Contents
+
+- [Multi-Step Wizard](#multi-step-wizard)
+- [Nested Forms](#nested-forms)
+- [Optimistic Updates](#optimistic-updates)
+- [Real-Time Data](#real-time-data)
+- [File Upload with Progress](#file-upload-with-progress)
+- [Infinite Scroll](#infinite-scroll)
+- [Complex Filtering & URL State](#complex-filtering--url-state)
+- [Permission-Based UI](#permission-based-ui)
+
+## Multi-Step Wizard
+
+Guide users through multi-step processes with state management.
+
+### Complete Wizard Example
+
+```markup
+<template>
+    <AwPageSingle
+        hide-menu
+        title="New Campaign Setup"
+        :action="primaryAction"
+        :progress="stepProgress"
+        @action="handleAction"
+    >
+        <template #buttons>
+            <AwButton
+                v-if="currentStep > 1"
+                @click="previousStep"
+                text="Back"
+            />
+        </template>
+
+        <!-- Step 1: Basic Info -->
+        <AwCard v-show="currentStep === 1" title="Campaign Details">
+            <AwInput
+                v-model="campaign.name"
+                :error="errors.name"
+                label="Campaign Name"
+                required
+            />
+
+            <AwTextarea
+                v-model="campaign.description"
+                :error="errors.description"
+                label="Description"
+                rows="4"
+            />
+
+            <AwSelect
+                v-model="campaign.type"
+                :error="errors.type"
+                :options="campaignTypes"
+                label="Campaign Type"
+                required
+            />
+        </AwCard>
+
+        <!-- Step 2: Audience -->
+        <AwCard v-show="currentStep === 2" title="Target Audience">
+            <AwSelect
+                v-model="campaign.audience_type"
+                :error="errors.audience_type"
+                :options="['all_customers', 'segment', 'custom']"
+                label="Audience Type"
+                required
+            />
+
+            <AwSelect
+                v-if="campaign.audience_type === 'segment'"
+                v-model="campaign.segment_id"
+                :error="errors.segment_id"
+                :options="loadSegments"
+                option-label="name"
+                track-by="id"
+                label="Segment"
+            />
+
+            <div v-if="campaign.audience_type === 'custom'">
+                <AwDescription>Select specific customers</AwDescription>
+                <CustomersSelector v-model="campaign.customer_ids" />
+            </div>
+        </AwCard>
+
+        <!-- Step 3: Content -->
+        <AwCard v-show="currentStep === 3" title="Campaign Content">
+            <AwSelect
+                v-model="campaign.template_key"
+                :error="errors.template_key"
+                :options="loadTemplates"
+                :option-label="formatTemplateLabel"
+                track-by="template_key"
+                label="Message Template"
+                required
+            />
+
+            <AwMarkdownEditor
+                v-model="campaign.content"
+                :error="errors.content"
+                label="Message Content"
+            />
+
+            <AwCard title="Preview" class="mt-4">
+                <div v-html="compiledPreview" />
+            </AwCard>
+        </AwCard>
+
+        <!-- Step 4: Schedule -->
+        <AwCard v-show="currentStep === 4" title="Schedule Campaign">
+            <AwSwitcher
+                v-model="campaign.send_immediately"
+                label="Send Immediately"
+            />
+
+            <div v-if="!campaign.send_immediately">
+                <AwDate
+                    v-model="campaign.scheduled_date"
+                    :error="errors.scheduled_date"
+                    label="Schedule Date"
+                    :min="minScheduleDate"
+                />
+
+                <AwInput
+                    v-model="campaign.scheduled_time"
+                    :error="errors.scheduled_time"
+                    type="time"
+                    label="Schedule Time"
+                />
+            </div>
+        </AwCard>
+
+        <!-- Step 5: Review -->
+        <AwCard v-show="currentStep === 5" title="Review & Confirm">
+            <AwGrid :col="2">
+                <div>
+                    <AwDescription>Campaign Name</AwDescription>
+                    <p class="font-medium">{{ campaign.name }}</p>
+                </div>
+
+                <div>
+                    <AwDescription>Type</AwDescription>
+                    <p class="font-medium">{{ campaign.type }}</p>
+                </div>
+
+                <div>
+                    <AwDescription>Audience</AwDescription>
+                    <p class="font-medium">{{ audienceDescription }}</p>
+                </div>
+
+                <div>
+                    <AwDescription>Schedule</AwDescription>
+                    <p class="font-medium">{{ scheduleDescription }}</p>
+                </div>
+            </AwGrid>
+
+            <AwAlert type="info" class="mt-6">
+                Please review all details before creating the campaign.
+            </AwAlert>
+        </AwCard>
+    </AwPageSingle>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            currentStep: 1,
+            totalSteps: 5,
+            stepTitles: ['Details', 'Audience', 'Content', 'Schedule', 'Review'],
+            campaign: {
+                name: '',
+                description: '',
+                type: null,
+                audience_type: 'all_customers',
+                segment_id: null,
+                customer_ids: [],
+                template_key: null,
+                content: '',
+                send_immediately: true,
+                scheduled_date: null,
+                scheduled_time: null
+            },
+            errors: {},
+            saving: false,
+            campaignTypes: ['email', 'sms', 'push_notification']
+        }
+    },
+
+    computed: {
+        primaryAction() {
+            // Primary action changes based on step
+            if (this.currentStep < this.totalSteps) {
+                return {
+                    key: 'next',
+                    label: 'Next',
+                    disabled: !this.isStepValid,
+                    color: 'accent'
+                }
+            }
+
+            return {
+                key: 'submit',
+                label: 'Create Campaign',
+                loading: this.saving,
+                color: 'accent'
+            }
+        },
+
+        stepProgress() {
+            return Math.round((this.currentStep / this.totalSteps) * 100)
+        },
+
+        isStepValid() {
+            switch (this.currentStep) {
+                case 1:
+                    return this.campaign.name && this.campaign.type
+                case 2:
+                    if (this.campaign.audience_type === 'segment') {
+                        return !!this.campaign.segment_id
+                    }
+                    if (this.campaign.audience_type === 'custom') {
+                        return this.campaign.customer_ids.length > 0
+                    }
+                    return true
+                case 3:
+                    return this.campaign.template_key && this.campaign.content
+                case 4:
+                    if (this.campaign.send_immediately) {
+                        return true
+                    }
+                    return this.campaign.scheduled_date && this.campaign.scheduled_time
+                case 5:
+                    return true
+                default:
+                    return false
+            }
+        },
+
+        audienceDescription() {
+            if (this.campaign.audience_type === 'all_customers') {
+                return 'All Customers'
+            }
+            if (this.campaign.audience_type === 'segment') {
+                return `Segment: ${this.campaign.segment_id}`
+            }
+            return `${this.campaign.customer_ids.length} selected customers`
+        },
+
+        scheduleDescription() {
+            if (this.campaign.send_immediately) {
+                return 'Send Immediately'
+            }
+            return `${this.$dayjs(this.campaign.scheduled_date).format('ll')} at ${this.campaign.scheduled_time}`
+        },
+
+        compiledPreview() {
+            // Compile template with sample data
+            return this.campaign.content
+        },
+
+        minScheduleDate() {
+            return this.$dayjs().format('YYYY-MM-DD')
+        }
+    },
+
+    methods: {
+        handleAction(action) {
+            if (action.key === 'next') {
+                this.nextStep()
+            } else if (action.key === 'submit') {
+                this.submit()
+            }
+        },
+
+        nextStep() {
+            if (this.isStepValid && this.currentStep < this.totalSteps) {
+                this.currentStep++
+            }
+        },
+
+        previousStep() {
+            if (this.currentStep > 1) {
+                this.currentStep--
+            }
+        },
+
+        async submit() {
+            this.saving = true
+
+            try {
+                await this.$axios.post('/api/campaigns', {
+                    shop_uuid: this.$route.params.shop_uuid,
+                    ...this.campaign
+                })
+
+                this.$notify({
+                    message: 'Campaign created successfully',
+                    type: 'success'
+                })
+
+                this.$router.push(`/shops/${this.$route.params.shop_uuid}/campaigns`)
+            } catch (error) {
+                if (error.response?.status === 422) {
+                    this.errors = error.response.data.errors
+                    this.$notify({
+                        message: 'Please fix validation errors',
+                        type: 'error'
+                    })
+                } else {
+                    this.$notify({
+                        message: 'Failed to create campaign',
+                        type: 'error'
+                    })
+                }
+            } finally {
+                this.saving = false
+            }
+        },
+
+        loadSegments(search) {
+            return `/api/shops/${this.$route.params.shop_uuid}/segments?search=${search}`
+        },
+
+        loadTemplates(search) {
+            return `/api/shops/${this.$route.params.shop_uuid}/templates?search=${search}&type=${this.campaign.type}`
+        },
+
+        formatTemplateLabel(template) {
+            return `${template.name} (${template.channel})`
+        }
+    }
+}
+</script>
+```
+
+## Nested Forms
+
+Manage parent-child relationships with dynamic fields.
+
+### Order with Line Items
+
+```markup
+<template>
+    <AwPageSingle
+        hide-menu
+        :title="order.isNew() ? 'New Order' : 'Edit Order'"
+        :action="{
+            key: 'save',
+            label: 'Save Order',
+            loading: saving,
+            color: 'accent'
+        }"
+        @action="handleAction"
+    >
+
+        <!-- Customer Selection -->
+        <AwCard title="Customer">
+            <AwSelect
+                v-model="order.customer_id"
+                :error="order.errors.customer_id"
+                :options="loadCustomers"
+                option-label="name"
+                track-by="id"
+                label="Customer"
+                required
+            />
+        </AwCard>
+
+        <!-- Line Items -->
+        <AwCard title="Order Items" class="mt-6">
+            <div
+                v-for="(item, index) in order.items"
+                :key="item.uuid"
+                class="mb-4 p-4 border rounded"
+            >
+                <AwFlow justify="between" align="start">
+                    <AwGrid :col="3" class="flex-1">
+                        <AwSelect
+                            v-model="item.product_id"
+                            :error="getItemError(index, 'product_id')"
+                            :options="loadProducts"
+                            option-label="name"
+                            track-by="id"
+                            label="Product"
+                            @input="updateItemPrice(index)"
+                        />
+
+                        <AwInput
+                            v-model.number="item.quantity"
+                            :error="getItemError(index, 'quantity')"
+                            type="number"
+                            label="Quantity"
+                            min="1"
+                            @input="updateItemTotal(index)"
+                        />
+
+                        <AwInput
+                            v-model.number="item.price"
+                            :error="getItemError(index, 'price')"
+                            type="number"
+                            label="Price"
+                            step="0.01"
+                            @input="updateItemTotal(index)"
+                        />
+                    </AwGrid>
+
+                    <AwButton
+                        @click="removeItem(index)"
+                        color="error"
+                        size="sm"
+                    >
+                        Remove
+                    </AwButton>
+                </AwFlow>
+
+                <div class="mt-2 text-right">
+                    <strong>Total: ${{ item.total.toFixed(2) }}</strong>
+                </div>
+            </div>
+
+            <AwButton @click="addItem" icon="plus">
+                Add Item
+            </AwButton>
+        </AwCard>
+
+        <!-- Order Summary -->
+        <AwCard title="Order Summary" class="mt-6">
+            <AwGrid :col="2">
+                <div>
+                    <AwDescription>Subtotal</AwDescription>
+                    <p class="text-xl font-medium">${{ subtotal.toFixed(2) }}</p>
+                </div>
+
+                <div>
+                    <AwDescription>Tax ({{ taxRate }}%)</AwDescription>
+                    <p class="text-xl font-medium">${{ tax.toFixed(2) }}</p>
+                </div>
+
+                <div class="col-span-2">
+                    <AwDescription>Total</AwDescription>
+                    <p class="text-3xl font-bold">${{ total.toFixed(2) }}</p>
+                </div>
+            </AwGrid>
+        </AwCard>
+    </AwPageSingle>
+</template>
+
+<script>
+import { v4 as uuidv4 } from 'uuid'
+
+export default {
+    data() {
+        return {
+            order: {
+                customer_id: null,
+                items: [],
+                errors: {
+                    get(field) {
+                        return this[field]
+                    },
+                    isEmpty() {
+                        return Object.keys(this).length === 1 // Only 'get' method
+                    }
+                }
+            },
+            itemErrors: [],
+            saving: false,
+            taxRate: 10
+        }
+    },
+
+    computed: {
+        subtotal() {
+            return this.order.items.reduce((sum, item) => sum + (item.total || 0), 0)
+        },
+
+        tax() {
+            return (this.subtotal * this.taxRate) / 100
+        },
+
+        total() {
+            return this.subtotal + this.tax
+        }
+    },
+
+    mounted() {
+        // Start with one empty item
+        this.addItem()
+    },
+
+    methods: {
+        handleAction(action) {
+            if (action.key === 'save') {
+                this.save()
+            }
+        },
+
+        addItem() {
+            this.order.items.push({
+                uuid: uuidv4(),
+                product_id: null,
+                quantity: 1,
+                price: 0,
+                total: 0
+            })
+        },
+
+        removeItem(index) {
+            this.order.items.splice(index, 1)
+        },
+
+        async updateItemPrice(index) {
+            const item = this.order.items[index]
+            if (!item.product_id) return
+
+            try {
+                const { data } = await this.$axios.get(`/api/products/${item.product_id}`)
+                item.price = data.price
+                this.updateItemTotal(index)
+            } catch (error) {
+                this.$notify({
+                    message: 'Failed to load product price',
+                    type: 'error'
+                })
+            }
+        },
+
+        updateItemTotal(index) {
+            const item = this.order.items[index]
+            item.total = (item.quantity || 0) * (item.price || 0)
+        },
+
+        getItemError(index, field) {
+            return this.itemErrors[index]?.[field]
+        },
+
+        async save() {
+            this.saving = true
+
+            try {
+                const payload = {
+                    shop_uuid: this.$route.params.shop_uuid,
+                    customer_id: this.order.customer_id,
+                    items: this.order.items.map(item => ({
+                        product_id: item.product_id,
+                        quantity: item.quantity,
+                        price: item.price
+                    })),
+                    subtotal: this.subtotal,
+                    tax: this.tax,
+                    total: this.total
+                }
+
+                const { data } = await this.$axios.post('/api/orders', payload)
+
+                this.$notify({
+                    message: 'Order saved',
+                    type: 'success'
+                })
+
+                this.$router.push(`/shops/${this.$route.params.shop_uuid}/orders/${data.id}`)
+            } catch (error) {
+                if (error.response?.status === 422) {
+                    const errors = error.response.data.errors
+
+                    // Separate item errors
+                    this.itemErrors = []
+                    Object.keys(errors).forEach(key => {
+                        const match = key.match(/^items\.(\d+)\.(.+)$/)
+                        if (match) {
+                            const [, index, field] = match
+                            if (!this.itemErrors[index]) {
+                                this.itemErrors[index] = {}
+                            }
+                            this.itemErrors[index][field] = errors[key][0]
+                        } else {
+                            this.order.errors[key] = errors[key][0]
+                        }
+                    })
+
+                    this.$notify({
+                        message: 'Please fix validation errors',
+                        type: 'error'
+                    })
+                } else {
+                    this.$notify({
+                        message: 'Failed to save order',
+                        type: 'error'
+                    })
+                }
+            } finally {
+                this.saving = false
+            }
+        },
+
+        loadCustomers(search) {
+            return `/api/shops/${this.$route.params.shop_uuid}/customers?search=${search}`
+        },
+
+        loadProducts(search) {
+            return `/api/shops/${this.$route.params.shop_uuid}/products?search=${search}`
+        }
+    }
+}
+</script>
+```
+
+## Optimistic Updates
+
+Update UI immediately before server confirmation for better UX.
+
+### Toggle with Optimistic Update
+
+```markup
+<template>
+    <AwCard>
+        <AwList :items="settings">
+            <template #item="{ item: setting }">
+                <AwFlow justify="between" align="center">
+                    <div>
+                        <div class="font-medium">{{ setting.label }}</div>
+                        <AwDescription>{{ setting.description }}</AwDescription>
+                    </div>
+
+                    <AwSwitcher
+                        :value="setting.enabled"
+                        @input="toggleSetting(setting)"
+                    />
+                </AwFlow>
+            </template>
+        </AwList>
+    </AwCard>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            settings: [
+                {
+                    key: 'email_notifications',
+                    label: 'Email Notifications',
+                    description: 'Receive email notifications for new orders',
+                    enabled: true
+                },
+                {
+                    key: 'sms_notifications',
+                    label: 'SMS Notifications',
+                    description: 'Receive SMS notifications for urgent updates',
+                    enabled: false
+                }
+            ]
+        }
+    },
+
+    methods: {
+        async toggleSetting(setting) {
+            // Store previous value for rollback
+            const previousValue = setting.enabled
+
+            // Optimistically update UI
+            setting.enabled = !setting.enabled
+
+            try {
+                await this.$axios.patch(`/api/settings/${setting.key}`, {
+                    shop_uuid: this.$route.params.shop_uuid,
+                    enabled: setting.enabled
+                })
+
+                this.$notify({
+                    message: `${setting.label} ${setting.enabled ? 'enabled' : 'disabled'}`,
+                    type: 'success'
+                })
+            } catch (error) {
+                // Rollback on error
+                setting.enabled = previousValue
+
+                this.$notify({
+                    message: 'Failed to update setting',
+                    type: 'error'
+                })
+            }
+        }
+    }
+}
+</script>
+```
+
+### List with Optimistic Delete
+
+```markup
+<script>
+export default {
+    methods: {
+        async deleteCustomer(customer) {
+            const confirmed = await this.$confirm({
+                title: 'Delete Customer',
+                message: `Are you sure you want to delete ${customer.name}?`
+            })
+
+            if (!confirmed) return
+
+            // Store index for rollback
+            const index = this.customers.models.indexOf(customer)
+            const deletedCustomer = { ...customer }
+
+            // Optimistically remove from list
+            this.customers.models.splice(index, 1)
+
+            try {
+                await this.$axios.delete(`/api/customers/${customer.id}`, {
+                    params: {
+                        shop_uuid: this.$route.params.shop_uuid
+                    }
+                })
+
+                this.$notify({
+                    message: 'Customer deleted',
+                    type: 'success'
+                })
+            } catch (error) {
+                // Rollback on error
+                this.customers.models.splice(index, 0, deletedCustomer)
+
+                this.$notify({
+                    message: 'Failed to delete customer',
+                    type: 'error'
+                })
+            }
+        }
+    }
+}
+</script>
+```
+
+## Real-Time Data
+
+Update UI automatically with WebSocket or polling.
+
+### With Laravel Echo (WebSockets)
+
+```markup
+<template>
+    <AwPage title="Orders">
+        <AwAlert v-if="hasNewOrders" type="info" class="mb-6">
+            New orders received.
+            <AwButton size="sm" @click="loadNewOrders">
+                Refresh
+            </AwButton>
+        </AwAlert>
+
+        <AwTableBuilder :collection="orders">
+            <AwTableCol field="number" title="Order #" />
+            <AwTableCol field="customer_name" title="Customer" />
+            <AwTableCol field="total" title="Total" />
+            <AwTableCol field="status" title="Status" />
+        </AwTableBuilder>
+    </AwPage>
+</template>
+
+<script>
+import Orders from '~/collections/Orders'
+
+export default {
+    data() {
+        return {
+            orders: new Orders([], {
+                shop_uuid: this.$route.params.shop_uuid
+            }),
+            hasNewOrders: false
+        }
+    },
+
+    mounted() {
+        // Subscribe to shop channel
+        window.Echo.private(`shop.${this.$route.params.shop_uuid}`)
+            .listen('OrderCreated', this.onOrderCreated)
+            .listen('OrderUpdated', this.onOrderUpdated)
+    },
+
+    beforeDestroy() {
+        // Unsubscribe
+        window.Echo.leave(`shop.${this.$route.params.shop_uuid}`)
+    },
+
+    methods: {
+        onOrderCreated(event) {
+            console.log('New order:', event.order)
+            this.hasNewOrders = true
+
+            this.$notify({
+                message: `New order #${event.order.number}`,
+                type: 'info'
+            })
+        },
+
+        onOrderUpdated(event) {
+            // Find and update order in collection
+            const order = this.orders.models.find(o => o.id === event.order.id)
+            if (order) {
+                Object.assign(order, event.order)
+            }
+        },
+
+        async loadNewOrders() {
+            await this.orders.fetch()
+            this.hasNewOrders = false
+        }
+    }
+}
+</script>
+```
+
+### With Polling
+
+```markup
+<script>
+export default {
+    data() {
+        return {
+            pollingInterval: null,
+            lastUpdated: null
+        }
+    },
+
+    mounted() {
+        // Initial load
+        this.loadData()
+
+        // Poll every 30 seconds
+        this.pollingInterval = setInterval(() => {
+            this.loadData()
+        }, 30000)
+
+        // Stop polling when page hidden
+        document.addEventListener('visibilitychange', this.handleVisibilityChange)
+    },
+
+    beforeDestroy() {
+        if (this.pollingInterval) {
+            clearInterval(this.pollingInterval)
+        }
+        document.removeEventListener('visibilitychange', this.handleVisibilityChange)
+    },
+
+    methods: {
+        async loadData() {
+            // Only poll if page is visible
+            if (document.hidden) return
+
+            await this.collection.fetch()
+            this.lastUpdated = Date.now()
+        },
+
+        handleVisibilityChange() {
+            if (document.hidden) {
+                // Stop polling
+                if (this.pollingInterval) {
+                    clearInterval(this.pollingInterval)
+                    this.pollingInterval = null
+                }
+            } else {
+                // Resume polling
+                this.loadData()
+                this.pollingInterval = setInterval(() => {
+                    this.loadData()
+                }, 30000)
+            }
+        }
+    }
+}
+</script>
+```
+
+## File Upload with Progress
+
+Track upload progress for large files.
+
+### Upload with Progress Bar
+
+```markup
+<template>
+    <AwCard title="Upload Files">
+        <AwUploader
+            v-model="files"
+            :uploading="uploading"
+            :progress="uploadProgress"
+            multiple
+            @change="handleUpload"
+        />
+
+        <AwProgress
+            v-if="uploading"
+            :value="uploadProgress"
+            class="mt-4"
+        />
+
+        <AwUploaderFiles
+            v-model="uploadedFiles"
+            @remove="removeFile"
+        />
+    </AwCard>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            files: [],
+            uploadedFiles: [],
+            uploading: false,
+            uploadProgress: 0
+        }
+    },
+
+    methods: {
+        async handleUpload(files) {
+            if (!files || files.length === 0) return
+
+            this.uploading = true
+            this.uploadProgress = 0
+
+            const formData = new FormData()
+            files.forEach(file => {
+                formData.append('files[]', file)
+            })
+            formData.append('shop_uuid', this.$route.params.shop_uuid)
+
+            try {
+                const { data } = await this.$axios.post('/api/files', formData, {
+                    headers: {
+                        'Content-Type': 'multipart/form-data'
+                    },
+                    onUploadProgress: (progressEvent) => {
+                        this.uploadProgress = Math.round(
+                            (progressEvent.loaded * 100) / progressEvent.total
+                        )
+                    }
+                })
+
+                this.uploadedFiles.push(...data.files)
+
+                this.$notify({
+                    message: `${data.files.length} file(s) uploaded`,
+                    type: 'success'
+                })
+            } catch (error) {
+                this.$notify({
+                    message: 'Failed to upload files',
+                    type: 'error'
+                })
+            } finally {
+                this.uploading = false
+                this.uploadProgress = 0
+                this.files = []
+            }
+        },
+
+        async removeFile(file) {
+            try {
+                await this.$axios.delete(`/api/files/${file.id}`)
+
+                const index = this.uploadedFiles.indexOf(file)
+                this.uploadedFiles.splice(index, 1)
+
+                this.$notify({
+                    message: 'File removed',
+                    type: 'success'
+                })
+            } catch (error) {
+                this.$notify({
+                    message: 'Failed to remove file',
+                    type: 'error'
+                })
+            }
+        }
+    }
+}
+</script>
+```
+
+## Infinite Scroll
+
+Load more data as user scrolls.
+
+### Infinite Scroll Table
+
+```markup
+<template>
+    <AwPage title="Products">
+        <div ref="scrollContainer" class="overflow-auto" style="max-height: 80vh;">
+            <AwCard
+                v-for="product in products"
+                :key="product.id"
+                class="mb-4"
+            >
+                <h3>{{ product.name }}</h3>
+                <p>{{ product.description }}</p>
+                <p class="text-2xl font-bold">${{ product.price }}</p>
+            </AwCard>
+
+            <div v-if="loading" class="py-6 text-center">
+                <AwProgress indeterminate />
+            </div>
+
+            <div v-if="!hasMore" class="py-6 text-center text-gray-500">
+                No more products
+            </div>
+        </div>
+    </AwPage>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            products: [],
+            page: 1,
+            loading: false,
+            hasMore: true
+        }
+    },
+
+    mounted() {
+        this.loadProducts()
+
+        // Add scroll listener
+        this.$refs.scrollContainer.addEventListener('scroll', this.handleScroll)
+    },
+
+    beforeDestroy() {
+        this.$refs.scrollContainer.removeEventListener('scroll', this.handleScroll)
+    },
+
+    methods: {
+        async loadProducts() {
+            if (this.loading || !this.hasMore) return
+
+            this.loading = true
+
+            try {
+                const { data } = await this.$axios.get('/api/products', {
+                    params: {
+                        shop_uuid: this.$route.params.shop_uuid,
+                        page: this.page,
+                        per_page: 20
+                    }
+                })
+
+                this.products.push(...data.data)
+                this.page++
+                this.hasMore = data.meta.current_page < data.meta.last_page
+            } catch (error) {
+                this.$notify({
+                    message: 'Failed to load products',
+                    type: 'error'
+                })
+            } finally {
+                this.loading = false
+            }
+        },
+
+        handleScroll() {
+            const container = this.$refs.scrollContainer
+            const scrollPosition = container.scrollTop + container.clientHeight
+            const scrollHeight = container.scrollHeight
+
+            // Load more when scrolled to 80% of content
+            if (scrollPosition >= scrollHeight * 0.8) {
+                this.loadProducts()
+            }
+        }
+    }
+}
+</script>
+```
+
+## Complex Filtering & URL State
+
+Sync filters with URL query parameters for shareable links.
+
+### URL-Synced Filters
+
+```markup
+<template>
+    <AwPage title="Orders">
+        <AwCard class="mb-6">
+            <AwGrid :col="4">
+                <AwSelect
+                    v-model="filters.status"
+                    :options="statusOptions"
+                    label="Status"
+                    @input="updateFilters"
+                />
+
+                <AwSelect
+                    v-model="filters.payment_method"
+                    :options="paymentOptions"
+                    label="Payment"
+                    @input="updateFilters"
+                />
+
+                <AwDate
+                    v-model="filters.date_from"
+                    label="From"
+                    @input="updateFilters"
+                />
+
+                <AwDate
+                    v-model="filters.date_to"
+                    label="To"
+                    @input="updateFilters"
+                />
+            </AwGrid>
+
+            <AwFlow justify="between" class="mt-4">
+                <AwButton @click="resetFilters">
+                    Reset Filters
+                </AwButton>
+
+                <AwButton @click="exportResults" color="accent">
+                    Export Results
+                </AwButton>
+            </AwFlow>
+        </AwCard>
+
+        <AwTableBuilder :collection="orders">
+            <AwTableCol field="number" title="Order #" />
+            <AwTableCol field="total" title="Total" />
+            <AwTableCol field="status" title="Status" />
+        </AwTableBuilder>
+    </AwPage>
+</template>
+
+<script>
+import Orders from '~/collections/Orders'
+
+export default {
+    data() {
+        return {
+            orders: new Orders([], {
+                shop_uuid: this.$route.params.shop_uuid
+            }),
+            filters: {
+                status: null,
+                payment_method: null,
+                date_from: null,
+                date_to: null
+            },
+            statusOptions: ['all', 'pending', 'processing', 'completed'],
+            paymentOptions: ['all', 'card', 'cash', 'bank_transfer']
+        }
+    },
+
+    mounted() {
+        // Load filters from URL
+        this.loadFiltersFromURL()
+
+        // Apply filters
+        this.applyFilters()
+    },
+
+    watch: {
+        '$route.query': {
+            handler() {
+                this.loadFiltersFromURL()
+                this.applyFilters()
+            },
+            deep: true
+        }
+    },
+
+    methods: {
+        loadFiltersFromURL() {
+            this.filters = {
+                status: this.$route.query.status || null,
+                payment_method: this.$route.query.payment_method || null,
+                date_from: this.$route.query.date_from || null,
+                date_to: this.$route.query.date_to || null
+            }
+        },
+
+        updateFilters() {
+            // Update URL query params
+            const query = {}
+
+            Object.keys(this.filters).forEach(key => {
+                if (this.filters[key] && this.filters[key] !== 'all') {
+                    query[key] = this.filters[key]
+                }
+            })
+
+            this.$router.push({ query })
+        },
+
+        applyFilters() {
+            const options = {
+                shop_uuid: this.$route.params.shop_uuid
+            }
+
+            Object.keys(this.filters).forEach(key => {
+                if (this.filters[key] && this.filters[key] !== 'all') {
+                    options[key] = this.filters[key]
+                }
+            })
+
+            this.orders.setOptions(options)
+            this.orders.fetch()
+        },
+
+        resetFilters() {
+            this.$router.push({ query: {} })
+        },
+
+        async exportResults() {
+            try {
+                const response = await this.$axios.get('/api/orders/export', {
+                    params: {
+                        shop_uuid: this.$route.params.shop_uuid,
+                        ...this.$route.query
+                    },
+                    responseType: 'blob'
+                })
+
+                // Download file
+                const url = window.URL.createObjectURL(new Blob([response.data]))
+                const link = document.createElement('a')
+                link.href = url
+                link.setAttribute('download', `orders-${Date.now()}.csv`)
+                document.body.appendChild(link)
+                link.click()
+                link.remove()
+
+                this.$notify({
+                    message: 'Export completed',
+                    type: 'success'
+                })
+            } catch (error) {
+                this.$notify({
+                    message: 'Failed to export',
+                    type: 'error'
+                })
+            }
+        }
+    }
+}
+</script>
+```
+
+## Permission-Based UI
+
+Show/hide features based on user permissions.
+
+### With CASL Permissions
+
+```markup
+<template>
+    <AwPage title="Customers">
+        <template #buttons>
+            <AwButton
+                v-if="$can('create', 'Customer')"
+                :href="`/shops/${$route.params.shop_uuid}/customers/new`"
+                color="accent"
+            >
+                Add Customer
+            </AwButton>
+
+            <AwButton
+                v-if="$can('export', 'Customer')"
+                @click="exportCustomers"
+            >
+                Export
+            </AwButton>
+        </template>
+
+        <AwTableBuilder :collection="customers">
+            <AwTableCol field="name" title="Name" />
+            <AwTableCol field="email" title="Email" />
+
+            <template #dropdown="{ cell }">
+                <AwDropdownButton>
+                    <AwButton
+                        v-if="$can('update', cell)"
+                        @click="editCustomer(cell)"
+                    >
+                        Edit
+                    </AwButton>
+
+                    <AwButton
+                        v-if="$can('delete', cell)"
+                        @click="deleteCustomer(cell)"
+                    >
+                        Delete
+                    </AwButton>
+
+                    <AwButton
+                        v-if="$can('view', 'Order') && model.orders_count > 0"
+                        @click="viewOrders(model)"
+                    >
+                        View Orders ({{ model.orders_count }})
+                    </AwButton>
+                </AwDropdownButton>
+            </template>
+        </AwTableBuilder>
+    </AwPage>
+</template>
+
+<script>
+import Customers from '~/collections/Customers'
+
+export default {
+    data() {
+        return {
+            customers: new Customers([], {
+                shop_uuid: this.$route.params.shop_uuid
+            })
+        }
+    },
+
+    methods: {
+        editCustomer(customer) {
+            if (!this.$can('update', customer)) {
+                this.$notify({
+                    message: 'You do not have permission to edit this customer',
+                    type: 'error'
+                })
+                return
+            }
+
+            this.$router.push(`/shops/${this.$route.params.shop_uuid}/customers/${customer.id}/edit`)
+        },
+
+        async deleteCustomer(customer) {
+            if (!this.$can('delete', customer)) {
+                this.$notify({
+                    message: 'You do not have permission to delete this customer',
+                    type: 'error'
+                })
+                return
+            }
+
+            const confirmed = await this.$confirm({
+                title: 'Delete Customer',
+                message: 'Are you sure?'
+            })
+
+            if (!confirmed) return
+
+            try {
+                await this.$axios.delete(`/api/customers/${customer.id}`)
+
+                this.$notify({
+                    message: 'Customer deleted',
+                    type: 'success'
+                })
+
+                await this.customers.fetch()
+            } catch (error) {
+                this.$notify({
+                    message: 'Failed to delete customer',
+                    type: 'error'
+                })
+            }
+        },
+
+        async exportCustomers() {
+            // Implementation
+        },
+
+        viewOrders(customer) {
+            this.$router.push(`/shops/${this.$route.params.shop_uuid}/orders?customer_id=${customer.id}`)
+        }
+    }
+}
+</script>
+```
+
+## See Also
+
+- [Common Patterns](./common-patterns.md) - Standard application patterns
+- [Page Patterns](../guides/page-patterns/) - Page structure guides
+- [Data Fetching Guide](../guides/data-fetching.md) - Collection and model patterns
+- [Best Practices](../guides/best-practices.md) - Framework best practices