Merge pull request #11 from pieceowater-dev/dev

fix: payment filters

src/entities/dashboard/payment-data/model/interface.ts

@@ -1,6 +1,5 @@
 export interface IColumnPayments {
-  key?: number
   date: string
   post: string
-  sum: string
+  sum: number
 }

src/entities/dashboard/payment-data/payment-data.ts

@@ -1,14 +1,30 @@
 import { TableProps } from 'antd'
 import { useNotify } from 'app/providers/app'
 import { IColumnPayments } from 'entities/dashboard/payment-data/model/interface'
-import { useEffect } from 'react'
+import { IPostsResponse } from 'entities/settings/posts-table/model/interface'
+import { useEffect, useState } from 'react'
 import { getAxiosInstance } from 'shared/api/api-query/api-query'
 import { setPaymentsState } from 'shared/redux/dashboard/dashboard-slice'
 import { useAppDispatch } from 'shared/redux/store'
 
 export const usePaymentData = () => {
   const { openNotification } = useNotify()
   const dispatch = useAppDispatch()
+  const [postSelect, setPostSelect] = useState([])
+
+  const fetchPosts = async () => {
+    try {
+      const axiosInstance = await getAxiosInstance()
+      const res = await axiosInstance.get('/posts')
+      const select = res.data.items.map((item: IPostsResponse) => ({
+        value: item.id,
+        label: item.name,
+      }))
+      setPostSelect(select)
+    } catch (error) {
+      openNotification('Произошла ошибка при загрузке данных о пользователях')
+    }
+  }
 
   const fetchData = async () => {
     try {
@@ -22,6 +38,7 @@ export const usePaymentData = () => {
 
   useEffect(() => {
     fetchData()
+    fetchPosts()
   }, [])
 
   const columns: TableProps<IColumnPayments>['columns'] = [
@@ -42,5 +59,5 @@ export const usePaymentData = () => {
     },
   ]
 
-  return { fetchData, columns }
+  return { fetchData, columns, postSelect }
 }

src/pages/dashboard/dashboard.tsx

@@ -1,14 +1,41 @@
-import { Table } from 'antd'
+import { Select, Table } from 'antd'
 import { usePaymentData } from 'entities/dashboard/payment-data'
 import { useTableData } from 'entities/dashboard/table-data'
-import { FC } from 'react'
+import React, { FC } from 'react'
 
 export const Dashboard: FC = () => {
-  const { fetchData, columns } = usePaymentData()
+  const { fetchData, columns, postSelect } = usePaymentData()
   const { paymentTable, paymentTableSum, totalPaymentTable } = useTableData()
 
   return (
     <>
+      <div style={{ marginBottom: '10px', display: 'flex', gap: '10px' }}>
+        <div>
+          <div style={{ marginBottom: '5px' }}>Посты</div>
+          <Select
+            mode={'multiple'}
+            allowClear={true}
+            options={postSelect}
+            maxTagCount={1}
+            onChange={(value) => {
+              fetchData()
+            }}
+            style={{ width: 200 }}
+          />
+        </div>
+
+        <div>
+          <div style={{ marginBottom: '5px' }}>Дата</div>
+          <Select
+            options={[]}
+            style={{ width: 200 }}
+            onChange={(value) => {
+              fetchData()
+            }}
+          />
+        </div>
+      </div>
+
       <Table
         columns={columns}
         dataSource={paymentTable}