integrate transaction table

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

@@ -23,22 +23,18 @@ const routeHandler = async (req: NextRequest) => {
       },
     });
 
-    const { token, card_id } = JSON.parse(oriyoResponse.data);
+    const parsedResponse = JSON.parse(oriyoResponse.data);
 
-    if (!token) {
+    if (!parsedResponse.token) {
       return NextResponse.json({ error: 'Credentials error' }, { status: 401 });
     }
 
     const response = NextResponse.json({ success: true });
 
-    response.cookies.set(
+    response.cookies.set(`${validatedBody.type}__token`, oriyoResponse.data, {
-      `${validatedBody.type}__token`,
+      path: '/',
-      JSON.stringify({ token, card_id }),
+      maxAge: 2 * 60 * 60,
-      {
+    });
-        path: '/',
-        maxAge: 2 * 60 * 60,
-      },
-    );
 
     return response;
   } catch (error) {

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

@@ -0,0 +1,63 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { z } from 'zod';
+
+import oriyoClient from '@/app/api-utlities/utilities/oriyo.client';
+
+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) => {
+  const bonusTokenData = req.cookies.get('bonus__token');
+
+  if (!bonusTokenData) {
+    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: {
+      card_id,
+      token,
+      limit: validatedRequest.limit,
+      page: validatedRequest.page,
+      type: 'bonus',
+      sort: 'id',
+      direction: 'desc',
+      start_date: validatedRequest.start_date,
+      end_date: validatedRequest.end_date,
+    },
+  });
+
+  const parsedResponse = JSON.parse(oriyoResponse.data);
+
+  if (parsedResponse.error) {
+    return NextResponse.json({ message: 'Fetch error' }, { status: 400 });
+  }
+
+  return new Response(oriyoResponse.data, {
+    headers: { 'Content-Type': 'application/json' },
+  });
+};
+
+export const GET = validationErrorHandler(routeHandler);

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

@@ -0,0 +1,23 @@
+import { omit } from 'lodash';
+import { NextRequest, NextResponse } from 'next/server';
+
+import { validationErrorHandler } from '../../middlewares/error-handler.middleware';
+
+const routeHandler = async (req: NextRequest) => {
+  const bonusTokenData = req.cookies.get('corporate__token');
+
+  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);

src/app/api/middlewares/error-handler.middleware.ts

@@ -2,9 +2,10 @@ import { NextRequest, NextResponse } from 'next/server';
 import { ZodError } from 'zod';
 
 export const validationErrorHandler =
-  (handler: Function) => async (req: NextRequest) => {
+  (handler: Function) =>
+  async (req: NextRequest, ...args: any[]) => {
     try {
-      return await handler(req);
+      return await handler(req, ...args);
     } catch (error) {
       if (error instanceof ZodError)
         return NextResponse.json({ message: error.format() }, { status: 400 });

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

@@ -1,6 +1,10 @@
 import { baseAPI } from '@/shared/api/base-api';
 
-import { ClientInfo } from '../model/types/bonus-client-info.type';
+import {
+  ClientInfo,
+  TransactionRequest,
+  TransactionResponse,
+} from '../model/types/bonus-client-info.type';
 
 export const bonusApi = baseAPI.injectEndpoints({
   endpoints: (builder) => ({
@@ -11,7 +15,19 @@ export const bonusApi = baseAPI.injectEndpoints({
         };
       },
     }),
+    fetchBonusTransactions: builder.query<
+      TransactionResponse,
+      TransactionRequest
+    >({
+      query: (request) => {
+        return {
+          url: '/bonus/transactions',
+          params: request,
+        };
+      },
+    }),
   }),
 });
 
-export const { useFetchMyBonusInfoQuery } = bonusApi;
+export const { useFetchMyBonusInfoQuery, useFetchBonusTransactionsQuery } =
+  bonusApi;

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

@@ -6,3 +6,29 @@ 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

@@ -0,0 +1,17 @@
+import { baseAPI } from '@/shared/api/base-api';
+
+import { CorporateInfoResponse } from '../model/types/corporate-client-info.type';
+
+export const corporateApi = baseAPI.injectEndpoints({
+  endpoints: (builder) => ({
+    fetchMyCorporateInfo: builder.query<CorporateInfoResponse, any>({
+      query: () => {
+        return {
+          url: '/corporate/info',
+        };
+      },
+    }),
+  }),
+});
+
+export const { useFetchMyCorporateInfoQuery } = corporateApi;

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

@@ -0,0 +1,9 @@
+export interface CorporateInfoResponse {
+  created_at: string;
+  fund: string;
+  fund_total: string;
+  group_id: number;
+  group_name: string;
+  overdraft: string;
+  total_cards: number;
+}

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

@@ -4,6 +4,8 @@ import { subMonths } from 'date-fns';
 import { Building2, LogOut, Wallet } from 'lucide-react';
 import { useState } from 'react';
 
+import { useFetchMyCorporateInfoQuery } from '@/entities/corporate/api/corporate.api';
+
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { Button } from '@/shared/shadcn-ui/button';
 import {
@@ -96,6 +98,8 @@ export function CorporateDashboard() {
 
   const { t } = useTextController();
 
+  const { data, isLoading } = useFetchMyCorporateInfoQuery({});
+
   return (
     <div className='flex min-h-screen flex-col px-2.5'>
       <main className='flex-1 py-10'>
@@ -110,7 +114,11 @@ export function CorporateDashboard() {
 
           <div className='mb-10 grid gap-3 md:grid-cols-3 md:gap-6'>
             {/* Company Card */}
-            <Card data-aos='zoom-in' data-aos-mirror="true" className='md:col-span-2'>
+            <Card
+              data-aos='zoom-in'
+              data-aos-mirror='true'
+              className='md:col-span-2'
+            >
               <CardHeader className='pb-2'>
                 <CardTitle className='flex items-center gap-2'>
                   <Building2 className='h-5 w-5 text-red-600' />
@@ -118,55 +126,67 @@ export function CorporateDashboard() {
                 </CardTitle>
               </CardHeader>
               <CardContent>
-                <div className='grid gap-6 md:grid-cols-2'>
+                {!data ? (
-                  <div>
+                  <>Loading</>
-                    <div className='mb-4 space-y-1'>
+                ) : (
-                      <p className='text-sm text-gray-500'>
+                  <div className='grid gap-6 md:grid-cols-2'>
-                        {t('corporate.companyCard.companyNameLabel')}
+                    <div>
-                      </p>
+                      <div className='mb-4 space-y-1'>
-                      <p className='font-medium'>{companyData.companyName}</p>
+                        <p className='text-sm text-gray-500'>
+                          {t('corporate.companyCard.companyNameLabel')}
+                        </p>
+                        <p className='truncate font-medium'>
+                          {data.group_name}
+                        </p>
+                      </div>
+                      <div className='mb-4 space-y-1'>
+                        <p className='text-sm text-gray-500'>
+                          {t('corporate.companyCard.cardsCountLabel')}
+                        </p>
+                        <p className='font-medium'>{data.total_cards}</p>
+                      </div>
+                      <div className='space-y-1'>
+                        <p className='text-sm text-gray-500'>
+                          {t('corporate.companyCard.registrationDateLabel')}
+                        </p>
+
+                        <p className='font-medium'>
+                          {new Date(data.created_at).toLocaleDateString(
+                            'en-GB',
+                          )}
+                        </p>
+                      </div>
                     </div>
-                    <div className='mb-4 space-y-1'>
+                    <div>
-                      <p className='text-sm text-gray-500'>
+                      <div className='mb-4 space-y-1'>
-                        {t('corporate.companyCard.cardsCountLabel')}
+                        <p className='text-sm text-gray-500'>
-                      </p>
+                          {t('corporate.companyCard.fundLabel')}
-                      <p className='font-medium'>{companyData.numberOfCards}</p>
+                        </p>
-                    </div>
+                        <p className='font-medium'>
-                    <div className='space-y-1'>
+                          {data.fund.toLocaleString()} {t('corporate.currency')}
-                      <p className='text-sm text-gray-500'>
+                        </p>
-                        {t('corporate.companyCard.registrationDateLabel')}
+                      </div>
-                      </p>
+                      <div className='mb-4 space-y-1'>
-                      <p className='font-medium'>
+                        <p className='text-sm text-gray-500'>
-                        {companyData.registrationDate}
+                          {t('corporate.companyCard.overdraftLabel')}
-                      </p>
+                        </p>
+                        <p className='font-medium'>
+                          {data.overdraft.toLocaleString()}{' '}
+                          {t('corporate.currency')}
+                        </p>
+                      </div>
                     </div>
                   </div>
-                  <div>
+                )}
-                    <div className='mb-4 space-y-1'>
-                      <p className='text-sm text-gray-500'>
-                        {t('corporate.companyCard.fundLabel')}
-                      </p>
-                      <p className='font-medium'>
-                        {companyData.fund.toLocaleString()}{' '}
-                        {t('corporate.currency')}
-                      </p>
-                    </div>
-                    <div className='mb-4 space-y-1'>
-                      <p className='text-sm text-gray-500'>
-                        {t('corporate.companyCard.overdraftLabel')}
-                      </p>
-                      <p className='font-medium'>
-                        {companyData.overdraft.toLocaleString()}{' '}
-                        {t('corporate.currency')}
-                      </p>
-                    </div>
-                  </div>
-                </div>
               </CardContent>
             </Card>
 
             {/* Fund Card */}
-            <Card data-aos='zoom-in' data-aos-mirror="true" className='bg-gradient-to-br from-red-600 to-red-800 text-white'>
+            <Card
+              data-aos='zoom-in'
+              data-aos-mirror='true'
+              className='bg-gradient-to-br from-red-600 to-red-800 text-white'
+            >
               <CardHeader>
                 <CardTitle className='flex items-center gap-2'>
                   <Wallet className='h-5 w-5' />
@@ -177,14 +197,18 @@ export function CorporateDashboard() {
                 </CardDescription>
               </CardHeader>
               <CardContent>
-                <div className='text-center'>
+                {!data ? (
-                  <p className='mb-2 text-4xl font-bold'>
+                  <>Loading</>
-                    {companyData.totalFund.toLocaleString()}
+                ) : (
-                  </p>
+                  <div className='text-center'>
-                  <p className='text-white/80'>
+                    <p className='mb-2 text-4xl font-bold'>
-                    {t('corporate.fundCard.currency')}
+                      {data.fund_total?.toLocaleString()}
-                  </p>
+                    </p>
-                </div>
+                    <p className='text-white/80'>
+                      {t('corporate.fundCard.currency')}
+                    </p>
+                  </div>
+                )}
               </CardContent>
             </Card>
           </div>

src/widgets/transactions-table.tsx

@@ -3,7 +3,9 @@
 import { format, subMonths } from 'date-fns';
 import { ru } from 'date-fns/locale';
 import { CalendarIcon } from 'lucide-react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+
+import { useFetchBonusTransactionsQuery } from '@/entities/bonus/api/bonus.api';
 
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { Button } from '@/shared/shadcn-ui/button';
@@ -23,85 +25,30 @@ import {
   TableRow,
 } from '@/shared/shadcn-ui/table';
 
-// Sample customer data
-const customerData = {
-  firstName: 'Алишер',
-  lastName: 'Рахмонов',
-  passportNumber: 'A12345678',
-  bonusPoints: 1250,
-  cardNumber: '5678-9012-3456-7890',
-  expiryDate: '12/2025',
-  registrationDate: '15.06.2020',
-};
-
-// 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 const TransactionsTable = () => {
-  const [startDate, setStartDate] = useState<Date | undefined>(
+  const [startDate, setStartDate] = useState<Date>(subMonths(new Date(), 1));
-    subMonths(new Date(), 1),
+  const [endDate, setEndDate] = useState<Date>(new Date());
-  );
+
-  const [endDate, setEndDate] = useState<Date | undefined>(new Date());
+  const { data, refetch } = useFetchBonusTransactionsQuery({
-  const [filteredTransactions, setFilteredTransactions] =
+    limit: 100,
-    useState(transactions);
+    page: 1,
+    start_date: format(startDate, 'yyyy-MM-dd'),
+    end_date: format(endDate, 'yyyy-MM-dd'),
+  });
 
   // Filter transactions by date range
   const filterTransactions = () => {
     if (!startDate || !endDate) return;
 
-    const filtered = transactions.filter((transaction) => {
+    refetch();
-      const transactionDate = new Date(transaction.date);
-      return transactionDate >= startDate && transactionDate <= endDate;
-    });
-
-    setFilteredTransactions(filtered);
   };
 
   const { t } = useTextController();
 
+  useEffect(() => {}, [startDate, endDate]);
+
+  if (!data) return null;
+
   return (
     <div className='space-y-6'>
       <div className='flex flex-col items-start justify-between gap-4 md:flex-row md:items-center'>
@@ -200,22 +147,22 @@ export const TransactionsTable = () => {
             </TableRow>
           </TableHeader>
           <TableBody>
-            {filteredTransactions.length > 0 ? (
+            {data.transactions.length > 0 ? (
-              filteredTransactions.map((transaction) => (
+              data.transactions.map((transaction) => (
                 <TableRow key={transaction.id}>
                   <TableCell>
-                    {format(transaction.date, 'dd.MM.yyyy')}
+                    {format(new Date(transaction.date_create), 'dd.MM.yyyy')}
                   </TableCell>
                   <TableCell>{transaction.station}</TableCell>
-                  <TableCell>{transaction.product}</TableCell>
+                  <TableCell>{transaction.product_name}</TableCell>
                   <TableCell className='text-right'>
-                    {transaction.quantity}
+                    {transaction.price_real}
                   </TableCell>
                   <TableCell className='text-right'>
-                    {transaction.cost.toFixed(2)} {t('corporate.currency')}
+                    {transaction.amount} {t('corporate.currency')}
                   </TableCell>
                   <TableCell className='text-right font-medium'>
-                    {transaction.total.toFixed(2)} {t('corporate.currency')}
+                    {transaction.sum_real} {t('corporate.currency')}
                   </TableCell>
                 </TableRow>
               ))