@redacto.io/consent-sdk-react 10.0.0-beta.8 → 10.0.0

package/src/RedactoPrivacyCenter/components/ConsentManager.tsx

@@ -1,1206 +0,0 @@
-import { useState, useEffect, useCallback, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { PCInput, PCSelect, PCButton, PCText, PCModal, type SelectOption } from '../ui';
-import { Search, ArrowUpToLine, Filter, Circle } from 'lucide-react';
-import { pcStyles } from '../styles/pcStyles';
-import { AdvancedTable, AdvancedTablePagination } from '../table';
-import {
-  getCoreRowModel,
-  getExpandedRowModel,
-  useReactTable,
-  type ExpandedState,
-  type PaginationState,
-  type Row,
-  type Updater,
-} from '@tanstack/react-table';
-import {
-  fetchUserConsents,
-  fetchGroupPurposes,
-  manageConsent,
-} from '../lib/api';
-import { useOrganization } from '../context/OrganizationContext';
-import { useAuth } from '../context/AuthContext';
-import { useBaseUrl } from '../context/BaseUrlContext';
-import { usePageChrome } from '../context/PageChromeContext';
-import { ConsentStatusEnum } from '../lib/types';
-import type {
-  ConsentAction,
-  ConsentGroup,
-  ConsentModalRecord,
-  DisplayProductGroup,
-  DisplayPurposeRow,
-  PurposeItem,
-  UserConsentDetail,
-} from '../lib/types';
-import { useCurrentLanguage } from '../lib/useCurrentLanguage';
-import { exportTableToCSV, useStatusOptions } from '../lib/consent-manager/utils';
-import { toast } from '../utils/toast';
-import { ConsentManagerTableSkeleton } from './ConsentManagerTableSkeleton';
-import { ModifyConsentModal } from './ModifyConsentModal';
-import { useConsentManagerGroupedColumns } from './ConsentManagerGroupedColumns';
-import { useConsentManagerColumns } from './ConsentManagerColumns';
-import { getStatusLabel, getGivenDateLabel, getValidTillLabel } from './ConsentManagerCells';
-import { ConsentManagerExpandedRow } from './ConsentManagerExpandedRow';
-import { ConsentManagerProductCards } from './ConsentManagerProductCards';
-import { ConsentManagerPurposeCards } from './ConsentManagerPurposeCards';
-import type {
-  ConsentManagerProps,
-  StatusFilterOption,
-  ProductFilterOption,
-} from './types';
-import {
-  SEARCH_DEBOUNCE_DELAY,
-  DEFAULT_PAGE,
-  DEFAULT_PAGE_SIZE,
-} from './ConsentManagerConstants';
-
-type ConsentViewMode = 'product' | 'purpose';
-
-export default function ConsentManager({ variant }: ConsentManagerProps) {
-  const { t } = useTranslation();
-  const statusOptions = useStatusOptions();
-  const { organization } = useOrganization();
-  const { accessToken, refreshToken, onError, updateTokens } = useAuth();
-  const { consentClient } = useBaseUrl();
-  const { setHeaderStatus } = usePageChrome();
-  const organizationId = organization?.uuid;
-  const workspaceId = organization?.workspaces[0]?.uuid;
-  const contact = sessionStorage.getItem('email') || '';
-
-  // Create auth context object for API calls - memoized to prevent infinite loops
-  const authContext = useMemo(() => ({
-    accessToken,
-    refreshToken,
-    onError,
-    updateTokens,
-  }), [accessToken, refreshToken, onError, updateTokens]);
-
-  // Track language changes for localized API calls
-  const { langParam } = useCurrentLanguage();
-
-  // State management
-  const [activeTab, setActiveTab] = useState<'direct' | 'nominated'>('direct');
-  const [viewMode, setViewMode] = useState<ConsentViewMode>('product');
-  const [consentDetail, setConsentDetail] = useState<UserConsentDetail | null>(null);
-  const [consentGroups, setConsentGroups] = useState<DisplayProductGroup[]>([]);
-  const [consentRows, setConsentRows] = useState<DisplayPurposeRow[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [searchQuery, setSearchQuery] = useState('');
-  const [debouncedSearch, setDebouncedSearch] = useState('');
-  const [statusFilter, setStatusFilter] = useState<StatusFilterOption | null>(
-    null
-  );
-  const [productFilter, setProductFilter] =
-    useState<ProductFilterOption | null>(null);
-  const [productOptions, setProductOptions] = useState<ProductFilterOption[]>(
-    []
-  );
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [selectedRecord, setSelectedRecord] = useState<ConsentModalRecord | null>(
-    null
-  );
-  const [exportModal, setExportModal] = useState(false);
-  const [isManageLoading, setIsManageLoading] = useState(false);
-  const [currentPage, setCurrentPage] = useState(DEFAULT_PAGE);
-  const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE);
-  const [expanded, setExpanded] = useState<ExpandedState>({});
-  const [extraPurposesByKey, setExtraPurposesByKey] = useState<Record<string, PurposeItem[]>>({});
-  const [hasMoreByKey, setHasMoreByKey] = useState<Record<string, boolean>>({});
-  const [loadingMoreByKey, setLoadingMoreByKey] = useState<Record<string, boolean>>({});
-  const composedSearchPlaceholder = useMemo(
-    () => `${t('search')} ${t('consent')}, ${t('product')}, ${t('purpose')}...`,
-    [t]
-  );
-  const allStatusOption = useMemo<StatusFilterOption>(
-    () => ({
-      label: `${t('all')} ${t('status')}`,
-      value: '__all__',
-    }),
-    [t]
-  );
-  const allProductOption = useMemo<ProductFilterOption>(
-    () => ({
-      label: `${t('all')} ${t('product')}`,
-      value: '__all__',
-    }),
-    [t]
-  );
-  const statusFilterOptions = useMemo<StatusFilterOption[]>(
-    () => [allStatusOption, ...statusOptions],
-    [allStatusOption, statusOptions]
-  );
-  const productFilterOptions = useMemo<ProductFilterOption[]>(
-    () => [allProductOption, ...productOptions],
-    [allProductOption, productOptions]
-  );
-  const statusSelectValue = statusFilter ?? allStatusOption;
-  const productSelectValue = productFilter ?? allProductOption;
-
-  // Sync selected status filter label when language changes
-  useEffect(() => {
-    if (statusFilter) {
-      const updated = statusOptions.find(opt => opt.value === statusFilter.value);
-      if (updated && updated.label !== statusFilter.label) {
-        setStatusFilter(updated);
-      }
-    }
-  }, [statusOptions, statusFilter]);
-
-  // Sync selected product filter label when language changes
-  useEffect(() => {
-    if (productFilter) {
-      const updated = productOptions.find(opt => opt.value === productFilter.value);
-      if (updated && updated.label !== productFilter.label) {
-        setProductFilter(updated);
-      }
-    }
-  }, [productOptions, productFilter]);
-
-  // Push user_status into the page header so it renders inline with the page title
-  useEffect(() => {
-    const status = consentDetail?.user_status;
-    if (status === 'TRANSFERRED') {
-      setHeaderStatus({ label: t('statusTransferred'), variant: 'warning' });
-    } else if (status === 'ACTIVE') {
-      setHeaderStatus({ label: t('statusActive'), variant: 'success' });
-    } else {
-      setHeaderStatus(null);
-    }
-    return () => setHeaderStatus(null);
-  }, [consentDetail?.user_status, setHeaderStatus, t]);
-
-  // Debounce search query
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setDebouncedSearch(searchQuery);
-    }, SEARCH_DEBOUNCE_DELAY);
-    return () => clearTimeout(timer);
-  }, [searchQuery]);
-
-  const handleOpenModal = useCallback((record: ConsentModalRecord) => {
-    setSelectedRecord(record);
-    setIsModalOpen(true);
-  }, []);
-
-  const getCardKey = useCallback(
-    (group: ConsentGroup): string =>
-      group.nominator
-        ? `nominated:${group.nominator.uuid}:${group.product_uuid}`
-        : `direct:${group.product_uuid}`,
-    []
-  );
-
-  const handleCloseModal = useCallback(() => {
-    setIsModalOpen(false);
-    setSelectedRecord(null);
-  }, []);
-
-  const matchesPurpose = useCallback(
-    (
-      purpose: PurposeItem,
-      group: ConsentGroup,
-      normalizedSearch: string,
-      statusValue?: string
-    ) => {
-      const matchesSearch =
-        !normalizedSearch ||
-        [
-          purpose.name,
-          purpose.description,
-          group.product_name,
-          group.product_description,
-          purpose.method,
-          purpose.status,
-        ]
-          .filter(Boolean)
-          .some((value) => String(value).toLowerCase().includes(normalizedSearch));
-
-      const matchesStatus =
-        !statusValue || purpose.status?.toLowerCase() === statusValue.toLowerCase();
-
-      return matchesSearch && matchesStatus;
-    },
-    []
-  );
-
-  const buildDisplayGroups = useCallback(
-    (
-      groups: ConsentGroup[] | undefined,
-      search: string,
-      statusValue?: string,
-      productUuid?: string
-    ): DisplayProductGroup[] => {
-      if (!groups || groups.length === 0) return [];
-      const normalizedSearch = search.trim().toLowerCase();
-
-      return groups.reduce<DisplayProductGroup[]>((acc, group) => {
-        if (productUuid && group.product_uuid !== productUuid) {
-          return acc;
-        }
-
-        const filteredPurposes = (group.purposes || []).filter((purpose) =>
-          matchesPurpose(purpose, group, normalizedSearch, statusValue)
-        );
-
-        if (filteredPurposes.length === 0) {
-          return acc;
-        }
-
-        const counts = filteredPurposes.reduce(
-          (totals, purpose) => {
-            const normalized = (typeof purpose.status === 'string' ? purpose.status : '').toUpperCase();
-            switch (normalized) {
-              case ConsentStatusEnum.ACTIVE:
-                totals.active += 1;
-                break;
-              case ConsentStatusEnum.WITHDRAWN:
-              case ConsentStatusEnum.REVOKED:
-                totals.withdrawn += 1;
-                break;
-              case ConsentStatusEnum.EXPIRED:
-                totals.expired += 1;
-                break;
-              case ConsentStatusEnum.DECLINED:
-                totals.declined += 1;
-                break;
-              default:
-                break;
-            }
-            return totals;
-          },
-          { active: 0, withdrawn: 0, expired: 0, declined: 0 }
-        );
-
-        const latestGivenDate = filteredPurposes.reduce<string | null>((latest, purpose) => {
-          if (!purpose.given_date) return latest;
-          if (!latest) return purpose.given_date;
-          return new Date(purpose.given_date).getTime() > new Date(latest).getTime()
-            ? purpose.given_date
-            : latest;
-        }, null);
-
-        acc.push({
-          ...group,
-          purposes: filteredPurposes,
-          active_purposes: counts.active,
-          withdrawn_purposes: counts.withdrawn,
-          expired_purposes: counts.expired,
-          declined_purposes: counts.declined,
-          latest_given_date: latestGivenDate,
-        });
-        return acc;
-      }, []);
-    },
-    [matchesPurpose]
-  );
-
-  const flattenProductGroups = useCallback(
-    (groups: ConsentGroup[] | undefined): DisplayPurposeRow[] => {
-      if (!groups || groups.length === 0) return [];
-      return groups.flatMap((group) =>
-        (group.purposes || []).map((purpose) => ({
-          ...purpose,
-          product_uuid: group.product_uuid,
-          product_name: group.product_name,
-          product_description: group.product_description,
-          nominator: group.nominator,
-        }))
-      );
-    },
-    []
-  );
-
-  const filterConsentRows = useCallback(
-    (
-      rows: DisplayPurposeRow[],
-      search: string,
-      statusValue?: string,
-      productUuid?: string
-    ): DisplayPurposeRow[] => {
-      const normalizedSearch = search.trim().toLowerCase();
-      return rows.filter((row) => {
-        const matchesSearch =
-          !normalizedSearch ||
-          [
-            row.name,
-            row.description,
-            row.product_name,
-            row.product_description,
-            row.method,
-            row.status,
-          ]
-            .filter(Boolean)
-            .some((value) =>
-              String(value).toLowerCase().includes(normalizedSearch)
-            );
-
-        const matchesStatus =
-          !statusValue || row.status?.toLowerCase() === statusValue.toLowerCase();
-        const matchesProduct = !productUuid || row.product_uuid === productUuid;
-
-        return matchesSearch && matchesStatus && matchesProduct;
-      });
-    },
-    []
-  );
-
-  const buildProductOptionsFromGroups = useCallback(
-    (groups: ConsentGroup[] | undefined) => {
-      if (!groups || groups.length === 0) return [];
-      const productMap = new Map<string, { label: string; value: string }>();
-      groups.forEach((group) => {
-        if (!productMap.has(group.product_uuid)) {
-          productMap.set(group.product_uuid, {
-            label: group.product_name,
-            value: group.product_uuid,
-          });
-        }
-      });
-      return Array.from(productMap.values());
-    },
-    []
-  );
-
-  const groupedColumns = useConsentManagerGroupedColumns();
-  const purposeColumns = useConsentManagerColumns({
-    onOpenModal: handleOpenModal,
-  });
-
-  const groupedTableClassNames = useMemo(
-    () => ({
-      container: 'pc-consent-table-container',
-      tableClassName: 'pc-consent-table',
-      headerClassName: 'pc-consent-table-header',
-      bodyClassName: 'pc-consent-table-body',
-      rowClassName: 'pc-consent-table-row',
-      cellClassName: 'pc-consent-table-cell',
-      headerCellClassName: 'pc-consent-table-head-cell',
-      expandedRowClassName: 'pc-consent-table-expanded-row',
-      expandedCellClassName: 'pc-consent-table-expanded-cell',
-    }),
-    []
-  );
-
-  const purposeTableClassNames = useMemo(
-    () => ({
-      container: 'pc-consent-table-container',
-      tableClassName: 'pc-consent-table pc-consent-table-purpose',
-      headerClassName: 'pc-consent-table-header',
-      bodyClassName: 'pc-consent-table-body',
-      rowClassName: 'pc-consent-table-row',
-      cellClassName: 'pc-consent-table-cell',
-      headerCellClassName: 'pc-consent-table-head-cell',
-    }),
-    []
-  );
-
-  // Single data fetch function
-  const fetchData = useCallback(async () => {
-    if (!organizationId || !workspaceId) {
-      return;
-    }
-
-    setIsLoading(true);
-    try {
-      const offset = (currentPage - 1) * pageSize;
-      const searchParam = debouncedSearch.trim() || undefined;
-      const statusParam = statusFilter?.value;
-      const productUuidParam = productFilter?.value;
-
-      const response = await fetchUserConsents({
-        organizationId,
-        workspaceId,
-        offset: activeTab === 'direct' ? offset : undefined,
-        limit: activeTab === 'direct' ? pageSize : undefined,
-        nominatedOffset: activeTab === 'nominated' ? offset : undefined,
-        nominatedLimit: activeTab === 'nominated' ? pageSize : undefined,
-        search: searchParam,
-        status: statusParam,
-        product_uuid: productUuidParam,
-        language: langParam,
-        authContext,
-        consentClient,
-      });
-
-      if (!response) {
-        throw new Error('Failed to fetch consent data');
-      }
-
-      setConsentDetail(response);
-      setExtraPurposesByKey({});
-      setHasMoreByKey({});
-      setLoadingMoreByKey({});
-
-      const selectedGroups =
-        activeTab === 'direct' ? response.direct : response.nominated;
-      const displayGroups = buildDisplayGroups(
-        selectedGroups,
-        debouncedSearch,
-        statusParam,
-        productUuidParam
-      );
-      setConsentGroups(displayGroups);
-      const flattenedRows = flattenProductGroups(selectedGroups);
-      const filteredRows = filterConsentRows(
-        flattenedRows,
-        debouncedSearch,
-        statusParam,
-        productUuidParam
-      );
-      setConsentRows(filteredRows);
-
-      // Only refresh the product filter options from an unfiltered fetch.
-      // When a product filter is active the API returns rows for that one
-      // product, so re-deriving options here would shrink the dropdown to
-      // just the selected product (forcing the user to refresh to recover).
-      if (!productFilter) {
-        const combinedGroups = [
-          ...(response.direct || []),
-          ...(response.nominated || []),
-        ];
-        setProductOptions(buildProductOptionsFromGroups(combinedGroups));
-      }
-    } catch (error) {
-      console.error(error);
-      setConsentDetail(null);
-      setConsentGroups([]);
-      setConsentRows([]);
-      setProductOptions([]);
-      setExtraPurposesByKey({});
-      setHasMoreByKey({});
-      setLoadingMoreByKey({});
-      toast.error(t('failedToFetchConsentData'));
-    } finally {
-      setIsLoading(false);
-    }
-  }, [
-    organizationId,
-    workspaceId,
-    currentPage,
-    pageSize,
-    debouncedSearch,
-    statusFilter?.value,
-    productFilter?.value,
-    activeTab,
-    authContext,
-    consentClient,
-    langParam,
-    buildDisplayGroups,
-    flattenProductGroups,
-    filterConsentRows,
-    buildProductOptionsFromGroups,
-    t,
-  ]);
-
-  // Single effect for data fetching
-  useEffect(() => {
-    fetchData();
-  }, [fetchData]);
-
-  const groupedPurposeCount = useMemo(
-    () => consentGroups.reduce((sum, group) => sum + group.purposes.length, 0),
-    [consentGroups]
-  );
-
-  const visibleConsentCount =
-    viewMode === 'product' ? groupedPurposeCount : consentRows.length;
-
-  const visibleProductCount = useMemo(() => {
-    if (viewMode === 'product') {
-      return consentGroups.length;
-    }
-    const productIds = new Set(
-      consentRows.map((row) => row.product_uuid || row.product_name || '')
-    );
-    productIds.delete('');
-    return productIds.size;
-  }, [viewMode, consentGroups, consentRows]);
-
-  const tableTotalCount = useMemo(() => {
-    const pagination =
-      activeTab === 'direct'
-        ? consentDetail?.direct_pagination
-        : consentDetail?.nominated_pagination;
-    return pagination?.total_count ?? 0;
-  }, [activeTab, consentDetail]);
-
-  const tablePageCount = Math.ceil(tableTotalCount / pageSize) || 0;
-
-  const handlePaginationChange = useCallback(
-    (updater: Updater<PaginationState>) => {
-      const next =
-        typeof updater === 'function'
-          ? updater({ pageIndex: currentPage - 1, pageSize })
-          : updater;
-      const nextPage = next.pageIndex + 1;
-      const nextSize = next.pageSize;
-      if (nextPage === currentPage && nextSize === pageSize) return;
-      setCurrentPage(nextPage);
-      setPageSize(nextSize);
-    },
-    [currentPage, pageSize]
-  );
-
-  const productTable = useReactTable<DisplayProductGroup>({
-    data: consentGroups,
-    columns: groupedColumns,
-    getCoreRowModel: getCoreRowModel(),
-    getExpandedRowModel: getExpandedRowModel(),
-    getRowCanExpand: () => true,
-    manualPagination: true,
-    pageCount: tablePageCount,
-    state: {
-      pagination: {
-        pageIndex: currentPage - 1,
-        pageSize: pageSize,
-      },
-      expanded,
-    },
-    onExpandedChange: (updater) => {
-      const next = typeof updater === 'function' ? updater(expanded) : updater;
-      if (next === true) {
-        setExpanded(next);
-        return;
-      }
-      if (!next) {
-        setExpanded({});
-        return;
-      }
-
-      const nextMap = next as Record<string, boolean>;
-      const nextOpenIds = Object.keys(nextMap).filter((rowId) => nextMap[rowId]);
-      if (nextOpenIds.length <= 1) {
-        setExpanded(nextOpenIds.length === 1 ? { [nextOpenIds[0]]: true } : {});
-        return;
-      }
-
-      const prevMap =
-        expanded && expanded !== true ? (expanded as Record<string, boolean>) : {};
-      const newlyOpenedId =
-        nextOpenIds.find((rowId) => !prevMap[rowId]) ??
-        nextOpenIds[nextOpenIds.length - 1];
-
-      setExpanded(newlyOpenedId ? { [newlyOpenedId]: true } : {});
-    },
-    onPaginationChange: (updater) => {
-      handlePaginationChange(updater);
-      setExpanded({});
-    },
-    meta: {
-      onRowClick: (_row: DisplayProductGroup, tableRow?: Row<DisplayProductGroup>) => {
-        tableRow?.toggleExpanded();
-      },
-    },
-  });
-
-  const purposeTable = useReactTable<DisplayPurposeRow>({
-    data: consentRows,
-    columns: purposeColumns,
-    getCoreRowModel: getCoreRowModel(),
-    manualPagination: true,
-    pageCount: tablePageCount,
-    state: {
-      pagination: {
-        pageIndex: currentPage - 1,
-        pageSize: pageSize,
-      },
-    },
-    onPaginationChange: handlePaginationChange,
-  });
-
-  const handleStatusFilterChange = (data: SelectOption | null) => {
-    if (!data || String(data.value) === allStatusOption.value) {
-      setStatusFilter(null);
-    } else {
-      setStatusFilter(data as StatusFilterOption);
-    }
-    setCurrentPage(DEFAULT_PAGE);
-    setExpanded({});
-  };
-
-  const handleProductFilterChange = (data: SelectOption | null) => {
-    if (!data || String(data.value) === allProductOption.value) {
-      setProductFilter(null);
-    } else {
-      setProductFilter(data as ProductFilterOption);
-    }
-    setCurrentPage(DEFAULT_PAGE);
-    setExpanded({});
-  };
-
-  const handleTabChange = (tab: 'direct' | 'nominated') => {
-    setActiveTab(tab);
-    setCurrentPage(DEFAULT_PAGE);
-    setExpanded({});
-  };
-
-  const handleViewModeChange = (mode: ConsentViewMode) => {
-    if (mode === viewMode) return;
-    setViewMode(mode);
-    setCurrentPage(DEFAULT_PAGE);
-    setExpanded({});
-  };
-
-  const handleExport = useCallback(() => {
-    // Build CSV rows whose cells exactly match the on-screen table: formatted
-    // dates, translated status labels, and the "Until Withdrawal (no expiry)" /
-    // "-" valid-till labels. Keys are the localized column headers.
-    const toRow = (purpose: PurposeItem, productName: string | null) => ({
-      [t('purpose')]: purpose.name,
-      [t('descriptionLabel')]: purpose.description ?? '',
-      [t('product')]: productName ?? '-',
-      [t('status')]: getStatusLabel(String(purpose.status), t),
-      [t('givenDate')]: getGivenDateLabel(purpose.given_date),
-      [t('validTill')]: getValidTillLabel(purpose, t),
-      [t('method')]: purpose.method ?? '',
-    });
-
-    const rows = viewMode === 'product'
-      ? productTable.getRowModel().rows.flatMap((row) =>
-        row.original.purposes.map((purpose) => toRow(purpose, row.original.product_name))
-      )
-      : purposeTable.getRowModel().rows.map((row) =>
-        toRow(row.original, row.original.product_name)
-      );
-
-    exportTableToCSV(rows);
-    setExportModal(false);
-  }, [viewMode, productTable, purposeTable, t]);
-
-  const handleLoadMorePurposes = useCallback(
-    async (group: DisplayProductGroup) => {
-      if (!organizationId || !workspaceId) return;
-      const cardKey = getCardKey(group);
-      if (loadingMoreByKey[cardKey]) return;
-
-      const alreadyLoaded = extraPurposesByKey[cardKey]?.length ?? 0;
-      const inlineCount = group.purposes.length;
-      const offset = inlineCount + alreadyLoaded;
-      const statusParam = statusFilter?.value;
-      const searchParam = debouncedSearch.trim() || undefined;
-
-      setLoadingMoreByKey((prev) => ({ ...prev, [cardKey]: true }));
-      try {
-        const result = await fetchGroupPurposes({
-          organizationId,
-          workspaceId,
-          productUuid: group.product_uuid,
-          offset,
-          limit: 50,
-          status: statusParam,
-          search: searchParam,
-          language: langParam,
-          nominatorUuid: group.nominator?.uuid,
-          authContext,
-          consentClient,
-        });
-        if (!result) {
-          throw new Error('Failed to load more purposes');
-        }
-        setExtraPurposesByKey((prev) => ({
-          ...prev,
-          [cardKey]: [...(prev[cardKey] ?? []), ...result.purposes],
-        }));
-        const fetchedTotal = offset + result.purposes.length;
-        const hasMore = fetchedTotal < result.pagination.total_count;
-        setHasMoreByKey((prev) => ({ ...prev, [cardKey]: hasMore }));
-      } catch (error) {
-        console.error('Failed to load more purposes:', error);
-        toast.error(t('failedToFetchConsentData'));
-      } finally {
-        setLoadingMoreByKey((prev) => ({ ...prev, [cardKey]: false }));
-      }
-    },
-    [
-      organizationId,
-      workspaceId,
-      authContext,
-      consentClient,
-      langParam,
-      statusFilter?.value,
-      debouncedSearch,
-      extraPurposesByKey,
-      loadingMoreByKey,
-      getCardKey,
-      t,
-    ]
-  );
-
-  const handleManageConsent = useCallback(
-    async (
-      purposeId: string,
-      action: ConsentAction,
-      nominatorContact?: string,
-      dataElementUuids?: string[],
-      productUuid?: string
-    ) => {
-      if (!organizationId || !workspaceId || !contact) {
-        toast.error(t('missingInfoToManage'));
-        return;
-      }
-
-      setIsManageLoading(true);
-
-      const successMessages: Record<ConsentAction, string> = {
-        revoke: t('consentRevokedSuccess'),
-        regrant: t('consentRegrantedSuccess'),
-        renew: t('consentRenewedSuccess'),
-      };
-
-      const errorMessages: Record<ConsentAction, string> = {
-        revoke: t('unableToRevokeConsent'),
-        regrant: t('unableToRegrantConsent'),
-        renew: t('unableToRenewConsent'),
-      };
-
-      try {
-        // The ledger's submit-consent needs the notice the purpose was consented
-        // under, plus the purpose's data elements with their current selected
-        // state — both live on the loaded consent record (selectedRecord).
-        const noticeUuid = selectedRecord?.notice_uuid ?? undefined;
-        const dataElements = (selectedRecord?.data_elements ?? []).map((el) => ({
-          uuid: el.uuid,
-          selected: el.selected,
-        }));
-
-        const response = await manageConsent({
-          organizationId,
-          workspaceId,
-          purposeId,
-          contact,
-          action,
-          authContext,
-          consentClient,
-          nominatorContact,
-          dataElementUuids,
-          productUuid,
-          noticeUuid,
-          dataElements,
-          language: langParam,
-        });
-
-        if (response) {
-          toast.success(successMessages[action]);
-          await fetchData();
-        } else {
-          toast.error(errorMessages[action]);
-        }
-      } catch (error: any) {
-        console.error(`Error ${action} consent:`, error);
-        if (error?.code === 'NOMINATOR_NOT_FOUND') {
-          toast.error(t('nominatorNotFound'));
-        } else if (error?.code === 'NOMINEE_MUST_SPECIFY_NOMINATOR') {
-          toast.error(t('nomineeMustSpecifyNominator'));
-        } else if (error?.code === 'PURPOSE_NOT_REVOCABLE') {
-          toast.error(
-            t(
-              'purposeNotRevocableError',
-              'This purpose can\'t be withdrawn directly. Please raise a request to remove it.'
-            )
-          );
-        } else {
-          toast.error(errorMessages[action]);
-        }
-      } finally {
-        setIsManageLoading(false);
-        handleCloseModal();
-      }
-    },
-    [organizationId, workspaceId, contact, fetchData, handleCloseModal, t, authContext, consentClient, selectedRecord, langParam]
-  );
-
-  const getVar = (varName: string): string => `var(${varName})`;
-
-  const directBadge: number | '' =
-    consentDetail?.status_summary?.direct_purposes ?? '';
-
-  const nominatedBadge: number | '' =
-    consentDetail?.status_summary?.nominated_purposes ?? '';
-
-  const nominatorLabels = (consentDetail?.nominators || [])
-    .map((n) => n.email?.trim() || n.org_user_id?.trim() || n.uuid?.trim() || '')
-    .filter(Boolean);
-  const summaryText = t('productsAndConsentsSummary', {
-    products: visibleProductCount,
-    consents: visibleConsentCount,
-  });
-
-  return (
-    <div className="pc-consent-manager-surface" style={{ width: '100%' }}>
-      <div
-        className="pc-consent-shell-card"
-        style={{
-          backgroundColor: 'transparent',
-        }}
-      >
-        {/* Tabs: My Consents / Managing + Product/Purpose toggle */}
-        <div
-          className="pc-consent-tabs-row"
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            gap: getVar('--pc-spacing-sm'),
-            borderBottom: `1px solid ${getVar('--pc-border-color')}`,
-            padding: '0.125rem 0 0.375rem',
-          }}
-        >
-          <div className="pc-consent-tabs-left" style={{ display: 'flex', minWidth: 0 }}>
-            <button
-              type="button"
-              onClick={() => handleTabChange('direct')}
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-                gap: getVar('--pc-spacing-sm'),
-                padding: `0.5rem ${getVar('--pc-spacing-sm')}`,
-                fontSize: '0.75rem',
-                fontWeight: 600,
-                background: 'none',
-                border: 'none',
-                cursor: 'pointer',
-                borderBottom: activeTab === 'direct' ? `2px solid ${getVar('--pc-primary')}` : '2px solid transparent',
-                color: activeTab === 'direct' ? getVar('--pc-primary') : getVar('--pc-text-secondary'),
-                transition: 'color 0.2s, border-color 0.2s',
-              }}
-            >
-              {t('myConsents')}
-              <span style={{
-                borderRadius: '9999px',
-                backgroundColor: getVar('--pc-bg-tertiary'),
-                padding: '0.0625rem 0.375rem',
-                fontSize: '0.6875rem',
-                color: getVar('--pc-text-secondary'),
-              }}>
-                {directBadge}
-              </span>
-            </button>
-            <button
-              type="button"
-              onClick={() => handleTabChange('nominated')}
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-                gap: getVar('--pc-spacing-sm'),
-                padding: `0.5rem ${getVar('--pc-spacing-sm')}`,
-                fontSize: '0.75rem',
-                fontWeight: 600,
-                background: 'none',
-                border: 'none',
-                cursor: 'pointer',
-                borderBottom: activeTab === 'nominated' ? `2px solid ${getVar('--pc-primary')}` : '2px solid transparent',
-                color: activeTab === 'nominated' ? getVar('--pc-primary') : getVar('--pc-text-secondary'),
-                transition: 'color 0.2s, border-color 0.2s',
-              }}
-            >
-              {t('managing')}
-              <span style={{
-                borderRadius: '9999px',
-                backgroundColor: getVar('--pc-bg-tertiary'),
-                padding: '0.0625rem 0.375rem',
-                fontSize: '0.6875rem',
-                color: getVar('--pc-text-secondary'),
-              }}>
-                {nominatedBadge}
-              </span>
-            </button>
-          </div>
-
-          <div
-            className="pc-consent-view-toggle"
-            style={{
-              marginLeft: 'auto',
-              display: 'flex',
-              alignItems: 'center',
-              gap: getVar('--pc-spacing-sm'),
-              paddingRight: getVar('--pc-spacing-sm'),
-            }}
-          >
-            <PCText
-              size="sm"
-              color="secondary"
-              className="pc-consent-view-toggle-label"
-              style={{ margin: 0, fontSize: '0.75rem', fontWeight: 500 }}
-            >
-              {t('consentVisibility')}
-            </PCText>
-            <div
-              className="pc-consent-view-toggle-group"
-              style={{
-                display: 'inline-flex',
-                borderRadius: '9999px',
-                  backgroundColor: getVar('--pc-bg-secondary'),
-                padding: '0.125rem',
-              }}
-            >
-              <button
-                type="button"
-                className={`pc-consent-view-toggle-btn ${viewMode === 'product' ? 'is-active' : ''}`}
-                onClick={() => handleViewModeChange('product')}
-                style={{
-                  minWidth: '5.25rem',
-                  minHeight: '1.75rem',
-                  padding: '0.3125rem 0.75rem',
-                  border: 'none',
-                  backgroundColor:
-                    viewMode === 'product' ? getVar('--pc-primary') : 'transparent',
-                  color:
-                    viewMode === 'product'
-                      ? getVar('--pc-text-inverse')
-                      : getVar('--pc-text-secondary'),
-                  fontSize: '0.6875rem',
-                  fontWeight: 600,
-                  cursor: 'pointer',
-                  borderRadius: '9999px',
-                  transition: 'background-color 0.2s ease, color 0.2s ease',
-                }}
-              >
-                {t('product')}
-              </button>
-              <button
-                type="button"
-                className={`pc-consent-view-toggle-btn ${viewMode === 'purpose' ? 'is-active' : ''}`}
-                onClick={() => handleViewModeChange('purpose')}
-                style={{
-                  minWidth: '5.25rem',
-                  minHeight: '1.75rem',
-                  padding: '0.3125rem 0.75rem',
-                  border: 'none',
-                  backgroundColor:
-                    viewMode === 'purpose' ? getVar('--pc-primary') : 'transparent',
-                  color:
-                    viewMode === 'purpose'
-                      ? getVar('--pc-text-inverse')
-                      : getVar('--pc-text-secondary'),
-                  fontSize: '0.6875rem',
-                  fontWeight: 600,
-                  cursor: 'pointer',
-                  borderRadius: '9999px',
-                  transition: 'background-color 0.2s ease, color 0.2s ease',
-                }}
-              >
-                {t('purpose')}
-              </button>
-            </div>
-          </div>
-        </div>
-
-        {activeTab === 'nominated' && nominatorLabels.length > 0 && (
-          <PCText
-            size="sm"
-            color="secondary"
-            style={{
-              margin: 0,
-              marginBottom: getVar('--pc-spacing-sm'),
-              paddingLeft: getVar('--pc-spacing-lg'),
-              paddingRight: getVar('--pc-spacing-lg'),
-            }}
-          >
-            {t('managingConsentsFor')}{' '}
-            <span style={{ fontWeight: 600, color: getVar('--pc-text-primary') }}>
-              {nominatorLabels.join(', ')}
-            </span>
-          </PCText>
-        )}
-
-        {/* Filters Section: Search on left, filters and export on the right */}
-        <div style={{
-          display: 'flex',
-          flexDirection: 'column',
-          gap: getVar('--pc-spacing-sm'),
-          width: '100%',
-          padding: '0.75rem 0 0.625rem',
-        }} className="pc-filters-responsive">
-          <div style={{ width: '100%' }} className="pc-search-responsive">
-            <PCInput
-              type="search"
-              size="sm"
-              clearable
-              clearAriaLabel={t('clearInput')}
-              placeholder={composedSearchPlaceholder}
-              value={searchQuery}
-              onClear={() => {
-                setSearchQuery('');
-                setCurrentPage(DEFAULT_PAGE);
-              }}
-              prefix={<Search size={14} strokeWidth={1.8} />}
-              onChange={(e) => {
-                setSearchQuery(e.target.value);
-                setCurrentPage(DEFAULT_PAGE);
-              }}
-              style={{
-                width: '100%',
-              }}
-            />
-          </div>
-
-          <div style={{
-            display: 'flex',
-            flexDirection: 'column',
-            gap: getVar('--pc-spacing-sm'),
-            width: '100%',
-          }} className="pc-filters-row-responsive">
-            <PCSelect
-              className="pc-filter-select"
-              size="sm"
-              placeholder={t('status')}
-              prefix={<Filter size={12} strokeWidth={1.8} />}
-              options={statusFilterOptions}
-              value={statusSelectValue}
-              onChange={handleStatusFilterChange}
-              showSelectedCheck
-              style={{
-                width: '100%',
-              }}
-            />
-            <PCSelect
-              className="pc-filter-select"
-              size="sm"
-              placeholder={t('product')}
-              prefix={<Circle size={10} strokeWidth={2} />}
-              options={productFilterOptions}
-              value={productSelectValue}
-              onChange={handleProductFilterChange}
-              showSelectedCheck
-              style={{
-                width: '100%',
-              }}
-            />
-            <PCText
-              size="sm"
-              color="secondary"
-              className="pc-filters-summary"
-              style={{
-                margin: 0,
-                whiteSpace: 'nowrap',
-                alignSelf: 'center',
-              }}
-            >
-              {summaryText}
-            </PCText>
-            <div className="pc-export-button-responsive">
-              <PCButton
-                size="sm"
-                variant="outline"
-                onClick={() => setExportModal(true)}
-                style={{
-                  whiteSpace: 'nowrap',
-                  width: '100%',
-                }}
-              >
-                <ArrowUpToLine size={13} />
-                <span>{t('export')}</span>
-              </PCButton>
-            </div>
-          </div>
-        </div>
-        {isLoading ? (
-          <ConsentManagerTableSkeleton />
-        ) : (
-          <>
-            <div className="pc-consent-desktop-view">
-              {viewMode === 'product' ? (
-                <AdvancedTable
-                  table={productTable}
-                  variant={variant}
-                  classNames={groupedTableClassNames}
-                  isLoading={isLoading}
-                  expandedComponent={(row) => {
-                    const cardKey = getCardKey(row.original);
-                    return (
-                      <ConsentManagerExpandedRow
-                        group={row.original}
-                        onModify={handleOpenModal}
-                        extraPurposes={extraPurposesByKey[cardKey]}
-                        hasMore={hasMoreByKey[cardKey] ?? row.original.has_more_purposes}
-                        isLoadingMore={loadingMoreByKey[cardKey]}
-                        onLoadMore={handleLoadMorePurposes}
-                      />
-                    );
-                  }}
-                />
-              ) : (
-                <AdvancedTable
-                  table={purposeTable}
-                  variant={variant}
-                  classNames={purposeTableClassNames}
-                  isLoading={isLoading}
-                />
-              )}
-            </div>
-
-            <div className="pc-consent-mobile-view">
-              {viewMode === 'product' ? (
-                <ConsentManagerProductCards
-                  groups={consentGroups}
-                  onModify={handleOpenModal}
-                  extraPurposesByKey={extraPurposesByKey}
-                  hasMoreByKey={hasMoreByKey}
-                  loadingMoreByKey={loadingMoreByKey}
-                  onLoadMore={handleLoadMorePurposes}
-                  cardKeyFor={getCardKey}
-                />
-              ) : (
-                <ConsentManagerPurposeCards
-                  rows={consentRows}
-                  onModify={handleOpenModal}
-                />
-              )}
-            </div>
-          </>
-        )}
-
-        {viewMode === 'product' && (
-          <div className="pc-consent-pagination-wrap">
-            <AdvancedTablePagination table={productTable} />
-          </div>
-        )}
-      </div>
-
-      <PCModal
-        isOpen={exportModal}
-        onClose={() => setExportModal(false)}
-        size="sm"
-        closeAriaLabel={t('closeModal')}
-        title={
-          <div style={{ minWidth: 0, flex: 1, paddingRight: getVar('--pc-spacing-sm') }}>
-            <PCText size="base" weight="semibold" style={{ margin: 0, color: getVar('--pc-text-primary') }}>
-              {t('exportConsentData')}
-            </PCText>
-            <PCText
-              size="xs"
-              color="secondary"
-              style={{ marginTop: pcStyles.mtXs.marginTop, marginBottom: 0, lineHeight: 1.5 }}
-            >
-              {t('exportConsentDataSubtitle')}
-            </PCText>
-          </div>
-        }
-        footer={
-          <div className="pc-modal-footer-actions">
-            <PCButton variant="secondary" onClick={() => setExportModal(false)}>
-              {t('cancel')}
-            </PCButton>
-            <PCButton variant="primary" onClick={handleExport}>
-              {t('export')}
-            </PCButton>
-          </div>
-        }
-      >
-        <div style={{ ...pcStyles.flex, ...pcStyles.flexCol, gap: pcStyles.gapSm.gap }}>
-          <PCText size="sm" color="secondary" style={{ margin: 0, lineHeight: 1.6 }}>
-            {t('exportingIncludesFilters')}
-          </PCText>
-        </div>
-      </PCModal>
-
-      <ModifyConsentModal
-        isOpen={isModalOpen}
-        onClose={handleCloseModal}
-        selectedRecord={selectedRecord}
-        isLoading={isManageLoading}
-        onManageConsent={handleManageConsent}
-      />
-    </div>
-  );
-}