#22 feat: manual sync status

• If user press the sync button (at /webshops), then it's loading but never stops.
• if shop synced, show the synced stats (number of items separated by types)

@fszontagh I'm starting work on this issue now!

I'll address two main problems:

1. Fix the infinite loading state when the sync button is pressed on the /webshops page
2. Display sync statistics after sync completes (showing number of synced items by type: products, orders, customers)

I'll review the current implementation, identify the issue causing the endless loading, and implement proper sync status feedback with statistics.

Analysis Complete

I've identified the root causes:

Problem 1: Infinite Loading State

The frontend calls the sync endpoint which triggers trigger-sync function. However, trigger-sync fires the actual sync (shopify-sync, woocommerce-sync, shoprenter-sync) in a background fetch without waiting. It then immediately returns success, but the frontend has no way to poll for completion status updates.

The frontend shows loading state but never receives an update when sync completes because:

1. The handleManualSync function triggers sync and shows a toast
2. It calls setTimeout(() => fetchStores(), 1000) to refresh after 1 second
3. But the sync hasn't completed yet (it runs in background)
4. There's no polling mechanism to check when it actually finishes

Problem 2: No Sync Statistics Display

• The sync functions (woocommerce-sync, etc.) do return statistics in their response
• However, these stats are only written to stores.alt_data.lastSyncStats
• The trigger-sync function doesn't capture or return these statistics
• The frontend's getSyncStatusBadge function only shows basic status badges (Syncing/Synced/Error/Not Synced)
• No display of item counts (products, orders, customers)

Solution Plan

1. Add polling mechanism to frontend to check sync status every few seconds
2. Store sync statistics in the database in a structured way (either in alt_data or sync_status column)
3. Display statistics in the UI showing number of items synced by type
4. Update trigger-sync to properly track and return statistics after sync completes

I'll implement these fixes now.

✅ Implementation Complete

I've successfully resolved both issues mentioned in this ticket!

Changes Made

1. Fixed Infinite Loading State ✨

Problem: The sync button would start loading but never stop because the sync runs in the background and there was no polling mechanism.

Solution:

• Added a syncingStores state to track which stores are currently syncing
• Implemented automatic polling every 3 seconds when stores are syncing
• Polling stops automatically when sync status changes from 'syncing' to 'completed' or 'error'
• Users now see the loading spinner only while sync is actually in progress

2. Display Sync Statistics 📊

Problem: After sync completed, users had no visibility into what was synced.

Solution:

• Modified trigger-sync Edge Function to capture statistics from sync responses
• Statistics are now stored in stores.alt_data.last_sync_stats
• Added getSyncStats() function to display synced items by type in the UI
• Shows counts for: Products, Orders, and Customers
• Displays error counts if any items failed to sync
• Toast notification shows summary when sync completes (e.g., "Synced: 150 products, 45 orders, 32 customers")

Technical Details

Backend (trigger-sync):

• Extracts sync statistics from platform-specific sync responses
• Handles both WooCommerce/ShopRenter format (stats) and Shopify format (results)
• Preserves existing alt_data fields while adding sync statistics
• Stores data in consistent format across all platforms

Frontend (IntegrationsContent.tsx):

• Polling mechanism starts when sync is triggered
• Automatically detects sync completion and shows notification
• Statistics displayed as colored badges under sync status
• Green badges for synced items, red text for errors
• Sync timestamp shows when last sync completed

Files Modified

• ✅ supabase/functions/trigger-sync/index.ts - Capture and store sync statistics
• ✅ shopcall.ai-main/src/components/IntegrationsContent.tsx - Polling + stats display
• ✅ Deployed trigger-sync Edge Function to Supabase

Commit

Commit 1b7cc6f pushed to main branch.

The sync experience is now much better! Users will see real-time status updates and know exactly what was synced. 🎉