@adiba-banking-cloud/backoffice 0.2.0 → 0.2.1

package/build/index.cjs.js/{heatmap-c3tdleHx.js → heatmap-D-qDlLOI.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-QwR6crYB.js');
+var index = require('./index-CWyl7EKZ.js');
 
 function _mergeNamespaces(n, m) {
 	m.forEach(function (e) {

package/build/index.cjs.js/{index-QwR6crYB.js → index-CWyl7EKZ.js}

@@ -22,6 +22,8 @@ require('@fontsource/poppins/800.css');
 var axios = require('axios');
 var dates = require('@mantine/dates');
 require('@mantine/dates/styles.css');
+var reactQuery = require('@tanstack/react-query');
+var reactQueryDevtools = require('@tanstack/react-query-devtools');
 
 function _interopNamespaceDefault(e) {
 	var n = Object.create(null);
@@ -12170,7 +12172,7 @@ const initChart$1 = props => {
   }
 
   // Fallback: use dynamic import (async, but will work in Vite/Storybook)
-  Promise.resolve().then(function () { return require('./heatmap-c3tdleHx.js'); }).then(function (n) { return n.heatmap; }).then(heatmapModule => {
+  Promise.resolve().then(function () { return require('./heatmap-D-qDlLOI.js'); }).then(function (n) { return n.heatmap; }).then(heatmapModule => {
     const moduleFn = typeof heatmapModule === "function" ? heatmapModule : heatmapModule?.default || heatmapModule;
     if (typeof moduleFn === "function") {
       moduleFn(Highcharts);
@@ -14445,6 +14447,127 @@ const MAX_PAGE_SIZE = 100;
  */
 const DEFAULT_API_TIMEOUT = 30000;
 
+/**
+ * Configuration for URL filter hook
+ */
+
+/**
+ * Return type for useUrlFilters hook
+ */
+
+/**
+ * Generic hook for managing URL-based filters with pagination
+ *
+ * @example
+ * ```tsx
+ * interface MyFilters {
+ *   page: number;
+ *   limit: number;
+ *   name?: string;
+ *   status?: string;
+ * }
+ *
+ * const { filters, updateFilters, clearFilters } = useUrlFilters<MyFilters>({
+ *   parseFilters: (params) => ({
+ *     page: parseInt(params.get('page') || '1', 10),
+ *     limit: parseInt(params.get('limit') || '10', 10),
+ *     name: params.get('name') || undefined,
+ *     status: params.get('status') || undefined,
+ *   }),
+ *   serializeFilters: (filters, params) => {
+ *     if (filters.page) params.set('page', String(filters.page));
+ *     if (filters.limit) params.set('limit', String(filters.limit));
+ *     if (filters.name) params.set('name', filters.name);
+ *     if (filters.status) params.set('status', filters.status);
+ *   },
+ * });
+ * ```
+ */
+function useUrlFilters(options) {
+  const {
+    defaultPageSize = DEFAULT_PAGE_SIZE,
+    parseFilters,
+    serializeFilters,
+    hasActiveFilters: checkActiveFilters,
+    toApiParams
+  } = options;
+  const [searchParams, setSearchParams] = reactRouterDom.useSearchParams();
+  const filters = React.useMemo(() => {
+    const parsed = parseFilters(searchParams);
+
+    // Ensure page and limit are always present with valid defaults
+    const page = typeof parsed.page === "number" && parsed.page > 0 ? parsed.page : 1;
+    const limit = typeof parsed.limit === "number" && parsed.limit > 0 ? parsed.limit : defaultPageSize;
+    return {
+      ...parsed,
+      page,
+      limit
+    };
+  }, [searchParams, parseFilters, defaultPageSize]);
+  const updateFilters = newFilters => {
+    const params = new URLSearchParams(searchParams);
+
+    // Merge new filters with existing filters
+    const mergedFilters = {
+      ...filters,
+      ...newFilters
+    };
+
+    // Determine if we should reset page to 1
+    // Reset if: page is not explicitly set AND other filters are changing
+    const hasNonPaginationChanges = Object.keys(newFilters).some(key => key !== "page" && key !== "limit");
+    if (newFilters.page === undefined && hasNonPaginationChanges) {
+      mergedFilters.page = 1; // Reset to page 1
+    }
+
+    // Ensure page and limit are numbers
+    if (typeof mergedFilters.page !== "number" || mergedFilters.page < 1) {
+      mergedFilters.page = 1;
+    }
+    if (typeof mergedFilters.limit !== "number" || mergedFilters.limit < 1) {
+      mergedFilters.limit = defaultPageSize;
+    }
+
+    // Serialize all filters
+    serializeFilters(mergedFilters, params);
+    setSearchParams(params, {
+      replace: true
+    });
+  };
+  const clearFilters = () => {
+    const params = new URLSearchParams();
+    params.set("page", "1");
+    params.set("limit", String(defaultPageSize));
+    setSearchParams(params, {
+      replace: true
+    });
+  };
+  const hasActiveFilters = React.useMemo(() => {
+    if (checkActiveFilters) {
+      return checkActiveFilters(filters);
+    }
+    // Default: check if any non-pagination fields have values
+    return Object.keys(filters).some(key => {
+      if (key === "page" || key === "limit") return false;
+      const value = filters[key];
+      return value !== undefined && value !== null && value !== "";
+    });
+  }, [filters, checkActiveFilters]);
+  const apiParams = React.useMemo(() => {
+    if (toApiParams) {
+      return toApiParams(filters);
+    }
+    return undefined;
+  }, [filters, toApiParams]);
+  return {
+    filters,
+    updateFilters,
+    clearFilters,
+    hasActiveFilters,
+    apiParams
+  };
+}
+
 class ApiClient {
   constructor(config) {
     const {
@@ -14548,6 +14671,70 @@ const ModalContentWrapper = _ref => {
   }, children));
 };
 
+/**
+ * Default QueryClient configuration
+ */
+const defaultQueryClient = new reactQuery.QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 1,
+      refetchOnWindowFocus: false,
+      staleTime: 30000,
+      // 30 seconds
+      gcTime: 5 * 60 * 1000 // 5 minutes
+    },
+    mutations: {
+      retry: false
+    }
+  }
+});
+/**
+ * Higher-order component that wraps a component with all necessary providers:
+ * - QueryClientProvider (React Query)
+ * - MantineProvider (Mantine UI)
+ * - DatesProvider (Mantine Dates)
+ *
+ * @param Component - Component to wrap
+ * @param options - Optional configuration
+ * @returns Wrapped component with all providers
+ *
+ * @example
+ * ```tsx
+ * // Using default configuration
+ * const WrappedComponent = withProviders(MyComponent);
+ *
+ * // Using custom QueryClient
+ * const customQueryClient = new QueryClient({ ... });
+ * const WrappedComponent = withProviders(MyComponent, {
+ *   queryClient: customQueryClient,
+ * });
+ * ```
+ */
+function withProviders(Component) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const {
+    queryClient = defaultQueryClient,
+    enableDevtools = true,
+    theme: customTheme = theme,
+    datesSettings = {
+      locale: "en",
+      timezone: "UTC"
+    }
+  } = options;
+  const WrappedComponent = props => {
+    const showDevtools = enableDevtools && typeof process !== "undefined" && process.env?.NODE_ENV === "development";
+    return /*#__PURE__*/React__namespace.createElement(reactQuery.QueryClientProvider, {
+      client: queryClient
+    }, /*#__PURE__*/React__namespace.createElement(core.MantineProvider, {
+      theme: customTheme
+    }, /*#__PURE__*/React__namespace.createElement(dates.DatesProvider, {
+      settings: datesSettings
+    }, /*#__PURE__*/React__namespace.createElement(Component, props), showDevtools && /*#__PURE__*/React__namespace.createElement(reactQueryDevtools.ReactQueryDevtools, null))));
+  };
+  WrappedComponent.displayName = `withProviders(${Component.displayName || Component.name || "Component"})`;
+  return WrappedComponent;
+}
+
 exports.ApplicationMenu = ApplicationMenu;
 exports.ApplicationPanel = ApplicationPanel;
 exports.AvatarLabelPanel = AvatarLabelPanel;
@@ -14598,3 +14785,5 @@ exports.getDefaultExportFromCjs = getDefaultExportFromCjs;
 exports.theme = theme;
 exports.useManagedModals = useManagedModals;
 exports.useModal = useModal;
+exports.useUrlFilters = useUrlFilters;
+exports.withProviders = withProviders;

package/build/index.cjs.js/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-QwR6crYB.js');
+var index = require('./index-CWyl7EKZ.js');
 require('@mantine/modals');
 require('react');
 require('@mantine/core');
@@ -23,6 +23,8 @@ require('@fontsource/poppins/800.css');
 require('axios');
 require('@mantine/dates');
 require('@mantine/dates/styles.css');
+require('@tanstack/react-query');
+require('@tanstack/react-query-devtools');
 
 
 
@@ -75,3 +77,5 @@ exports.createApiClient = index.createApiClient;
 exports.theme = index.theme;
 exports.useManagedModals = index.useManagedModals;
 exports.useModal = index.useModal;
+exports.useUrlFilters = index.useUrlFilters;
+exports.withProviders = index.withProviders;

package/build/index.esm.js/{heatmap-Dfb5-pNh.js → heatmap-CtdCSRhG.js}

@@ -1,4 +1,4 @@
-import { g as getDefaultExportFromCjs } from './index-9HtrJaD9.js';
+import { g as getDefaultExportFromCjs } from './index-D7Cza3cb.js';
 
 function _mergeNamespaces(n, m) {
 	m.forEach(function (e) {

package/build/index.esm.js/{index-9HtrJaD9.js → index-D7Cza3cb.js}

@@ -7,7 +7,7 @@ import _extends from '@babel/runtime/helpers/extends';
 import HighchartsReact from 'highcharts-react-official';
 import HighchartsRounded from 'highcharts-rounded-corners';
 import * as IconSax from 'iconsax-react';
-import { Link } from 'react-router-dom';
+import { Link, useSearchParams } from 'react-router-dom';
 import { useDisclosure, useToggle } from '@mantine/hooks';
 import { useForm } from '@mantine/form';
 import '@fontsource/poppins/100.css';
@@ -21,6 +21,8 @@ import '@fontsource/poppins/800.css';
 import axios from 'axios';
 import { DatesProvider } from '@mantine/dates';
 import '@mantine/dates/styles.css';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
 function _mergeNamespaces(n, m) {
 	m.forEach(function (e) {
@@ -12149,7 +12151,7 @@ const initChart$1 = props => {
   }
 
   // Fallback: use dynamic import (async, but will work in Vite/Storybook)
-  import('./heatmap-Dfb5-pNh.js').then(function (n) { return n.h; }).then(heatmapModule => {
+  import('./heatmap-CtdCSRhG.js').then(function (n) { return n.h; }).then(heatmapModule => {
     const moduleFn = typeof heatmapModule === "function" ? heatmapModule : heatmapModule?.default || heatmapModule;
     if (typeof moduleFn === "function") {
       moduleFn(Highcharts);
@@ -14424,6 +14426,127 @@ const MAX_PAGE_SIZE = 100;
  */
 const DEFAULT_API_TIMEOUT = 30000;
 
+/**
+ * Configuration for URL filter hook
+ */
+
+/**
+ * Return type for useUrlFilters hook
+ */
+
+/**
+ * Generic hook for managing URL-based filters with pagination
+ *
+ * @example
+ * ```tsx
+ * interface MyFilters {
+ *   page: number;
+ *   limit: number;
+ *   name?: string;
+ *   status?: string;
+ * }
+ *
+ * const { filters, updateFilters, clearFilters } = useUrlFilters<MyFilters>({
+ *   parseFilters: (params) => ({
+ *     page: parseInt(params.get('page') || '1', 10),
+ *     limit: parseInt(params.get('limit') || '10', 10),
+ *     name: params.get('name') || undefined,
+ *     status: params.get('status') || undefined,
+ *   }),
+ *   serializeFilters: (filters, params) => {
+ *     if (filters.page) params.set('page', String(filters.page));
+ *     if (filters.limit) params.set('limit', String(filters.limit));
+ *     if (filters.name) params.set('name', filters.name);
+ *     if (filters.status) params.set('status', filters.status);
+ *   },
+ * });
+ * ```
+ */
+function useUrlFilters(options) {
+  const {
+    defaultPageSize = DEFAULT_PAGE_SIZE,
+    parseFilters,
+    serializeFilters,
+    hasActiveFilters: checkActiveFilters,
+    toApiParams
+  } = options;
+  const [searchParams, setSearchParams] = useSearchParams();
+  const filters = useMemo(() => {
+    const parsed = parseFilters(searchParams);
+
+    // Ensure page and limit are always present with valid defaults
+    const page = typeof parsed.page === "number" && parsed.page > 0 ? parsed.page : 1;
+    const limit = typeof parsed.limit === "number" && parsed.limit > 0 ? parsed.limit : defaultPageSize;
+    return {
+      ...parsed,
+      page,
+      limit
+    };
+  }, [searchParams, parseFilters, defaultPageSize]);
+  const updateFilters = newFilters => {
+    const params = new URLSearchParams(searchParams);
+
+    // Merge new filters with existing filters
+    const mergedFilters = {
+      ...filters,
+      ...newFilters
+    };
+
+    // Determine if we should reset page to 1
+    // Reset if: page is not explicitly set AND other filters are changing
+    const hasNonPaginationChanges = Object.keys(newFilters).some(key => key !== "page" && key !== "limit");
+    if (newFilters.page === undefined && hasNonPaginationChanges) {
+      mergedFilters.page = 1; // Reset to page 1
+    }
+
+    // Ensure page and limit are numbers
+    if (typeof mergedFilters.page !== "number" || mergedFilters.page < 1) {
+      mergedFilters.page = 1;
+    }
+    if (typeof mergedFilters.limit !== "number" || mergedFilters.limit < 1) {
+      mergedFilters.limit = defaultPageSize;
+    }
+
+    // Serialize all filters
+    serializeFilters(mergedFilters, params);
+    setSearchParams(params, {
+      replace: true
+    });
+  };
+  const clearFilters = () => {
+    const params = new URLSearchParams();
+    params.set("page", "1");
+    params.set("limit", String(defaultPageSize));
+    setSearchParams(params, {
+      replace: true
+    });
+  };
+  const hasActiveFilters = useMemo(() => {
+    if (checkActiveFilters) {
+      return checkActiveFilters(filters);
+    }
+    // Default: check if any non-pagination fields have values
+    return Object.keys(filters).some(key => {
+      if (key === "page" || key === "limit") return false;
+      const value = filters[key];
+      return value !== undefined && value !== null && value !== "";
+    });
+  }, [filters, checkActiveFilters]);
+  const apiParams = useMemo(() => {
+    if (toApiParams) {
+      return toApiParams(filters);
+    }
+    return undefined;
+  }, [filters, toApiParams]);
+  return {
+    filters,
+    updateFilters,
+    clearFilters,
+    hasActiveFilters,
+    apiParams
+  };
+}
+
 class ApiClient {
   constructor(config) {
     const {
@@ -14527,4 +14650,68 @@ const ModalContentWrapper = _ref => {
   }, children));
 };
 
-export { ApplicationMenu as A, BasicHeatmap as B, CalendarHeatmap as C, DonutChart as D, EqualizerColumn as E, File as F, SimpleForm as G, MaskedTilePanel as H, InterpolatedHeatmap as I, TilePanel as J, useModal as K, LabelPanel as L, MultiAxisArea as M, useManagedModals as N, DEFAULT_PAGE_SIZE as O, PageTitle as P, MAX_PAGE_SIZE as Q, DEFAULT_API_TIMEOUT as R, SimpleColumn as S, TitledPanel as T, UserMenu as U, createApiClient as V, apiClient as W, ModalContentWrapper as X, StackedColumn as a, SimpleArea as b, StackedArea as c, Icons as d, DynamicLogo as e, DynamicShigaLogo as f, getDefaultExportFromCjs as g, SideMenu as h, SimplePanel as i, SearchPanel as j, AvatarLabelPanel as k, SimpleText as l, TitleWithIndex as m, ConnectionPanel as n, ApplicationPanel as o, SubscriptionPlans as p, PaymentMethod as q, PaymentMethodAdd as r, SimpleTable as s, theme as t, ErrorModal as u, InfoModal as v, SimpleModal as w, SuccessModal as x, TwoFactorModal as y, Drawer as z };
+/**
+ * Default QueryClient configuration
+ */
+const defaultQueryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 1,
+      refetchOnWindowFocus: false,
+      staleTime: 30000,
+      // 30 seconds
+      gcTime: 5 * 60 * 1000 // 5 minutes
+    },
+    mutations: {
+      retry: false
+    }
+  }
+});
+/**
+ * Higher-order component that wraps a component with all necessary providers:
+ * - QueryClientProvider (React Query)
+ * - MantineProvider (Mantine UI)
+ * - DatesProvider (Mantine Dates)
+ *
+ * @param Component - Component to wrap
+ * @param options - Optional configuration
+ * @returns Wrapped component with all providers
+ *
+ * @example
+ * ```tsx
+ * // Using default configuration
+ * const WrappedComponent = withProviders(MyComponent);
+ *
+ * // Using custom QueryClient
+ * const customQueryClient = new QueryClient({ ... });
+ * const WrappedComponent = withProviders(MyComponent, {
+ *   queryClient: customQueryClient,
+ * });
+ * ```
+ */
+function withProviders(Component) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const {
+    queryClient = defaultQueryClient,
+    enableDevtools = true,
+    theme: customTheme = theme,
+    datesSettings = {
+      locale: "en",
+      timezone: "UTC"
+    }
+  } = options;
+  const WrappedComponent = props => {
+    const showDevtools = enableDevtools && typeof process !== "undefined" && process.env?.NODE_ENV === "development";
+    return /*#__PURE__*/React.createElement(QueryClientProvider, {
+      client: queryClient
+    }, /*#__PURE__*/React.createElement(MantineProvider, {
+      theme: customTheme
+    }, /*#__PURE__*/React.createElement(DatesProvider, {
+      settings: datesSettings
+    }, /*#__PURE__*/React.createElement(Component, props), showDevtools && /*#__PURE__*/React.createElement(ReactQueryDevtools, null))));
+  };
+  WrappedComponent.displayName = `withProviders(${Component.displayName || Component.name || "Component"})`;
+  return WrappedComponent;
+}
+
+export { ApplicationMenu as A, BasicHeatmap as B, CalendarHeatmap as C, DonutChart as D, EqualizerColumn as E, File as F, SimpleForm as G, MaskedTilePanel as H, InterpolatedHeatmap as I, TilePanel as J, useModal as K, LabelPanel as L, MultiAxisArea as M, useManagedModals as N, useUrlFilters as O, PageTitle as P, DEFAULT_PAGE_SIZE as Q, MAX_PAGE_SIZE as R, SimpleColumn as S, TitledPanel as T, UserMenu as U, DEFAULT_API_TIMEOUT as V, createApiClient as W, apiClient as X, ModalContentWrapper as Y, withProviders as Z, StackedColumn as a, SimpleArea as b, StackedArea as c, Icons as d, DynamicLogo as e, DynamicShigaLogo as f, getDefaultExportFromCjs as g, SideMenu as h, SimplePanel as i, SearchPanel as j, AvatarLabelPanel as k, SimpleText as l, TitleWithIndex as m, ConnectionPanel as n, ApplicationPanel as o, SubscriptionPlans as p, PaymentMethod as q, PaymentMethodAdd as r, SimpleTable as s, theme as t, ErrorModal as u, InfoModal as v, SimpleModal as w, SuccessModal as x, TwoFactorModal as y, Drawer as z };

package/build/index.esm.js/index.js

@@ -1,4 +1,4 @@
-export { A as ApplicationMenu, o as ApplicationPanel, k as AvatarLabelPanel, B as BasicHeatmap, C as CalendarHeatmap, n as ConnectionPanel, R as DEFAULT_API_TIMEOUT, O as DEFAULT_PAGE_SIZE, D as DonutChart, z as Drawer, e as DynamicLogo, f as DynamicShigaLogo, E as EqualizerColumn, u as ErrorModal, F as File, d as Icons, v as InfoModal, I as InterpolatedHeatmap, L as LabelPanel, Q as MAX_PAGE_SIZE, H as MaskedTilePanel, X as ModalContentWrapper, M as MultiAxisArea, P as PageTitle, q as PaymentMethod, r as PaymentMethodAdd, j as SearchPanel, h as SideMenu, b as SimpleArea, S as SimpleColumn, G as SimpleForm, w as SimpleModal, i as SimplePanel, s as SimpleTable, l as SimpleText, c as StackedArea, a as StackedColumn, p as SubscriptionPlans, x as SuccessModal, J as TilePanel, m as TitleWithIndex, T as TitledPanel, y as TwoFactorModal, U as UserMenu, W as apiClient, V as createApiClient, t as theme, N as useManagedModals, K as useModal } from './index-9HtrJaD9.js';
+export { A as ApplicationMenu, o as ApplicationPanel, k as AvatarLabelPanel, B as BasicHeatmap, C as CalendarHeatmap, n as ConnectionPanel, V as DEFAULT_API_TIMEOUT, Q as DEFAULT_PAGE_SIZE, D as DonutChart, z as Drawer, e as DynamicLogo, f as DynamicShigaLogo, E as EqualizerColumn, u as ErrorModal, F as File, d as Icons, v as InfoModal, I as InterpolatedHeatmap, L as LabelPanel, R as MAX_PAGE_SIZE, H as MaskedTilePanel, Y as ModalContentWrapper, M as MultiAxisArea, P as PageTitle, q as PaymentMethod, r as PaymentMethodAdd, j as SearchPanel, h as SideMenu, b as SimpleArea, S as SimpleColumn, G as SimpleForm, w as SimpleModal, i as SimplePanel, s as SimpleTable, l as SimpleText, c as StackedArea, a as StackedColumn, p as SubscriptionPlans, x as SuccessModal, J as TilePanel, m as TitleWithIndex, T as TitledPanel, y as TwoFactorModal, U as UserMenu, X as apiClient, W as createApiClient, t as theme, N as useManagedModals, K as useModal, O as useUrlFilters, Z as withProviders } from './index-D7Cza3cb.js';
 import '@mantine/modals';
 import 'react';
 import '@mantine/core';
@@ -21,3 +21,5 @@ import '@fontsource/poppins/800.css';
 import 'axios';
 import '@mantine/dates';
 import '@mantine/dates/styles.css';
+import '@tanstack/react-query';
+import '@tanstack/react-query-devtools';

package/build/typings/index.d.ts

@@ -1,5 +1,8 @@
 export * from "./components";
 export * from "./shared/hooks/modals/useModal";
 export * from "./shared/hooks/modals/useManagedModals";
+export * from "./shared/hooks";
 export * from "./shared/api";
 export * from "./shared/components";
+export * from "./shared/types";
+export * from "./shared/hocs";

package/build/typings/shared/api/types.d.ts

@@ -14,3 +14,13 @@ export interface ApiError {
     message: string;
     error: string;
 }
+/**
+ * Paginated API response
+ * Combines ApiResponse structure with pagination metadata
+ */
+export interface PaginatedApiResponse<T> extends Omit<ApiResponse<T[]>, "data" | "total" | "page" | "limit"> {
+    data: T[];
+    total: number;
+    page: number;
+    limit: number;
+}

package/build/typings/shared/hocs/index.d.ts

@@ -0,0 +1 @@
+export * from "./withProviders";

package/build/typings/shared/hocs/withProviders.d.ts

@@ -0,0 +1,49 @@
+import * as React from "react";
+import { theme } from "../../components/theme";
+import { QueryClient } from "@tanstack/react-query";
+import "@mantine/dates/styles.css";
+export interface WithProvidersOptions {
+    /**
+     * Custom QueryClient instance (optional)
+     * If not provided, uses default configuration
+     */
+    queryClient?: QueryClient;
+    /**
+     * Whether to show React Query Devtools in development (default: true)
+     */
+    enableDevtools?: boolean;
+    /**
+     * Mantine theme override (optional)
+     */
+    theme?: typeof theme;
+    /**
+     * DatesProvider settings override (optional)
+     */
+    datesSettings?: {
+        locale: string;
+        timezone: string;
+    };
+}
+/**
+ * Higher-order component that wraps a component with all necessary providers:
+ * - QueryClientProvider (React Query)
+ * - MantineProvider (Mantine UI)
+ * - DatesProvider (Mantine Dates)
+ *
+ * @param Component - Component to wrap
+ * @param options - Optional configuration
+ * @returns Wrapped component with all providers
+ *
+ * @example
+ * ```tsx
+ * // Using default configuration
+ * const WrappedComponent = withProviders(MyComponent);
+ *
+ * // Using custom QueryClient
+ * const customQueryClient = new QueryClient({ ... });
+ * const WrappedComponent = withProviders(MyComponent, {
+ *   queryClient: customQueryClient,
+ * });
+ * ```
+ */
+export declare function withProviders<P extends object>(Component: React.ComponentType<P>, options?: WithProvidersOptions): React.ComponentType<P>;

package/build/typings/shared/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from "./useUrlFilters";

package/build/typings/shared/hooks/useUrlFilters.d.ts

@@ -0,0 +1,88 @@
+/**
+ * Configuration for URL filter hook
+ */
+export interface UseUrlFiltersOptions<TFilters extends Record<string, any>> {
+    /**
+     * Default page size (defaults to DEFAULT_PAGE_SIZE from constants)
+     */
+    defaultPageSize?: number;
+    /**
+     * Function to parse filter values from URL search params
+     * @param searchParams - URLSearchParams object
+     * @returns Parsed filter object
+     */
+    parseFilters: (searchParams: URLSearchParams) => Partial<TFilters>;
+    /**
+     * Function to serialize filter values to URL search params
+     * @param filters - Filter object
+     * @param params - URLSearchParams object to update
+     */
+    serializeFilters: (filters: Partial<TFilters>, params: URLSearchParams) => void;
+    /**
+     * Function to check if any filters are active (excluding pagination)
+     * @param filters - Filter object
+     * @returns true if any filters are active
+     */
+    hasActiveFilters?: (filters: TFilters) => boolean;
+    /**
+     * Function to convert filters to API parameters
+     * @param filters - Filter object
+     * @returns API parameters object
+     */
+    toApiParams?: (filters: TFilters) => Record<string, any>;
+}
+/**
+ * Return type for useUrlFilters hook
+ */
+export interface UseUrlFiltersReturn<TFilters extends Record<string, any>> {
+    /**
+     * Current filter values (includes page and limit)
+     */
+    filters: TFilters;
+    /**
+     * Update filters in URL
+     * @param newFilters - Partial filter object to update
+     */
+    updateFilters: (newFilters: Partial<TFilters>) => void;
+    /**
+     * Clear all filters (resets to default page and limit)
+     */
+    clearFilters: () => void;
+    /**
+     * Whether any filters are currently active (excluding pagination)
+     */
+    hasActiveFilters: boolean;
+    /**
+     * API parameters derived from filters (if toApiParams provided)
+     */
+    apiParams?: Record<string, any>;
+}
+/**
+ * Generic hook for managing URL-based filters with pagination
+ *
+ * @example
+ * ```tsx
+ * interface MyFilters {
+ *   page: number;
+ *   limit: number;
+ *   name?: string;
+ *   status?: string;
+ * }
+ *
+ * const { filters, updateFilters, clearFilters } = useUrlFilters<MyFilters>({
+ *   parseFilters: (params) => ({
+ *     page: parseInt(params.get('page') || '1', 10),
+ *     limit: parseInt(params.get('limit') || '10', 10),
+ *     name: params.get('name') || undefined,
+ *     status: params.get('status') || undefined,
+ *   }),
+ *   serializeFilters: (filters, params) => {
+ *     if (filters.page) params.set('page', String(filters.page));
+ *     if (filters.limit) params.set('limit', String(filters.limit));
+ *     if (filters.name) params.set('name', filters.name);
+ *     if (filters.status) params.set('status', filters.status);
+ *   },
+ * });
+ * ```
+ */
+export declare function useUrlFilters<TFilters extends Record<string, any>>(options: UseUrlFiltersOptions<TFilters>): UseUrlFiltersReturn<TFilters>;

package/build/typings/shared/types/index.d.ts

@@ -0,0 +1 @@
+export * from "./pagination";

package/build/typings/shared/types/pagination.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Standard pagination parameters for API requests
+ */
+export interface PaginationParams {
+    page?: number;
+    limit?: number;
+}
+/**
+ * Standard paginated response structure
+ */
+export interface PaginatedResponse<T> {
+    data: T[];
+    total: number;
+    page: number;
+    limit: number;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@adiba-banking-cloud/backoffice",
   "author": "TUROG Technologies",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "An ADIBA component library for backoffice and dashboard applications",
   "license": "ISC",
   "main": "build/index.cjs.js",
@@ -42,13 +42,17 @@
     "iconsax-react": "^0.0.8",
     "react": ">=18",
     "react-dom": ">=18",
-    "react-router-dom": "^7.6.2"
+    "react-router-dom": "^7.6.2",
+    "@tanstack/react-query": "^5.0.0",
+    "@tanstack/react-query-devtools": "^5.0.0"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/turog-technologies/adiba-common-libraries.git"
   },
   "devDependencies": {
+    "@tanstack/react-query": "^5.0.0",
+    "@tanstack/react-query-devtools": "^5.0.0",
     "axios": "^1.6.0",
     "@babel/core": "^7.21.3",
     "@babel/plugin-transform-runtime": "^7.21.0",