TD-528: Add wallets page (#204)

2024-11-06 02:25:17 +00:00 · 2023-03-23 14:37:16 +04:00 · 2023-03-23 14:37:16 +04:00 · 46b7bfc09f
commit 46b7bfc09f
parent 2b1319b836
70 changed files with 569 additions and 176 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -48,7 +48,7 @@
        "lodash-es": "4.17.21",
        "moment": "2.29.4",
        "monaco-editor": "0.21.2",
-        "ngx-mat-select-search": "6.0.0",
+        "ngx-mat-select-search": "7.0.1",
        "rxjs": "7.5.4",
        "short-uuid": "4.1.0",
        "tslib": "2.3.1",
@ -14358,14 +14358,14 @@
      }
    },
    "node_modules/ngx-mat-select-search": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/ngx-mat-select-search/-/ngx-mat-select-search-6.0.0.tgz",
-      "integrity": "sha512-arrWZg2N/Pv3hCE2EV0qj3rqEUKImntmhW8qvo/aYxeN9iWPsseOpokcfMeC9I/SrLrqQFdfyPgHOgB9DqF2Hw==",
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/ngx-mat-select-search/-/ngx-mat-select-search-7.0.1.tgz",
+      "integrity": "sha512-eOCGfPd8Dnu+wmo76T/n/yRJ+xaWW8z8bS6athKbLnYAhp8gZpA7rsPzG/JzQ92L/Qga68yLQAA033rXXyuhTg==",
      "dependencies": {
        "tslib": "^2.4.0"
      },
      "peerDependencies": {
-        "@angular/material": "^15.0.0"
+        "@angular/material": "^15.0.0 || ^16.0.0"
      }
    },
    "node_modules/ngx-mat-select-search/node_modules/tslib": {
@ -28995,9 +28995,9 @@
      }
    },
    "ngx-mat-select-search": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/ngx-mat-select-search/-/ngx-mat-select-search-6.0.0.tgz",
-      "integrity": "sha512-arrWZg2N/Pv3hCE2EV0qj3rqEUKImntmhW8qvo/aYxeN9iWPsseOpokcfMeC9I/SrLrqQFdfyPgHOgB9DqF2Hw==",
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/ngx-mat-select-search/-/ngx-mat-select-search-7.0.1.tgz",
+      "integrity": "sha512-eOCGfPd8Dnu+wmo76T/n/yRJ+xaWW8z8bS6athKbLnYAhp8gZpA7rsPzG/JzQ92L/Qga68yLQAA033rXXyuhTg==",
      "requires": {
        "tslib": "^2.4.0"
      },
--- a/package.json
+++ b/package.json
@ -62,7 +62,7 @@
    "lodash-es": "4.17.21",
    "moment": "2.29.4",
    "monaco-editor": "0.21.2",
-    "ngx-mat-select-search": "6.0.0",
+    "ngx-mat-select-search": "7.0.1",
    "rxjs": "7.5.4",
    "short-uuid": "4.1.0",
    "tslib": "2.3.1",
--- a/src/app/api/fistful-stat/query-dsl/types/model-params.ts
+++ b/src/app/api/fistful-stat/query-dsl/types/model-params.ts
@ -1,7 +0,0 @@
-export interface ModelParams {
-    /**
-     * @deprecated
-     */
-    from?: string;
-    size?: string;
-}
--- a/src/app/api/fistful-stat/query-dsl/types/paged-base-parameters.ts
+++ b/src/app/api/fistful-stat/query-dsl/types/paged-base-parameters.ts
@ -0,0 +1,3 @@
+export interface PagedBaseParameters {
+    size?: number;
+}
--- a/src/app/api/fistful-stat/query-dsl/types/query-dsl.ts
+++ b/src/app/api/fistful-stat/query-dsl/types/query-dsl.ts
@ -1,7 +1,7 @@
 import { Chargebacks } from './chargebacks';
 import { Deposit } from './deposit';
 import { DepositRevertParams } from './deposit-revert';
-import { ModelParams } from './model-params';
+import { PagedBaseParameters } from './paged-base-parameters';
 import { Params } from './params';
 import { Payment } from './payment';
 import { Refund } from './refund';
@ -9,8 +9,8 @@ import { SourceParams } from './source';
 import { WalletParams } from './wallet';
 import { WithdrawalParams } from './withdrawal-params';

-export type ChargebacksParams = Params & ModelParams & Chargebacks;
-export type RefundsParams = Refund & ModelParams;
+export type ChargebacksParams = Params & PagedBaseParameters & Chargebacks;
+export type RefundsParams = Refund & PagedBaseParameters;

 /**
 * Available parameters:
@ -20,8 +20,8 @@ export type RefundsParams = Refund & ModelParams;
 */
 export interface QueryDsl {
    query: {
-        payments?: Payment & Params & ModelParams;
-        deposits?: Deposit & Params & ModelParams;
+        payments?: Payment & Params & PagedBaseParameters;
+        deposits?: Deposit & Params & PagedBaseParameters;
        chargebacks?: ChargebacksParams;
        refunds?: RefundsParams;
        wallets?: WalletParams;
--- a/src/app/api/fistful-stat/query-dsl/types/wallet.ts
+++ b/src/app/api/fistful-stat/query-dsl/types/wallet.ts
@ -1,4 +1,7 @@
-export interface WalletParams {
+// https://github.com/valitydev/fistful-magista/blob/e29771c64115569caef2faac141dfa9b6963c555/src/main/java/dev/vality/fistful/magista/query/impl/WalletFunction.java#L96
+import { PagedBaseParameters } from './paged-base-parameters';
+
+export interface WalletParams extends PagedBaseParameters {
    party_id?: string;
    identity_id?: string;
    currency_code?: string;
--- a/src/app/api/fistful-stat/utils/deposit-params-to-request.ts
+++ b/src/app/api/fistful-stat/utils/deposit-params-to-request.ts
@ -26,7 +26,7 @@ export const depositParamsToRequest = (
                deposits: {
                    from_time: fromTime,
                    to_time: toTime,
-                    size: size.toString(),
+                    size: size,
                    ...(amountTo ? { amount_to: amountTo } : {}),
                    ...(currencyCode ? { currency_code: currencyCode } : {}),
                    ...(depositId ? { deposit_id: depositId } : {}),
--- a/src/app/api/wallet/management.service.ts
+++ b/src/app/api/wallet/management.service.ts
@ -4,6 +4,8 @@ import {
    ThriftAstMetadata,
    wallet_Management,
 } from '@vality/fistful-proto';
+import { ContextSet } from '@vality/fistful-proto/internal/context';
+import { WalletParams } from '@vality/fistful-proto/internal/wallet';
 import { WalletID, EventRange, WalletState } from '@vality/fistful-proto/wallet';
 import { combineLatest, from, map, Observable, switchMap } from 'rxjs';

@ -39,4 +41,9 @@ export class ManagementService {
    Get(id: WalletID, range: EventRange): Observable<WalletState> {
        return this.client$.pipe(switchMap((c) => c.Get(id, range)));
    }
+
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    Create(params: WalletParams, context: ContextSet): Observable<WalletState> {
+        return this.client$.pipe(switchMap((c) => c.Create(params, context)));
+    }
 }
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@ -11,6 +11,7 @@ import { ROUTING_CONFIG as CLAIMS_ROUTING_CONFIG } from './sections/search-claim
 import { ROUTING_CONFIG as PARTIES_ROUTING_CONFIG } from './sections/search-parties/routing-config';
 import { ROUTING_CONFIG as PAYMENTS_ROUTING_CONFIG } from './sections/search-payments/routing-config';
 import { ROUTING_CONFIG as SOURCES_ROUTING_CONFIG } from './sections/sources/routing-config';
+import { ROUTING_CONFIG as WALLETS_ROUTING_CONFIG } from './sections/wallets/routing-config';
 import { ROUTING_CONFIG as WITHDRAWALS_ROUTING_CONFIG } from './sections/withdrawals/routing-config';

 const SIDENAV_OPENED_KEY = 'sidenav-opened';
@ -99,6 +100,11 @@ export class AppComponent implements OnInit {
                    route: '/withdrawals',
                    services: WITHDRAWALS_ROUTING_CONFIG.services,
                },
+                {
+                    name: 'Wallets',
+                    route: '/wallets',
+                    services: WALLETS_ROUTING_CONFIG.services,
+                },
            ],
        ];
        return menuItems.map((group) =>
--- a/src/app/sections/claim/claim.module.ts
+++ b/src/app/sections/claim/claim.module.ts
@ -4,16 +4,16 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatExpansionModule } from '@angular/material/expansion';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
 import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
 import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
 import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatSelectModule } from '@angular/material/select';
 import { RouterModule } from '@angular/router';
 import { ActionsModule, BaseDialogModule } from '@vality/ng-core';

--- a/src/app/sections/deposit-details/reverts/create-revert-dialog/create-revert-dialog.module.ts
+++ b/src/app/sections/deposit-details/reverts/create-revert-dialog/create-revert-dialog.module.ts
@ -2,10 +2,10 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
 import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';

 import { UserInfoBasedIdGeneratorModule } from '@cc/app/shared/services/user-info-based-id-generator/user-info-based-id-generator.module';
--- a/src/app/sections/deposits/create-deposit-dialog/create-deposit-dialog.module.ts
+++ b/src/app/sections/deposits/create-deposit-dialog/create-deposit-dialog.module.ts
@ -2,12 +2,12 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
 import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatSelectModule } from '@angular/material/select';

 import { UserInfoBasedIdGeneratorModule } from '@cc/app/shared/services/user-info-based-id-generator/user-info-based-id-generator.module';

--- a/src/app/sections/deposits/search-filters/search-filters.module.ts
+++ b/src/app/sections/deposits/search-filters/search-filters.module.ts
@ -5,13 +5,13 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatDividerModule } from '@angular/material/divider';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatSelectModule } from '@angular/material/select';

 import { MerchantFieldModule } from '../../../shared/components/merchant-field';
 import { SearchFiltersComponent } from './search-filters.component';
--- a/src/app/sections/domain/domain-info/domain-group/domain-group.module.ts
+++ b/src/app/sections/domain/domain-info/domain-group/domain-group.module.ts
@ -5,14 +5,14 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
 import { MatLegacyPaginatorModule as MatPaginatorModule } from '@angular/material/legacy-paginator';
 import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
+import { MatSelectModule } from '@angular/material/select';
 import { MatSortModule } from '@angular/material/sort';
 import { PipesModule } from '@vality/ng-core';

--- a/src/app/sections/domain/domain-info/domain-info.module.ts
+++ b/src/app/sections/domain/domain-info/domain-info.module.ts
@ -1,9 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatInputModule } from '@angular/material/input';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
 import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
 import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
 import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
--- a/src/app/sections/party-shops/party-shops.module.ts
+++ b/src/app/sections/party-shops/party-shops.module.ts
@ -1,11 +1,11 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexModule } from '@angular/flex-layout';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
 import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
 import { MatLegacyPaginatorModule as MatPaginatorModule } from '@angular/material/legacy-paginator';
 import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
--- a/src/app/sections/payouts/payouts/payouts.module.ts
+++ b/src/app/sections/payouts/payouts/payouts.module.ts
@ -3,16 +3,16 @@ import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
 import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
 import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
+import { MatSelectModule } from '@angular/material/select';
 import { BaseDialogModule, ActionsModule } from '@vality/ng-core';

 import { PayoutToolFieldModule, ShopFieldModule, StatusModule } from '@cc/app/shared/components';
--- a/src/app/sections/repairing/repairing.module.ts
+++ b/src/app/sections/repairing/repairing.module.ts
@ -3,16 +3,16 @@ import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatBadgeModule } from '@angular/material/badge';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
 import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
 import { MatLegacyRadioModule as MatRadioModule } from '@angular/material/legacy-radio';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
 import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { MatSelectModule } from '@angular/material/select';
 import { ActionsModule, BaseDialogModule } from '@vality/ng-core';

 import { EnumKeyPipe, EnumKeysPipe } from '@cc/app/shared';
--- a/src/app/sections/routing-rules/change-delegate-ruleset-dialog/change-delegate-ruleset-dialog.module.ts
+++ b/src/app/sections/routing-rules/change-delegate-ruleset-dialog/change-delegate-ruleset-dialog.module.ts
@ -2,9 +2,9 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatSelectModule } from '@angular/material/select';
 import { BaseDialogModule } from '@vality/ng-core';

 import { ChangeDelegateRulesetDialogComponent } from './change-delegate-ruleset-dialog.component';
--- a/src/app/sections/routing-rules/party-delegate-rulesets/party-delegate-rulesets.module.ts
+++ b/src/app/sections/routing-rules/party-delegate-rulesets/party-delegate-rulesets.module.ts
@ -3,16 +3,16 @@ import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatDividerModule } from '@angular/material/divider';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
 import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
 import { MatLegacyPaginatorModule as MatPaginatorModule } from '@angular/material/legacy-paginator';
 import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
 import { MatLegacyRadioModule as MatRadioModule } from '@angular/material/legacy-radio';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatSelectModule } from '@angular/material/select';
 import { RouterModule } from '@angular/router';
 import { BaseDialogModule } from '@vality/ng-core';

--- a/src/app/sections/routing-rules/party-routing-ruleset/add-party-routing-rule-dialog/add-party-routing-rule-dialog.module.ts
+++ b/src/app/sections/routing-rules/party-routing-ruleset/add-party-routing-rule-dialog/add-party-routing-rule-dialog.module.ts
@ -2,15 +2,15 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatDividerModule } from '@angular/material/divider';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyAutocompleteModule as MatAutocompleteModule } from '@angular/material/legacy-autocomplete';
+import { MatInputModule } from '@angular/material/input';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
 import { MatLegacyRadioModule as MatRadioModule } from '@angular/material/legacy-radio';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatSelectModule } from '@angular/material/select';
 import { BaseDialogModule } from '@vality/ng-core';

 import { AddPartyRoutingRuleDialogComponent } from './add-party-routing-rule-dialog.component';
--- a/src/app/sections/routing-rules/party-routing-ruleset/initialize-routing-rules-dialog/initialize-routing-rules-dialog.module.ts
+++ b/src/app/sections/routing-rules/party-routing-ruleset/initialize-routing-rules-dialog/initialize-routing-rules-dialog.module.ts
@ -2,15 +2,15 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatDividerModule } from '@angular/material/divider';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyAutocompleteModule as MatAutocompleteModule } from '@angular/material/legacy-autocomplete';
+import { MatInputModule } from '@angular/material/input';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
 import { MatLegacyRadioModule as MatRadioModule } from '@angular/material/legacy-radio';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatSelectModule } from '@angular/material/select';
 import { BaseDialogModule } from '@vality/ng-core';

 import { InitializeRoutingRulesDialogComponent } from './initialize-routing-rules-dialog.component';
--- a/src/app/sections/routing-rules/party-routing-ruleset/party-routing-ruleset.module.ts
+++ b/src/app/sections/routing-rules/party-routing-ruleset/party-routing-ruleset.module.ts
@ -4,18 +4,18 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatExpansionModule } from '@angular/material/expansion';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
 import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
 import { MatLegacyPaginatorModule as MatPaginatorModule } from '@angular/material/legacy-paginator';
 import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
 import { MatLegacyRadioModule as MatRadioModule } from '@angular/material/legacy-radio';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
+import { MatSelectModule } from '@angular/material/select';
 import { RouterModule } from '@angular/router';

 import { ChangeTargetDialogModule } from '../change-target-dialog';
--- a/src/app/sections/routing-rules/routing-ruleset/add-routing-rule-dialog/add-routing-rule-dialog.module.ts
+++ b/src/app/sections/routing-rules/routing-ruleset/add-routing-rule-dialog/add-routing-rule-dialog.module.ts
@ -2,15 +2,15 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatDividerModule } from '@angular/material/divider';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyAutocompleteModule as MatAutocompleteModule } from '@angular/material/legacy-autocomplete';
+import { MatInputModule } from '@angular/material/input';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
 import { MatLegacyRadioModule as MatRadioModule } from '@angular/material/legacy-radio';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatSelectModule } from '@angular/material/select';
 import { BaseDialogModule } from '@vality/ng-core';

 import { MetadataFormModule } from '@cc/app/shared/components/metadata-form';
--- a/src/app/sections/routing-rules/routing-ruleset/routing-ruleset.module.ts
+++ b/src/app/sections/routing-rules/routing-ruleset/routing-ruleset.module.ts
@ -2,21 +2,21 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatExpansionModule } from '@angular/material/expansion';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyAutocompleteModule as MatAutocompleteModule } from '@angular/material/legacy-autocomplete';
+import { MatInputModule } from '@angular/material/input';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
 import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
 import { MatLegacyPaginatorModule as MatPaginatorModule } from '@angular/material/legacy-paginator';
 import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
 import { MatLegacyRadioModule as MatRadioModule } from '@angular/material/legacy-radio';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
+import { MatSelectModule } from '@angular/material/select';
 import { RouterModule } from '@angular/router';

 import { PrettyJsonModule } from '@cc/components/pretty-json';
--- a/src/app/sections/routing-rules/target-ruleset-form/target-ruleset-form.module.ts
+++ b/src/app/sections/routing-rules/target-ruleset-form/target-ruleset-form.module.ts
@ -3,11 +3,11 @@ import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatDividerModule } from '@angular/material/divider';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
 import { MatLegacyRadioModule as MatRadioModule } from '@angular/material/legacy-radio';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatSelectModule } from '@angular/material/select';

 import { DetailsItemModule } from '../../../../components/details-item';
 import { TargetRulesetFormComponent } from './target-ruleset-form.component';
--- a/src/app/sections/search-claims/search-claims.module.ts
+++ b/src/app/sections/search-claims/search-claims.module.ts
@ -3,17 +3,17 @@ import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatExpansionModule } from '@angular/material/expansion';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
 import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
 import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
 import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
+import { MatSelectModule } from '@angular/material/select';
 import { ActionsModule, BaseDialogModule } from '@vality/ng-core';

 import { ClaimSearchFormModule } from '@cc/app/shared/components';
--- a/src/app/sections/search-parties/parties-search-filters/parties-search-filters.module.ts
+++ b/src/app/sections/search-parties/parties-search-filters/parties-search-filters.module.ts
@ -1,8 +1,8 @@
 import { NgModule } from '@angular/core';
 import { FlexModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';

 import { PartiesSearchFiltersComponent } from './parties-search-filters.component';

--- a/src/app/sections/sections-routing.module.ts
+++ b/src/app/sections/sections-routing.module.ts
@ -49,6 +49,10 @@ const ROUTES: Routes = [
        path: 'sources',
        loadChildren: () => import('./sources/sources.module').then((m) => m.SourcesModule),
    },
+    {
+        path: 'wallets',
+        loadChildren: () => import('./wallets/wallets.module').then((m) => m.WalletsModule),
+    },
    {
        path: '404',
        loadChildren: () => import('./not-found').then((m) => m.NotFoundModule),
--- a/src/app/sections/sources/fetch-sources.service.ts
+++ b/src/app/sections/sources/fetch-sources.service.ts
@ -3,8 +3,9 @@ import { StatSource } from '@vality/fistful-proto/internal/fistful_stat';
 import { Observable, switchMap, of, BehaviorSubject } from 'rxjs';
 import { shareReplay, map, catchError } from 'rxjs/operators';

-import { progressTo } from '../../../utils';
-import { FistfulStatisticsService, createDsl } from '../../api/fistful-stat';
+import { FistfulStatisticsService, createDsl } from '@cc/app/api/fistful-stat';
+import { progressTo } from '@cc/utils';
+
 import { NotificationErrorService } from '../../shared/services/notification-error';

@Injectable({
--- a/src/app/sections/sources/sources.component.html
+++ b/src/app/sections/sources/sources.component.html
@ -5,35 +5,10 @@
            <button color="primary" mat-raised-button (click)="create()">CREATE</button>
        </cc-actions>
    </div>
-    <div fxLayout="column" fxLayoutGap="24px">
-        <cc-empty-search-result *ngIf="!(sources$ | async)?.length"></cc-empty-search-result>
-        <mat-card *ngIf="(sources$ | async)?.length" fxLayout="column" fxLayoutGap="18px">
-            <table [dataSource]="sources$ | async" mat-table>
-                <ng-container [matColumnDef]="cols.def.id">
-                    <th *matHeaderCellDef mat-header-cell>ID</th>
-                    <td *matCellDef="let i" mat-cell>{{ i.id }}</td>
-                </ng-container>
-                <ng-container [matColumnDef]="cols.def.name">
-                    <th *matHeaderCellDef mat-header-cell>Name</th>
-                    <td *matCellDef="let i" mat-cell>{{ i.name }}</td>
-                </ng-container>
-                <ng-container [matColumnDef]="cols.def.identity">
-                    <th *matHeaderCellDef mat-header-cell>Identity</th>
-                    <td *matCellDef="let i" mat-cell>{{ i.identity }}</td>
-                </ng-container>
-                <ng-container [matColumnDef]="cols.def.currency_symbolic_code">
-                    <th *matHeaderCellDef mat-header-cell>Currency Symbolic Code</th>
-                    <td *matCellDef="let i" mat-cell>{{ i.currency_symbolic_code }}</td>
-                </ng-container>
-                <ng-container [matColumnDef]="cols.def.created_at">
-                    <th *matHeaderCellDef mat-header-cell>Created At</th>
-                    <td *matCellDef="let i" mat-cell>
-                        {{ i.created_at | date : 'dd.MM.yyyy HH:mm:ss' }}
-                    </td>
-                </ng-container>
-                <tr *matHeaderRowDef="cols.list" mat-header-row></tr>
-                <tr *matRowDef="let row; columns: cols.list" mat-row></tr>
-            </table>
-        </mat-card>
-    </div>
+    <cc-simple-table
+        [data]="sources$ | async"
+        [inProgress]="!!(progress$ | async)"
+        [schema]="schema"
+        noUpdate
+    ></cc-simple-table>
 </div>
--- a/src/app/sections/sources/sources.component.ts
+++ b/src/app/sections/sources/sources.component.ts
@ -1,7 +1,9 @@
 import { Component } from '@angular/core';
+import { StatSource } from '@vality/fistful-proto/internal/fistful_stat';
 import { BaseDialogService } from '@vality/ng-core';

-import { Columns } from '../../../components/table';
+import { Schema } from '@cc/components/simple-table';
+
 import { CreateSourceComponent } from './create-source/create-source.component';
 import { FetchSourcesService } from './fetch-sources.service';

@ -19,7 +21,12 @@ import { FetchSourcesService } from './fetch-sources.service';
 export class SourcesComponent {
    sources$ = this.fetchSourcesService.sources$;
    progress$ = this.fetchSourcesService.progress$;
-    cols = new Columns('id', 'name', 'identity', 'currency_symbolic_code', 'created_at');
+    schema = new Schema<StatSource>([
+        { value: 'name', description: 'id' },
+        'identity',
+        'currency_symbolic_code',
+        'created_at',
+    ]);

    constructor(
        private fetchSourcesService: FetchSourcesService,
--- a/src/app/sections/sources/sources.module.ts
+++ b/src/app/sections/sources/sources.module.ts
@ -8,6 +8,8 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatTableModule } from '@angular/material/table';
 import { ActionsModule, BaseDialogModule } from '@vality/ng-core';

+import { SimpleTableModule } from '@cc/components/simple-table';
+
 import { EmptySearchResultModule } from '../../../components/empty-search-result';
 import { TableModule } from '../../../components/table';
 import { MetadataFormModule } from '../../shared/components/metadata-form';
@ -30,6 +32,7 @@ import { SourcesComponent } from './sources.component';
        BaseDialogModule,
        MetadataFormModule,
        ReactiveFormsModule,
+        SimpleTableModule,
    ],
    declarations: [SourcesComponent, CreateSourceComponent],
 })
--- a/src/app/sections/wallets/fetch-wallets.service.ts
+++ b/src/app/sections/wallets/fetch-wallets.service.ts
@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import { StatWallet } from '@vality/fistful-proto/internal/fistful_stat';
+import { map } from 'rxjs/operators';
+
+import { WalletParams } from '@cc/app/api/fistful-stat/query-dsl/types/wallet';
+
+import { FistfulStatisticsService, createDsl } from '../../api/fistful-stat';
+import { PartialFetcher } from '../../shared/services';
+
+@Injectable()
+export class FetchWalletsService extends PartialFetcher<StatWallet, WalletParams> {
+    constructor(private fistfulStatisticsService: FistfulStatisticsService) {
+        super();
+    }
+
+    protected fetch(params: WalletParams, continuationToken?: string, size?: number) {
+        return this.fistfulStatisticsService
+            .GetWallets({
+                dsl: createDsl({ wallets: { size, ...params } }),
+                continuation_token: continuationToken,
+            })
+            .pipe(
+                map((res) => ({
+                    result: res.data.wallets,
+                    continuationToken: res.continuation_token,
+                }))
+            );
+    }
+}
--- a/src/app/sections/wallets/routing-config.ts
+++ b/src/app/sections/wallets/routing-config.ts
@ -0,0 +1,5 @@
+import { Services, RoutingConfig } from '@cc/app/shared/services';
+
+export const ROUTING_CONFIG: RoutingConfig = {
+    services: [Services.FistfulStatistics],
+};
--- a/src/app/sections/wallets/wallets-routing.module.ts
+++ b/src/app/sections/wallets/wallets-routing.module.ts
@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { AppAuthGuardService } from '../../shared/services';
+import { ROUTING_CONFIG } from './routing-config';
+import { WalletsComponent } from './wallets.component';
+
+@NgModule({
+    imports: [
+        RouterModule.forChild([
+            {
+                path: '',
+                component: WalletsComponent,
+                canActivate: [AppAuthGuardService],
+                data: ROUTING_CONFIG,
+            },
+        ]),
+    ],
+    exports: [RouterModule],
+})
+export class WalletsRoutingModule {}
--- a/src/app/sections/wallets/wallets.component.html
+++ b/src/app/sections/wallets/wallets.component.html
@ -0,0 +1,27 @@
+<div fxLayout="column" fxLayoutGap="32px">
+    <h1 class="cc-display-1">Wallets</h1>
+
+    <mat-card [formGroup]="filters">
+        <mat-card-content gdColumns="1fr 1fr 1fr" gdGap="16px">
+            <cc-merchant-field formControlName="party_id"></cc-merchant-field>
+            <mat-form-field>
+                <mat-label>Identity ID</mat-label>
+                <input formControlName="identity_id" matInput />
+            </mat-form-field>
+            <mat-form-field>
+                <mat-label>Currency Code</mat-label>
+                <input formControlName="currency_code" matInput />
+            </mat-form-field>
+        </mat-card-content>
+    </mat-card>
+
+    <cc-simple-table
+        [data]="wallets$ | async"
+        [hasMore]="hasMore$ | async"
+        [inProgress]="inProgress$ | async"
+        [schema]="schema"
+        (fetchMore)="fetchMore()"
+        (size)="search($event)"
+        (update)="search($event.size)"
+    ></cc-simple-table>
+</div>
--- a/src/app/sections/wallets/wallets.component.ts
+++ b/src/app/sections/wallets/wallets.component.ts
@ -0,0 +1,71 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder } from '@angular/forms';
+import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
+import { StatWallet } from '@vality/fistful-proto/internal/fistful_stat';
+import { clean } from '@vality/ng-core';
+import { startWith, map } from 'rxjs/operators';
+
+import { WalletParams } from '@cc/app/api/fistful-stat/query-dsl/types/wallet';
+import { QueryParamsService } from '@cc/app/shared/services';
+import { Schema } from '@cc/components/simple-table';
+
+import { FetchWalletsService } from './fetch-wallets.service';
+
+@UntilDestroy()
+@Component({
+    selector: 'cc-wallets',
+    templateUrl: './wallets.component.html',
+    styles: [
+        `
+            :host {
+                display: block;
+                padding: 24px 16px;
+            }
+        `,
+    ],
+    providers: [FetchWalletsService],
+})
+export class WalletsComponent implements OnInit {
+    wallets$ = this.fetchWalletsService.searchResult$;
+    inProgress$ = this.fetchWalletsService.doAction$;
+    hasMore$ = this.fetchWalletsService.hasMore$;
+    schema = new Schema<StatWallet>([
+        { value: 'name', description: 'id' },
+        'currency_symbolic_code',
+        'identity_id',
+        { value: 'created_at', type: 'datetime' },
+    ]);
+    filters = this.fb.group<WalletParams>({
+        party_id: null,
+        identity_id: null,
+        currency_code: null,
+        ...this.qp.params,
+    });
+
+    constructor(
+        private fetchWalletsService: FetchWalletsService,
+        private qp: QueryParamsService<WalletParams>,
+        private fb: FormBuilder
+    ) {}
+
+    ngOnInit() {
+        this.filters.valueChanges
+            .pipe(
+                startWith(this.filters.value),
+                map((v) => clean(v)),
+                untilDestroyed(this)
+            )
+            .subscribe((value) => {
+                void this.qp.set(value);
+                this.fetchWalletsService.search(value);
+            });
+    }
+
+    search(size: number) {
+        this.fetchWalletsService.search(clean(this.filters.value), size);
+    }
+
+    fetchMore() {
+        this.fetchWalletsService.fetchMore();
+    }
+}
--- a/src/app/sections/wallets/wallets.module.ts
+++ b/src/app/sections/wallets/wallets.module.ts
@ -0,0 +1,38 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FlexModule, GridModule } from '@angular/flex-layout';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatCardModule } from '@angular/material/card';
+import { MatInputModule } from '@angular/material/input';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatTableModule } from '@angular/material/table';
+
+import { MerchantFieldModule } from '@cc/app/shared/components/merchant-field';
+import { MetadataFormModule } from '@cc/app/shared/components/metadata-form';
+import { EmptySearchResultModule } from '@cc/components/empty-search-result';
+import { SimpleTableModule } from '@cc/components/simple-table';
+import { TableModule } from '@cc/components/table';
+
+import { WalletsRoutingModule } from './wallets-routing.module';
+import { WalletsComponent } from './wallets.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        WalletsRoutingModule,
+        MatCardModule,
+        FlexModule,
+        MatTableModule,
+        TableModule,
+        EmptySearchResultModule,
+        MatProgressSpinnerModule,
+        MetadataFormModule,
+        ReactiveFormsModule,
+        MatInputModule,
+        MerchantFieldModule,
+        GridModule,
+        SimpleTableModule,
+    ],
+    declarations: [WalletsComponent],
+})
+export class WalletsModule {}
--- a/src/app/sections/withdrawals/withdrawals.module.ts
+++ b/src/app/sections/withdrawals/withdrawals.module.ts
@ -2,15 +2,15 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexModule, GridModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
 import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
 import { MatLegacyRadioModule as MatRadioModule } from '@angular/material/legacy-radio';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
+import { MatSelectModule } from '@angular/material/select';
 import { MatSortModule } from '@angular/material/sort';
 import { BaseDialogModule } from '@vality/ng-core';

--- a/src/app/shared/components/change-chargeback-status-dialog/change-chargeback-status-dialog.component.ts
+++ b/src/app/shared/components/change-chargeback-status-dialog/change-chargeback-status-dialog.component.ts
@ -2,9 +2,9 @@ import { CommonModule } from '@angular/common';
 import { Component, Injector, OnInit } from '@angular/core';
 import { GridModule } from '@angular/flex-layout';
 import { ReactiveFormsModule, FormControl, Validators } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatSelectModule } from '@angular/material/select';
 import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
 import { BaseDialogSuperclass, BaseDialogModule } from '@vality/ng-core';
 import { from, BehaviorSubject, Observable } from 'rxjs';
--- a/src/app/shared/components/claim-search-form/claim-search-form.module.ts
+++ b/src/app/shared/components/claim-search-form/claim-search-form.module.ts
@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';

 import { MerchantFieldModule } from '@cc/app/shared/components/merchant-field';

--- a/src/app/shared/components/date-range/date-range.module.ts
+++ b/src/app/shared/components/date-range/date-range.module.ts
@ -3,7 +3,7 @@ import { FlexModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatInputModule } from '@angular/material/input';

 import { DateRangeComponent } from './date-range.component';

--- a/src/app/shared/components/datetime/datetime.component.ts
+++ b/src/app/shared/components/datetime/datetime.component.ts
@ -3,8 +3,8 @@ import { Component, Input } from '@angular/core';
 import { FlexModule } from '@angular/flex-layout';
 import { ValidationErrors } from '@angular/forms';
 import { MatDatepickerModule, MatDatepickerInputEvent } from '@angular/material/datepicker';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 import { FormComponentSuperclass } from '@s-libs/ng-core';
 import { coerceBoolean } from 'coerce-property';
 import moment, { Moment } from 'moment';
--- a/src/app/shared/components/merchant-field/merchant-field.module.ts
+++ b/src/app/shared/components/merchant-field/merchant-field.module.ts
@ -1,23 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyAutocompleteModule as MatAutocompleteModule } from '@angular/material/legacy-autocomplete';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';

 import { SelectSearchFieldModule } from '@cc/components/select-search-field';

 import { MerchantFieldComponent } from './merchant-field.component';

@NgModule({
-    imports: [
-        MatFormFieldModule,
-        ReactiveFormsModule,
-        MatAutocompleteModule,
-        MatInputModule,
-        CommonModule,
-        SelectSearchFieldModule,
-    ],
+    imports: [CommonModule, ReactiveFormsModule, SelectSearchFieldModule],
    declarations: [MerchantFieldComponent],
    exports: [MerchantFieldComponent],
 })
--- a/src/app/shared/components/metadata-form/metadata-form.module.ts
+++ b/src/app/shared/components/metadata-form/metadata-form.module.ts
@ -3,18 +3,18 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexModule, GridModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyAutocompleteModule as MatAutocompleteModule } from '@angular/material/legacy-autocomplete';
+import { MatInputModule } from '@angular/material/input';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
 import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
 import { MatLegacyRadioModule as MatRadioModule } from '@angular/material/legacy-radio';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { MatSelectModule } from '@angular/material/select';
 import { PipesModule } from '@vality/ng-core';

 import { JsonViewerModule } from '@cc/app/shared/components/json-viewer';
--- a/src/app/shared/components/party-modification-creator/party-modification-creation/party-modification-creation.module.ts
+++ b/src/app/shared/components/party-modification-creator/party-modification-creation/party-modification-creation.module.ts
@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatInputModule } from '@angular/material/input';

 import { PartyModificationFormsModule } from '../../party-modification-forms';
 import { PartyModificationCreationComponent } from './party-modification-creation.component';
--- a/src/app/shared/components/party-modification-creator/party-modification-target/party-modification-target.module.ts
+++ b/src/app/shared/components/party-modification-creator/party-modification-target/party-modification-target.module.ts
@ -2,9 +2,9 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
 import { MatLegacyListModule as MatListModule } from '@angular/material/legacy-list';
 import { MatLegacyPaginatorModule as MatPaginatorModule } from '@angular/material/legacy-paginator';
 import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
--- a/src/app/shared/components/party-modification-forms/party-modification-forms.module.ts
+++ b/src/app/shared/components/party-modification-forms/party-modification-forms.module.ts
@ -4,12 +4,12 @@ import { FlexModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatDividerModule } from '@angular/material/divider';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
 import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatSelectModule } from '@angular/material/select';

 import {
    BusinessScheduleRefComponent,
--- a/src/app/shared/components/payments-search-filters/payments-main-search-filters/payments-main-search-filters.module.ts
+++ b/src/app/shared/components/payments-search-filters/payments-main-search-filters/payments-main-search-filters.module.ts
@ -5,12 +5,12 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatDividerModule } from '@angular/material/divider';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatSelectModule } from '@angular/material/select';

 import { MerchantFieldModule } from '../../merchant-field';
 import { PaymentsMainSearchFiltersComponent } from './payments-main-search-filters.component';
--- a/src/app/shared/components/payments-search-filters/payments-other-search-filters/other-filters-dialog/other-filters-dialog.module.ts
+++ b/src/app/shared/components/payments-search-filters/payments-other-search-filters/other-filters-dialog/other-filters-dialog.module.ts
@ -5,12 +5,12 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatDividerModule } from '@angular/material/divider';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatSelectModule } from '@angular/material/select';
 import { BaseDialogModule } from '@vality/ng-core';

 import { OtherFiltersDialogComponent } from './other-filters-dialog.component';
--- a/src/app/shared/components/payments-search-filters/payments-other-search-filters/payments-other-search-filters.module.ts
+++ b/src/app/shared/components/payments-search-filters/payments-other-search-filters/payments-other-search-filters.module.ts
@ -5,11 +5,11 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatDividerModule } from '@angular/material/divider';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';

 import { OtherFiltersDialogModule } from './other-filters-dialog';
 import { PaymentsOtherSearchFiltersComponent } from './payments-other-search-filters.component';
--- a/src/app/shared/components/payments-searcher/payments-searcher.module.ts
+++ b/src/app/shared/components/payments-searcher/payments-searcher.module.ts
@ -3,11 +3,11 @@ import { NgModule } from '@angular/core';
 import { FlexModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatBadgeModule } from '@angular/material/badge';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
 import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
 import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
 import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
--- a/src/app/shared/components/payout-tool-field/payout-tool-field.module.ts
+++ b/src/app/shared/components/payout-tool-field/payout-tool-field.module.ts
@ -1,9 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyAutocompleteModule as MatAutocompleteModule } from '@angular/material/legacy-autocomplete';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';

 import { SelectSearchFieldModule } from '@cc/components/select-search-field';

--- a/src/app/shared/components/select/select.module.ts
+++ b/src/app/shared/components/select/select.module.ts
@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatSelectModule } from '@angular/material/select';

 import { SelectComponent } from './select.component';

--- a/src/app/shared/components/shop-field/shop-field.module.ts
+++ b/src/app/shared/components/shop-field/shop-field.module.ts
@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSelectModule } from '@angular/material/select';

 import { ShopFieldComponent } from './shop-field.component';

--- a/src/app/shared/services/partial-fetcher/fetch-action.ts
+++ b/src/app/shared/services/partial-fetcher/fetch-action.ts
@ -1,4 +1,5 @@
 export interface FetchAction<P = any> {
    type: 'search' | 'fetchMore';
    value?: P;
+    size?: number;
 }
--- a/src/app/shared/services/partial-fetcher/fetch-fn.ts
+++ b/src/app/shared/services/partial-fetcher/fetch-fn.ts
@ -2,4 +2,8 @@ import { Observable } from 'rxjs';

 import { FetchResult } from './fetch-result';

-export type FetchFn<P, R> = (params: P, continuationToken?: string) => Observable<FetchResult<R>>;
+export type FetchFn<P, R> = (
+    params: P,
+    continuationToken?: string,
+    size?: number
+) => Observable<FetchResult<R>>;
--- a/src/app/shared/services/partial-fetcher/operators/scan-search-result.ts
+++ b/src/app/shared/services/partial-fetcher/operators/scan-search-result.ts
@ -19,16 +19,20 @@ export const handleFetchResultError =
        );

 export const scanFetchResult =
-    <P, R>(fn: FetchFn<P, R>) =>
+    <P, R>(fn: FetchFn<P, R>, defSize: number) =>
    (s: Observable<FetchAction<P>>): Observable<FetchResult<R>> =>
        s.pipe(
            mergeScan<FetchAction<P>, FetchResult<R>>(
-                ({ result, continuationToken }, { type, value }) => {
+                ({ result, continuationToken }, { type, value, size }) => {
+                    size = size ?? defSize;
                    switch (type) {
                        case 'search':
-                            return fn(value).pipe(first(), handleFetchResultError());
+                            return fn(value, undefined, size).pipe(
+                                first(),
+                                handleFetchResultError()
+                            );
                        case 'fetchMore':
-                            return fn(value, continuationToken).pipe(
+                            return fn(value, continuationToken, size).pipe(
                                first(),
                                map((r) => ({
                                    result: result.concat(r.result),
--- a/src/app/shared/services/partial-fetcher/partial-fetcher.ts
+++ b/src/app/shared/services/partial-fetcher/partial-fetcher.ts
@ -41,7 +41,7 @@ export abstract class PartialFetcher<R, P> {
    private action$ = new Subject<FetchAction<P>>();

    // TODO: make a dependency for DI
-    constructor(debounceActionTime: number = 300) {
+    constructor(debounceActionTime: number = 300, private size = 25) {
        const actionWithParams$ = this.getActionWithParams(debounceActionTime);
        const fetchResult$ = this.getFetchResult(actionWithParams$);

@ -91,8 +91,8 @@ export abstract class PartialFetcher<R, P> {
            .subscribe();
    }

-    search(value: P) {
-        this.action$.next({ type: 'search', value });
+    search(value: P, size?: number) {
+        this.action$.next({ type: 'search', value, size });
    }

    refresh() {
@ -121,6 +121,9 @@ export abstract class PartialFetcher<R, P> {
        actionWithParams$: Observable<FetchAction<P>>
    ): Observable<FetchResult<R>> {
        const fetchFn = this.fetch.bind(this) as FetchFn<P, R>;
-        return actionWithParams$.pipe(scanFetchResult(fetchFn), shareReplay(SHARE_REPLAY_CONF));
+        return actionWithParams$.pipe(
+            scanFetchResult(fetchFn, this.size),
+            shareReplay(SHARE_REPLAY_CONF)
+        );
    }
 }
--- a/src/components/cash-field/cash-field.module.ts
+++ b/src/components/cash-field/cash-field.module.ts
@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexModule } from '@angular/flex-layout';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyAutocompleteModule as MatAutocompleteModule } from '@angular/material/legacy-autocomplete';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatInputModule } from '@angular/material/input';
 import { InputMaskModule } from '@ngneat/input-mask';

 import { CashFieldComponent } from './cash-field.component';
--- a/src/components/confirm-action-dialog/confirm-action-dialog.module.ts
+++ b/src/components/confirm-action-dialog/confirm-action-dialog.module.ts
@ -2,10 +2,10 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
 import { BaseDialogModule } from '@vality/ng-core';

 import { ConfirmActionDialogComponent } from './confirm-action-dialog.component';
--- a/src/components/select-search-field/select-search-field.component.scss
+++ b/src/components/select-search-field/select-search-field.component.scss
@ -1,3 +1,3 @@
-.mat-form-field {
+mat-form-field {
    width: 100%;
 }
--- a/src/components/select-search-field/select-search-field.module.ts
+++ b/src/components/select-search-field/select-search-field.module.ts
@ -1,12 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
-import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatInputModule } from '@angular/material/input';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatSelectModule } from '@angular/material/select';
 import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';

 import { SelectSearchFieldComponent } from './select-search-field.component';
--- a/src/components/simple-table/index.ts
+++ b/src/components/simple-table/index.ts
@ -0,0 +1,3 @@
+export * from './types/schema';
+export * from './simple-table.component';
+export * from './simple-table.module';
--- a/src/components/simple-table/simple-table.component.html
+++ b/src/components/simple-table/simple-table.component.html
@ -0,0 +1,64 @@
+<div fxLayout="column" fxLayoutGap="32px">
+    <ng-container *ngIf="data; else init">
+        <div *ngIf="!noUpdate" fxLayout fxLayoutGap="16px">
+            <button
+                [disabled]="inProgress"
+                mat-stroked-button
+                (click)="update.emit(this.size$.value ? { size: this.size$.value } : {})"
+            >
+                UPDATE
+            </button>
+            <button [disabled]="inProgress" [matMenuTriggerFor]="menu" mat-button>
+                {{ size$ | async }} <mat-icon>table_rows_narrow</mat-icon>
+            </button>
+            <mat-menu #menu="matMenu">
+                <button mat-menu-item (click)="size$.next(25)">25</button>
+                <button mat-menu-item (click)="size$.next(100)">100</button>
+                <button mat-menu-item (click)="size$.next(1000)">1000</button>
+            </mat-menu>
+        </div>
+
+        <mat-card *ngIf="data.length; else empty" class="table-card">
+            <table [dataSource]="data" mat-table>
+                <ng-container *ngFor="let p of schema.params" [matColumnDef]="p.def">
+                    <th *matHeaderCellDef mat-header-cell>{{ p.label }}</th>
+                    <td *matCellDef="let i" mat-cell>
+                        <ng-container [ngSwitch]="p.type">
+                            <div>
+                                <ng-template ngSwitchCase="datetime">
+                                    {{ p.value(i) | date : 'dd.MM.yyyy HH:mm:ss' }}
+                                </ng-template>
+                                <ng-template ngSwitchDefault>
+                                    {{ p.value(i) }}
+                                </ng-template>
+                            </div>
+                            <div *ngIf="p.description" class="mat-caption cc-secondary-text">
+                                {{ p.description(i) }}
+                            </div>
+                        </ng-container>
+                    </td>
+                </ng-container>
+                <tr *matHeaderRowDef="schema.list" mat-header-row></tr>
+                <tr *matRowDef="let row; columns: schema.list" mat-row></tr>
+            </table>
+
+            <cc-show-more-button
+                *ngIf="hasMore"
+                [inProgress]="inProgress"
+                class="show-more"
+                style="width: 100%"
+                (fetchMore)="fetchMore.emit(this.size$.value ? { size: this.size$.value } : {})"
+            ></cc-show-more-button>
+        </mat-card>
+
+        <ng-template #empty
+            ><cc-empty-search-result style="width: 100%"></cc-empty-search-result
+        ></ng-template>
+    </ng-container>
+
+    <ng-template #init>
+        <div *ngIf="inProgress" fxFlex fxLayout="row" fxLayoutAlign="center center">
+            <mat-spinner></mat-spinner>
+        </div>
+    </ng-template>
+</div>
--- a/src/components/simple-table/simple-table.component.scss
+++ b/src/components/simple-table/simple-table.component.scss
@ -0,0 +1,8 @@
+.table-card {
+    width: 100%;
+    overflow: hidden;
+}
+
+.show-more {
+    padding: 16px;
+}
--- a/src/components/simple-table/simple-table.component.ts
+++ b/src/components/simple-table/simple-table.component.ts
@ -0,0 +1,31 @@
+import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
+import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
+import { coerceBoolean } from 'coerce-property';
+import { BehaviorSubject } from 'rxjs';
+
+import { Schema } from './types/schema';
+
+@UntilDestroy()
+@Component({
+    selector: 'cc-simple-table',
+    templateUrl: './simple-table.component.html',
+    styleUrls: ['./simple-table.component.scss'],
+})
+export class SimpleTableComponent<T> implements OnInit {
+    @Input() data: T[];
+    @Input() schema: Schema<T>;
+
+    @Input() @coerceBoolean hasMore = false;
+    @Input() @coerceBoolean inProgress = false;
+    @Input() @coerceBoolean noUpdate = false;
+
+    @Output() size = new EventEmitter<number>();
+    @Output() update = new EventEmitter<{ size?: number }>();
+    @Output() fetchMore = new EventEmitter<{ size?: number }>();
+
+    size$ = new BehaviorSubject<undefined | number>(25);
+
+    ngOnInit() {
+        this.size$.pipe(untilDestroyed(this)).subscribe((v) => this.size.emit(v));
+    }
+}
--- a/src/components/simple-table/simple-table.module.ts
+++ b/src/components/simple-table/simple-table.module.ts
@ -0,0 +1,36 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FlexModule } from '@angular/flex-layout';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTableModule } from '@angular/material/table';
+
+import { TableModule } from '@cc/components/table';
+
+import { EmptySearchResultModule } from '../empty-search-result';
+import { SimpleTableComponent } from './simple-table.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        MatTableModule,
+        MatCardModule,
+        TableModule,
+        EmptySearchResultModule,
+        MatProgressSpinnerModule,
+        FlexModule,
+        MatInputModule,
+        MatSelectModule,
+        MatIconModule,
+        MatMenuModule,
+        MatButtonModule,
+    ],
+    declarations: [SimpleTableComponent],
+    exports: [SimpleTableComponent],
+})
+export class SimpleTableModule {}
--- a/src/components/simple-table/types/schema.ts
+++ b/src/components/simple-table/types/schema.ts
@ -0,0 +1,56 @@
+import startCase from 'lodash-es/startCase';
+import { Overwrite } from 'utility-types';
+
+export type Path<T> = ((p: T) => string) | keyof T;
+
+export interface BaseParam<T> {
+    def: string;
+    label: string;
+    value: (p: T) => string;
+    description?: (p: T) => string;
+    type?: 'datetime';
+}
+
+export type Param<T> = Overwrite<
+    Omit<BaseParam<T>, 'def'>,
+    {
+        label?: string;
+        value: Path<T>;
+        description?: Path<T>;
+    }
+>;
+
+function createGetValueFn<T>(v: ((d: T) => string) | keyof T): (d: T) => string {
+    if (typeof v === 'function') return v;
+    return (d) => d[v as any];
+}
+
+function createLabel(value: unknown): string {
+    return startCase(String(value));
+}
+
+export class Schema<T> {
+    params: BaseParam<T>[];
+
+    get list() {
+        return this.params.map((p) => p.def);
+    }
+
+    constructor(params: (Param<T> | keyof T)[]) {
+        this.params = params.map((p) => {
+            if (typeof p === 'object')
+                return {
+                    def: p.label ?? String(p.value),
+                    label: p.label ?? createLabel(p.value),
+                    value: createGetValueFn(p.value),
+                    description: p.description ? createGetValueFn(p.description) : null,
+                    type: p?.type,
+                };
+            return {
+                def: String(p),
+                label: createLabel(p),
+                value: createGetValueFn(p),
+            };
+        });
+    }
+}