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

package/src/RedactoPrivacyCenter/components/CaseHistory.tsx

@@ -1,426 +0,0 @@
-import { useState, useMemo, useCallback, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import {
-  PCTitle,
-  PCText,
-  PCButton,
-  PCInput,
-  PCLoader,
-} from '../ui';
-import { pcStyles } from '../styles/pcStyles';
-import { FiSearch, FiFilter } from 'react-icons/fi';
-import { IoAdd } from 'react-icons/io5';
-import type { CaseRequest } from '../lib/types';
-import { RequestTypeEnum } from '../lib/types';
-import { useCaseHistory } from '../lib/queries';
-import { useOrganization } from '../context/OrganizationContext';
-import { useAuth } from '../context/AuthContext';
-import { useRequestTypeLabels, useGrievanceTabs } from '../lib/constants';
-import type { CaseHistoryProps } from './types';
-import { GRIEVANCE_TAB_IDS } from './constant';
-import { useInternalNavigation } from '../context/NavigationContext';
-import { getCoreRowModel, useReactTable } from '@tanstack/react-table';
-import { useCaseHistoryColumns } from './caseHistoryColumns';
-import { PCPopover, PCCheckbox } from '../ui';
-import GrievanceTable from './GrievanceTable';
-import GrievanceTablePagination from './GrievanceTablePagination';
-
-export default function CaseHistory({ onCreateRequest }: CaseHistoryProps) {
-  const { t } = useTranslation();
-  const { navigateTo, setSelectedCase } = useInternalNavigation();
-  const grievanceTabs = useGrievanceTabs();
-  const requestTypeLabels = useRequestTypeLabels();
-  const [activeTab, setActiveTab] = useState<string>(GRIEVANCE_TAB_IDS.ALL);
-  const [searchQuery, setSearchQuery] = useState('');
-  const [selectedRequestTypes, setSelectedRequestTypes] = useState<string[]>(
-    Object.values(RequestTypeEnum)
-  );
-  const [pageIndex, setPageIndex] = useState(0);
-  const [pageSize, setPageSize] = useState(10);
-  const { organization } = useOrganization();
-  const { accessToken, refreshToken, onError, updateTokens } = useAuth();
-  const organizationId = organization?.uuid;
-  const workspaceId = organization?.workspaces[0]?.uuid;
-  const contact =
-    typeof window !== 'undefined' ? 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]);
-
-  const {
-    data: cases,
-    isLoading,
-    error,
-    isError,
-  } = useCaseHistory(organizationId, workspaceId, contact, authContext);
-
-  const filteredCases = useMemo(() => {
-    return (cases || []).filter((item: CaseRequest) => {
-      const statusLower = item.status.toLowerCase();
-
-      // Filter by tab (status filter)
-      if (activeTab !== GRIEVANCE_TAB_IDS.ALL) {
-        if (
-          activeTab === GRIEVANCE_TAB_IDS.PROCESSING &&
-          !['processing', 'in_progress', 'initiated', 'assigned'].includes(
-            statusLower
-          )
-        ) {
-          return false;
-        }
-        if (activeTab === GRIEVANCE_TAB_IDS.COMPLETED && statusLower !== 'completed') {
-          return false;
-        }
-        if (
-          activeTab === GRIEVANCE_TAB_IDS.REJECTED &&
-          !['rejected', 'declined'].includes(statusLower)
-        ) {
-          return false;
-        }
-      }
-
-      // Filter by request type
-      // Only apply filter if some types are selected (not all)
-      const allTypes = Object.values(RequestTypeEnum);
-      const hasAllTypesSelected = selectedRequestTypes.length === allTypes.length &&
-        allTypes.every(type => selectedRequestTypes.includes(type));
-
-      if (!hasAllTypesSelected && selectedRequestTypes.length > 0) {
-        const itemRequestType = item.request_type?.toUpperCase();
-        if (!itemRequestType || !selectedRequestTypes.some(rt => rt.toUpperCase() === itemRequestType)) {
-          return false;
-        }
-      }
-
-      // Filter by search
-      if (searchQuery) {
-        const query = searchQuery.toLowerCase();
-        const matchesId = item.case_id?.toLowerCase().includes(query);
-        const matchesDesc =
-          item.description?.toLowerCase().includes(query) ||
-          item.request_details?.purposes?.[0]?.purpose?.description
-            ?.toLowerCase()
-            .includes(query);
-
-        if (!matchesId && !matchesDesc) return false;
-      }
-      return true;
-    });
-  }, [cases, activeTab, selectedRequestTypes, searchQuery]);
-
-  const handleViewDetails = useCallback((caseRequest: CaseRequest) => {
-    setSelectedCase(caseRequest);
-    navigateTo('case-details');
-  }, [navigateTo, setSelectedCase]);
-
-  const columns = useCaseHistoryColumns();
-
-  // Reset to first page when filters change (but not when pagination changes)
-  useEffect(() => {
-    setPageIndex(0);
-  }, [activeTab, searchQuery, selectedRequestTypes]);
-
-  const table = useReactTable<CaseRequest>({
-    data: filteredCases,
-    columns: columns,
-    getCoreRowModel: getCoreRowModel(),
-    manualPagination: false, // Client-side pagination - we'll handle it manually
-    getRowId: (row) => row.uuid || row.case_id,
-    state: {
-      pagination: {
-        pageIndex: pageIndex,
-        pageSize: pageSize,
-      },
-    },
-    onPaginationChange: (updater) => {
-      const currentState = { pageIndex, pageSize };
-      const next =
-        typeof updater === 'function'
-          ? updater(currentState)
-          : updater;
-      const nextPageIndex = (next as any).pageIndex;
-      const nextPageSize = (next as any).pageSize;
-
-      // Update state directly
-      if (typeof nextPageIndex === 'number') {
-        setPageIndex(nextPageIndex);
-      }
-      if (typeof nextPageSize === 'number') {
-        setPageSize(nextPageSize);
-        // Reset to first page when page size changes
-        setPageIndex(0);
-      }
-    },
-    meta: {
-      onRowClick: handleViewDetails,
-    },
-  });
-
-  if (isLoading) {
-    return (
-      <div style={{
-        ...pcStyles.flex,
-        height: '24rem',
-        width: '100%',
-        ...pcStyles.itemsCenter,
-        ...pcStyles.justifyCenter,
-      }}>
-        <PCLoader variant="spinner" size="lg" />
-      </div>
-    );
-  }
-
-  if (isError) {
-    return (
-      <div style={{
-        ...pcStyles.flex,
-        ...pcStyles.flexCol,
-        height: '24rem',
-        width: '100%',
-        ...pcStyles.itemsCenter,
-        ...pcStyles.justifyCenter,
-      }}>
-        <PCText style={{ marginBottom: pcStyles.mbMd.marginBottom, color: '#dc2626' }}>
-          {t('errorLoadingCaseHistory')}
-        </PCText>
-        <PCText size="sm" color="secondary">
-          {error?.message || t('unknownError')}
-        </PCText>
-      </div>
-    );
-  }
-
-  if (!contact) {
-    return (
-      <div style={{
-        ...pcStyles.flex,
-        ...pcStyles.flexCol,
-        height: '24rem',
-        width: '100%',
-        ...pcStyles.itemsCenter,
-        ...pcStyles.justifyCenter,
-      }}>
-        <PCText style={{ marginBottom: pcStyles.mbMd.marginBottom, color: '#6b7280' }}>
-          {t('pleaseSignInToViewGrievance')}
-        </PCText>
-        <PCText size="sm" color="secondary">
-          {t('emailNotFoundInSession')}
-        </PCText>
-      </div>
-    );
-  }
-
-  const getVar = (varName: string): string => `var(${varName})`;
-
-  return (
-    <div style={{ width: '100%' }}>
-      {/* Top Actions */}
-      <div style={{
-        display: 'flex',
-        justifyContent: 'flex-end',
-        alignItems: 'center',
-        paddingTop: '0.5rem',
-        marginBottom: getVar('--pc-spacing-md'),
-        width: '100%',
-      }}>
-        <div style={{
-          display: 'flex',
-          width: '100%',
-          justifyContent: 'flex-end',
-        }} className="pc-export-button-responsive">
-          <PCButton
-            size="sm"
-            onClick={onCreateRequest}
-            style={{
-              whiteSpace: 'nowrap',
-              width: '100%',
-              ...pcStyles.gapSm,
-            }}
-          >
-            <IoAdd size={15} /> <span>{t('newRequest')}</span>
-          </PCButton>
-        </div>
-      </div>
-
-      {/* Filters Section: Search on left, Tabs and Filter on rightmost - Responsive */}
-      <div style={{
-        display: 'flex',
-        flexDirection: 'column',
-        gap: getVar('--pc-spacing-md'),
-        marginBottom: getVar('--pc-spacing-lg'),
-        width: '100%',
-      }} className="pc-filters-responsive">
-        {/* Search Input - Full width on mobile, constrained on desktop */}
-        <div style={{
-          width: '100%',
-        }} className="pc-search-responsive">
-          <PCInput
-            type="search"
-            clearable
-            clearAriaLabel={t('clearInput')}
-            placeholder={t('searchCasesByID')}
-            value={searchQuery}
-            onClear={() => setSearchQuery('')}
-            prefix={<FiSearch size={20} strokeWidth={1.2} />}
-            onChange={(e) => {
-              setSearchQuery(e.target.value);
-            }}
-            style={{
-              width: '100%',
-            }}
-          />
-        </div>
-
-        {/* Tabs and Filter Dropdown - Rightmost, Stacked on mobile, horizontal on desktop */}
-        <div style={{
-          display: 'flex',
-          flexDirection: 'column',
-          gap: getVar('--pc-spacing-sm'),
-        }} className="pc-filters-row-responsive">
-          {/* Tabs */}
-          <div style={{
-            ...pcStyles.overflowXAuto,
-            flexShrink: 1,
-            minWidth: 0,
-          }}>
-            <div style={{
-              display: 'inline-flex',
-              minWidth: 'max-content',
-              ...pcStyles.itemsCenter,
-              gap: '0.25rem',
-              borderRadius: '0.5rem',
-              backgroundColor: getVar('--pc-bg-secondary'),
-              padding: '0.375rem',
-              border: `1px solid ${getVar('--pc-border-color')}`,
-            }}>
-              {grievanceTabs.map((tab) => (
-                <button
-                  key={tab.id}
-                  style={{
-                    display: 'inline-flex',
-                    ...pcStyles.itemsCenter,
-                    gap: '0.5rem',
-                    borderRadius: '0.375rem',
-                    padding: '0.375rem 0.75rem',
-                    fontSize: pcStyles.textXs.fontSize,
-                    fontWeight: pcStyles.fontWeightSemibold.fontWeight,
-                    transition: 'all 0.2s',
-                    backgroundColor: activeTab === tab.id ? getVar('--pc-primary') : 'transparent',
-                    color: activeTab === tab.id ? '#ffffff' : getVar('--pc-text-secondary'),
-                    border: 'none',
-                    cursor: 'pointer',
-                    whiteSpace: 'nowrap',
-                  }}
-                  onClick={() => {
-                    setActiveTab(tab.id);
-                  }}
-                >
-                  {tab.label}
-                </button>
-              ))}
-            </div>
-          </div>
-
-          {/* Filter Dropdown */}
-          <div style={{
-            flexShrink: 0,
-            display: 'flex',
-          }} className="pc-filter-button-wrapper">
-            <PCPopover
-              shadow="lg"
-              placement="bottom-end"
-              content={
-                <div style={{
-                  minWidth: '160px',
-                  padding: '0.75rem',
-                  maxHeight: 'none',
-                  overflow: 'visible'
-                }}>
-                  <div style={{
-                    ...pcStyles.flex,
-                    ...pcStyles.flexCol,
-                    gap: '0.5rem'
-                  }}>
-                    <PCTitle
-                      as="h6"
-                      style={{
-                        marginBottom: '0.5rem',
-                        paddingLeft: '0.125rem',
-                        fontSize: pcStyles.textSm.fontSize,
-                        fontWeight: pcStyles.fontWeightSemibold.fontWeight
-                      }}
-                    >
-                      {t('filterByType')}
-                    </PCTitle>
-                    {Object.values(RequestTypeEnum).map((type) => (
-                      <div
-                        key={type}
-                        style={{
-                          ...pcStyles.flex,
-                          ...pcStyles.itemsCenter,
-                          padding: '0.375rem 0.25rem',
-                          minHeight: '2rem'
-                        }}
-                      >
-                        <PCCheckbox
-                          label={requestTypeLabels[type]}
-                          checked={selectedRequestTypes.includes(type)}
-                          onChange={(e) => {
-                            if (e.target.checked) {
-                              setSelectedRequestTypes([
-                                ...selectedRequestTypes,
-                                type,
-                              ]);
-                            } else {
-                              setSelectedRequestTypes(
-                                selectedRequestTypes.filter((rt) => rt !== type)
-                              );
-                            }
-                          }}
-                        />
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              }
-            >
-              <PCButton
-                variant="outline"
-                style={{
-                  width: 'auto',
-                  justifyContent: 'space-between',
-                  ...pcStyles.gapSm,
-                }}
-              >
-                <span>{t('filter')}</span>
-                <FiFilter size={16} />
-              </PCButton>
-            </PCPopover>
-          </div>
-        </div>
-      </div>
-      <GrievanceTable
-        key={`grievance-table-${activeTab}-${selectedRequestTypes.join(',')}-${searchQuery}`}
-        table={table}
-        isLoading={isLoading}
-        pageIndex={pageIndex}
-        pageSize={pageSize}
-      />
-
-      {/* Always show pagination, even during loading */}
-      <GrievanceTablePagination
-        table={table}
-        onPageIndexChange={setPageIndex}
-        onPageSizeChange={(newSize) => {
-          setPageSize(newSize);
-          setPageIndex(0);
-        }}
-      />
-    </div>
-  );
-}