@bloom-housing/ui-components 4.4.0 → 4.4.1-alpha.10

package/CHANGELOG.md

@@ -3,6 +3,117 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.4.1-alpha.10](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.4.1-alpha.9...@bloom-housing/ui-components@4.4.1-alpha.10) (2022-06-01)
+
+
+### Features
+
+* add accessibility building features to listing ([#2755](https://github.com/bloom-housing/bloom/issues/2755)) ([0c8dfb8](https://github.com/bloom-housing/bloom/commit/0c8dfb833d0ef6d4f4927636c9f01bae6f48e4f1))
+
+
+
+
+
+## [4.4.1-alpha.9](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.4.1-alpha.8...@bloom-housing/ui-components@4.4.1-alpha.9) (2022-05-31)
+
+
+### Features
+
+* load overly to partner listings grid ([#2621](https://github.com/bloom-housing/bloom/issues/2621)) ([4785f34](https://github.com/bloom-housing/bloom/commit/4785f344831f97dac2164224e32247619e5ac808))
+
+
+
+
+
+## [4.4.1-alpha.8](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.4.1-alpha.7...@bloom-housing/ui-components@4.4.1-alpha.8) (2022-05-31)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [4.4.1-alpha.7](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.4.1-alpha.6...@bloom-housing/ui-components@4.4.1-alpha.7) (2022-05-31)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [4.4.1-alpha.6](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.4.1-alpha.5...@bloom-housing/ui-components@4.4.1-alpha.6) (2022-05-26)
+
+
+### Bug Fixes
+
+* visual design bugs ([#2737](https://github.com/bloom-housing/bloom/issues/2737)) ([dbac685](https://github.com/bloom-housing/bloom/commit/dbac685cd1e4d276b57a1d961eb5707decbc248b))
+
+
+
+
+
+## [4.4.1-alpha.5](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.4.1-alpha.4...@bloom-housing/ui-components@4.4.1-alpha.5) (2022-05-26)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [4.4.1-alpha.4](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.4.1-alpha.3...@bloom-housing/ui-components@4.4.1-alpha.4) (2022-05-26)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [4.4.1-alpha.3](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.4.1-alpha.2...@bloom-housing/ui-components@4.4.1-alpha.3) (2022-05-25)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [4.4.1-alpha.2](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.4.1-alpha.1...@bloom-housing/ui-components@4.4.1-alpha.2) (2022-05-25)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [4.4.1-alpha.1](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.4.1-alpha.0...@bloom-housing/ui-components@4.4.1-alpha.1) (2022-05-25)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [4.4.1-alpha.0](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.3.1-alpha.2...@bloom-housing/ui-components@4.4.1-alpha.0) (2022-05-25)
+
+
+* 2022 05 24 sync master (#2754) ([f52781f](https://github.com/bloom-housing/bloom/commit/f52781fe18fbdad071d6e9a8a2b29877596c5492)), closes [#2754](https://github.com/bloom-housing/bloom/issues/2754) [#2753](https://github.com/bloom-housing/bloom/issues/2753) [#2441](https://github.com/bloom-housing/bloom/issues/2441) [#2460](https://github.com/bloom-housing/bloom/issues/2460) [#2459](https://github.com/bloom-housing/bloom/issues/2459) [#2464](https://github.com/bloom-housing/bloom/issues/2464) [#2465](https://github.com/bloom-housing/bloom/issues/2465) [#2466](https://github.com/bloom-housing/bloom/issues/2466) [#2436](https://github.com/bloom-housing/bloom/issues/2436) [#2451](https://github.com/bloom-housing/bloom/issues/2451) [#2415](https://github.com/bloom-housing/bloom/issues/2415) [#2354](https://github.com/bloom-housing/bloom/issues/2354) [#2455](https://github.com/bloom-housing/bloom/issues/2455) [#2484](https://github.com/bloom-housing/bloom/issues/2484) [#2482](https://github.com/bloom-housing/bloom/issues/2482) [#2483](https://github.com/bloom-housing/bloom/issues/2483) [#2476](https://github.com/bloom-housing/bloom/issues/2476) [#2485](https://github.com/bloom-housing/bloom/issues/2485) [#2470](https://github.com/bloom-housing/bloom/issues/2470) [#2488](https://github.com/bloom-housing/bloom/issues/2488) [#2487](https://github.com/bloom-housing/bloom/issues/2487) [#2496](https://github.com/bloom-housing/bloom/issues/2496) [#2498](https://github.com/bloom-housing/bloom/issues/2498) [#2499](https://github.com/bloom-housing/bloom/issues/2499) [#2291](https://github.com/bloom-housing/bloom/issues/2291) [#2461](https://github.com/bloom-housing/bloom/issues/2461) [#2485](https://github.com/bloom-housing/bloom/issues/2485) [#2494](https://github.com/bloom-housing/bloom/issues/2494) [#2503](https://github.com/bloom-housing/bloom/issues/2503) [#2495](https://github.com/bloom-housing/bloom/issues/2495) [#2477](https://github.com/bloom-housing/bloom/issues/2477) [#2505](https://github.com/bloom-housing/bloom/issues/2505) [#2372](https://github.com/bloom-housing/bloom/issues/2372) [#2489](https://github.com/bloom-housing/bloom/issues/2489) [#2497](https://github.com/bloom-housing/bloom/issues/2497) [#2506](https://github.com/bloom-housing/bloom/issues/2506) [#2486](https://github.com/bloom-housing/bloom/issues/2486)
+
+
+### BREAKING CHANGES
+
+* consolidated all event section components in one new component, uptake will require removing the deprecated components and uptaking EventSection
+
+* chore(release): version
+
+ - @bloom-housing/backend-core@3.0.2-alpha.38
+ - @bloom-housing/shared-helpers@4.0.1-alpha.63
+ - @bloom-housing/partners@4.0.1-alpha.67
+ - @bloom-housing/public@4.0.1-alpha.66
+ - @bloom-housing/ui-components@4.0.1-alpha.62
+
+
+
+
+
 # [4.4.0](https://github.com/seanmalbert/bloom/compare/@bloom-housing/ui-components@4.2.3...@bloom-housing/ui-components@4.4.0) (2022-05-24)
 
 

package/index.ts

@@ -43,7 +43,6 @@ export * from "./src/forms/TimeField"
 /* Global */
 export * from "./src/global/AppearanceTypes"
 export * from "./src/global/ApplicationStatusType"
-export * from "./src/global/vendor/AgPagination"
 
 /* Headers */
 export * from "./src/headers/Hero"
@@ -147,6 +146,8 @@ export * from "./src/tables/GroupedTable"
 export * from "./src/tables/MinimalTable"
 export * from "./src/tables/StackedTable"
 export * from "./src/tables/CategoryTable"
+export * from "./src/tables/AgTable"
+export * from "./src/tables/AgPagination"
 
 /* Text */
 export * from "./src/text/Description"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "4.4.0",
+  "version": "4.4.1-alpha.10",
   "author": "Sean Albert <sean.albert@exygy.com>",
   "description": "Shared user interface components for Bloom affordable housing system",
   "homepage": "https://github.com/bloom-housing/bloom/tree/master/shared/ui-components",
@@ -53,7 +53,6 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.5.3",
     "mockdate": "^3.0.2",
-    "node-sass": "^7.0.0",
     "postcss": "^8.3.6",
     "postcss-loader": "^4.3",
     "preact": "^10.5.14",
@@ -61,7 +60,7 @@
     "react-is": "^17.0.2",
     "react-test-renderer": "^17.0.2",
     "regenerator-runtime": "^0.13.7",
-    "sass": "^1.32.1",
+    "sass": "1.52.1",
     "sass-loader": "^10.0.3",
     "style-loader": "^1.1.3",
     "ts-jest": "^26.4.1",
@@ -70,7 +69,7 @@
     "webpack": "^4.44.2"
   },
   "dependencies": {
-    "@bloom-housing/backend-core": "^4.4.0",
+    "@bloom-housing/backend-core": "^4.4.1-alpha.8",
     "@mapbox/mapbox-sdk": "^0.13.0",
     "@types/body-scroll-lock": "^2.6.1",
     "@types/jwt-decode": "^2.2.1",
@@ -82,6 +81,8 @@
     "@types/react-dom": "^16.9.5",
     "@types/react-text-mask": "^5.4.6",
     "@types/react-transition-group": "^4.4.0",
+    "ag-grid-community": "^26.0.0",
+    "ag-grid-react": "^26.0.0",
     "axios": "0.21.2",
     "body-scroll-lock": "^3.1.5",
     "dayjs": "^1.10.7",
@@ -102,5 +103,5 @@
     "tailwindcss": "2.2.10",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "fdee7be9a9b3808139fbf4b06422736a7e03c235"
+  "gitHead": "d7d5fcaf26ddfb276c132dc6c6d1f9a3df7e9baa"
 }

package/src/blocks/FormCard.scss

@@ -106,8 +106,10 @@
 }
 
 .form-card__header_group {
+  @apply flex justify-center items-center;
   @apply bg-primary;
   @apply p-4;
+  @apply h-16;
 
   @screen md {
     @apply rounded-t-lg;

package/src/blocks/FormCard.tsx

@@ -2,19 +2,26 @@ import * as React from "react"
 import "./FormCard.scss"
 
 export interface FormCardProps {
-  header?: string
+  header?: FormCardHeader
   children: React.ReactNode
   className?: string
 }
 
+export interface FormCardHeader {
+  isVisible: boolean
+  title: string
+}
+
 const FormCard = (props: FormCardProps) => {
   const classNames = props.className ? `${props.className} form-card` : "form-card"
-  if (props.header) {
+  if (props.header?.isVisible) {
     return (
       <article className={classNames}>
         <div className="form-card__header">
           <header className="form-card__header_group">
-            <h1 className="form-card__header_title">{props.header}</h1>
+            {props.header.title && (
+              <h1 className="form-card__header_title">{props.header.title}</h1>
+            )}
           </header>
 
           <div className="form-card__header_nav">{props.children}</div>

package/src/forms/Field.tsx

@@ -74,13 +74,16 @@ const Field = (props: FieldProps) => {
     if (props.caps) labelClasses.push("field-label--caps")
     if (props.primary) labelClasses.push("text-primary")
     if (props.readerOnly) labelClasses.push("sr-only")
+    if (props.type === "checkbox" || props.type === "radio") {
+      labelClasses.push("font-semibold")
+    }
 
     return (
       <label className={labelClasses.join(" ")} htmlFor={props.id || props.name}>
         {props.label}
       </label>
     )
-  }, [props.caps, props.primary, props.readerOnly, props.id, props.name, props.label])
+  }, [props.caps, props.primary, props.readerOnly, props.type, props.id, props.name, props.label])
 
   const idOrName = props.id || props.name
 

package/src/forms/FieldGroup.tsx

@@ -94,7 +94,7 @@ const FieldGroup = ({
         <label
           htmlFor={item.id}
           className={`font-semibold ${fieldLabelClassName} ${
-            item.disabled && "text-gray-600 cursor-default cursor-not-allowed"
+            item.disabled && "text-gray-600 cursor-not-allowed"
           }`}
         >
           {item.label}

package/src/global/blocks.scss

@@ -46,9 +46,7 @@ details.disclosure {
 .listing-detail-panel {
   @screen md {
     @apply ml-16;
-    @apply p-8;
-    @apply pt-0;
-    @apply pl-0;
+    @apply pb-8;
   }
 }
 

package/src/helpers/tableSummaries.tsx

@@ -1,9 +1,12 @@
 import * as React from "react"
 import { t } from "./translator"
-import { UnitSummary } from "@bloom-housing/backend-core/types"
+import { UnitSummary, ListingAvailability } from "@bloom-housing/backend-core/types"
 import { StandardTableData } from "../tables/StandardTable"
 
-export const unitSummariesTable = (summaries: UnitSummary[]): StandardTableData => {
+export const unitSummariesTable = (
+  summaries: UnitSummary[],
+  listingAvailability: ListingAvailability
+): StandardTableData => {
   const unitSummaries = summaries?.map((unitSummary) => {
     const unitPluralization = unitSummary.totalAvailable == 1 ? t("t.unit") : t("t.units")
     const minIncome =
@@ -43,6 +46,29 @@ export const unitSummariesTable = (summaries: UnitSummary[]): StandardTableData
         )
       : getRent(unitSummary.rentRange.min, unitSummary.rentRange.max)
 
+    let availability = null
+    if (listingAvailability === ListingAvailability.availableUnits) {
+      availability = (
+        <span>
+          {unitSummary.totalAvailable > 0 ? (
+            <>
+              <strong>{unitSummary.totalAvailable}</strong> {unitPluralization}
+            </>
+          ) : (
+            <span>
+              <strong>{t("listings.waitlist.open")}</strong>
+            </span>
+          )}
+        </span>
+      )
+    } else if (listingAvailability === ListingAvailability.openWaitlist) {
+      availability = (
+        <span>
+          <strong>{t("listings.waitlist.open")}</strong>
+        </span>
+      )
+    }
+
     return {
       unitType: {
         content: <strong>{t(`listings.unitTypes.${unitSummary.unitType?.name}`)}</strong>,
@@ -57,17 +83,7 @@ export const unitSummariesTable = (summaries: UnitSummary[]): StandardTableData
       },
       rent: { content: <span>{rent}</span> },
       availability: {
-        content: (
-          <span>
-            {unitSummary.totalAvailable > 0 ? (
-              <>
-                <strong>{unitSummary.totalAvailable}</strong> {unitPluralization}
-              </>
-            ) : (
-              <span className="uppercase">{t("listings.waitlist.label")}</span>
-            )}
-          </span>
-        ),
+        content: availability,
       },
     }
   })
@@ -75,11 +91,14 @@ export const unitSummariesTable = (summaries: UnitSummary[]): StandardTableData
   return unitSummaries
 }
 
-export const getSummariesTable = (summaries: UnitSummary[]): StandardTableData => {
+export const getSummariesTable = (
+  summaries: UnitSummary[],
+  listingAvailability: ListingAvailability
+): StandardTableData => {
   let unitSummaries: StandardTableData = []
 
   if (summaries?.length > 0) {
-    unitSummaries = unitSummariesTable(summaries)
+    unitSummaries = unitSummariesTable(summaries, listingAvailability)
   }
   return unitSummaries
 }

package/src/locales/es.json

@@ -394,6 +394,24 @@
   "authentication.timeout.signOutMessage": "Su seguridad es importante para nosotros. Concluimos su sesión debido a inactividad. Sírvase iniciar sesión para continuar.",
   "authentication.timeout.text": "Para proteger su identidad, su sesión concluirá en un minuto debido a inactividad. Si decide no responder, perderá toda la información que no haya guardado y concluirá su sesión.",
   "config.routePrefix": "es",
+  "eligibility.accessibility.acInUnit": "CA en la unidad",
+  "eligibility.accessibility.accessibleParking": "Estacionamiento Accesible",
+  "eligibility.accessibility.barrierFreeEntrance": "Entrada sin barreras",
+  "eligibility.accessibility.description": "Algunas propiedades tienen características de accesibilidad que otras pueden no tener.",
+  "eligibility.accessibility.elevator": "Ascensor",
+  "eligibility.accessibility.grabBars": "Barras de apoyo",
+  "eligibility.accessibility.hearing": "Audiencia",
+  "eligibility.accessibility.heatingInUnit": "Calefacción en Unidad",
+  "eligibility.accessibility.inUnitWasherDryer": "Lavadora y secadora en el apartamento",
+  "eligibility.accessibility.laundryInBuilding": "Lavandería en el edificio",
+  "eligibility.accessibility.mobility": "Movilidad",
+  "eligibility.accessibility.parkingOnSite": "Estacionamiento en el lugar",
+  "eligibility.accessibility.prompt": "¿Necesita funciones de accesibilidad adicionales?",
+  "eligibility.accessibility.rollInShower": "Rollo en la ducha",
+  "eligibility.accessibility.serviceAnimalsAllowed": "Se admiten animales de servicio",
+  "eligibility.accessibility.title": "Funciones de accesibilidad",
+  "eligibility.accessibility.visual": "Visual",
+  "eligibility.accessibility.wheelchairRamp": "Rampa para silla de ruedas",
   "errors.agreeError": "Debe estar de acuerdo con los términos para poder continuar",
   "errors.alert.badRequest": "¡Oops! Parece que algo salió mal. Por favor, inténtelo de nuevo. Comuníquese con su departamento de vivienda si sigue teniendo problemas.",
   "errors.alert.timeoutPleaseTryAgain": "¡Oops! Parece que algo salió mal. Por favor, inténtelo de nuevo.",

package/src/locales/general.json

@@ -515,6 +515,24 @@
   "authentication.timeout.signOutMessage": "We care about your security. We logged you out due to inactivity. Please sign in to continue.",
   "authentication.timeout.text": "To protect your identity, your session will expire in one minute due to inactivity. You will lose any unsaved information and be logged out if you choose not to respond.",
   "config.routePrefix": "",
+  "eligibility.accessibility.acInUnit": "AC in Unit",
+  "eligibility.accessibility.accessibleParking": "Accessible Parking",
+  "eligibility.accessibility.barrierFreeEntrance": "Barrier Free Entrance",
+  "eligibility.accessibility.description": "Some properties have accessibility features that others may not have.",
+  "eligibility.accessibility.elevator": "Elevator",
+  "eligibility.accessibility.grabBars": "Grab Bars",
+  "eligibility.accessibility.hearing": "Hearing",
+  "eligibility.accessibility.heatingInUnit": "Heating in Unit",
+  "eligibility.accessibility.inUnitWasherDryer": "In Unit Washer Dryer",
+  "eligibility.accessibility.laundryInBuilding": "Laundry in Building",
+  "eligibility.accessibility.mobility": "Mobility",
+  "eligibility.accessibility.parkingOnSite": "Parking On Site",
+  "eligibility.accessibility.prompt": "Do you require additional accessibility features?",
+  "eligibility.accessibility.rollInShower": "Roll in Shower",
+  "eligibility.accessibility.serviceAnimalsAllowed": "Service Animals Allowed",
+  "eligibility.accessibility.title": "Accessibility Features",
+  "eligibility.accessibility.visual": "Visual",
+  "eligibility.accessibility.wheelchairRamp": "Wheelchair Ramp",
   "errors.agreeError": "You must agree to the terms in order to continue",
   "errors.alert.badRequest": "Looks like something went wrong. Please try again. \n\nContact your housing department if you're still experiencing issues.",
   "errors.alert.timeoutPleaseTryAgain": "Oops! Looks like something went wrong. Please try again.",
@@ -594,6 +612,7 @@
   "listings.availableAndWaitlist": "Available Units & Open Waitlist",
   "listings.availableUnitsAndWaitlist": "Available units and waitlist",
   "listings.availableUnitsAndWaitlistDesc": "Once applicants fill all available units, additional applicants will be placed on the waitlist for <span class='t-italic'>%{number} units</span>",
+  "listings.availableUnits": "Available Units",
   "listings.bath": "bath",
   "listings.browseListings": "Browse Listings",
   "listings.buildingImageAltText": "A picture of the building",
@@ -680,6 +699,7 @@
   "listings.sections.eligibilityTitle": "Eligibility",
   "listings.sections.featuresSubtitle": "Amenities, unit details and additional fees",
   "listings.sections.featuresTitle": "Features",
+  "listings.sections.accessibilityFeatures": "Accessibility Features",
   "listings.sections.housingPreferencesSubtitle": "Preference holders will be given highest ranking.",
   "listings.sections.housingPreferencesTitle": "Housing Preferences",
   "listings.sections.neighborhoodSubtitle": "Location and transportation",
@@ -809,6 +829,7 @@
   "states.WV": "West Virginia",
   "states.WY": "Wyoming",
   "t.accessibility": "Accessibility",
+  "t.additionalAccessibility": "Additional Accessibility",
   "t.additionalPhone": "Additional Phone",
   "t.am": "AM",
   "t.areYouStillWorking": "Are you still working?",

package/src/navigation/FooterNav.scss

@@ -46,7 +46,7 @@
       display: flex;
       align-items: flex-start;
       flex-wrap: wrap;
-      justify-content: end;
+      justify-content: flex-end;
     }
   }
 }

package/src/overlays/LoadingOverlay.tsx

@@ -12,7 +12,7 @@ const LoadingOverlay = ({ isLoading, children }: LoadingOverlayProps) => {
     if (!isLoading) return children
 
     return (
-      <div className="loading-overlay">
+      <div className="loading-overlay" data-test-id="loading-overlay">
         <Icon size="3xl" symbol="spinner" className="loading-overlay__spinner" />
         {children}
       </div>

package/src/overlays/Overlay.scss

@@ -15,7 +15,7 @@
     @apply w-full;
     @apply h-full;
     @apply bg-gray-900;
-    @apply bg-opacity-50;
+    @apply opacity-50;
     transition-property: background-color;
 
     @include transition-timing;
@@ -37,7 +37,7 @@
       transform: translate(0px, 0px);
     }
     &.is-backdrop:before {
-      @apply bg-opacity-50;
+      @apply opacity-50;
     }
   }
 }

package/src/{global/vendor → tables}/AgPagination.tsx

@@ -13,7 +13,7 @@ type AgPaginationProps = {
   onPerPageChange?: (size: number) => void
 }
 
-const AG_PER_PAGE_OPTIONS = [8, 100, 500, 1000]
+const AG_PER_PAGE_OPTIONS = [8, 25, 50, 100]
 
 const AgPagination = ({
   totalItems,
@@ -67,6 +67,7 @@ const AgPagination = ({
               {t("t.show")}
             </label>
             <select
+              data-test-id="ag-page-size"
               name="page-size"
               id="page-size"
               value={itemsPerPage}
@@ -85,6 +86,7 @@ const AgPagination = ({
               {t("t.jumpTo")}
             </label>
             <select
+              data-test-id="ag-page-select"
               name="page-jump"
               id="page-jump"
               onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
@@ -110,6 +112,7 @@ const AgPagination = ({
       <div className="w-full md:w-auto flex justify-between mt-5 md:mt-0 ">
         <div className="md:hidden">
           <Button
+            data-test-id="ag-btn-prev"
             className="data-pager__previous data-pager__control"
             onClick={onPrevClick}
             disabled={currentPage === 1}
@@ -119,6 +122,7 @@ const AgPagination = ({
         </div>
 
         <Button
+          data-test-id="ag-btn-next"
           className="data-pager__next data-pager__control"
           onClick={onNextClick}
           disabled={totalPages === currentPage || totalPages === 0}

package/src/tables/AgTable.tsx

@@ -0,0 +1,242 @@
+import React, { useState, useCallback, useEffect, useRef } from "react"
+import { useForm } from "react-hook-form"
+import { AgGridReact } from "ag-grid-react"
+import { GridOptions, ColumnState, ColumnApi, ColDef, ColGroupDef } from "ag-grid-community"
+import { AgPagination, AG_PER_PAGE_OPTIONS } from "./AgPagination"
+import { LoadingOverlay } from "../overlays/LoadingOverlay"
+import { Field } from "../forms/Field"
+import { AlertBox } from "../notifications/AlertBox"
+import { debounce } from "../helpers/debounce"
+import { t } from "../helpers/translator"
+
+export interface ColumnOrder {
+  orderBy: string
+  orderDir: string
+}
+
+export interface AgTableProps {
+  id: string
+  config: AgTableConfig
+  data: AgTableData
+  pagination: AgTablePagination
+  search: AgTableSearch
+  sort?: AgTableSort
+  headerContent?: React.ReactNode
+  className?: string
+}
+
+export interface AgTablePagination {
+  perPage: number
+  setPerPage: React.Dispatch<React.SetStateAction<number>>
+  currentPage: number
+  setCurrentPage: React.Dispatch<React.SetStateAction<number>>
+}
+
+export interface AgTableConfig {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  gridComponents?: { [p: string]: any }
+  columns: (ColDef | ColGroupDef)[]
+  totalItemsLabel: string
+}
+
+export interface AgTableData {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  items: any[]
+  loading: boolean
+  totalItems: number
+  totalPages: number
+}
+
+export interface AgTableSearch {
+  setSearch: React.Dispatch<React.SetStateAction<string>>
+}
+
+export interface AgTableSort {
+  setSort?: React.Dispatch<React.SetStateAction<ColumnOrder[]>>
+}
+
+export const useAgTable = () => {
+  const [sortOptions, setSortOptions] = useState<ColumnOrder[]>([])
+  const [filterValue, setFilterValue] = useState("")
+
+  const [itemsPerPage, setItemsPerPage] = useState<number>(AG_PER_PAGE_OPTIONS[0])
+  const [currentPage, setCurrentPage] = useState<number>(1)
+
+  return {
+    filter: {
+      filterValue,
+      setFilterValue,
+    },
+    sort: {
+      sortOptions,
+      setSortOptions,
+    },
+    pagination: {
+      itemsPerPage,
+      setItemsPerPage,
+      currentPage,
+      setCurrentPage,
+    },
+  }
+}
+
+const AgTable = ({
+  id,
+  className,
+  pagination,
+  search: { setSearch },
+  sort: { setSort } = {},
+  headerContent,
+  data,
+  config: { gridComponents, columns, totalItemsLabel },
+}: AgTableProps) => {
+  // local storage key with column state
+  const columnStateLsKey = `column-state_${id}`
+  const defaultColDef = {
+    resizable: true,
+    maxWidth: 300,
+  }
+
+  const [gridColumnApi, setGridColumnApi] = useState<ColumnApi | null>(null)
+
+  const [validSearch, setValidSearch] = useState<boolean>(true)
+
+  const gridOptions: GridOptions = {
+    onSortChanged: (params) => {
+      if (!setSort) return
+
+      saveColumnState(params.columnApi)
+      onSortChange(params.columnApi.getColumnState())
+    },
+    onColumnMoved: (params) => saveColumnState(params.columnApi),
+    components: gridComponents,
+    suppressNoRowsOverlay: data.loading,
+  }
+
+  // update table items order on sort change
+  const initialLoadOnSort = useRef<boolean>(false)
+
+  const onSortChange = useCallback(
+    (columns: ColumnState[]) => {
+      if (!setSort) return
+
+      // prevent multiple fetch on initial render
+      if (!initialLoadOnSort.current) {
+        initialLoadOnSort.current = true
+        return
+      }
+
+      const sortedColumns = columns.filter((col) => !!col.sort)
+
+      setSort(() =>
+        sortedColumns?.map((col) => ({
+          orderBy: col?.colId || "",
+          orderDir: col?.sort?.toUpperCase() || "",
+        }))
+      )
+    },
+    [setSort]
+  )
+
+  // eslint-disable-next-line @typescript-eslint/unbound-method
+  const { register, watch } = useForm()
+  const filterField = watch("filter-input", "")
+  const debounceFilter = useRef(
+    debounce((value: string) => {
+      setSearch(value)
+      pagination.setCurrentPage(1)
+    }, 500)
+  )
+  useEffect(() => {
+    if (filterField.length === 0 || filterField.length > 2) {
+      setValidSearch(true)
+      debounceFilter.current(filterField)
+    } else {
+      setSearch("")
+      setValidSearch(false)
+    }
+  }, [filterField, setSearch])
+
+  // Load a table state on initial render & pagination change (because the new data comes from the API)
+  useEffect(() => {
+    const savedColumnState = sessionStorage.getItem(columnStateLsKey)
+
+    if (gridColumnApi && savedColumnState) {
+      const parsedState: ColumnState[] = JSON.parse(savedColumnState)
+
+      gridColumnApi.applyColumnState({
+        state: parsedState,
+        applyOrder: true,
+      })
+    }
+  }, [gridColumnApi, id, columnStateLsKey])
+
+  const saveColumnState = (api: ColumnApi) => {
+    const columnState = api.getColumnState()
+    const columnStateJSON = JSON.stringify(columnState)
+    sessionStorage.setItem(columnStateLsKey, columnStateJSON)
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const onGridReady = (params: any) => {
+    setGridColumnApi(params.columnApi)
+  }
+
+  return (
+    <div className={`ag-theme-alpine ag-theme-bloom ${className || ""}`}>
+      <div className="flex justify-between flex-col md:flex-row">
+        <div className="flex flex-wrap">
+          <div className="md:mr-5 w-full md:w-56">
+            <Field
+              dataTestId="ag-search-input"
+              name="filter-input"
+              label={t("t.filter")}
+              readerOnly={true}
+              register={register}
+              placeholder={t("t.filter")}
+            />
+          </div>
+          <div className="w-full md:w-auto mt-2 mb-2 md:mb-0">
+            {!validSearch && (
+              <AlertBox type="notice">{t("applications.table.searchError")}</AlertBox>
+            )}
+          </div>
+        </div>
+
+        {headerContent}
+      </div>
+
+      <div className="applications-table mt-5">
+        <LoadingOverlay isLoading={data.loading}>
+          <div>
+            <AgGridReact
+              defaultColDef={defaultColDef}
+              onGridReady={onGridReady}
+              gridOptions={gridOptions}
+              columnDefs={columns}
+              rowData={data.items}
+              domLayout={"autoHeight"}
+              headerHeight={83}
+              rowHeight={58}
+              suppressPaginationPanel={true}
+              paginationPageSize={AG_PER_PAGE_OPTIONS[0]}
+              suppressScrollOnNewData={true}
+            ></AgGridReact>
+          </div>
+        </LoadingOverlay>
+
+        <AgPagination
+          totalItems={data.totalItems}
+          totalPages={data.totalPages}
+          currentPage={pagination.currentPage}
+          itemsPerPage={pagination.perPage}
+          quantityLabel={totalItemsLabel}
+          setCurrentPage={pagination.setCurrentPage}
+          setItemsPerPage={pagination.setPerPage}
+        />
+      </div>
+    </div>
+  )
+}
+
+export { AgTable as default, AgTable }