@redacto.io/consent-sdk-react 3.5.0 → 3.6.0

package/src/RedactoPrivacyCenter/components/CaseHistory.tsx

@@ -0,0 +1,433 @@
+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 CaseDetailsModal from './CaseDetailsModal';
+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 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 [selectedCase, setSelectedCase] = useState<CaseRequest | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  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);
+    setIsModalOpen(true);
+  }, []);
+
+  const columns = useCaseHistoryColumns({
+    onViewDetails: handleViewDetails,
+  });
+
+  // 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
+            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);
+        }}
+      />
+      <CaseDetailsModal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        selectedCase={selectedCase}
+      />
+    </div>
+  );
+}