@redacto.io/consent-sdk-react 9.3.0 → 9.4.0-beta.0

package/src/RedactoPrivacyCenter/components/ActivityTimeline.tsx

@@ -0,0 +1,239 @@
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import dayjs from 'dayjs';
+import {
+  ShieldCheck,
+  FileText,
+  Eye,
+  MessageSquareWarning,
+  Activity as ActivityIcon,
+} from 'lucide-react';
+import { PCText, PCTooltip, PCBadge } from '../ui';
+import { getVar, formatActivityType } from '../lib/utils';
+import { ACTIVITY_DATE_FORMATS } from '../lib/constants';
+import {
+  MARKER_TINT,
+  TIMELINE_COL_GAP,
+  TIMELINE_MARKER_COL,
+  TIMELINE_MARKER_SIZE,
+  TIMELINE_RAIL_LEFT,
+  TIMELINE_TIME_COL,
+} from './constant';
+import { formatTimeAgo } from './NotificationHub/utils';
+import type {
+  ActivityCategory,
+  ActivityDateGroup,
+  ActivityTimelineProps,
+  TimelineRowProps,
+} from './types';
+
+// Colour by category (matches the reference): Consent = green, Case = blue, etc.
+// Same colour regardless of grant/withdraw — deliberately not getActivityTypeStatus.
+const getActivityCategory = (activityType: string): ActivityCategory => {
+  const type = activityType.toLowerCase();
+  if (type.includes('consent') || type.includes('grant')) return { variant: 'success', Icon: ShieldCheck };
+  if (type.includes('case')) return { variant: 'info', Icon: FileText };
+  if (type.includes('access') || type.includes('view')) return { variant: 'info', Icon: Eye };
+  if (type.includes('grievance') || type.includes('request')) return { variant: 'warning', Icon: MessageSquareWarning };
+  return { variant: 'secondary', Icon: ActivityIcon };
+};
+
+export default function ActivityTimeline({
+  activities,
+}: ActivityTimelineProps) {
+  const { t } = useTranslation();
+
+  // Group by calendar day, preserving the API's newest-first ordering.
+  const groups = useMemo<ActivityDateGroup[]>(() => {
+    const ordered: ActivityDateGroup[] = [];
+    const byKey = new Map<string, ActivityDateGroup>();
+
+    for (const activity of activities) {
+      const date = dayjs(activity.timestamp);
+      const key = date.format('YYYY-MM-DD');
+      let group = byKey.get(key);
+      if (!group) {
+        group = {
+          key,
+          label: date.format(ACTIVITY_DATE_FORMATS.DATE),
+          newest: activity.timestamp,
+          items: [],
+        };
+        byKey.set(key, group);
+        ordered.push(group);
+      }
+      group.items.push(activity);
+    }
+
+    return ordered;
+  }, [activities]);
+
+  return (
+    <div style={{ width: '100%' }}>
+      {groups.map((group, groupIndex) => (
+        <div
+          key={group.key}
+          style={{ marginTop: groupIndex === 0 ? 0 : getVar('--pc-spacing-lg') }}
+        >
+          {/* Date header: explicit date + relative hint */}
+          <div style={{
+            display: 'flex',
+            alignItems: 'baseline',
+            gap: getVar('--pc-spacing-sm'),
+            marginBottom: getVar('--pc-spacing-md'),
+            paddingLeft: '0.125rem',
+          }}>
+            <PCText
+              as="span"
+              size="xs"
+              weight="bold"
+              color="primary"
+              style={{ textTransform: 'uppercase', letterSpacing: '0.04em' }}
+            >
+              {group.label}
+            </PCText>
+            <PCText as="span" size="xs" color="tertiary">
+              {formatTimeAgo(group.newest, t)}
+            </PCText>
+          </div>
+
+          {/* Rows + continuous rail */}
+          <div style={{ position: 'relative' }}>
+            <span
+              aria-hidden
+              style={{
+                position: 'absolute',
+                top: TIMELINE_MARKER_SIZE / 2,
+                bottom: TIMELINE_MARKER_SIZE / 2,
+                left: TIMELINE_RAIL_LEFT,
+                width: 2,
+                marginLeft: -1,
+                background: `linear-gradient(180deg, transparent 0, ${getVar('--pc-border-color')} 12px, ${getVar('--pc-border-color')} calc(100% - 12px), transparent 100%)`,
+              }}
+            />
+            {group.items.map((activity, index) => (
+              <TimelineRow
+                key={`${group.key}-${index}`}
+                activity={activity}
+              />
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function TimelineRow({
+  activity,
+}: TimelineRowProps) {
+  const { t } = useTranslation();
+
+  const { variant, Icon } = getActivityCategory(activity.activity_type);
+  const tint = MARKER_TINT[variant];
+
+  const title = activity.title_display || activity.title;
+  const description = activity.description_display || activity.description;
+  const typeLabel = activity.activity_type_display || formatActivityType(activity.activity_type);
+
+  const date = dayjs(activity.timestamp);
+  const clock = date.format(ACTIVITY_DATE_FORMATS.TIME);
+  const relative = formatTimeAgo(activity.timestamp, t);
+  const absolute = date.format(ACTIVITY_DATE_FORMATS.TOOLTIP);
+
+  return (
+    <div
+      className="pc-timeline-item pc-timeline-row"
+      style={{
+        position: 'relative',
+        display: 'grid',
+        gridTemplateColumns: `${TIMELINE_TIME_COL} ${TIMELINE_MARKER_COL} 1fr`,
+        columnGap: `${TIMELINE_COL_GAP}px`,
+      }}
+    >
+      {/* Time column */}
+      <PCTooltip content={absolute} placement="top">
+        <div style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'flex-end',
+          textAlign: 'right',
+          paddingTop: '0.5rem',
+          cursor: 'help',
+        }}>
+          <PCText as="span" size="sm" weight="medium" color="secondary" style={{ whiteSpace: 'nowrap', lineHeight: 1.3 }}>
+            {clock}
+          </PCText>
+          <PCText as="span" size="xs" color="tertiary" style={{ whiteSpace: 'nowrap', lineHeight: 1.3 }}>
+            {relative}
+          </PCText>
+        </div>
+      </PCTooltip>
+
+      {/* Marker on the rail */}
+      <div style={{ display: 'flex', justifyContent: 'center', paddingTop: '0.5rem' }}>
+        <div
+          style={{
+            position: 'relative',
+            zIndex: 1,
+            width: TIMELINE_MARKER_SIZE,
+            height: TIMELINE_MARKER_SIZE,
+            borderRadius: '9999px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            // Opaque base + tint overlay so the rail never shows through the disc.
+            backgroundColor: getVar('--pc-bg-primary'),
+            backgroundImage: `linear-gradient(${tint.bg}, ${tint.bg})`,
+            color: tint.color,
+            boxShadow: `0 0 0 3px ${getVar('--pc-bg-primary')}`,
+          }}
+        >
+          <Icon size={16} strokeWidth={2.25} aria-hidden />
+        </div>
+      </div>
+
+      {/* Content */}
+      <div
+        className="pc-timeline-content"
+        style={{
+          minWidth: 0,
+          marginBottom: getVar('--pc-spacing-sm'),
+          padding: '0.5rem 0.625rem',
+          borderRadius: getVar('--pc-border-radius-md'),
+        }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+          <PCText
+            size="sm"
+            weight="semibold"
+            color="primary"
+            style={{ minWidth: 0, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}
+          >
+            {title}
+          </PCText>
+          <PCBadge variant={variant} size="sm" style={{ flexShrink: 0 }}>
+            {typeLabel}
+          </PCBadge>
+        </div>
+        {description ? (
+          <PCText
+            size="sm"
+            color="secondary"
+            title={description}
+            style={{
+              marginTop: '0.125rem',
+              lineHeight: 1.5,
+              display: '-webkit-box',
+              WebkitLineClamp: 2,
+              WebkitBoxOrient: 'vertical',
+              overflow: 'hidden',
+            }}
+          >
+            {description}
+          </PCText>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/src/RedactoPrivacyCenter/components/CaseDetails/MessagesTab.tsx

@@ -11,6 +11,7 @@ import {
   useSubmitDocumentForRequest,
 } from '../../lib/queries';
 import { STATUS_COLORS, useCaseFinalizedTooltip } from '../../lib/constants';
+import { isRefreshBlocked } from '../../lib/utils';
 import type { MessagesTabProps } from '../../lib/types';
 import { MessageItem } from './MessageItem';
 import { MessageComposer } from './MessageComposer';
@@ -40,7 +41,8 @@ export const MessagesTab = ({ caseUuid, caseStatus }: MessagesTabProps) => {
   const uploadMutation = useUploadCaseDocument(organizationId, workspaceId, caseUuid, authContext);
   const submitMutation = useSubmitDocumentForRequest(organizationId, workspaceId, caseUuid, authContext);
 
-  const { scrollContainerRef, handleScroll, scrollToBottom } = useMessagePolling(refetch, messages);
+  const isPollingPaused = useCallback(() => isRefreshBlocked(authContext), [authContext]);
+  const { scrollContainerRef, handleScroll, scrollToBottom } = useMessagePolling(refetch, messages, isPollingPaused);
 
   const {
     pendingUpload, setPendingUpload, submittingForRequest,

package/src/RedactoPrivacyCenter/components/CaseDetails/useMessagePolling.ts

@@ -4,13 +4,20 @@ import type { CaseMessage } from '../../lib/types';
 export function useMessagePolling(
   refetch: () => void,
   messages: CaseMessage[],
+  isPaused?: () => boolean,
 ) {
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const isNearBottomRef = useRef(true);
   const shouldAutoScrollRef = useRef(true);
+  // Latest pause predicate, read inside the interval without resetting it.
+  const isPausedRef = useRef(isPaused);
+  isPausedRef.current = isPaused;
 
   useEffect(() => {
-    const interval = setInterval(() => { refetch(); }, 30_000);
+    const interval = setInterval(() => {
+      // Don't poll while auth is terminally failed / backing off (incident 2026-06-22).
+      if (!isPausedRef.current?.()) refetch();
+    }, 30_000);
     return () => clearInterval(interval);
   }, [refetch]);
 

package/src/RedactoPrivacyCenter/components/ConsentManager.tsx

@@ -39,6 +39,7 @@ 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';
@@ -281,6 +282,7 @@ export default function ConsentManager({ variant }: ConsentManagerProps) {
         acc.push({
           ...group,
           purposes: filteredPurposes,
+          active_purposes: counts.active,
           withdrawn_purposes: counts.withdrawn,
           expired_purposes: counts.expired,
           declined_purposes: counts.declined,
@@ -640,26 +642,30 @@ export default function ConsentManager({ variant }: ConsentManagerProps) {
   };
 
   const handleExport = useCallback(() => {
-    const value = viewMode === 'product'
+    // 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) => {
-          // 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,
-          };
-        })
+        row.original.purposes.map((purpose) => toRow(purpose, row.original.product_name))
       )
-      : 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);
+      : purposeTable.getRowModel().rows.map((row) =>
+        toRow(row.original, row.original.product_name)
+      );
+
+    exportTableToCSV(rows);
     setExportModal(false);
-  }, [viewMode, productTable, purposeTable]);
+  }, [viewMode, productTable, purposeTable, t]);
 
   const handleLoadMorePurposes = useCallback(
     async (group: DisplayProductGroup) => {

package/src/RedactoPrivacyCenter/components/ConsentManagerCells.tsx

@@ -7,13 +7,12 @@ import { pcStyles } from '../styles/pcStyles';
 import { ConsentStatusEnum } from '../lib/types';
 import type { PurposeItem, ConsentModalRecord } from '../lib/types';
 import { formatDateTime } from '../lib/consent-manager/utils';
+import type { BadgeVariant } from './types';
 
 dayjs.extend(relativeTime);
 const getVar = (varName: string): string => `var(${varName})`;
 
-type StatusVariant = 'success' | 'error' | 'warning' | 'info' | 'secondary';
-
-const statusVariantMap: Record<string, StatusVariant> = {
+const statusVariantMap: Record<string, BadgeVariant> = {
   [ConsentStatusEnum.ACTIVE]: 'success',
   [ConsentStatusEnum.WITHDRAWN]: 'error',
   [ConsentStatusEnum.REVOKED]: 'error',
@@ -21,7 +20,7 @@ const statusVariantMap: Record<string, StatusVariant> = {
   [ConsentStatusEnum.DECLINED]: 'warning',
 };
 
-export const getStatusVariant = (status: string): StatusVariant =>
+export const getStatusVariant = (status: string): BadgeVariant =>
   statusVariantMap[status?.toUpperCase()] ?? 'secondary';
 
 export const getStatusLabel = (status: string, t: TFunction): string => {
@@ -34,7 +33,7 @@ export const getStatusLabel = (status: string, t: TFunction): string => {
   return status;
 };
 
-const statusBadgeColors: Record<StatusVariant, { bg: string; fg: string }> = {
+const statusBadgeColors: Record<BadgeVariant, { bg: string; fg: string }> = {
   success: { bg: 'rgba(16, 185, 129, 0.12)', fg: 'var(--pc-success)' },
   error: { bg: 'rgba(239, 68, 68, 0.12)', fg: 'var(--pc-error)' },
   warning: { bg: 'rgba(245, 158, 11, 0.12)', fg: 'var(--pc-warning)' },
@@ -77,6 +76,14 @@ export const renderStatusBadge = (status: string, t: TFunction) => {
   );
 };
 
+// Plain-string version of the given-date cell, for reuse in CSV export etc.
+export const getGivenDateLabel = (timestamp: string | null): string => {
+  if (!timestamp) {
+    return '-';
+  }
+  return dayjs(timestamp).format('MMM D, YYYY [at] h:mm A');
+};
+
 export const renderGivenDate = (
   timestamp: string | null,
   options?: { showTooltip?: boolean }
@@ -85,7 +92,7 @@ export const renderGivenDate = (
     return <PCText size="sm" style={{ whiteSpace: 'normal', overflowWrap: 'anywhere' }}>-</PCText>;
   }
   const date = dayjs(timestamp);
-  const formatted = date.format('MMM D, YYYY [at] h:mm A');
+  const formatted = getGivenDateLabel(timestamp);
   const relative = date.fromNow();
   const showTooltip = options?.showTooltip ?? true;
 
@@ -116,7 +123,8 @@ export const renderGivenDate = (
   );
 };
 
-export const renderValidTill = (consent: PurposeItem, t: TFunction) => {
+// Plain-string version of the valid-till cell, for reuse in CSV export etc.
+export const getValidTillLabel = (consent: PurposeItem, t: TFunction): string => {
   const { status, valid_till } = consent;
   const normalized = (typeof status === 'string' ? status : '').toUpperCase();
   const inactiveLike =
@@ -124,14 +132,20 @@ export const renderValidTill = (consent: PurposeItem, t: TFunction) => {
     normalized === ConsentStatusEnum.WITHDRAWN ||
     normalized === ConsentStatusEnum.REVOKED;
   if (inactiveLike) {
-    return <PCText size="sm" style={{ whiteSpace: 'normal', overflowWrap: 'anywhere' }}>-</PCText>;
+    return '-';
   }
   if (normalized === ConsentStatusEnum.ACTIVE && (valid_till === null || valid_till === undefined)) {
-    return <PCText size="sm" style={{ whiteSpace: 'normal', overflowWrap: 'anywhere' }}>{t('untilWithdrawalNoExpiry')}</PCText>;
+    return t('untilWithdrawalNoExpiry');
   }
-  return <PCText size="sm" style={{ whiteSpace: 'normal', overflowWrap: 'anywhere' }}>{valid_till ? formatDateTime(valid_till) : '-'}</PCText>;
+  return valid_till ? formatDateTime(valid_till) : '-';
 };
 
+export const renderValidTill = (consent: PurposeItem, t: TFunction) => (
+  <PCText size="sm" style={{ whiteSpace: 'normal', overflowWrap: 'anywhere' }}>
+    {getValidTillLabel(consent, t)}
+  </PCText>
+);
+
 const methodIconMap: Record<string, JSX.Element> = {
   MOBILE: <Smartphone size={12} style={{ color: 'var(--pc-text-secondary)' }} />,
   WEB: <LaptopMinimal size={12} style={{ color: 'var(--pc-text-secondary)' }} />,

package/src/RedactoPrivacyCenter/components/NotificationHub/NotificationBell.tsx

@@ -5,6 +5,7 @@ import { PCPopover } from '../../ui';
 import { PCTooltip } from '../../ui/PCTooltip';
 import { fetchUnreadCount, fetchNotifications } from '../../lib/api';
 import { POLL_INTERVAL, NOTIFICATION_DROPDOWN_LIMIT } from '../../lib/constants';
+import { isRefreshBlocked } from '../../lib/utils';
 import { useCurrentLanguage } from '../../lib/useCurrentLanguage';
 import type { Notification, NotificationCTA } from '../../lib/types';
 import { NotificationDropdown } from './NotificationDropdown';
@@ -28,6 +29,10 @@ export const NotificationBell = () => {
     if (!organizationId || !workspaceId) {
       return;
     }
+    // Skip doomed work while auth is terminally failed / backing off (incident 2026-06-22).
+    if (isRefreshBlocked(authContext)) {
+      return;
+    }
     const requestId = tenantRequestRef.current;
     const result = await fetchUnreadCount(organizationId, workspaceId, authContext, consentClient);
     if (requestId !== tenantRequestRef.current) {
@@ -64,6 +69,14 @@ export const NotificationBell = () => {
     };
   }, [organizationId, workspaceId]);
 
+  // Keep the interval pointed at the latest poll fn without resetting it (and
+  // re-firing an immediate poll) each time authContext identity churns — that
+  // churn was an amplifier in the 2026-06-22 refresh storm.
+  const pollUnreadCountRef = useRef(pollUnreadCount);
+  useEffect(() => {
+    pollUnreadCountRef.current = pollUnreadCount;
+  }, [pollUnreadCount]);
+
   useEffect(() => {
     if (!organizationId || !workspaceId) {
       if (pollRef.current) {
@@ -72,14 +85,14 @@ export const NotificationBell = () => {
       }
       return;
     }
-    pollUnreadCount();
-    pollRef.current = setInterval(() => pollUnreadCount(), POLL_INTERVAL);
+    pollUnreadCountRef.current();
+    pollRef.current = setInterval(() => pollUnreadCountRef.current(), POLL_INTERVAL);
     return () => {
       if (pollRef.current) {
         clearInterval(pollRef.current);
       }
     };
-  }, [pollUnreadCount, organizationId, workspaceId]);
+  }, [organizationId, workspaceId]);
 
   const onRefresh = useCallback(async () => {
     setIsRefreshing(true);

package/src/RedactoPrivacyCenter/components/constant.ts

@@ -1,3 +1,5 @@
+import type { BadgeVariant, MarkerTint } from './types';
+
 export const GRIEVANCE_TAB_IDS = {
   ALL: 'all',
   PROCESSING: 'processing',
@@ -14,3 +16,26 @@ export {
 
 
 export const MAX_DISPLAYED_PURPOSE_NAMES_IN_ERASURE_MODAL = 3;
+
+// ─── Activity timeline ──────────────────────────────────────────────────────
+
+export const TIMELINE_MARKER_SIZE = 30;
+export const TIMELINE_TIME_COL = '64px';
+export const TIMELINE_MARKER_COL = '34px';
+export const TIMELINE_COL_GAP = 12;
+// Rail sits at the centre of the marker column: time col + gap + half marker col.
+export const TIMELINE_RAIL_LEFT = 64 + TIMELINE_COL_GAP + 17;
+
+// Marker tint per variant — mirrors the PCBadge palette so tag + marker match.
+// Literal `var(--…)` strings (same as getVar) avoid a constants↔utils import cycle.
+export const MARKER_TINT: Record<BadgeVariant, MarkerTint> = {
+  success: { color: 'var(--pc-success)', bg: 'rgba(16, 185, 129, 0.12)' },
+  error: { color: 'var(--pc-error)', bg: 'rgba(239, 68, 68, 0.12)' },
+  warning: { color: 'var(--pc-warning)', bg: 'rgba(245, 158, 11, 0.13)' },
+  info: { color: 'var(--pc-info)', bg: 'rgba(59, 130, 246, 0.12)' },
+  secondary: { color: 'var(--pc-text-secondary)', bg: 'var(--pc-bg-tertiary)' },
+};
+
+// Internal error thrown when an activity page fails to load (surfaced to the
+// user via the i18n `failedToFetchActivityData` toast).
+export const ACTIVITY_FETCH_ERROR_MESSAGE = 'Failed to fetch activity data';

package/src/RedactoPrivacyCenter/components/types.ts

@@ -1,5 +1,7 @@
-import type { ReactNode } from 'react';
+import type { ComponentType, ReactNode } from 'react';
+import type { LucideProps } from 'lucide-react';
 import type {
+  Activity,
   CaseRequest,
   ConsentModalRecord,
 } from '../lib/types';
@@ -90,3 +92,32 @@ export type ModifyConsentModalProps = {
   ) => void;
 };
 
+// ─── Activity timeline ──────────────────────────────────────────────────────
+
+export type BadgeVariant = 'success' | 'error' | 'warning' | 'info' | 'secondary';
+
+export type ActivityCategory = {
+  variant: BadgeVariant;
+  Icon: ComponentType<LucideProps>;
+};
+
+export type MarkerTint = Readonly<{
+  color: string;
+  bg: string;
+}>;
+
+export type ActivityDateGroup = {
+  key: string;
+  label: string;
+  newest: string;
+  items: Activity[];
+};
+
+export type ActivityTimelineProps = Readonly<{
+  activities: Activity[];
+}>;
+
+export type TimelineRowProps = Readonly<{
+  activity: Activity;
+}>;
+

package/src/RedactoPrivacyCenter/lib/consent-manager/utils.tsx

@@ -1,14 +1,19 @@
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ConsentStatusEnum } from '../types';
-import type { PurposeItem } from '../types';
-
-type CsvRow = Partial<PurposeItem> & Record<string, unknown>;
 import { formatDateTime as formatDateTimeShared } from '../../utils/date';
 
 // Re-export shared date formatting
 export const formatDateTime = formatDateTimeShared;
 
+// Leading characters that spreadsheet apps (Excel/Sheets) may interpret as a
+// formula; values starting with these are prefixed with a quote to neutralize
+// CSV formula injection.
+const CSV_FORMULA_TRIGGERS = ['=', '+', '-', '@', '\t', '\r'];
+
+// Byte-order mark so Excel detects UTF-8 and renders localized labels correctly.
+const UTF8_BOM = '\uFEFF';
+
 export const useStatusOptions = () => {
   const { t } = useTranslation();
   return useMemo(
@@ -22,35 +27,32 @@ export const useStatusOptions = () => {
   );
 };
 
-export const exportTableToCSV = (rows: CsvRow[]) => {
+// Rows must be pre-formatted display strings keyed by their (already localized)
+// column header. Each cell is written verbatim so the CSV matches the on-screen
+// table exactly; null/undefined become an empty cell rather than the text "null".
+export const exportTableToCSV = (rows: Record<string, string>[]) => {
   if (!rows || rows.length === 0) {
-    console.warn('No data to export');
     return;
   }
 
-  const excludedFields = ['Action', 'data_elements'];
-  const headers = Array.from(new Set(rows.flatMap((r) => Object.keys(r))))
-    .filter((key) => !excludedFields.includes(key))
-    .map((key) => key.toUpperCase())
-    .join(',');
+  const escape = (value: string | null | undefined) => {
+    const raw = value ?? '';
+    // Defuse spreadsheet formula injection by prefixing risky leading chars.
+    const safe =
+      raw.length > 0 && CSV_FORMULA_TRIGGERS.includes(raw[0]) ? `'${raw}` : raw;
+    return `"${safe.replace(/"/g, '""')}"`;
+  };
 
-  const csvRows = rows.map((row) => {
-    return Object.entries(row)
-      .filter(([key]) => !excludedFields.includes(key))
-      .map(([key, value]) => {
-        let formattedValue = value;
-        if ((key === 'given_date' || key === 'valid_till') && value) {
-          formattedValue = formatDateTime(String(value));
-        }
-        return `"${String(formattedValue).replace(/"/g, '""')}"`;
-      })
-      .join(',');
-  });
+  const columns = Object.keys(rows[0]);
+  const headers = columns.map(escape).join(',');
+  const csvRows = rows.map((row) =>
+    columns.map((col) => escape(row[col])).join(',')
+  );
 
   const csvContent = [headers, ...csvRows].join('\n');
 
   try {
-    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+    const blob = new Blob([UTF8_BOM, csvContent], { type: 'text/csv;charset=utf-8;' });
     const url = URL.createObjectURL(blob);
     const link = document.createElement('a');
     link.href = url;