Fixed auth middleware

src/app/api-utlities/clients/oriyo.client.ts

@@ -5,6 +5,10 @@ const oriyoClient = new Axios({
   headers: {
     'Content-type': 'application/json',
   },
+
+  transformResponse: (response) => {
+    return JSON.parse(response);
+  },
 });
 
 export default oriyoClient;

src/app/api-utlities/utilities/get-params.ts

@@ -0,0 +1,11 @@
+import { NextRequest } from 'next/server';
+
+export const getParams = (request: NextRequest) =>
+  Array.from(request.nextUrl.searchParams.entries()).reduce(
+    (pr, cr) => {
+      pr[cr[0]] = cr[1];
+
+      return pr;
+    },
+    {} as Record<string, string>,
+  );

src/app/api/auth/login/route.ts

@@ -1,7 +1,7 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { z } from 'zod';
 
-import oriyoClient from '@/app/api-utlities/utilities/oriyo.client';
+import oriyoClient from '@/app/api-utlities/clients/oriyo.client';
 
 import { loginFormSchema } from '@/entities/auth/model/validation/login-form.schema';
 
@@ -14,33 +14,29 @@ const routeHandler = async (req: NextRequest) => {
     .merge(z.object({ type: z.enum(['bonus', 'corporate']) }))
     .parse(body);
 
-  try {
+  const oriyoResponse = await oriyoClient.get('/client/login', {
-    const oriyoResponse = await oriyoClient.get('/client/login', {
+    params: {
-      params: {
+      type: validatedBody.type,
-        type: validatedBody.type,
+      phone: validatedBody.phoneNumber,
-        phone: validatedBody.phoneNumber,
+      uid: validatedBody.cardNumber,
-        uid: validatedBody.cardNumber,
+    },
-      },
+  });
-    });
 
-    const parsedResponse = JSON.parse(oriyoResponse.data);
+  if (oriyoResponse.data.error)
+    return NextResponse.json({ error: 'Credentials error' }, { status: 401 });
 
-    if (!parsedResponse.token) {
+  const response = NextResponse.json({ success: true });
-      return NextResponse.json({ error: 'Credentials error' }, { status: 401 });
-    }
 
-    const response = NextResponse.json({ success: true });
+  response.cookies.set(
-
+    `${validatedBody.type}__token`,
-    response.cookies.set(`${validatedBody.type}__token`, oriyoResponse.data, {
+    JSON.stringify(oriyoResponse.data),
+    {
       path: '/',
       maxAge: 2 * 60 * 60,
-    });
+    },
+  );
 
-    return response;
+  return response;
-  } catch (error) {
-    console.error('login error:', error);
-    return NextResponse.json({ error: 'Server error' }, { status: 500 });
-  }
 };
 
 export const POST = validationErrorHandler(routeHandler);

src/app/api/bonus/info/route.ts

@@ -1,20 +1,13 @@
-import { NextRequest, NextResponse } from 'next/server';
+import { RequestCookie } from 'next/dist/compiled/@edge-runtime/cookies';
+import { NextRequest } from 'next/server';
 
-import oriyoClient from '@/app/api-utlities/utilities/oriyo.client';
+import oriyoClient from '@/app/api-utlities/clients/oriyo.client';
 
+import { authorizationMiddleware } from '../../middlewares/auth.middleware';
 import { validationErrorHandler } from '../../middlewares/error-handler.middleware';
 
-const routeHandler = async (req: NextRequest) => {
+const routeHandler = async (req: NextRequest, requestCookie: RequestCookie) => {
-  const bonusTokenData = req.cookies.get('bonus__token');
+  const { card_id, token } = JSON.parse(requestCookie.value);
-
-  if (!bonusTokenData) {
-    return NextResponse.json(
-      { error: 'User does not have access' },
-      { status: 401 },
-    );
-  }
-
-  const { card_id, token } = JSON.parse(bonusTokenData.value);
 
   const oriyoResponse = await oriyoClient.get('/client/info', {
     params: {
@@ -23,9 +16,11 @@ const routeHandler = async (req: NextRequest) => {
     },
   });
 
-  return new Response(oriyoResponse.data, {
+  return new Response(JSON.stringify(oriyoResponse.data), {
     headers: { 'Content-Type': 'application/json' },
   });
 };
 
-export const GET = validationErrorHandler(routeHandler);
+export const GET = validationErrorHandler(
+  authorizationMiddleware(routeHandler, 'bonus__token'),
+);

src/app/api/bonus/transactions/route.ts

@@ -1,8 +1,11 @@
-import { NextRequest, NextResponse } from 'next/server';
+import { RequestCookie } from 'next/dist/compiled/@edge-runtime/cookies';
+import { NextRequest } from 'next/server';
 import { z } from 'zod';
 
-import oriyoClient from '@/app/api-utlities/utilities/oriyo.client';
+import oriyoClient from '@/app/api-utlities/clients/oriyo.client';
+import { getParams } from '@/app/api-utlities/utilities/get-params';
 
+import { authorizationMiddleware } from '../../middlewares/auth.middleware';
 import { validationErrorHandler } from '../../middlewares/error-handler.middleware';
 
 const validatedSchema = z.object({
@@ -12,28 +15,10 @@ const validatedSchema = z.object({
   page: z.coerce.number(),
 });
 
-const routeHandler = async (req: NextRequest) => {
+const routeHandler = async (req: NextRequest, requestCookie: RequestCookie) => {
-  const bonusTokenData = req.cookies.get('bonus__token');
+  const validatedRequest = validatedSchema.parse(getParams(req));
 
-  if (!bonusTokenData) {
+  const { card_id, token } = JSON.parse(requestCookie.value);
-    return NextResponse.json(
-      { error: 'User does not have access' },
-      { status: 401 },
-    );
-  }
-
-  const params = Array.from(req.nextUrl.searchParams.entries()).reduce(
-    (pr, cr) => {
-      pr[cr[0]] = cr[1];
-
-      return pr;
-    },
-    {} as Record<string, string>,
-  );
-
-  const validatedRequest = validatedSchema.parse(params);
-
-  const { card_id, token } = JSON.parse(bonusTokenData.value);
 
   const oriyoResponse = await oriyoClient.get('/client/transactions', {
     params: {
@@ -49,15 +34,14 @@ const routeHandler = async (req: NextRequest) => {
     },
   });
 
-  const parsedResponse = JSON.parse(oriyoResponse.data);
+  if (oriyoResponse.data.error) throw oriyoResponse.data;
 
-  if (parsedResponse.error) {
+  return new Response(JSON.stringify(oriyoResponse.data), {
-    return NextResponse.json({ message: 'Fetch error' }, { status: 400 });
-  }
-
-  return new Response(oriyoResponse.data, {
     headers: { 'Content-Type': 'application/json' },
   });
 };
 
-export const GET = validationErrorHandler(routeHandler);
+export const GET = authorizationMiddleware(
+  validationErrorHandler(routeHandler),
+  'bonus__token',
+);

src/app/api/corporate/info/route.ts

@@ -1,23 +1,19 @@
 import { omit } from 'lodash';
-import { NextRequest, NextResponse } from 'next/server';
+import { RequestCookie } from 'next/dist/compiled/@edge-runtime/cookies';
+import { NextRequest } from 'next/server';
 
+import { authorizationMiddleware } from '../../middlewares/auth.middleware';
 import { validationErrorHandler } from '../../middlewares/error-handler.middleware';
 
-const routeHandler = async (req: NextRequest) => {
+const routeHandler = async (req: NextRequest, requestCookie: RequestCookie) => {
-  const bonusTokenData = req.cookies.get('corporate__token');
+  const parsedData = JSON.parse(requestCookie.value);
-
-  if (!bonusTokenData) {
-    return NextResponse.json(
-      { error: 'User does not have access' },
-      { status: 401 },
-    );
-  }
-
-  const parsedData = JSON.parse(bonusTokenData.value);
 
   return new Response(JSON.stringify(omit(parsedData, 'token')), {
     headers: { 'Content-Type': 'application/json' },
   });
 };
 
-export const GET = validationErrorHandler(routeHandler);
+export const GET = authorizationMiddleware(
+  validationErrorHandler(routeHandler),
+  'corporate__token',
+);

src/app/api/corporate/transactions/route.ts

@@ -0,0 +1,46 @@
+import { RequestCookie } from 'next/dist/compiled/@edge-runtime/cookies';
+import { NextRequest } from 'next/server';
+import { z } from 'zod';
+
+import oriyoClient from '@/app/api-utlities/clients/oriyo.client';
+import { getParams } from '@/app/api-utlities/utilities/get-params';
+
+import { authorizationMiddleware } from '../../middlewares/auth.middleware';
+import { validationErrorHandler } from '../../middlewares/error-handler.middleware';
+
+const validatedSchema = z.object({
+  start_date: z.string().optional(),
+  end_date: z.string().optional(),
+  limit: z.coerce.number(),
+  page: z.coerce.number(),
+});
+
+const routeHandler = async (req: NextRequest, requestCookie: RequestCookie) => {
+  const validatedRequest = validatedSchema.parse(getParams(req));
+
+  const { group_id, token } = JSON.parse(requestCookie.value);
+
+  const oriyoResponse = await oriyoClient.get('/client/transactions', {
+    params: {
+      group_id,
+      token,
+      limit: validatedRequest.limit,
+      page: validatedRequest.page,
+      type: 'corporate',
+      sort: 'id',
+      direction: 'desc',
+      start_date: validatedRequest.start_date,
+      end_date: validatedRequest.end_date,
+    },
+  });
+
+  if (oriyoResponse.data.error) throw oriyoResponse.data;
+
+  return new Response(JSON.stringify(oriyoResponse.data), {
+    headers: { 'Content-Type': 'application/json' },
+  });
+};
+
+export const GET = validationErrorHandler(
+  authorizationMiddleware(routeHandler, 'corporate__token'),
+);

src/app/api/middlewares/auth.middleware.ts

@@ -0,0 +1,32 @@
+import { has } from 'lodash';
+import { NextRequest, NextResponse } from 'next/server';
+
+export const authorizationMiddleware =
+  (handler: Function, authorizationTokenKey: string) =>
+  async (req: NextRequest, ...args: any[]) => {
+    const requestedToken = req.cookies.get(authorizationTokenKey);
+
+    if (!requestedToken) {
+      return NextResponse.json(
+        { error: 'User does not have access' },
+        { status: 401 },
+      );
+    }
+
+    try {
+      return await handler(req, requestedToken, ...args);
+    } catch (error) {
+      if (has(error, 'code') && error.code === 401) {
+        const response = NextResponse.json(
+          { message: 'Authorization session was timed out' },
+          { status: 401 },
+        );
+
+        response.cookies.delete(authorizationTokenKey);
+
+        return response;
+      }
+
+      throw error;
+    }
+  };

src/entities/bonus/api/bonus.api.ts

@@ -1,10 +1,11 @@
-import { baseAPI } from '@/shared/api/base-api';
-
 import {
-  ClientInfo,
   TransactionRequest,
   TransactionResponse,
-} from '../model/types/bonus-client-info.type';
+} from '@/entities/transactions/model/types';
+
+import { baseAPI } from '@/shared/api/base-api';
+
+import { ClientInfo } from '../model/types/bonus-client-info.type';
 
 export const bonusApi = baseAPI.injectEndpoints({
   endpoints: (builder) => ({

src/entities/bonus/model/types/bonus-client-info.type.ts

@@ -6,29 +6,3 @@ export interface ClientInfo {
   end_date: string;
   bonuses: string;
 }
-
-export interface TransactionResponse {
-  transactions: Transaction[];
-  card_id: string;
-  current_page: number;
-  limit: number;
-  total_records: number;
-  total_pages: number;
-}
-
-export interface Transaction {
-  id: number;
-  date_create: string;
-  station: string;
-  product_name: string;
-  amount: string;
-  price_real: string;
-  sum_real: string;
-}
-
-export interface TransactionRequest {
-  start_date?: string;
-  end_date?: string;
-  page: number;
-  limit: number;
-}

src/entities/corporate/api/corporate.api.ts

@@ -1,3 +1,8 @@
+import {
+  TransactionRequest,
+  TransactionResponse,
+} from '@/entities/transactions/model/types';
+
 import { baseAPI } from '@/shared/api/base-api';
 
 import { CorporateInfoResponse } from '../model/types/corporate-client-info.type';
@@ -11,7 +16,21 @@ export const corporateApi = baseAPI.injectEndpoints({
         };
       },
     }),
+    fetchCorporateTransactions: builder.query<
+      TransactionResponse,
+      TransactionRequest
+    >({
+      query: (request) => {
+        return {
+          url: '/corporate/transactions',
+          params: request,
+        };
+      },
+    }),
   }),
 });
 
-export const { useFetchMyCorporateInfoQuery } = corporateApi;
+export const {
+  useFetchMyCorporateInfoQuery,
+  useFetchCorporateTransactionsQuery,
+} = corporateApi;

src/entities/transactions/model/types.ts

@@ -0,0 +1,25 @@
+export interface TransactionResponse {
+  transactions: Transaction[];
+  card_id: string;
+  current_page: number;
+  limit: number;
+  total_records: number;
+  total_pages: number;
+}
+
+export interface Transaction {
+  id: number;
+  date_create: string;
+  station: string;
+  product_name: string;
+  amount: string;
+  price_real: string;
+  sum_real: string;
+}
+
+export interface TransactionRequest {
+  start_date?: string;
+  end_date?: string;
+  page: number;
+  limit: number;
+}

src/pages-templates/(dashboard)/corporate-dashboard/index.tsx

@@ -1,11 +1,14 @@
 'use client';
 
 import { deleteCookie } from 'cookies-next';
-import { subMonths } from 'date-fns';
 import { Building2, LogOut, Wallet } from 'lucide-react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
-import { useFetchMyCorporateInfoQuery } from '@/entities/corporate/api/corporate.api';
+import {
+  useFetchCorporateTransactionsQuery,
+  useFetchMyCorporateInfoQuery,
+} from '@/entities/corporate/api/corporate.api';
+import { TransactionRequest } from '@/entities/transactions/model/types';
 
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { Button } from '@/shared/shadcn-ui/button';
@@ -19,88 +22,23 @@ import {
 
 import { TransactionsTable } from '@/widgets/transactions-table';
 
-// import { CardsList } from '@/widgets/cards-list';
-
-// Sample company data
-const companyData = {
-  companyName: 'ООО «ТаджикТранс»',
-  numberOfCards: 12,
-  fund: 25000,
-  overdraft: 5000,
-  totalFund: 30000,
-  registrationDate: '10.03.2019',
-};
-
-// Sample transaction data
-const generateTransactions = () => {
-  const stations = [
-    'АЗС Душанбе-Центр',
-    'АЗС Душанбе-Запад',
-    'АЗС Душанбе-Восток',
-    'АЗС Худжанд',
-    'АЗС Куляб',
-  ];
-
-  const products = [
-    { name: 'ДТ', price: 8.5 },
-    { name: 'АИ-92', price: 9.2 },
-    { name: 'АИ-95', price: 10.5 },
-    { name: 'Z-100 Power', price: 11.8 },
-    { name: 'Пропан', price: 6.3 },
-  ];
-
-  const transactions = [];
-
-  // Generate 50 random transactions over the last 6 months
-  for (let i = 0; i < 50; i++) {
-    const date = subMonths(new Date(), Math.random() * 6);
-    const station = stations[Math.floor(Math.random() * stations.length)];
-    const product = products[Math.floor(Math.random() * products.length)];
-    const quantity = Math.floor(Math.random() * 40) + 10; // 10-50 liters
-    const cost = product.price;
-    const total = quantity * cost;
-
-    transactions.push({
-      id: i + 1,
-      date,
-      station,
-      product: product.name,
-      quantity,
-      cost,
-      total,
-    });
-  }
-
-  // Sort by date (newest first)
-  return transactions.sort((a, b) => b.date.getTime() - a.date.getTime());
-};
-
-const transactions = generateTransactions();
-
 export function CorporateDashboard() {
-  const [startDate, setStartDate] = useState<Date | undefined>(
-    subMonths(new Date(), 1),
-  );
-  const [endDate, setEndDate] = useState<Date | undefined>(new Date());
-  const [filteredTransactions, setFilteredTransactions] =
-    useState(transactions);
-
-  // Filter transactions by date range
-  const filterTransactions = () => {
-    if (!startDate || !endDate) return;
-
-    const filtered = transactions.filter((transaction) => {
-      const transactionDate = new Date(transaction.date);
-      return transactionDate >= startDate && transactionDate <= endDate;
-    });
-
-    setFilteredTransactions(filtered);
-  };
-
   const { t } = useTextController();
 
   const { data, isLoading } = useFetchMyCorporateInfoQuery({});
 
+  const [request, setTransactionFetchRequest] = useState<TransactionRequest>({
+    limit: 10,
+    page: 1,
+  });
+
+  const { data: transactionsResponse, refetch } =
+    useFetchCorporateTransactionsQuery(request);
+
+  useEffect(() => {
+    refetch();
+  }, [request]);
+
   return (
     <div className='flex min-h-screen flex-col px-2.5'>
       <main className='flex-1 py-10'>
@@ -221,11 +159,12 @@ export function CorporateDashboard() {
             </Card>
           </div>
 
-          {/* <CardsList totalCards={companyData.numberOfCards} /> */}
+          {transactionsResponse && (
-
+            <TransactionsTable
-          {/* Transactions */}
+              data={transactionsResponse}
-
+              onChange={setTransactionFetchRequest}
-          <TransactionsTable />
+            />
+          )}
         </div>
       </main>
     </div>

src/pages-templates/(dashboard)/customer-dashboard/index.tsx

@@ -2,8 +2,13 @@
 
 import { deleteCookie } from 'cookies-next';
 import { ArrowUpRight, Clock, CreditCard, LogOut, User } from 'lucide-react';
+import { useEffect, useState } from 'react';
 
-import { useFetchMyBonusInfoQuery } from '@/entities/bonus/api/bonus.api';
+import {
+  useFetchBonusTransactionsQuery,
+  useFetchMyBonusInfoQuery,
+} from '@/entities/bonus/api/bonus.api';
+import { TransactionRequest } from '@/entities/transactions/model/types';
 
 import Loader from '@/shared/components/loader';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
@@ -21,8 +26,20 @@ import { TransactionsTable } from '@/widgets/transactions-table';
 export function CustomerDashboard() {
   const { t } = useTextController();
 
+  const [request, setTransactionFetchRequest] = useState<TransactionRequest>({
+    limit: 10,
+    page: 1,
+  });
+
   const { data, isLoading } = useFetchMyBonusInfoQuery({});
 
+  const { data: transactionsResponse, refetch } =
+    useFetchBonusTransactionsQuery(request);
+
+  useEffect(() => {
+    refetch();
+  }, [request]);
+
   return (
     <div className='flex min-h-screen flex-col px-2.5'>
       <main className='flex-1 py-10'>
@@ -131,7 +148,12 @@ export function CustomerDashboard() {
             </Card>
           </div>
 
-          <TransactionsTable />
+          {transactionsResponse && (
+            <TransactionsTable
+              data={transactionsResponse}
+              onChange={setTransactionFetchRequest}
+            />
+          )}
         </div>
       </main>
     </div>

src/shared/api/base-api.ts

@@ -1,4 +1,5 @@
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+import { has } from 'lodash';
 import { toast } from 'sonner';
 
 const baseQuery = fetchBaseQuery({
@@ -22,7 +23,15 @@ export const baseAPI = createApi({
     if (result.error) {
       switch (result.error.status) {
         case 401:
-          toast.error('Login credentials error');
+          if (
+            has(result.error.data, 'error') &&
+            result.error.data.error === 'Credentials error'
+          ) {
+            toast.error('Login credentials error');
+            break;
+          }
+
+          window.location.href = '/login';
           break;
 
         case 500:

src/widgets/pagination.tsx

@@ -0,0 +1,118 @@
+import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '@/shared/lib/utils';
+import { ButtonProps, buttonVariants } from '@/shared/shadcn-ui/button';
+
+const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
+  <nav
+    role='navigation'
+    aria-label='pagination'
+    className={cn('mx-auto flex w-full justify-center', className)}
+    {...props}
+  />
+);
+Pagination.displayName = 'Pagination';
+
+const PaginationContent = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<'ul'>
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    className={cn('flex flex-row items-center gap-1', className)}
+    {...props}
+  />
+));
+PaginationContent.displayName = 'PaginationContent';
+
+const PaginationItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<'li'>
+>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn('', className)} {...props} />
+));
+PaginationItem.displayName = 'PaginationItem';
+
+type PaginationLinkProps = {
+  isActive?: boolean;
+} & Pick<ButtonProps, 'size'> &
+  React.ComponentProps<'a'>;
+
+const PaginationLink = ({
+  className,
+  isActive,
+  size = 'icon',
+  ...props
+}: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? 'page' : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? 'outline' : 'ghost',
+        size,
+      }),
+      isActive && 'bg-accent pointer-events-none',
+      className,
+    )}
+    {...props}
+  />
+);
+PaginationLink.displayName = 'PaginationLink';
+
+const PaginationPrevious = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label='Go to previous page'
+    size='default'
+    className={cn('gap-1 pl-2.5', className)}
+    {...props}
+  >
+    <ChevronLeft className='h-4 w-4' />
+    <span>Предыдущая</span>
+  </PaginationLink>
+);
+PaginationPrevious.displayName = 'PaginationPrevious';
+
+const PaginationNext = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label='Go to next page'
+    size='default'
+    className={cn('gap-1 pr-2.5', className)}
+    {...props}
+  >
+    <span>Следующая</span>
+    <ChevronRight className='h-4 w-4' />
+  </PaginationLink>
+);
+PaginationNext.displayName = 'PaginationNext';
+
+const PaginationEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) => (
+  <span
+    aria-hidden
+    className={cn('flex h-9 w-9 items-center justify-center', className)}
+    {...props}
+  >
+    <MoreHorizontal className='h-4 w-4' />
+    <span className='sr-only'>More pages</span>
+  </span>
+);
+PaginationEllipsis.displayName = 'PaginationEllipsis';
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+};

src/widgets/transactions-table.tsx

@@ -1,11 +1,14 @@
 'use client';
 
-import { format, subMonths } from 'date-fns';
+import { format } from 'date-fns';
 import { ru } from 'date-fns/locale';
 import { CalendarIcon } from 'lucide-react';
 import { useEffect, useState } from 'react';
 
-import { useFetchBonusTransactionsQuery } from '@/entities/bonus/api/bonus.api';
+import {
+  TransactionRequest,
+  TransactionResponse,
+} from '@/entities/transactions/model/types';
 
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { Button } from '@/shared/shadcn-ui/button';
@@ -25,29 +28,70 @@ import {
   TableRow,
 } from '@/shared/shadcn-ui/table';
 
-export const TransactionsTable = () => {
+import {
-  const [startDate, setStartDate] = useState<Date | undefined>(
+  Pagination,
-    subMonths(new Date(), 1),
+  PaginationContent,
-  );
+  PaginationItem,
-  const [endDate, setEndDate] = useState<Date | undefined>(new Date());
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from './pagination';
 
-  const { data, refetch } = useFetchBonusTransactionsQuery({
+export interface TransactionsTableProps {
-    limit: 100,
+  onChange: (request: TransactionRequest) => void;
-    page: 1,
+  data: TransactionResponse;
-    ...(startDate ? { start_date: format(startDate, 'yyyy-MM-dd') } : {}),
+}
-    ...(endDate ? { end_date: format(endDate, 'yyyy-MM-dd') } : {}),
+
-  });
+export const TransactionsTable = ({
+  data,
+  onChange,
+}: TransactionsTableProps) => {
+  const [startDate, setStartDate] = useState<Date | undefined>(undefined);
+  const [endDate, setEndDate] = useState<Date | undefined>(undefined);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [itemsPerPage, setItemsPerPage] = useState(10);
+
+  const handlePageChange = (page: number) => {
+    if (page < 1 || page > data.total_pages) return;
+    setCurrentPage(page);
+  };
+
+  const getPageNumbers = () => {
+    const pages = [];
+    const maxVisiblePages = 5; // Maximum number of visible pages
+    const halfVisible = Math.floor(maxVisiblePages / 2);
+
+    let startPage = Math.max(1, currentPage - halfVisible);
+    let endPage = Math.min(data.total_pages, currentPage + halfVisible);
+
+    if (currentPage <= halfVisible) {
+      endPage = Math.min(data.total_pages, maxVisiblePages);
+    } else if (currentPage + halfVisible >= data.total_pages) {
+      startPage = Math.max(1, data.total_pages - maxVisiblePages + 1);
+    }
+
+    for (let i = startPage; i <= endPage; i++) {
+      pages.push(i);
+    }
+
+    return pages;
+  };
 
-  // Filter transactions by date range
   const filterTransactions = () => {
     if (!startDate || !endDate) return;
-
+    setCurrentPage(1); // Reset to the first page when applying filters
-    refetch();
   };
 
   const { t } = useTextController();
 
-  useEffect(() => {}, [startDate, endDate]);
+  useEffect(() => {
+    onChange({
+      limit: itemsPerPage,
+      page: currentPage,
+      ...(startDate ? { start_date: format(startDate, 'yyyy-MM-dd') } : {}),
+      ...(endDate ? { end_date: format(endDate, 'yyyy-MM-dd') } : {}),
+    });
+  }, [startDate, endDate, itemsPerPage, currentPage]);
 
   if (!data) return null;
 
@@ -59,7 +103,7 @@ export const TransactionsTable = () => {
         </h2>
 
         <div className='flex w-full flex-col gap-4 md:w-auto md:flex-row'>
-          <div className='grid sm:grid-cols-2 gap-2'>
+          <div className='grid gap-2 sm:grid-cols-2'>
             <div className='flex items-center gap-2'>
               <Label htmlFor='start-date'>
                 {t('corporate.transactions.dateFrom')}
@@ -181,6 +225,66 @@ export const TransactionsTable = () => {
           </TableBody>
         </Table>
       </div>
+
+      {data.transactions.length > 0 && (
+        <div className='flex flex-col items-center justify-between gap-4 sm:flex-row'>
+          <div className='text-sm text-gray-500'>
+            Показано {data.transactions.length} из {data.total_records} операций
+          </div>
+
+          <Pagination>
+            <PaginationContent>
+              <PaginationItem>
+                <PaginationPrevious
+                  onClick={() => handlePageChange(currentPage - 1)}
+                  className={
+                    currentPage === 1 ? 'pointer-events-none opacity-50' : ''
+                  }
+                />
+              </PaginationItem>
+
+              {getPageNumbers().map((page, index) => (
+                <PaginationItem key={index}>
+                  <PaginationLink
+                    isActive={currentPage === page}
+                    onClick={() => handlePageChange(page as number)}
+                  >
+                    {page}
+                  </PaginationLink>
+                </PaginationItem>
+              ))}
+
+              <PaginationItem>
+                <PaginationNext
+                  onClick={() => handlePageChange(currentPage + 1)}
+                  className={
+                    currentPage === data.total_pages
+                      ? 'pointer-events-none opacity-50'
+                      : ''
+                  }
+                />
+              </PaginationItem>
+            </PaginationContent>
+          </Pagination>
+
+          <div className='flex items-center gap-2'>
+            <span className='text-sm text-gray-500'>Записей на странице:</span>
+            <select
+              className='rounded border p-1 text-sm'
+              value={itemsPerPage}
+              onChange={(e) => {
+                setItemsPerPage(Number(e.target.value));
+                setCurrentPage(1); // Reset to first page when changing items per page
+              }}
+            >
+              <option value={5}>5</option>
+              <option value={10}>10</option>
+              <option value={20}>20</option>
+              <option value={50}>50</option>
+            </select>
+          </div>
+        </div>
+      )}
     </div>
   );
 };