refactor: extract generic EntityTableList component

src/app/[lang]/globals.css

@@ -503,6 +503,9 @@ html {
   --custom-px-17: 17px;
   --zero: 0px;
 
+  /* entity table */
+  --entity-table-gap: var(--spacing-16);
+
   /* volunteer header */
   --volunteer-header-label-width: 214px;
 }

src/components/Dashboard/Profile/sections/OpportunityDetails/opportunityDetailsSchema.ts

@@ -11,7 +11,6 @@ const languageObjectSchema = z.object({
   level: z.union([z.nativeEnum(LanguageLevel), z.literal("")]),
 });
 
-
 export const createOpportunityDetailsSchema = (t: (key: string) => string) =>
   z.object({
     description: z.string().max(MAX_DESCRIPTION_LENGTH, t(`${i18nPrefix}.descriptionTooLong`)),

src/components/Dashboard/Volunteers/Filters/constants.tsx

@@ -1,4 +1,11 @@
-import { ByDay, OccasionalType, QueryParamsKeys, TimeSlot, VolunteerStateEngagementType, VolunteerStateTypeType } from "need4deed-sdk";
+import {
+  ByDay,
+  OccasionalType,
+  QueryParamsKeys,
+  TimeSlot,
+  VolunteerStateEngagementType,
+  VolunteerStateTypeType,
+} from "need4deed-sdk";
 import { CardsFilter } from "./types";
 
 export const defaultVolunteerCardsFilter: CardsFilter = {

src/components/Dashboard/Volunteers/Filters/helpers.ts

@@ -12,11 +12,8 @@ export const createFilterItems = (filter: CardsFilter, setFilter: SetFilter<Card
     t(`dashboard.volunteers.filters.${key}`),
   );
 
-  const typeFilters = generateNestedFilterControlItems(
-    filter.type,
-    setFilter,
-    "type",
-    (key) => t(`dashboard.volunteers.filters.volunteerType_options.${key}`),
+  const typeFilters = generateNestedFilterControlItems(filter.type, setFilter, "type", (key) =>
+    t(`dashboard.volunteers.filters.volunteerType_options.${key}`),
   );
 
   const districtFilters = generateNestedFilterControlItems(
@@ -84,10 +81,16 @@ export const createSelectedFilterItemsAsFlatArray = (
 ) => {
   const filterItems = createFilterItems(filter, setFilter, t);
 
-  const { districtFilters, engagementFilters, languageFilters, availabilityFilters, accompanyingFilter, typeFilters } = filterItems;
+  const { districtFilters, engagementFilters, languageFilters, availabilityFilters, accompanyingFilter, typeFilters } =
+    filterItems;
   const flatAvFilters = availabilityFilters.map((avFilter) => avFilter.items).flat();
 
-  return [accompanyingFilter, ...typeFilters, ...districtFilters, ...engagementFilters, ...languageFilters, ...flatAvFilters].filter(
-    (f) => f.checked,
-  );
+  return [
+    accompanyingFilter,
+    ...typeFilters,
+    ...districtFilters,
+    ...engagementFilters,
+    ...languageFilters,
+    ...flatAvFilters,
+  ].filter((f) => f.checked);
 };

src/components/Dashboard/Volunteers/VolunteerListController.tsx

@@ -8,11 +8,11 @@ import { CardsFilter } from "./Filters/types";
 import { serializeFilters } from "./helpers";
 import { VolunteerCardList } from "./VolunteerCardList";
 import { VolunteerTableList } from "./VolunteerTableList";
+import { ViewMode } from "../common/types";
 
 const CARD_COLUMNS = 3;
 const CARD_ROWS = 3;
 const CARD_LIMIT = CARD_COLUMNS * CARD_ROWS;
-const LIST_TAB_INDEX = 0;
 
 interface VolunteerListControllerProps {
   setNumOfVols: (numOfVols: number) => void;
@@ -21,7 +21,7 @@ interface VolunteerListControllerProps {
   filter: CardsFilter;
   apiFilterOptions?: ApiOptionLists;
   opportunityId?: string;
-  selectedTabIndex: number;
+  viewMode: ViewMode;
 }
 
 export function VolunteerListController({
@@ -31,9 +31,9 @@ export function VolunteerListController({
   filter,
   apiFilterOptions,
   opportunityId,
-  selectedTabIndex,
+  viewMode,
 }: VolunteerListControllerProps) {
-  const isListView = selectedTabIndex === LIST_TAB_INDEX;
+  const isListView = viewMode === ViewMode.LIST;
   const limit = isListView ? TABLE_LIMIT : CARD_LIMIT;
   const { currentPage, setCurrentPage } = usePageParam();
   const serializedFilter = serializeFilters(filter, undefined, false, {

src/components/Dashboard/Volunteers/VolunteerTableList.tsx

@@ -1,17 +1,16 @@
 "use client";
 
-import { ApiVolunteerGetList } from "need4deed-sdk";
+import type { ApiVolunteerGetList } from "need4deed-sdk";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import styled from "styled-components";
 import {
   createEngagementStatusLabelMap,
   createMatchStatusLabelMap,
   createStatusLabelMap,
 } from "@/components/Dashboard/Profile/sections/VolunteerAgents/types";
-import { Table, TableBody, TableContainer, TableHeader, TableHeaderCell } from "@/components/core/common/Table";
-import PaginationNumbers from "@/components/core/paginatedGrid/PaginationNumbers";
+import { createVolunteerTableColumns } from "./volunteerTableColumns";
 import { VolunteerTableRow } from "./VolunteerTableRow";
+import { EntityTableList } from "../common/EntityTableList";
 
 interface TableListProps {
   volunteers: ApiVolunteerGetList[];
@@ -31,52 +30,31 @@ export function VolunteerTableList({
   opportunityId,
 }: TableListProps) {
   const { t } = useTranslation();
-  const totalPages = Math.ceil(count / itemsPerPage);
-
   const engagementLabels = useMemo(() => createEngagementStatusLabelMap(t), [t]);
   const typeLabels = useMemo(() => createStatusLabelMap(t), [t]);
+  const columns = useMemo(() => createVolunteerTableColumns(t), [t]);
   const matchLabels = useMemo(() => createMatchStatusLabelMap(t), [t]);
 
-  const goToPage = (page: number) => {
-    if (page > 0 && page <= totalPages) setCurrentPage(page);
-  };
-
   return (
-    <Wrapper data-testid="volunteers-table">
-      <TableContainer>
-        <Table>
-          <TableHeader>
-            <TableHeaderCell>{t("dashboard.volunteers.table.name")}</TableHeaderCell>
-            <TableHeaderCell $width="180px">{t("dashboard.volunteers.table.type")}</TableHeaderCell>
-            <TableHeaderCell $width="200px">{t("dashboard.volunteers.table.engagementStatus")}</TableHeaderCell>
-            <TableHeaderCell $width="140px">{t("dashboard.volunteers.table.matchingStatus")}</TableHeaderCell>
-            <TableHeaderCell $width="180px">{t("dashboard.volunteers.table.language")}</TableHeaderCell>
-            <TableHeaderCell $width="200px">{t("dashboard.volunteers.table.district")}</TableHeaderCell>
-            <TableHeaderCell>{t("dashboard.volunteers.table.email")}</TableHeaderCell>
-          </TableHeader>
-          <TableBody>
-            {volunteers.map((volunteer, index) => (
-              <VolunteerTableRow
-                key={volunteer.id}
-                volunteer={volunteer}
-                isLast={index === volunteers.length - 1}
-                engagementLabels={engagementLabels}
-                typeLabels={typeLabels}
-                matchLabels={matchLabels}
-                opportunityId={opportunityId}
-              />
-            ))}
-          </TableBody>
-        </Table>
-      </TableContainer>
-      <PaginationNumbers currentPage={currentPage} goToPage={goToPage} totalPages={totalPages} />
-    </Wrapper>
+    <EntityTableList
+      columns={columns}
+      data={volunteers}
+      renderRow={(volunteer, isLast) => (
+        <VolunteerTableRow
+          key={volunteer.id}
+          volunteer={volunteer}
+          isLast={isLast}
+          engagementLabels={engagementLabels}
+          typeLabels={typeLabels}
+          matchLabels={matchLabels}
+          opportunityId={opportunityId}
+        />
+      )}
+      count={count}
+      itemsPerPage={itemsPerPage}
+      currentPage={currentPage}
+      setCurrentPage={setCurrentPage}
+      testIdPrefix="volunteers"
+    />
   );
 }
-
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: var(--opportunities-container-gap);
-  width: 100%;
-`;

src/components/Dashboard/Volunteers/VolunteerTableRow.tsx

@@ -13,6 +13,7 @@ import { TableCell, TableRow } from "@/components/core/common/Table";
 import { CirclePic } from "@/components/styled/img";
 import { defaultAvatarURL } from "@/config/constants";
 import { getImageUrl } from "@/utils";
+import { VOLUNTEER_COL_WIDTHS } from "./volunteerTableColumns";
 
 interface TableRowProps {
   volunteer: ApiVolunteerGetList;
@@ -23,7 +24,14 @@ interface TableRowProps {
   opportunityId?: string;
 }
 
-export function VolunteerTableRow({ volunteer, isLast, engagementLabels, typeLabels, matchLabels, opportunityId }: TableRowProps) {
+export function VolunteerTableRow({
+  volunteer,
+  isLast,
+  engagementLabels,
+  typeLabels,
+  matchLabels,
+  opportunityId,
+}: TableRowProps) {
   const { i18n } = useTranslation();
   const router = useRouter();
 
@@ -54,19 +62,19 @@ export function VolunteerTableRow({ volunteer, isLast, engagementLabels, typeLab
         <CirclePic src={getImageUrl(avatarUrl || defaultAvatarURL)} size="32px" />
         <NameText>{name}</NameText>
       </NameCell>
-      <TableCell $width="180px" data-testid={`volunteer-type-${id}`}>
+      <TableCell $width={VOLUNTEER_COL_WIDTHS.type} data-testid={`volunteer-type-${id}`}>
         {statusType ? typeLabels[statusType] : "—"}
       </TableCell>
-      <TableCell $width="200px" data-testid={`volunteer-engagement-${id}`}>
+      <TableCell $width={VOLUNTEER_COL_WIDTHS.engagement} data-testid={`volunteer-engagement-${id}`}>
         {statusEngagement ? engagementLabels[statusEngagement] : "—"}
       </TableCell>
-      <TableCell $width="140px" data-testid={`volunteer-match-${id}`}>
+      <TableCell $width={VOLUNTEER_COL_WIDTHS.matching} data-testid={`volunteer-match-${id}`}>
         {statusMatch ? matchLabels[statusMatch] : "—"}
       </TableCell>
-      <TableCell $width="180px" data-testid={`volunteer-language-${id}`}>
+      <TableCell $width={VOLUNTEER_COL_WIDTHS.language} data-testid={`volunteer-language-${id}`}>
         {languageText}
       </TableCell>
-      <TableCell $width="200px" data-testid={`volunteer-district-${id}`}>
+      <TableCell $width={VOLUNTEER_COL_WIDTHS.district} data-testid={`volunteer-district-${id}`}>
         {districtText}
       </TableCell>
       <TableCell data-testid={`volunteer-email-${id}`}>—</TableCell>

src/components/Dashboard/Volunteers/Volunteers.tsx

@@ -21,6 +21,7 @@ import {
   serializeFilters,
 } from "./helpers";
 import { VolunteerListController } from "./VolunteerListController";
+import { ViewMode } from "../common/types";
 
 export function Volunteers() {
   const { t } = useTranslation();
@@ -34,7 +35,7 @@ export function Volunteers() {
   const pathname = usePathname();
   const router = useRouter();
   const tabs = [t("dashboard.volunteers.tabs.tab1"), t("dashboard.volunteers.tabs.tab2")];
-
+  const viewMode = Object.values(ViewMode)[selectedTabIndex];
   const opportunityId = searchParams.get("opportunity") ?? undefined;
   const opportunityFilter = useGetOpportunity(opportunityId);
 
@@ -110,7 +111,7 @@ export function Volunteers() {
             filter={cardsFilter}
             apiFilterOptions={apiFilterOptions}
             opportunityId={opportunityId}
-            selectedTabIndex={selectedTabIndex}
+            viewMode={viewMode}
           />
           <Filters
             isFiltersOpen={isFiltersOpen}

src/components/Dashboard/Volunteers/volunteerTableColumns.ts

@@ -0,0 +1,24 @@
+import { TFunction } from "i18next";
+import { Column } from "../common/EntityTableList";
+
+export const VOLUNTEER_COL_WIDTHS = {
+  type: "180px",
+  engagement: "200px",
+  matching: "140px",
+  language: "180px",
+  district: "200px",
+};
+
+export const createVolunteerTableColumns = (t: TFunction): Column[] => [
+  { key: "name", label: t("dashboard.volunteers.table.name") },
+  { key: "type", label: t("dashboard.volunteers.table.type"), width: VOLUNTEER_COL_WIDTHS.type },
+  {
+    key: "engagement",
+    label: t("dashboard.volunteers.table.engagementStatus"),
+    width: VOLUNTEER_COL_WIDTHS.engagement,
+  },
+  { key: "matching", label: t("dashboard.volunteers.table.matchingStatus"), width: VOLUNTEER_COL_WIDTHS.matching },
+  { key: "language", label: t("dashboard.volunteers.table.language"), width: VOLUNTEER_COL_WIDTHS.language },
+  { key: "district", label: t("dashboard.volunteers.table.district"), width: VOLUNTEER_COL_WIDTHS.district },
+  { key: "email", label: t("dashboard.volunteers.table.email") },
+];

src/components/Dashboard/common/EntityTableList/EntityTableList.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { Table, TableBody, TableContainer, TableHeader, TableHeaderCell } from "@/components/core/common/Table";
+import { Wrapper } from "./styles";
+import { EntityTableListProps } from "./types";
+import PaginationNumbers from "@/components/core/paginatedGrid/PaginationNumbers";
+
+export function EntityTableList<T extends { id: string | number }>({
+  columns,
+  data,
+  renderRow,
+  count,
+  itemsPerPage,
+  currentPage,
+  setCurrentPage,
+  testIdPrefix,
+}: EntityTableListProps<T>) {
+  const totalPages = Math.ceil(count / itemsPerPage);
+  const goToPage = (page: number) => {
+    if (page > 0 && page <= totalPages) setCurrentPage(page);
+  };
+
+  return (
+    <Wrapper data-testid={`${testIdPrefix}-table`}>
+      <TableContainer>
+        <Table>
+          <TableHeader>
+            {columns.map((col) => (
+              <TableHeaderCell key={col.key} $width={col.width}>
+                {col.label}
+              </TableHeaderCell>
+            ))}
+          </TableHeader>
+          <TableBody>{data.map((item, index) => renderRow(item, index === data.length - 1))}</TableBody>
+        </Table>
+      </TableContainer>
+      <PaginationNumbers currentPage={currentPage} goToPage={goToPage} totalPages={totalPages} />
+    </Wrapper>
+  );
+}

src/components/Dashboard/common/EntityTableList/index.ts

@@ -0,0 +1,2 @@
+export * from "./EntityTableList";
+export type { Column, EntityTableListProps } from "./types";

src/components/Dashboard/common/EntityTableList/styles.ts

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+
+export const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--entity-table-gap);
+  width: 100%;
+`;

src/components/Dashboard/common/EntityTableList/types.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+
+export interface Column {
+  key: string;
+  label: string;
+  width?: string;
+}
+
+export interface EntityTableListProps<T extends { id: string | number }> {
+  columns: Column[];
+  data: T[];
+  renderRow: (item: T, isLast: boolean) => ReactNode;
+  count: number;
+  itemsPerPage: number;
+  currentPage: number;
+  setCurrentPage: (page: number) => void;
+  testIdPrefix: string;
+}

src/components/Dashboard/common/types.ts

@@ -0,0 +1,5 @@
+export enum ViewMode {
+  LIST = "list",
+  CARDS = "cards",
+  MAP = "map",
+}