diff --git a/src/entities/bonus/api/bonus.api.ts b/src/entities/bonus/api/bonus.api.ts index 5bdc1a9..661e6ad 100644 --- a/src/entities/bonus/api/bonus.api.ts +++ b/src/entities/bonus/api/bonus.api.ts @@ -1,11 +1,10 @@ -import { - TransactionRequest, - TransactionResponse, -} from '@/entities/transactions/model/types'; - import { baseAPI } from '@/shared/api/base-api'; import { ClientInfo } from '../model/types/bonus-client-info.type'; +import { + BonusTransactionRequest, + BonusTransactionResponse, +} from '../model/types/bonus-transactions.type'; export const bonusApi = baseAPI.injectEndpoints({ endpoints: (builder) => ({ @@ -17,8 +16,8 @@ export const bonusApi = baseAPI.injectEndpoints({ }, }), fetchBonusTransactions: builder.query< - TransactionResponse, - TransactionRequest + BonusTransactionResponse, + BonusTransactionRequest >({ query: (request) => { return { diff --git a/src/entities/transactions/model/types.ts b/src/entities/bonus/model/types/bonus-transactions.type.ts similarity index 65% rename from src/entities/transactions/model/types.ts rename to src/entities/bonus/model/types/bonus-transactions.type.ts index 5ceb9b1..b4f30a8 100644 --- a/src/entities/transactions/model/types.ts +++ b/src/entities/bonus/model/types/bonus-transactions.type.ts @@ -1,23 +1,22 @@ -export interface TransactionResponse { - transactions: Transaction[]; +export interface BonusTransactionResponse { + transactions: BonusTransaction[]; current_page: number; limit: number; total_records: number; total_pages: number; } -export interface Transaction { +export interface BonusTransaction { id: number; date_create: string; station?: string; - station_name?: string; product_name: string; amount: string; price_real: string; sum_real: string; } -export interface TransactionRequest { +export interface BonusTransactionRequest { start_date?: string; end_date?: string; page: number; diff --git a/src/entities/corporate/api/corporate.api.ts b/src/entities/corporate/api/corporate.api.ts index f66beda..20e6220 100644 --- a/src/entities/corporate/api/corporate.api.ts +++ b/src/entities/corporate/api/corporate.api.ts @@ -1,11 +1,10 @@ -import { - TransactionRequest, - TransactionResponse, -} from '@/entities/transactions/model/types'; - import { baseAPI } from '@/shared/api/base-api'; import { CorporateInfoResponse } from '../model/types/corporate-client-info.type'; +import { + CorporateTransactionRequest, + CorporateTransactionResponse, +} from '../model/types/corporate-transactions.type'; export const corporateApi = baseAPI.injectEndpoints({ endpoints: (builder) => ({ @@ -17,8 +16,8 @@ export const corporateApi = baseAPI.injectEndpoints({ }, }), fetchCorporateTransactions: builder.query< - TransactionResponse, - TransactionRequest + CorporateTransactionResponse, + CorporateTransactionRequest >({ query: (request) => { return { diff --git a/src/entities/corporate/model/types/corporate-transactions.type.ts b/src/entities/corporate/model/types/corporate-transactions.type.ts new file mode 100644 index 0000000..4cde192 --- /dev/null +++ b/src/entities/corporate/model/types/corporate-transactions.type.ts @@ -0,0 +1,24 @@ +export interface CorporateTransactionResponse { + transactions: CorporateTransaction[]; + current_page: number; + limit: number; + total_records: number; + total_pages: number; +} + +export interface CorporateTransaction { + date_create: string; + station_name?: string; + product_name: string; + amount: string; + price_real: string; + sum_real: string; + uid: string; +} + +export interface CorporateTransactionRequest { + start_date?: string; + end_date?: string; + page: number; + limit: number; +} diff --git a/src/pages-templates/(dashboard)/corporate-dashboard/index.tsx b/src/pages-templates/(dashboard)/corporate-dashboard/index.tsx index a8570a0..787b3ad 100644 --- a/src/pages-templates/(dashboard)/corporate-dashboard/index.tsx +++ b/src/pages-templates/(dashboard)/corporate-dashboard/index.tsx @@ -1,6 +1,7 @@ 'use client'; import { deleteCookie } from 'cookies-next'; +import { format } from 'date-fns'; import { Building2, LogOut, Wallet } from 'lucide-react'; import { useEffect, useState } from 'react'; @@ -8,7 +9,7 @@ import { useFetchCorporateTransactionsQuery, useFetchMyCorporateInfoQuery, } from '@/entities/corporate/api/corporate.api'; -import { TransactionRequest } from '@/entities/transactions/model/types'; +import { CorporateTransactionRequest } from '@/entities/corporate/model/types/corporate-transactions.type'; import { useTextController } from '@/shared/language/hooks/use-text-controller'; import { Button } from '@/shared/shadcn-ui/button'; @@ -19,6 +20,7 @@ import { CardHeader, CardTitle, } from '@/shared/shadcn-ui/card'; +import { TableCell, TableHead, TableRow } from '@/shared/shadcn-ui/table'; import { TransactionsTable } from '@/widgets/transactions-table'; @@ -27,10 +29,11 @@ export function CorporateDashboard() { const { data } = useFetchMyCorporateInfoQuery({}); - const [request, setTransactionFetchRequest] = useState({ - limit: 10, - page: 1, - }); + const [request, setTransactionFetchRequest] = + useState({ + limit: 10, + page: 1, + }); const { data: transactionsResponse, @@ -164,6 +167,53 @@ export function CorporateDashboard() { ( + + + {t('corporate.transactions.tableHeaders.date')} + + + {t('corporate.transactions.tableHeaders.card')} + + + {t('corporate.transactions.tableHeaders.station')} + + + {t('corporate.transactions.tableHeaders.product')} + + + {t('corporate.transactions.tableHeaders.quantity')} + + + {t('corporate.transactions.tableHeaders.price')} + + + {t('corporate.transactions.tableHeaders.total')} + + + )} + renderRow={(transaction, index) => ( + + + {format( + new Date(transaction.date_create), + 'dd.MM.yyyy HH:mm', + )} + + {transaction.uid} + {transaction.station_name} + {transaction.product_name} + + {transaction.amount} + + + {transaction.price_real} {t('corporate.currency')} + + + {transaction.sum_real} {t('corporate.currency')} + + + )} data={ transactionsResponse || { limit: 10, diff --git a/src/pages-templates/(dashboard)/customer-dashboard/index.tsx b/src/pages-templates/(dashboard)/customer-dashboard/index.tsx index a2b81c8..93496c8 100644 --- a/src/pages-templates/(dashboard)/customer-dashboard/index.tsx +++ b/src/pages-templates/(dashboard)/customer-dashboard/index.tsx @@ -1,6 +1,7 @@ 'use client'; import { deleteCookie } from 'cookies-next'; +import { format } from 'date-fns'; import { ArrowUpRight, Clock, CreditCard, LogOut, User } from 'lucide-react'; import { useEffect, useState } from 'react'; @@ -8,7 +9,7 @@ import { useFetchBonusTransactionsQuery, useFetchMyBonusInfoQuery, } from '@/entities/bonus/api/bonus.api'; -import { TransactionRequest } from '@/entities/transactions/model/types'; +import { BonusTransactionRequest } from '@/entities/bonus/model/types/bonus-transactions.type'; import Loader from '@/shared/components/loader'; import { useTextController } from '@/shared/language/hooks/use-text-controller'; @@ -20,16 +21,18 @@ import { CardHeader, CardTitle, } from '@/shared/shadcn-ui/card'; +import { TableCell, TableHead, TableRow } from '@/shared/shadcn-ui/table'; import { TransactionsTable } from '@/widgets/transactions-table'; export function CustomerDashboard() { const { t } = useTextController(); - const [request, setTransactionFetchRequest] = useState({ - limit: 10, - page: 1, - }); + const [request, setTransactionFetchRequest] = + useState({ + limit: 10, + page: 1, + }); const { data, isLoading } = useFetchMyBonusInfoQuery({}); @@ -162,6 +165,49 @@ export function CustomerDashboard() { transactions: [], } } + renderHeaders={() => ( + + + {t('corporate.transactions.tableHeaders.date')} + + + {t('corporate.transactions.tableHeaders.station')} + + + {t('corporate.transactions.tableHeaders.product')} + + + {t('corporate.transactions.tableHeaders.quantity')} + + + {t('corporate.transactions.tableHeaders.price')} + + + {t('corporate.transactions.tableHeaders.total')} + + + )} + renderRow={(transaction) => ( + + + {format( + new Date(transaction.date_create), + 'dd.MM.yyyy HH:mm', + )} + + {transaction.station} + {transaction.product_name} + + {transaction.amount} + + + {transaction.price_real} {t('corporate.currency')} + + + {transaction.sum_real} {t('corporate.currency')} + + + )} onChange={setTransactionFetchRequest} /> diff --git a/src/widgets/transactions-table.tsx b/src/widgets/transactions-table.tsx index f0c71ef..3f03147 100644 --- a/src/widgets/transactions-table.tsx +++ b/src/widgets/transactions-table.tsx @@ -5,11 +5,6 @@ import { ru } from 'date-fns/locale'; import { CalendarIcon, X } from 'lucide-react'; import { useEffect, useState } from 'react'; -import { - TransactionRequest, - TransactionResponse, -} from '@/entities/transactions/model/types'; - import TableLoadingOverlay from '@/shared/components/table-loading-overlay'; import { useTextController } from '@/shared/language/hooks/use-text-controller'; import { Button } from '@/shared/shadcn-ui/button'; @@ -24,7 +19,6 @@ import { Table, TableBody, TableCell, - TableHead, TableHeader, TableRow, } from '@/shared/shadcn-ui/table'; @@ -38,23 +32,40 @@ import { PaginationPrevious, } from './pagination'; -export interface TransactionsTableProps { - onChange: (request: TransactionRequest) => void; - isLoading: boolean; - data: TransactionResponse; +export interface TransactionRequest { + start_date?: string; + end_date?: string; + page: number; + limit: number; } -export const TransactionsTable = ({ +export interface TransactionsTableProps { + data: { + transactions: T[]; + total_pages: number; + total_records: number; + }; + isLoading: boolean; + onChange: (request: TransactionRequest) => void; + renderHeaders: () => React.ReactNode; + renderRow: (transaction: T, index: number) => React.ReactNode; + itemsPerPageOptions?: number[]; +} + +export const TransactionsTable = ({ data, isLoading, onChange, -}: TransactionsTableProps) => { + renderHeaders, + renderRow, + itemsPerPageOptions = [5, 10, 20, 50], +}: TransactionsTableProps) => { const [startDate, setStartDate] = useState( new Date(new Date().setMonth(new Date().getMonth() - 1)), ); const [endDate, setEndDate] = useState(new Date()); const [currentPage, setCurrentPage] = useState(1); - const [itemsPerPage, setItemsPerPage] = useState(10); + const [itemsPerPage, setItemsPerPage] = useState(itemsPerPageOptions[0]); const handlePageChange = (page: number) => { if (page < 1 || page > data.total_pages) return; @@ -175,57 +186,19 @@ export const TransactionsTable = ({
- - - - {t('corporate.transactions.tableHeaders.date')} - - - {t('corporate.transactions.tableHeaders.station')} - - - {t('corporate.transactions.tableHeaders.product')} - - - {t('corporate.transactions.tableHeaders.quantity')} - - - {t('corporate.transactions.tableHeaders.price')} - - - {t('corporate.transactions.tableHeaders.total')} - - - + {renderHeaders()} {data.transactions.length > 0 ? ( - data.transactions.map((transaction) => ( - - - {format(new Date(transaction.date_create), 'dd.MM.yyyy')} - - - {transaction.station || transaction.station_name} - - {transaction.product_name} - - {transaction.amount} - - - {transaction.price_real} {t('corporate.currency')} - - - {transaction.sum_real} {t('corporate.currency')} - - - )) + data.transactions.map((transaction, index) => + renderRow(transaction, index), + ) ) : ( - {t('corporate.transactions.noTransactions')} + {t('corporate.transactions.no-data')} )} @@ -286,10 +259,11 @@ export const TransactionsTable = ({ setCurrentPage(1); // Reset to first page when changing items per page }} > - - - - + {itemsPerPageOptions.map((option) => ( + + ))} diff --git a/tsconfig.json b/tsconfig.json index 045078b..fee4663 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -29,5 +29,5 @@ } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], - "exclude": ["node_modules"], + "exclude": ["node_modules"] }