feat: add GDPR-compliant webshops UI with exclusion statistics

- Add environment variable support for hiding orders/customers labels in webshop cards
- Implement exclusion statistics display for categories and products
- Update frontend to conditionally show/hide data access badges based on VITE_HIDE_ORDERS_ACCESS_SETTINGS and VITE_HIDE_CUSTOMERS_ACCESS_SETTINGS
- Add backend API logic to calculate and return exclusion stats from excluded_categories table and platform-specific product cache tables
- Show excluded product count inline with sync stats (e.g., "Products (2 excluded): 150")
- Support all platforms: Shopify, WooCommerce, ShopRenter
- Fix ShopRenter duplication issue by removing redundant exclusion display
- Enhance GDPR compliance with configurable data access policy visibility

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

shopcall.ai-main/src/components/IntegrationsContent.tsx

@@ -15,6 +15,9 @@ import { API_URL } from "@/lib/config";
 import { useToast } from "@/hooks/use-toast";
 import { useTranslation } from "react-i18next";
 
+const HIDE_ORDERS_ACCESS_SETTINGS = import.meta.env.VITE_HIDE_ORDERS_ACCESS_SETTINGS === 'true';
+const HIDE_CUSTOMERS_ACCESS_SETTINGS = import.meta.env.VITE_HIDE_CUSTOMERS_ACCESS_SETTINGS === 'true';
+
 interface DataAccessPermissions {
   allow_customer_access: boolean;
   allow_order_access: boolean;
@@ -34,6 +37,10 @@ interface ConnectedStore {
   sync_completed_at?: string | null;
   sync_error?: string | null;
   data_access_permissions?: DataAccessPermissions;
+  exclusion_stats?: {
+    excluded_categories: number;
+    excluded_products: number;
+  };
   alt_data?: {
     wcVersion?: string;
     wpVersion?: string;
@@ -468,12 +475,16 @@ export function IntegrationsContent() {
 
     const items = [];
     if (stats.products?.synced !== undefined) {
-      items.push({ label: t('integrations.products'), count: stats.products.synced, errors: stats.products.errors || 0 });
+      const excludedProducts = shop.exclusion_stats?.excluded_products || 0;
+      const productLabel = excludedProducts > 0
+        ? `${t('integrations.products')} (${excludedProducts} excluded)`
+        : t('integrations.products');
+      items.push({ label: productLabel, count: stats.products.synced, errors: stats.products.errors || 0 });
     }
-    if (stats.orders?.synced !== undefined) {
+    if (stats.orders?.synced !== undefined && HIDE_ORDERS_ACCESS_SETTINGS == false) {
       items.push({ label: t('integrations.orders'), count: stats.orders.synced, errors: stats.orders.errors || 0 });
     }
-    if (stats.customers?.synced !== undefined) {
+    if (stats.customers?.synced !== undefined && HIDE_CUSTOMERS_ACCESS_SETTINGS == false) {
       items.push({ label: t('integrations.customers'), count: stats.customers.synced, errors: stats.customers.errors || 0 });
     }
 
@@ -494,6 +505,34 @@ export function IntegrationsContent() {
     );
   };
 
+  const getExclusionStats = (shop: ConnectedStore) => {
+    const exclusionStats = shop.exclusion_stats;
+    if (!exclusionStats || (exclusionStats.excluded_categories === 0 && exclusionStats.excluded_products === 0)) {
+      return null;
+    }
+
+    const exclusionItems = [];
+    if (exclusionStats.excluded_categories > 0) {
+      exclusionItems.push({ label: t('integrations.excludedCategories', 'Excluded Categories'), count: exclusionStats.excluded_categories });
+    }
+    if (exclusionStats.excluded_products > 0) {
+      exclusionItems.push({ label: t('integrations.excludedProducts', 'Excluded Products'), count: exclusionStats.excluded_products });
+    }
+
+    if (exclusionItems.length === 0) return null;
+
+    return (
+      <div className="flex flex-wrap gap-2 mt-2">
+        {exclusionItems.map((item) => (
+          <div key={item.label} className="text-xs bg-orange-700/30 border border-orange-500/30 px-2 py-1 rounded">
+            <span className="text-orange-400">{item.label}:</span>{' '}
+            <span className="text-orange-300 font-semibold">{item.count}</span>
+          </div>
+        ))}
+      </div>
+    );
+  };
+
   const getDataAccessBadges = (shop: ConnectedStore) => {
     // Use the store_sync_config policies instead of the old data_access_permissions
     const syncConfig = getSyncConfig(shop);
@@ -501,6 +540,10 @@ export function IntegrationsContent() {
     const customersPolicy = syncConfig?.customers_access_policy || 'api_only';
     const ordersPolicy = syncConfig?.orders_access_policy || 'api_only';
 
+    // Check environment variables for hiding specific badges
+    const hideCustomers = import.meta.env.VITE_HIDE_CUSTOMERS_ACCESS_SETTINGS === 'true';
+    const hideOrders = import.meta.env.VITE_HIDE_ORDERS_ACCESS_SETTINGS === 'true';
+
     return (
       <div className="flex flex-wrap gap-1">
         {productsPolicy !== 'not_allowed' && (
@@ -508,17 +551,17 @@ export function IntegrationsContent() {
             {t('integrations.products')}
           </Badge>
         )}
-        {customersPolicy !== 'not_allowed' && (
+        {!hideCustomers && customersPolicy !== 'not_allowed' && (
           <Badge variant="outline" className="text-xs border-green-500 text-green-400">
             {t('integrations.customers')}
           </Badge>
         )}
-        {ordersPolicy !== 'not_allowed' && (
+        {!hideOrders && ordersPolicy !== 'not_allowed' && (
           <Badge variant="outline" className="text-xs border-purple-500 text-purple-400">
             {t('integrations.orders')}
           </Badge>
         )}
-        {customersPolicy === 'not_allowed' && ordersPolicy === 'not_allowed' && (
+        {((hideCustomers || customersPolicy === 'not_allowed') && (hideOrders || ordersPolicy === 'not_allowed')) && (
           <Badge variant="outline" className="text-xs border-orange-500 text-orange-400">
             {t('integrations.limitedAccess')}
           </Badge>
@@ -793,7 +836,7 @@ export function IntegrationsContent() {
                       )}
                       {shop.sync_error && (
                         <div className="text-xs text-red-400 mt-1 truncate" title={shop.sync_error}>
-                          Error: {shop.sync_error}
+                          {shop.sync_error}
                         </div>
                       )}
                       {getSyncStats(shop)}

supabase/functions/api/index.ts

@@ -93,6 +93,58 @@ serve(async (req) => {
         )
       }
 
+      // Fetch exclusion stats for all stores
+      const storeIds = stores?.map(store => store.id) || [];
+      let exclusionStats: Record<string, any> = {};
+
+      if (storeIds.length > 0) {
+        // Initialize stats for all stores
+        storeIds.forEach(storeId => {
+          exclusionStats[storeId] = {
+            excluded_categories: 0,
+            excluded_products: 0
+          };
+        });
+
+        // Get excluded categories for all stores
+        const { data: excludedCategories } = await supabase
+          .from('excluded_categories')
+          .select('store_id')
+          .in('store_id', storeIds);
+
+        if (excludedCategories) {
+          excludedCategories.forEach(cat => {
+            exclusionStats[cat.store_id].excluded_categories += 1;
+          });
+        }
+
+        // Get excluded products for each store by platform
+        for (const store of stores || []) {
+          const platform = store.platform_name;
+          let tableName = '';
+
+          if (platform === 'woocommerce') {
+            tableName = 'woocommerce_products_cache';
+          } else if (platform === 'shopify') {
+            tableName = 'shopify_products_cache';
+          } else if (platform === 'shoprenter') {
+            tableName = 'shoprenter_products_cache';
+          }
+
+          if (tableName) {
+            const { data: excludedProducts } = await supabase
+              .from(tableName)
+              .select('id')
+              .eq('store_id', store.id)
+              .eq('excluded', true);
+
+            if (excludedProducts) {
+              exclusionStats[store.id].excluded_products = excludedProducts.length;
+            }
+          }
+        }
+      }
+
       // Transform phone_numbers to phone_number string for backward compatibility
       // Note: For many-to-one relationships, Supabase returns an object, not an array
       const transformedStores = stores?.map(store => {
@@ -101,10 +153,16 @@ serve(async (req) => {
           ? store.phone_numbers[0]
           : store.phone_numbers;
 
+        const storeExclusionStats = exclusionStats[store.id] || {
+          excluded_categories: 0,
+          excluded_products: 0
+        };
+
         return {
           ...store,
           phone_number: phoneData?.phone_number || null,
-          phone_number_details: phoneData || null
+          phone_number_details: phoneData || null,
+          exclusion_stats: storeExclusionStats
         };
       }) || []