@adiba-banking-cloud/backoffice 0.0.106 → 0.2.1

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, 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, H as MaskedTilePanel, 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, t as theme, N as useManagedModals, K as useModal } from './index-CWjYoFnK.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';
@@ -18,3 +18,8 @@ import '@fontsource/poppins/500.css';
 import '@fontsource/poppins/600.css';
 import '@fontsource/poppins/700.css';
 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,3 +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/client.d.ts

@@ -0,0 +1,24 @@
+import { AxiosRequestConfig } from "axios";
+import type { ApiResponse } from "./types";
+export interface ApiClientConfig {
+    baseURL?: string;
+    timeout?: number;
+    headers?: Record<string, string>;
+}
+export interface IApiClient {
+    get<T>(url: string, config?: AxiosRequestConfig): Promise<ApiResponse<T>>;
+    post<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<ApiResponse<T>>;
+    put<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<ApiResponse<T>>;
+    delete<T>(url: string, config?: AxiosRequestConfig): Promise<ApiResponse<T>>;
+}
+/**
+ * Factory function to create a configured API client instance
+ * @param config - Configuration options for the API client
+ * @returns Configured ApiClient instance
+ */
+export declare function createApiClient(config?: ApiClientConfig): IApiClient;
+/**
+ * Default API client instance with default configuration
+ * For custom configuration, use createApiClient() instead
+ */
+export declare const apiClient: IApiClient;

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

@@ -0,0 +1,12 @@
+/**
+ * Default pagination page size
+ */
+export declare const DEFAULT_PAGE_SIZE = 10;
+/**
+ * Maximum allowed page size for pagination
+ */
+export declare const MAX_PAGE_SIZE = 100;
+/**
+ * Default API request timeout in milliseconds
+ */
+export declare const DEFAULT_API_TIMEOUT = 30000;

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

@@ -0,0 +1,3 @@
+export * from "./types";
+export * from "./constants";
+export * from "./client";

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

@@ -0,0 +1,26 @@
+export interface ApiResponse<T> {
+    status: "success" | "error";
+    code: number;
+    message: string;
+    data?: T;
+    total?: number;
+    page?: number;
+    limit?: number;
+    error?: string;
+}
+export interface ApiError {
+    status: "error";
+    code: number;
+    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/components/ModalContentWrapper.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import "@mantine/dates/styles.css";
+/**
+ * Wrapper component for modal content to ensure MantineProvider context is available
+ * This is needed because modals rendered by the appshell may not have access to the pilet's provider
+ */
+export declare const ModalContentWrapper: React.FC<{
+    children: React.ReactNode;
+}>;

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

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

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.0.106",
+  "version": "0.2.1",
   "description": "An ADIBA component library for backoffice and dashboard applications",
   "license": "ISC",
   "main": "build/index.cjs.js",
@@ -32,21 +32,28 @@
     "@hello-pangea/dnd": "^16.5.0",
     "@lottiefiles/dotlottie-react": "^0.14.1",
     "@mantine/core": "^7.12.2",
+    "@mantine/dates": "^7.12.2",
     "@mantine/form": "^7.17.8",
     "@mantine/hooks": "^7.12.2",
     "@mantine/modals": "^7.17.8",
+    "axios": "^1.6.0",
     "highcharts-react-official": "^3.2.2",
     "highcharts-rounded-corners": "^1.0.7",
     "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",
     "@babel/preset-env": "^7.20.2",
@@ -58,6 +65,7 @@
     "@hello-pangea/dnd": "^16.5.0",
     "@lottiefiles/dotlottie-react": "^0.14.1",
     "@mantine/core": "^7.12.2",
+    "@mantine/dates": "^7.12.2",
     "@mantine/form": "^7.17.8",
     "@mantine/hooks": "^7.12.2",
     "@mantine/modals": "^7.17.8",