@redacto.io/consent-sdk-react 5.3.0 → 7.0.0

package/src/RedactoPrivacyCenter/components/ConsentManager.tsx

@@ -1,24 +1,47 @@
 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 } from 'lucide-react';
+import { Search, ArrowUpToLine, Filter, Circle } from 'lucide-react';
 import { pcStyles } from '../styles/pcStyles';
 import { AdvancedTable, AdvancedTablePagination } from '../table';
-import { getCoreRowModel, useReactTable } from '@tanstack/react-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 type { UserConsent, UserConsentDetail, ProductConsentHistoryGroup, ConsentAction } from '../lib/types';
+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 { ConsentManagerExpandedRow } from './ConsentManagerExpandedRow';
+import { ConsentManagerProductCards } from './ConsentManagerProductCards';
+import { ConsentManagerPurposeCards } from './ConsentManagerPurposeCards';
 import type {
   ConsentManagerProps,
   StatusFilterOption,
@@ -30,12 +53,15 @@ import {
   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') || '';
@@ -53,9 +79,10 @@ export default function ConsentManager({ variant }: ConsentManagerProps) {
 
   // State management
   const [activeTab, setActiveTab] = useState<'direct' | 'nominated'>('direct');
+  const [viewMode, setViewMode] = useState<ConsentViewMode>('product');
   const [consentDetail, setConsentDetail] = useState<UserConsentDetail | null>(null);
-  const [consentData, setConsentData] = useState<UserConsent[]>([]);
-  const [totalCount, setTotalCount] = useState(0);
+  const [consentGroups, setConsentGroups] = useState<DisplayProductGroup[]>([]);
+  const [consentRows, setConsentRows] = useState<DisplayPurposeRow[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [searchQuery, setSearchQuery] = useState('');
   const [debouncedSearch, setDebouncedSearch] = useState('');
@@ -68,13 +95,45 @@ export default function ConsentManager({ variant }: ConsentManagerProps) {
     []
   );
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const [selectedRecord, setSelectedRecord] = useState<UserConsent | null>(
+  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(() => {
@@ -96,6 +155,19 @@ export default function ConsentManager({ variant }: ConsentManagerProps) {
     }
   }, [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(() => {
@@ -104,25 +176,132 @@ export default function ConsentManager({ variant }: ConsentManagerProps) {
     return () => clearTimeout(timer);
   }, [searchQuery]);
 
-  const handleOpenModal = useCallback((record: UserConsent) => {
+  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,
+          withdrawn_purposes: counts.withdrawn,
+          expired_purposes: counts.expired,
+          declined_purposes: counts.declined,
+          latest_given_date: latestGivenDate,
+        });
+        return acc;
+      }, []);
+    },
+    [matchesPurpose]
+  );
+
   const flattenProductGroups = useCallback(
-    (groups: ProductConsentHistoryGroup[] | undefined): UserConsent[] => {
+    (groups: ConsentGroup[] | undefined): DisplayPurposeRow[] => {
       if (!groups || groups.length === 0) return [];
       return groups.flatMap((group) =>
         (group.purposes || []).map((purpose) => ({
           ...purpose,
-          product_uuid: purpose.product_uuid ?? group.product_uuid,
-          product_name: purpose.product_name ?? group.product_name,
-          product_description: purpose.product_description ?? group.product_description ?? null,
+          product_uuid: group.product_uuid,
+          product_name: group.product_name,
+          product_description: group.product_description,
+          nominator: group.nominator,
         }))
       );
     },
@@ -131,19 +310,18 @@ export default function ConsentManager({ variant }: ConsentManagerProps) {
 
   const filterConsentRows = useCallback(
     (
-      rows: UserConsent[],
+      rows: DisplayPurposeRow[],
       search: string,
       statusValue?: string,
       productUuid?: string
-    ) => {
+    ): DisplayPurposeRow[] => {
       const normalizedSearch = search.trim().toLowerCase();
-
       return rows.filter((row) => {
         const matchesSearch =
           !normalizedSearch ||
           [
-            row.purpose,
-            row.purpose_description,
+            row.name,
+            row.description,
             row.product_name,
             row.product_description,
             row.method,
@@ -156,9 +334,7 @@ export default function ConsentManager({ variant }: ConsentManagerProps) {
 
         const matchesStatus =
           !statusValue || row.status?.toLowerCase() === statusValue.toLowerCase();
-
-        const matchesProduct =
-          !productUuid || row.product_uuid === productUuid;
+        const matchesProduct = !productUuid || row.product_uuid === productUuid;
 
         return matchesSearch && matchesStatus && matchesProduct;
       });
@@ -167,7 +343,7 @@ export default function ConsentManager({ variant }: ConsentManagerProps) {
   );
 
   const buildProductOptionsFromGroups = useCallback(
-    (groups: ProductConsentHistoryGroup[] | undefined) => {
+    (groups: ConsentGroup[] | undefined) => {
       if (!groups || groups.length === 0) return [];
       const productMap = new Map<string, { label: string; value: string }>();
       groups.forEach((group) => {
@@ -183,31 +359,42 @@ export default function ConsentManager({ variant }: ConsentManagerProps) {
     []
   );
 
-  const getNominatedProductGroups = useCallback(
-    (detail: UserConsentDetail | null | undefined): ProductConsentHistoryGroup[] => {
-      if (!detail?.nominated_purposes || detail.nominated_purposes.length === 0) {
-        return [];
-      }
-      return detail.nominated_purposes.flatMap((np) =>
-        (np.product_groups || []).map((group) => ({
-          ...group,
-          purposes: group.purposes.map((purpose) => ({
-            ...purpose,
-            nominator_info: np.nominator_info,
-          })),
-        }))
-      );
-    },
+  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 columns = useConsentManagerColumns({
-    onOpenModal: handleOpenModal,
-  });
+  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 || !contact) {
+    if (!organizationId || !workspaceId) {
       return;
     }
 
@@ -218,31 +405,39 @@ export default function ConsentManager({ variant }: ConsentManagerProps) {
       const statusParam = statusFilter?.value;
       const productUuidParam = productFilter?.value;
 
-      const response = await fetchUserConsents(
+      const response = await fetchUserConsents({
         organizationId,
         workspaceId,
-        contact,
-        offset,
-        pageSize,
-        searchParam,
-        statusParam,
-        productUuidParam,
+        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,
-        langParam
-      );
+      });
 
       if (!response) {
         throw new Error('Failed to fetch consent data');
       }
 
       setConsentDetail(response);
-
-      const directGroups = response?.direct_product_groups;
-      const nominatedGroups = getNominatedProductGroups(response);
+      setExtraPurposesByKey({});
+      setHasMoreByKey({});
+      setLoadingMoreByKey({});
 
       const selectedGroups =
-        activeTab === 'direct' ? directGroups : nominatedGroups;
+        activeTab === 'direct' ? response.direct : response.nominated;
+      const displayGroups = buildDisplayGroups(
+        selectedGroups,
+        debouncedSearch,
+        statusParam,
+        productUuidParam
+      );
+      setConsentGroups(displayGroups);
       const flattenedRows = flattenProductGroups(selectedGroups);
       const filteredRows = filterConsentRows(
         flattenedRows,
@@ -250,32 +445,28 @@ export default function ConsentManager({ variant }: ConsentManagerProps) {
         statusParam,
         productUuidParam
       );
-      setConsentData(filteredRows);
-
-      const directCount = response?.status_summary?.direct_purposes;
-      const nominatedCount = response?.status_summary?.nominated_purposes;
-      const fallbackTotal = response?.pagination?.total_count ?? 0;
-      const hasActiveFilters = Boolean(searchParam || statusParam || productUuidParam);
-      setTotalCount(
-        hasActiveFilters
-          ? filteredRows.length
-          : activeTab === 'direct'
-            ? (directCount ?? fallbackTotal)
-            : (nominatedCount ?? fallbackTotal)
-      );
+      setConsentRows(filteredRows);
 
-      // Extract unique products from all groups
-      const combinedGroups = [
-        ...(response?.direct_product_groups || []),
-        ...nominatedGroups,
-      ];
-      setProductOptions(buildProductOptionsFromGroups(combinedGroups));
+      // 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);
-      setConsentData([]);
-      setTotalCount(0);
+      setConsentGroups([]);
+      setConsentRows([]);
       setProductOptions([]);
+      setExtraPurposesByKey({});
+      setHasMoreByKey({});
+      setLoadingMoreByKey({});
       toast.error(t('failedToFetchConsentData'));
     } finally {
       setIsLoading(false);
@@ -283,7 +474,6 @@ export default function ConsentManager({ variant }: ConsentManagerProps) {
   }, [
     organizationId,
     workspaceId,
-    contact,
     currentPage,
     pageSize,
     debouncedSearch,
@@ -293,10 +483,10 @@ export default function ConsentManager({ variant }: ConsentManagerProps) {
     authContext,
     consentClient,
     langParam,
+    buildDisplayGroups,
     flattenProductGroups,
     filterConsentRows,
     buildProductOptionsFromGroups,
-    getNominatedProductGroups,
     t,
   ]);
 
@@ -305,55 +495,234 @@ export default function ConsentManager({ variant }: ConsentManagerProps) {
     fetchData();
   }, [fetchData]);
 
-  const table = useReactTable<UserConsent>({
-    data: consentData,
-    columns: columns,
+  const hasActiveFilters = Boolean(
+    debouncedSearch.trim() || statusFilter?.value || productFilter?.value
+  );
+
+  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: Math.ceil(totalCount / pageSize) || 0,
+    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) => {
-      const next =
-        typeof updater === 'function'
-          ? updater({ pageIndex: currentPage - 1, pageSize })
-          : updater;
-      const nextPage = (next as any).pageIndex + 1;
-      const nextSize = (next as any).pageSize;
-      if (nextPage === currentPage && nextSize === pageSize) return;
-      setCurrentPage(nextPage);
-      setPageSize(nextSize);
+      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) => {
-    setStatusFilter(data as StatusFilterOption | null);
+    if (!data || String(data.value) === allStatusOption.value) {
+      setStatusFilter(null);
+    } else {
+      setStatusFilter(data as StatusFilterOption);
+    }
     setCurrentPage(DEFAULT_PAGE);
+    setExpanded({});
   };
 
   const handleProductFilterChange = (data: SelectOption | null) => {
-    setProductFilter(data as ProductFilterOption | 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(() => {
-    const value = table.getRowModel().rows.map((r) => {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const { purpose_uuid, nominator_info, ...rowWithoutInternalFields } = r.original;
-      return rowWithoutInternalFields;
-    });
+    const value = viewMode === 'product'
+      ? productTable.getRowModel().rows.flatMap((row) =>
+        row.original.purposes.map((purpose) => {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { purpose_uuid, link_reason, data_elements, ...rest } = purpose;
+          return {
+            ...rest,
+            product_name: row.original.product_name,
+            product_description: row.original.product_description,
+          };
+        })
+      )
+      : purposeTable.getRowModel().rows.map((row) => {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { purpose_uuid, link_reason, nominator, data_elements, ...rest } = row.original;
+        return rest;
+      });
     exportTableToCSV(value);
     setExportModal(false);
-  }, [table]);
+  }, [viewMode, productTable, purposeTable]);
+
+  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 (
@@ -419,187 +788,219 @@ export default function ConsentManager({ variant }: ConsentManagerProps) {
 
   const getVar = (varName: string): string => `var(${varName})`;
 
-  const directBadge =
-    consentDetail?.status_summary?.direct_purposes ??
-    (activeTab === 'direct' ? totalCount : '');
+  const directBadge: number | '' =
+    consentDetail?.status_summary?.direct_purposes ?? '';
 
   const nominatedBadge: number | '' =
-    consentDetail?.status_summary?.nominated_purposes ??
-    (activeTab === 'nominated' ? totalCount : '');
-
-  const renderUserRelationshipStrip = () => {
-    if (!consentDetail) return null;
-
-    const status = consentDetail.user_status;
-    let statusLabel: string | null = null;
-    let statusBgColor: string | null = null;
-    let statusTextColor: string | null = null;
-    if (status === 'ACTIVE') {
-      statusLabel = t('statusActive');
-      statusBgColor = 'rgba(16, 185, 129, 0.1)';
-      statusTextColor = getVar('--pc-success');
-    } else if (status === 'TRANSFERRED') {
-      statusLabel = t('statusTransferred');
-      statusBgColor = 'rgba(245, 158, 11, 0.1)';
-      statusTextColor = getVar('--pc-warning');
-    }
+    consentDetail?.status_summary?.nominated_purposes ?? '';
 
-    const nominators = consentDetail.nominators || [];
-    const nominatorLabels = nominators
-      .map((n) => n.email?.trim() || n.org_user_id?.trim() || n.uuid?.trim() || '')
-      .filter(Boolean);
-
-    const hasAnyInfo = Boolean(statusLabel) || nominatorLabels.length > 0;
-    if (!hasAnyInfo) return null;
-
-    return (
-      <div style={{
-        marginBottom: getVar('--pc-spacing-md'),
-        borderRadius: getVar('--pc-border-radius-lg'),
-        border: `1px solid ${getVar('--pc-border-color')}`,
-        backgroundColor: getVar('--pc-bg-secondary'),
-        padding: getVar('--pc-spacing-md'),
-      }}>
-        <div style={{
-          display: 'flex',
-          flexDirection: 'column',
-          gap: getVar('--pc-spacing-sm'),
-        }} className="pc-flex-responsive">
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
-            <PCText size="sm" weight="semibold" style={{ margin: 0, color: getVar('--pc-text-primary') }}>
-              {t('consentVisibility')}
-            </PCText>
-            {nominatorLabels.length > 0 && (
-              <PCText size="sm" style={{ margin: 0, color: getVar('--pc-text-secondary') }}>
-                {t('managingConsentsFor')}{' '}
-                <span style={{ fontWeight: 600, color: getVar('--pc-text-primary') }}>
-                  {nominatorLabels.join(', ')}
-                </span>
-              </PCText>
-            )}
-          </div>
-          {statusLabel && (
-            <div style={{ flexShrink: 0 }}>
-              <span style={{
-                display: 'inline-flex',
-                alignItems: 'center',
-                borderRadius: '9999px',
-                padding: '0.25rem 0.75rem',
-                fontSize: getVar('--pc-font-size-xs'),
-                fontWeight: 600,
-                backgroundColor: statusBgColor!,
-                color: statusTextColor!,
-              }}>
-                {statusLabel}
-              </span>
-            </div>
-          )}
-        </div>
-      </div>
-    );
-  };
+  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 style={{ width: '100%' }}>
-      {/* User Relationship Strip */}
-      {renderUserRelationshipStrip()}
-
+    <div className="pc-consent-manager-surface" style={{ width: '100%' }}>
       <div
+        className="pc-consent-shell-card"
         style={{
-          borderRadius: getVar('--pc-border-radius-lg'),
-          border: `1px solid ${getVar('--pc-border-color')}`,
-          backgroundColor: getVar('--pc-bg-primary'),
-          boxShadow: getVar('--pc-shadow-sm'),
-          padding: getVar('--pc-spacing-md'),
-          marginBottom: getVar('--pc-spacing-lg'),
+          backgroundColor: 'transparent',
         }}
       >
-        {/* Tabs: My Consents / Managing */}
-        <div style={{
-          display: 'flex',
-          borderBottom: `1px solid ${getVar('--pc-border-color')}`,
-          marginBottom: getVar('--pc-spacing-md'),
-          paddingBottom: '0.125rem',
-        }}>
-          <button
-            type="button"
-            onClick={() => handleTabChange('direct')}
+        {/* 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'),
-              padding: `${getVar('--pc-spacing-sm')} ${getVar('--pc-spacing-md')}`,
-              fontSize: getVar('--pc-font-size-sm'),
-              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',
+              paddingRight: getVar('--pc-spacing-sm'),
             }}
           >
-            {t('myConsents')}
-            <span style={{
-              borderRadius: '9999px',
-              backgroundColor: getVar('--pc-bg-tertiary'),
-              padding: '0.125rem 0.5rem',
-              fontSize: getVar('--pc-font-size-xs'),
-              color: getVar('--pc-text-secondary'),
-            }}>
-              {directBadge}
-            </span>
-          </button>
-          <button
-            type="button"
-            onClick={() => handleTabChange('nominated')}
+            <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={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: getVar('--pc-spacing-sm'),
-              padding: `${getVar('--pc-spacing-sm')} ${getVar('--pc-spacing-md')}`,
-              fontSize: getVar('--pc-font-size-sm'),
-              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',
+              margin: 0,
+              marginBottom: getVar('--pc-spacing-sm'),
+              paddingLeft: getVar('--pc-spacing-lg'),
+              paddingRight: getVar('--pc-spacing-lg'),
             }}
           >
-            {t('managing')}
-            <span style={{
-              borderRadius: '9999px',
-              backgroundColor: getVar('--pc-bg-tertiary'),
-              padding: '0.125rem 0.5rem',
-              fontSize: getVar('--pc-font-size-xs'),
-              color: getVar('--pc-text-secondary'),
-            }}>
-              {nominatedBadge}
+            {t('managingConsentsFor')}{' '}
+            <span style={{ fontWeight: 600, color: getVar('--pc-text-primary') }}>
+              {nominatorLabels.join(', ')}
             </span>
-          </button>
-        </div>
+          </PCText>
+        )}
 
         {/* Filters Section: Search on left, filters and export on the right */}
         <div style={{
           display: 'flex',
           flexDirection: 'column',
-          gap: getVar('--pc-spacing-md'),
+          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={t('search')}
+              placeholder={composedSearchPlaceholder}
               value={searchQuery}
               onClear={() => {
                 setSearchQuery('');
                 setCurrentPage(DEFAULT_PAGE);
               }}
-              prefix={<Search size={18} strokeWidth={1.8} />}
+              prefix={<Search size={14} strokeWidth={1.8} />}
               onChange={(e) => {
                 setSearchQuery(e.target.value);
                 setCurrentPage(DEFAULT_PAGE);
@@ -613,57 +1014,124 @@ export default function ConsentManager({ variant }: ConsentManagerProps) {
           <div style={{
             display: 'flex',
             flexDirection: 'column',
-            gap: getVar('--pc-spacing-md'),
+            gap: getVar('--pc-spacing-sm'),
             width: '100%',
           }} className="pc-filters-row-responsive">
             <PCSelect
               className="pc-filter-select"
+              size="sm"
               placeholder={t('status')}
-              options={statusOptions}
-              value={statusFilter}
+              prefix={<Filter size={12} strokeWidth={1.8} />}
+              options={statusFilterOptions}
+              value={statusSelectValue}
               onChange={handleStatusFilterChange}
-              onClear={() => setStatusFilter(null)}
-              clearable={statusFilter !== null}
-              clearAriaLabel={t('clearSelection')}
-              dropdownMatchTriggerWidth
+              showSelectedCheck
               style={{
                 width: '100%',
               }}
             />
             <PCSelect
               className="pc-filter-select"
+              size="sm"
               placeholder={t('product')}
-              searchable
-              searchPlaceholder={t('searchPlaceholder')}
-              noOptionsMessage={t('noOptionsFound')}
-              options={productOptions}
-              value={productFilter}
+              prefix={<Circle size={10} strokeWidth={2} />}
+              options={productFilterOptions}
+              value={productSelectValue}
               onChange={handleProductFilterChange}
-              onClear={() => setProductFilter(null)}
-              clearable={productFilter !== null}
-              clearAriaLabel={t('clearSelection')}
-              dropdownMatchTriggerWidth
+              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%',
-                  minHeight: '2.25rem',
-                  padding: '0.4375rem 0.875rem',
                 }}
               >
-                <ArrowUpToLine size={16} />
+                <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
@@ -687,7 +1155,7 @@ export default function ConsentManager({ variant }: ConsentManagerProps) {
         }
         footer={
           <div className="pc-modal-footer-actions">
-            <PCButton variant="outline" onClick={() => setExportModal(false)}>
+            <PCButton variant="secondary" onClick={() => setExportModal(false)}>
               {t('cancel')}
             </PCButton>
             <PCButton variant="primary" onClick={handleExport}>
@@ -703,23 +1171,6 @@ export default function ConsentManager({ variant }: ConsentManagerProps) {
         </div>
       </PCModal>
 
-      {isLoading ? (
-        <ConsentManagerTableSkeleton />
-      ) : (
-        <AdvancedTable table={table} variant={variant} isLoading={isLoading} />
-      )}
-
-      {/* Always show pagination, even during loading */}
-      <div style={{
-        ...pcStyles.flex,
-        ...pcStyles.flexCol,
-        ...pcStyles.itemsCenter,
-        ...pcStyles.justifyBetween,
-        ...pcStyles.gapSm,
-      }} className="pc-flex-responsive">
-        <AdvancedTablePagination table={table} />
-      </div>
-
       <ModifyConsentModal
         isOpen={isModalOpen}
         onClose={handleCloseModal}