Reorganize frontend and install Craco to alias modules (#190)

front/src/modules/ui/components/table/CheckboxCell.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+
+import { Checkbox } from '../form/Checkbox';
+
+type OwnProps = {
+  name: string;
+  id: string;
+  checked?: boolean;
+  indeterminate?: boolean;
+  onChange?: (newCheckedValue: boolean) => void;
+};
+
+const StyledContainer = styled.div`
+  width: 32px;
+  height: 32px;
+  margin-left: -${(props) => props.theme.table.horizontalCellMargin};
+  padding-left: ${(props) => props.theme.table.horizontalCellMargin};
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  cursor: pointer;
+`;
+
+export function CheckboxCell({
+  name,
+  id,
+  checked,
+  onChange,
+  indeterminate,
+}: OwnProps) {
+  const [internalChecked, setInternalChecked] = React.useState(checked);
+
+  function handleContainerClick() {
+    handleCheckboxChange(!internalChecked);
+  }
+
+  React.useEffect(() => {
+    setInternalChecked(checked);
+  }, [checked]);
+
+  function handleCheckboxChange(newCheckedValue: boolean) {
+    setInternalChecked(newCheckedValue);
+
+    if (onChange) {
+      onChange(newCheckedValue);
+    }
+  }
+
+  return (
+    <StyledContainer
+      onClick={handleContainerClick}
+      data-testid="input-checkbox-cell-container"
+    >
+      <Checkbox
+        id={id}
+        name={name}
+        checked={internalChecked}
+        onChange={handleCheckboxChange}
+        indeterminate={indeterminate}
+      />
+    </StyledContainer>
+  );
+}

front/src/modules/ui/components/table/ColumnHead.tsx

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  viewName: string;
+  viewIcon?: ReactNode;
+};
+
+const StyledTitle = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: ${(props) => props.theme.spacing(8)};
+  font-weight: 500;
+  padding-left: ${(props) => props.theme.spacing(2)};
+`;
+
+const StyledIcon = styled.div`
+  display: flex;
+  margin-right: ${(props) => props.theme.spacing(1)};
+`;
+
+export function ColumnHead({ viewName, viewIcon }: OwnProps) {
+  return (
+    <StyledTitle>
+      <StyledIcon>{viewIcon}</StyledIcon>
+      {viewName}
+    </StyledTitle>
+  );
+}

front/src/modules/ui/components/table/EntityTable.tsx

@@ -0,0 +1,180 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+import { useRecoilState } from 'recoil';
+
+import {
+  FilterConfigType,
+  SelectedFilterType,
+} from '@/filters-and-sorts/interfaces/filters/interface';
+import {
+  SelectedSortType,
+  SortType,
+} from '@/filters-and-sorts/interfaces/sorts/interface';
+
+import { useResetTableRowSelection } from '../../tables/hooks/useResetTableRowSelection';
+import { currentRowSelectionState } from '../../tables/states/rowSelectionState';
+
+import { TableHeader } from './table-header/TableHeader';
+
+type OwnProps<
+  TData extends { id: string; __typename: 'companies' | 'people' },
+  SortField,
+> = {
+  data: Array<TData>;
+  columns: Array<ColumnDef<TData, any>>;
+  viewName: string;
+  viewIcon?: React.ReactNode;
+  availableSorts?: Array<SortType<SortField>>;
+  availableFilters?: FilterConfigType<TData>[];
+  onSortsUpdate?: (sorts: Array<SelectedSortType<SortField>>) => void;
+  onFiltersUpdate?: (filters: Array<SelectedFilterType<TData>>) => void;
+  onRowSelectionChange?: (rowSelection: string[]) => void;
+};
+
+const StyledTable = styled.table`
+  min-width: 1000px;
+  width: calc(100% - 2 * ${(props) => props.theme.table.horizontalCellMargin});
+  border-radius: 4px;
+  border-spacing: 0;
+  border-collapse: collapse;
+  margin-left: ${(props) => props.theme.table.horizontalCellMargin};
+  margin-right: ${(props) => props.theme.table.horizontalCellMargin};
+  table-layout: fixed;
+
+  th {
+    border-collapse: collapse;
+    color: ${(props) => props.theme.text40};
+    padding: 0;
+    border: 1px solid ${(props) => props.theme.tertiaryBackground};
+    text-align: left;
+    :last-child {
+      border-right-color: transparent;
+    }
+    :first-of-type {
+      border-left-color: transparent;
+    }
+  }
+
+  td {
+    border-collapse: collapse;
+    color: ${(props) => props.theme.text80};
+    padding: 0;
+    border: 1px solid ${(props) => props.theme.tertiaryBackground};
+    text-align: left;
+    :last-child {
+      border-right-color: transparent;
+    }
+    :first-of-type {
+      border-left-color: transparent;
+    }
+  }
+`;
+
+const StyledTableWithHeader = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  width: 100%;
+`;
+
+const StyledTableScrollableContainer = styled.div`
+  overflow: auto;
+  height: 100%;
+  flex: 1;
+`;
+
+export function EntityTable<
+  TData extends { id: string; __typename: 'companies' | 'people' },
+  SortField,
+>({
+  data,
+  columns,
+  viewName,
+  viewIcon,
+  availableSorts,
+  availableFilters,
+  onSortsUpdate,
+  onFiltersUpdate,
+}: OwnProps<TData, SortField>) {
+  const [currentRowSelection, setCurrentRowSelection] = useRecoilState(
+    currentRowSelectionState,
+  );
+
+  const resetTableRowSelection = useResetTableRowSelection();
+
+  React.useEffect(() => {
+    resetTableRowSelection();
+  }, [resetTableRowSelection]);
+
+  const table = useReactTable<TData>({
+    data,
+    columns,
+    state: {
+      rowSelection: currentRowSelection,
+    },
+    getCoreRowModel: getCoreRowModel(),
+    enableRowSelection: true,
+    onRowSelectionChange: setCurrentRowSelection,
+    getRowId: (row) => row.id,
+  });
+
+  return (
+    <StyledTableWithHeader>
+      <TableHeader
+        viewName={viewName}
+        viewIcon={viewIcon}
+        availableSorts={availableSorts}
+        availableFilters={availableFilters}
+        onSortsUpdate={onSortsUpdate}
+        onFiltersUpdate={onFiltersUpdate}
+      />
+      <StyledTableScrollableContainer>
+        <StyledTable>
+          <thead>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <tr key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <th
+                    key={header.id}
+                    style={{
+                      width: `${header.getSize()}px`,
+                    }}
+                  >
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )}
+                  </th>
+                ))}
+              </tr>
+            ))}
+          </thead>
+          <tbody>
+            {table.getRowModel().rows.map((row, index) => (
+              <tr key={row.id} data-testid={`row-id-${row.index}`}>
+                {row.getVisibleCells().map((cell) => {
+                  return (
+                    <td key={cell.id + row.original.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </td>
+                  );
+                })}
+              </tr>
+            ))}
+          </tbody>
+        </StyledTable>
+      </StyledTableScrollableContainer>
+    </StyledTableWithHeader>
+  );
+}

front/src/modules/ui/components/table/SelectAllCheckbox.tsx

@@ -0,0 +1,18 @@
+import { CheckboxCell } from './CheckboxCell';
+
+export const SelectAllCheckbox = ({
+  indeterminate,
+  onChange,
+}: {
+  indeterminate?: boolean;
+  onChange?: (newCheckedValue: boolean) => void;
+} & React.HTMLProps<HTMLInputElement>) => {
+  return (
+    <CheckboxCell
+      name="select-all-checkbox"
+      id="select-all-checkbox"
+      indeterminate={indeterminate}
+      onChange={onChange}
+    />
+  );
+};

front/src/modules/ui/components/table/action-bar/EntityTableActionBar.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { useRecoilValue } from 'recoil';
+
+import { selectedRowIdsState } from '@/ui/tables/states/selectedRowIdsState';
+
+type OwnProps = {
+  children: React.ReactNode | React.ReactNode[];
+};
+
+const StyledContainer = styled.div`
+  display: flex;
+  position: absolute;
+  z-index: 1;
+  height: 48px;
+  bottom: 38px;
+  background: ${(props) => props.theme.secondaryBackground};
+  align-items: center;
+  padding-left: ${(props) => props.theme.spacing(2)};
+  padding-right: ${(props) => props.theme.spacing(2)};
+  left: 50%;
+  transform: translateX(-50%);
+
+  border-radius: 8px;
+  border: 1px solid ${(props) => props.theme.primaryBorder};
+`;
+
+export function EntityTableActionBar({ children }: OwnProps) {
+  const selectedRowIds = useRecoilValue(selectedRowIdsState);
+
+  if (selectedRowIds.length === 0) {
+    return <></>;
+  }
+
+  return <StyledContainer>{children}</StyledContainer>;
+}

front/src/modules/ui/components/table/action-bar/EntityTableActionBarButton.tsx

@@ -0,0 +1,49 @@
+import { ReactNode } from 'react';
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  icon: ReactNode;
+  label: string;
+  type?: 'standard' | 'warning';
+  onClick: () => void;
+};
+
+type StyledButtonProps = {
+  type: 'standard' | 'warning';
+};
+
+const StyledButton = styled.div<StyledButtonProps>`
+  display: flex;
+  cursor: pointer;
+  user-select: none;
+  color: ${(props) =>
+    props.type === 'warning' ? props.theme.red : props.theme.text60};
+  justify-content: center;
+
+  padding: ${(props) => props.theme.spacing(2)};
+  border-radius: 4px;
+  transition: background 0.1s ease;
+
+  &:hover {
+    background: ${(props) => props.theme.tertiaryBackground};
+  }
+`;
+
+const StyledButtonLabel = styled.div`
+  margin-left: ${(props) => props.theme.spacing(2)};
+  font-weight: 500;
+`;
+
+export function EntityTableActionBarButton({
+  label,
+  icon,
+  type = 'standard',
+  onClick,
+}: OwnProps) {
+  return (
+    <StyledButton type={type} onClick={onClick}>
+      {icon}
+      <StyledButtonLabel>{label}</StyledButtonLabel>
+    </StyledButton>
+  );
+}

front/src/modules/ui/components/table/action-bar/TableActionBarButtonOpenComments.tsx

@@ -0,0 +1,23 @@
+import { FaRegComment } from 'react-icons/fa';
+
+import { useOpenRightDrawer } from '@/ui/layout/right-drawer/hooks/useOpenRightDrawer';
+
+import { EntityTableActionBarButton } from './EntityTableActionBarButton';
+
+export function TableActionBarButtonToggleComments() {
+  // TODO: here it would be nice to access the table context
+  // But let's see when we have custom entities and properties
+  const openRightDrawer = useOpenRightDrawer();
+
+  async function handleButtonClick() {
+    openRightDrawer('comments');
+  }
+
+  return (
+    <EntityTableActionBarButton
+      label="Comment"
+      icon={<FaRegComment size={16} />}
+      onClick={handleButtonClick}
+    />
+  );
+}

front/src/modules/ui/components/table/table-header/DropdownButton.tsx

@@ -0,0 +1,207 @@
+import { ReactNode, useRef } from 'react';
+import { FaAngleDown } from 'react-icons/fa';
+import styled from '@emotion/styled';
+
+import { useOutsideAlerter } from '../../../hooks/useOutsideAlerter';
+import {
+  overlayBackground,
+  textInputStyle,
+} from '../../../layout/styles/themes';
+
+type OwnProps = {
+  label: string;
+  isActive: boolean;
+  children?: ReactNode;
+  isUnfolded?: boolean;
+  setIsUnfolded?: React.Dispatch<React.SetStateAction<boolean>>;
+  resetState?: () => void;
+};
+
+const StyledDropdownButtonContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  z-index: 1;
+`;
+
+type StyledDropdownButtonProps = {
+  isUnfolded: boolean;
+  isActive: boolean;
+};
+
+const StyledDropdownButton = styled.div<StyledDropdownButtonProps>`
+  display: flex;
+  margin-left: ${(props) => props.theme.spacing(3)};
+  cursor: pointer;
+  user-select: none;
+  background: ${(props) => props.theme.primaryBackground};
+  color: ${(props) => (props.isActive ? props.theme.blue : 'none')};
+  padding: ${(props) => props.theme.spacing(1)};
+  border-radius: 4px;
+  filter: ${(props) => (props.isUnfolded ? 'brightness(0.95)' : 'none')};
+
+  &:hover {
+    filter: brightness(0.95);
+  }
+`;
+
+const StyledDropdown = styled.ul`
+  --wraper-border: 1px;
+  --wraper-border-radius: 8px;
+  --outer-border-radius: calc(var(--wraper-border-radius) - 2px);
+
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 14px;
+  right: 0;
+  border: var(--wraper-border) solid ${(props) => props.theme.primaryBorder};
+  border-radius: var(--wraper-border-radius);
+  padding: 0px;
+  min-width: 160px;
+  ${overlayBackground}
+  li {
+    &:first-of-type {
+      border-top-left-radius: var(--outer-border-radius);
+      border-top-right-radius: var(--outer-border-radius);
+    }
+    &:last-of-type {
+      border-bottom-left-radius: var(--outer-border-radius);
+      border-bottom-right-radius: var(--outer-border-radius);
+      border-bottom: 0;
+    }
+  }
+`;
+
+const StyledDropdownItem = styled.li`
+  display: flex;
+  align-items: center;
+  width: calc(160px - ${(props) => props.theme.spacing(4)});
+  padding: ${(props) => props.theme.spacing(2)}
+    calc(${(props) => props.theme.spacing(2)} - 2px);
+  margin: 2px;
+  cursor: pointer;
+  user-select: none;
+  color: ${(props) => props.theme.text60};
+  border-radius: 2px;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.04);
+  }
+`;
+
+const StyledDropdownItemClipped = styled.span`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+
+const StyledDropdownTopOption = styled.li`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: calc(${(props) => props.theme.spacing(2)} + 2px)
+    calc(${(props) => props.theme.spacing(2)});
+  cursor: pointer;
+  user-select: none;
+  color: ${(props) => props.theme.text80};
+  font-weight: ${(props) => props.theme.fontWeightBold};
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  border-bottom: 1px solid ${(props) => props.theme.primaryBorder};
+`;
+
+const StyledIcon = styled.div`
+  display: flex;
+  margin-right: ${(props) => props.theme.spacing(1)};
+  min-width: ${(props) => props.theme.spacing(4)};
+  justify-content: center;
+`;
+
+const StyledSearchField = styled.li`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  cursor: pointer;
+  user-select: none;
+  color: ${(props) => props.theme.text60};
+  font-weight: ${(props) => props.theme.fontWeightBold};
+  border-bottom: var(--wraper-border) solid
+    ${(props) => props.theme.primaryBorder};
+
+  overflow: hidden;
+  input {
+    height: 36px;
+    width: 100%;
+    padding: 8px;
+    box-sizing: border-box;
+    font-family: ${(props) => props.theme.fontFamily};
+    border-radius: 8px;
+
+    ${textInputStyle}
+
+    &:focus {
+      outline: 0 none;
+    }
+  }
+`;
+
+function DropdownButton({
+  label,
+  isActive,
+  children,
+  isUnfolded = false,
+  setIsUnfolded,
+  resetState,
+}: OwnProps) {
+  const onButtonClick = () => {
+    setIsUnfolded && setIsUnfolded(!isUnfolded);
+  };
+
+  const onOutsideClick = () => {
+    setIsUnfolded && setIsUnfolded(false);
+    resetState && resetState();
+  };
+
+  const dropdownRef = useRef(null);
+  useOutsideAlerter(dropdownRef, onOutsideClick);
+
+  return (
+    <StyledDropdownButtonContainer>
+      <StyledDropdownButton
+        isUnfolded={isUnfolded}
+        onClick={onButtonClick}
+        isActive={isActive}
+        aria-selected={isActive}
+      >
+        {label}
+      </StyledDropdownButton>
+      {isUnfolded && (
+        <StyledDropdown ref={dropdownRef}>{children}</StyledDropdown>
+      )}
+    </StyledDropdownButtonContainer>
+  );
+}
+
+const StyleAngleDownContainer = styled.div`
+  margin-left: auto;
+`;
+
+function DropdownTopOptionAngleDown() {
+  return (
+    <StyleAngleDownContainer>
+      <FaAngleDown />
+    </StyleAngleDownContainer>
+  );
+}
+DropdownButton.StyledDropdownItem = StyledDropdownItem;
+DropdownButton.StyledDropdownItemClipped = StyledDropdownItemClipped;
+DropdownButton.StyledSearchField = StyledSearchField;
+DropdownButton.StyledDropdownTopOption = StyledDropdownTopOption;
+DropdownButton.StyledDropdownTopOptionAngleDown = DropdownTopOptionAngleDown;
+DropdownButton.StyledIcon = StyledIcon;
+
+export default DropdownButton;

front/src/modules/ui/components/table/table-header/FilterDropdownButton.tsx

@@ -0,0 +1,210 @@
+import { ChangeEvent, useCallback, useState } from 'react';
+import styled from '@emotion/styled';
+
+import {
+  FilterableFieldsType,
+  FilterConfigType,
+  FilterOperandType,
+  SelectedFilterType,
+} from '@/filters-and-sorts/interfaces/filters/interface';
+import { SearchResultsType, useSearch } from '@/search/services/search';
+import { humanReadableDate } from '@/utils/utils';
+
+import DatePicker from '../../form/DatePicker';
+
+import DropdownButton from './DropdownButton';
+
+type OwnProps<TData extends FilterableFieldsType> = {
+  isFilterSelected: boolean;
+  availableFilters: FilterConfigType<TData>[];
+  onFilterSelect: (filter: SelectedFilterType<TData>) => void;
+  onFilterRemove: (filterId: SelectedFilterType<TData>['key']) => void;
+};
+
+export const FilterDropdownButton = <TData extends FilterableFieldsType>({
+  availableFilters,
+  onFilterSelect,
+  isFilterSelected,
+  onFilterRemove,
+}: OwnProps<TData>) => {
+  const [isUnfolded, setIsUnfolded] = useState(false);
+
+  const [isOperandSelectionUnfolded, setIsOperandSelectionUnfolded] =
+    useState(false);
+
+  const [selectedFilter, setSelectedFilter] = useState<
+    FilterConfigType<TData> | undefined
+  >(undefined);
+
+  const [selectedFilterOperand, setSelectedFilterOperand] = useState<
+    FilterOperandType<TData> | undefined
+  >(undefined);
+
+  const [filterSearchResults, setSearchInput, setFilterSearch] = useSearch();
+
+  const resetState = useCallback(() => {
+    setIsOperandSelectionUnfolded(false);
+    setSelectedFilter(undefined);
+    setSelectedFilterOperand(undefined);
+    setFilterSearch(null);
+  }, [setFilterSearch]);
+
+  const renderOperandSelection = selectedFilter?.operands.map(
+    (filterOperand, index) => (
+      <DropdownButton.StyledDropdownItem
+        key={`select-filter-operand-${index}`}
+        onClick={() => {
+          setSelectedFilterOperand(filterOperand);
+          setIsOperandSelectionUnfolded(false);
+        }}
+      >
+        {filterOperand.label}
+      </DropdownButton.StyledDropdownItem>
+    ),
+  );
+
+  const renderFilterSelection = availableFilters.map((filter, index) => (
+    <DropdownButton.StyledDropdownItem
+      key={`select-filter-${index}`}
+      onClick={() => {
+        setSelectedFilter(filter);
+        setSelectedFilterOperand(filter.operands[0]);
+        filter.searchConfig && setFilterSearch(filter.searchConfig);
+        setSearchInput('');
+      }}
+    >
+      <DropdownButton.StyledIcon>{filter.icon}</DropdownButton.StyledIcon>
+      {filter.label}
+    </DropdownButton.StyledDropdownItem>
+  ));
+
+  const renderSearchResults = (
+    filterSearchResults: SearchResultsType,
+    selectedFilter: FilterConfigType<TData>,
+    selectedFilterOperand: FilterOperandType<TData>,
+  ) => {
+    if (filterSearchResults.loading) {
+      return (
+        <DropdownButton.StyledDropdownItem data-testid="loading-search-results">
+          Loading
+        </DropdownButton.StyledDropdownItem>
+      );
+    }
+
+    return filterSearchResults.results.map((result, index) => {
+      return (
+        <DropdownButton.StyledDropdownItem
+          key={`fields-value-${index}`}
+          onClick={() => {
+            onFilterSelect({
+              key: selectedFilter.key,
+              label: selectedFilter.label,
+              value: result.value,
+              displayValue: result.render(result.value),
+              icon: selectedFilter.icon,
+              operand: selectedFilterOperand,
+            });
+            setIsUnfolded(false);
+            setSelectedFilter(undefined);
+          }}
+        >
+          <DropdownButton.StyledDropdownItemClipped>
+            {result.render(result.value)}
+          </DropdownButton.StyledDropdownItemClipped>
+        </DropdownButton.StyledDropdownItem>
+      );
+    });
+  };
+
+  function renderValueSelection(
+    selectedFilter: FilterConfigType<TData>,
+    selectedFilterOperand: FilterOperandType<TData>,
+  ) {
+    return (
+      <>
+        <DropdownButton.StyledDropdownTopOption
+          key={'selected-filter-operand'}
+          onClick={() => setIsOperandSelectionUnfolded(true)}
+        >
+          {selectedFilterOperand.label}
+
+          <DropdownButton.StyledDropdownTopOptionAngleDown />
+        </DropdownButton.StyledDropdownTopOption>
+        <DropdownButton.StyledSearchField key={'search-filter'}>
+          {['text', 'relation'].includes(selectedFilter.type) && (
+            <input
+              type="text"
+              placeholder={selectedFilter.label}
+              onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                if (
+                  selectedFilter.type === 'relation' &&
+                  selectedFilter.searchConfig
+                ) {
+                  setFilterSearch(selectedFilter.searchConfig);
+                  setSearchInput(event.target.value);
+                }
+
+                if (selectedFilter.type === 'text') {
+                  if (event.target.value === '') {
+                    onFilterRemove(selectedFilter.key);
+                  } else {
+                    onFilterSelect({
+                      key: selectedFilter.key,
+                      label: selectedFilter.label,
+                      value: event.target.value,
+                      displayValue: event.target.value,
+                      icon: selectedFilter.icon,
+                      operand: selectedFilterOperand,
+                    });
+                  }
+                }
+              }}
+            />
+          )}
+          {selectedFilter.type === 'date' && (
+            <DatePicker
+              date={new Date()}
+              onChangeHandler={(date) => {
+                onFilterSelect({
+                  key: selectedFilter.key,
+                  label: selectedFilter.label,
+                  value: date.toISOString(),
+                  displayValue: humanReadableDate(date),
+                  icon: selectedFilter.icon,
+                  operand: selectedFilterOperand,
+                });
+              }}
+              customInput={<></>}
+              customCalendarContainer={styled.div`
+                top: -10px;
+              `}
+            />
+          )}
+        </DropdownButton.StyledSearchField>
+        {selectedFilter.type === 'relation' &&
+          filterSearchResults &&
+          renderSearchResults(
+            filterSearchResults,
+            selectedFilter,
+            selectedFilterOperand,
+          )}
+      </>
+    );
+  }
+
+  return (
+    <DropdownButton
+      label="Filter"
+      isActive={isFilterSelected}
+      isUnfolded={isUnfolded}
+      setIsUnfolded={setIsUnfolded}
+      resetState={resetState}
+    >
+      {selectedFilter
+        ? isOperandSelectionUnfolded
+          ? renderOperandSelection
+          : renderValueSelection(selectedFilter, selectedFilterOperand)
+        : renderFilterSelection}
+    </DropdownButton>
+  );
+};

front/src/modules/ui/components/table/table-header/SortAndFilterBar.tsx

@@ -0,0 +1,94 @@
+import { FaArrowDown, FaArrowUp } from 'react-icons/fa';
+import styled from '@emotion/styled';
+
+import {
+  FilterableFieldsType,
+  SelectedFilterType,
+} from '@/filters-and-sorts/interfaces/filters/interface';
+import { SelectedSortType } from '@/filters-and-sorts/interfaces/sorts/interface';
+
+import SortOrFilterChip from './SortOrFilterChip';
+
+type OwnProps<SortField, TData extends FilterableFieldsType> = {
+  sorts: Array<SelectedSortType<SortField>>;
+  onRemoveSort: (sortId: SelectedSortType<SortField>['key']) => void;
+  filters: Array<SelectedFilterType<TData>>;
+  onRemoveFilter: (filterId: SelectedFilterType<TData>['key']) => void;
+  onCancelClick: () => void;
+};
+
+const StyledBar = styled.div`
+  display: flex;
+  flex-direction: row;
+  border-top: 1px solid ${(props) => props.theme.primaryBorder};
+  align-items: center;
+  justify-content: space-between;
+  height: 40px;
+`;
+
+const StyledCancelButton = styled.button`
+  margin-left: auto;
+  border: none;
+  background-color: inherit;
+  padding: ${(props) => {
+    const horiz = props.theme.spacing(2);
+    const vert = props.theme.spacing(1);
+    return `${vert} ${horiz} ${vert} ${horiz}`;
+  }};
+  color: ${(props) => props.theme.text40};
+  font-weight: 500;
+  margin-right: ${(props) => props.theme.spacing(2)};
+  cursor: pointer;
+  user-select: none;
+
+  &:hover {
+    border-radius: ${(props) => props.theme.spacing(1)};
+    background-color: ${(props) => props.theme.tertiaryBackground};
+  }
+`;
+
+function SortAndFilterBar<SortField, TData extends FilterableFieldsType>({
+  sorts,
+  onRemoveSort,
+  filters,
+  onRemoveFilter,
+  onCancelClick,
+}: OwnProps<SortField, TData>) {
+  return (
+    <StyledBar>
+      {sorts.map((sort) => {
+        return (
+          <SortOrFilterChip
+            key={sort.key}
+            labelValue={sort.label}
+            id={sort.key}
+            icon={sort.order === 'desc' ? <FaArrowDown /> : <FaArrowUp />}
+            onRemove={() => onRemoveSort(sort.key)}
+          />
+        );
+      })}
+      {filters.map((filter) => {
+        return (
+          <SortOrFilterChip
+            key={filter.key}
+            labelKey={filter.label}
+            labelValue={`${filter.operand.label} ${filter.displayValue}`}
+            id={filter.key}
+            icon={filter.icon}
+            onRemove={() => onRemoveFilter(filter.key)}
+          />
+        );
+      })}
+      {filters.length + sorts.length > 0 && (
+        <StyledCancelButton
+          data-testid={'cancel-button'}
+          onClick={onCancelClick}
+        >
+          Cancel
+        </StyledCancelButton>
+      )}
+    </StyledBar>
+  );
+}
+
+export default SortAndFilterBar;

front/src/modules/ui/components/table/table-header/SortDropdownButton.tsx

@@ -0,0 +1,88 @@
+import { useCallback, useState } from 'react';
+
+import {
+  SelectedSortType,
+  SortType,
+} from '@/filters-and-sorts/interfaces/sorts/interface';
+
+import DropdownButton from './DropdownButton';
+
+type OwnProps<SortField> = {
+  isSortSelected: boolean;
+  onSortSelect: (sort: SelectedSortType<SortField>) => void;
+  availableSorts: SortType<SortField>[];
+};
+
+const options: Array<SelectedSortType<any>['order']> = ['asc', 'desc'];
+
+export function SortDropdownButton<SortField>({
+  isSortSelected,
+  availableSorts,
+  onSortSelect,
+}: OwnProps<SortField>) {
+  const [isUnfolded, setIsUnfolded] = useState(false);
+
+  const [isOptionUnfolded, setIsOptionUnfolded] = useState(false);
+
+  const [selectedSortDirection, setSelectedSortDirection] =
+    useState<SelectedSortType<SortField>['order']>('asc');
+
+  const onSortItemSelect = useCallback(
+    (sort: SortType<SortField>) => {
+      onSortSelect({ ...sort, order: selectedSortDirection });
+    },
+    [onSortSelect, selectedSortDirection],
+  );
+
+  const resetState = useCallback(() => {
+    setIsOptionUnfolded(false);
+    setSelectedSortDirection('asc');
+  }, []);
+
+  return (
+    <DropdownButton
+      label="Sort"
+      isActive={isSortSelected}
+      isUnfolded={isUnfolded}
+      setIsUnfolded={setIsUnfolded}
+      resetState={resetState}
+    >
+      {isOptionUnfolded
+        ? options.map((option, index) => (
+            <DropdownButton.StyledDropdownItem
+              key={index}
+              onClick={() => {
+                setSelectedSortDirection(option);
+                setIsOptionUnfolded(false);
+              }}
+            >
+              {option === 'asc' ? 'Ascending' : 'Descending'}
+            </DropdownButton.StyledDropdownItem>
+          ))
+        : [
+            <DropdownButton.StyledDropdownTopOption
+              key={0}
+              onClick={() => setIsOptionUnfolded(true)}
+            >
+              {selectedSortDirection === 'asc' ? 'Ascending' : 'Descending'}
+
+              <DropdownButton.StyledDropdownTopOptionAngleDown />
+            </DropdownButton.StyledDropdownTopOption>,
+            ...availableSorts.map((sort, index) => (
+              <DropdownButton.StyledDropdownItem
+                key={index + 1}
+                onClick={() => {
+                  setIsUnfolded(false);
+                  onSortItemSelect(sort);
+                }}
+              >
+                <DropdownButton.StyledIcon>
+                  {sort.icon}
+                </DropdownButton.StyledIcon>
+                {sort.label}
+              </DropdownButton.StyledDropdownItem>
+            )),
+          ]}
+    </DropdownButton>
+  );
+}

front/src/modules/ui/components/table/table-header/SortOrFilterChip.tsx

@@ -0,0 +1,64 @@
+import { ReactNode } from 'react';
+import { TbX } from 'react-icons/tb';
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  id: string;
+  labelKey?: string;
+  labelValue: string;
+  icon: ReactNode;
+  onRemove: () => void;
+};
+
+const StyledChip = styled.div`
+  border-radius: 50px;
+  display: flex;
+  flex-direction: row;
+  background-color: ${(props) => props.theme.blueHighTransparency};
+  border: 1px solid ${(props) => props.theme.blueLowTransparency};
+  color: ${(props) => props.theme.blue};
+  padding: ${(props) => props.theme.spacing(1) + ' ' + props.theme.spacing(2)};
+  margin-left: ${(props) => props.theme.spacing(2)};
+  font-size: ${(props) => props.theme.fontSizeSmall};
+  align-items: center;
+`;
+const StyledIcon = styled.div`
+  margin-right: ${(props) => props.theme.spacing(1)};
+  display: flex;
+  align-items: center;
+`;
+
+const StyledDelete = styled.div`
+  margin-left: ${(props) => props.theme.spacing(2)};
+  cursor: pointer;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  font-size: ${(props) => props.theme.fontSizeSmall};
+  margin-top: 1px;
+`;
+
+const StyledLabelKey = styled.div`
+  font-weight: 500;
+`;
+
+function SortOrFilterChip({
+  id,
+  labelKey,
+  labelValue,
+  icon,
+  onRemove,
+}: OwnProps) {
+  return (
+    <StyledChip>
+      <StyledIcon>{icon}</StyledIcon>
+      {labelKey && <StyledLabelKey>{labelKey}:&nbsp;</StyledLabelKey>}
+      {labelValue}
+      <StyledDelete onClick={onRemove} data-testid={'remove-icon-' + id}>
+        <TbX />
+      </StyledDelete>
+    </StyledChip>
+  );
+}
+
+export default SortOrFilterChip;

front/src/modules/ui/components/table/table-header/TableHeader.tsx

@@ -0,0 +1,168 @@
+import { ReactNode, useCallback, useState } from 'react';
+import styled from '@emotion/styled';
+
+import {
+  FilterableFieldsType,
+  FilterConfigType,
+  SelectedFilterType,
+} from '@/filters-and-sorts/interfaces/filters/interface';
+import {
+  SelectedSortType,
+  SortType,
+} from '@/filters-and-sorts/interfaces/sorts/interface';
+
+import { FilterDropdownButton } from './FilterDropdownButton';
+import SortAndFilterBar from './SortAndFilterBar';
+import { SortDropdownButton } from './SortDropdownButton';
+
+type OwnProps<SortField, TData extends FilterableFieldsType> = {
+  viewName: string;
+  viewIcon?: ReactNode;
+  availableSorts?: Array<SortType<SortField>>;
+  availableFilters?: FilterConfigType<TData>[];
+  onSortsUpdate?: (sorts: Array<SelectedSortType<SortField>>) => void;
+  onFiltersUpdate?: (sorts: Array<SelectedFilterType<TData>>) => void;
+};
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const StyledTableHeader = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  height: 40px;
+  color: ${(props) => props.theme.text60};
+  font-weight: 500;
+  padding-left: ${(props) => props.theme.spacing(3)};
+  padding-right: ${(props) => props.theme.spacing(1)};
+`;
+
+const StyledIcon = styled.div`
+  display: flex;
+  margin-right: ${(props) => props.theme.spacing(2)};
+
+  & > svg {
+    font-size: ${(props) => props.theme.fontSizeLarge};
+  }
+`;
+
+const StyledViewSection = styled.div`
+  display: flex;
+`;
+
+const StyledFilters = styled.div`
+  display: flex;
+  font-weight: 400;
+  margin-right: ${(props) => props.theme.spacing(2)};
+`;
+
+export function TableHeader<SortField, TData extends FilterableFieldsType>({
+  viewName,
+  viewIcon,
+  availableSorts,
+  availableFilters,
+  onSortsUpdate,
+  onFiltersUpdate,
+}: OwnProps<SortField, TData>) {
+  const [sorts, innerSetSorts] = useState<Array<SelectedSortType<SortField>>>(
+    [],
+  );
+  const [filters, innerSetFilters] = useState<Array<SelectedFilterType<TData>>>(
+    [],
+  );
+
+  const sortSelect = useCallback(
+    (newSort: SelectedSortType<SortField>) => {
+      const newSorts = updateSortOrFilterByKey(sorts, newSort);
+      innerSetSorts(newSorts);
+      onSortsUpdate && onSortsUpdate(newSorts);
+    },
+    [onSortsUpdate, sorts],
+  );
+
+  const sortUnselect = useCallback(
+    (sortKey: string) => {
+      const newSorts = sorts.filter((sort) => sort.key !== sortKey);
+      innerSetSorts(newSorts);
+      onSortsUpdate && onSortsUpdate(newSorts);
+    },
+    [onSortsUpdate, sorts],
+  );
+
+  const filterSelect = useCallback(
+    (filter: SelectedFilterType<TData>) => {
+      const newFilters = updateSortOrFilterByKey(filters, filter);
+
+      innerSetFilters(newFilters);
+      onFiltersUpdate && onFiltersUpdate(newFilters);
+    },
+    [onFiltersUpdate, filters],
+  );
+
+  const filterUnselect = useCallback(
+    (filterId: SelectedFilterType<TData>['key']) => {
+      const newFilters = filters.filter((filter) => filter.key !== filterId);
+      innerSetFilters(newFilters);
+      onFiltersUpdate && onFiltersUpdate(newFilters);
+    },
+    [onFiltersUpdate, filters],
+  );
+
+  return (
+    <StyledContainer>
+      <StyledTableHeader>
+        <StyledViewSection>
+          <StyledIcon>{viewIcon}</StyledIcon>
+          {viewName}
+        </StyledViewSection>
+        <StyledFilters>
+          <FilterDropdownButton
+            isFilterSelected={filters.length > 0}
+            availableFilters={availableFilters || []}
+            onFilterSelect={filterSelect}
+            onFilterRemove={filterUnselect}
+          />
+          <SortDropdownButton<SortField>
+            isSortSelected={sorts.length > 0}
+            availableSorts={availableSorts || []}
+            onSortSelect={sortSelect}
+          />
+        </StyledFilters>
+      </StyledTableHeader>
+      {sorts.length + filters.length > 0 && (
+        <SortAndFilterBar
+          sorts={sorts}
+          filters={filters}
+          onRemoveSort={sortUnselect}
+          onRemoveFilter={filterUnselect}
+          onCancelClick={() => {
+            innerSetFilters([]);
+            onFiltersUpdate && onFiltersUpdate([]);
+            innerSetSorts([]);
+            onSortsUpdate && onSortsUpdate([]);
+          }}
+        />
+      )}
+    </StyledContainer>
+  );
+}
+
+function updateSortOrFilterByKey<SortOrFilter extends { key: string }>(
+  sorts: Readonly<SortOrFilter[]>,
+  newSort: SortOrFilter,
+): SortOrFilter[] {
+  const newSorts = [...sorts];
+  const existingSortIndex = sorts.findIndex((sort) => sort.key === newSort.key);
+
+  if (existingSortIndex !== -1) {
+    newSorts[existingSortIndex] = newSort;
+  } else {
+    newSorts.push(newSort);
+  }
+
+  return newSorts;
+}