Merge pull request #12 from pieceowater-dev/dev

Dev

package.json

@@ -16,10 +16,13 @@
     "@tanstack/react-query": "^5.29.2",
     "antd": "^5.16.1",
     "axios": "^1.6.8",
+    "chart.js": "^4.4.2",
+    "dayjs": "^1.11.11",
     "dotenv": "^16.4.5",
     "i18next": "^23.10.1",
     "js-cookie": "^3.0.5",
     "react": "^18.2.0",
+    "react-chartjs-2": "^5.2.0",
     "react-cookie": "^7.1.4",
     "react-dom": "^18.2.0",
     "react-redux": "^9.1.2",

src/entities/dashboard/bar-chart/bar-chart.ts

@@ -0,0 +1,40 @@
+import { useNotify } from 'app/providers/app'
+import { useEffect } from 'react'
+import { getAxiosInstance } from 'shared/api/api-query/api-query'
+import { useAppSelector } from 'shared/redux/store'
+
+export const useBarChart = () => {
+  const { openNotification } = useNotify()
+  const dateType = useAppSelector((state) => state.dashboard.typeDate)
+  const { start, end } = useAppSelector((state) => state.dashboard.selectedDates)
+  const posts = useAppSelector((state) => state.dashboard.posts)
+
+  const fetchData = async () => {
+    try {
+      const axiosInstance = await getAxiosInstance()
+      const res = await axiosInstance.get('/payments/pie-posts', {
+        params: { dateType: dateType, start: start, end: end, posts: posts },
+      })
+      console.log(res.data)
+    } catch (error) {
+      openNotification('Произошла ошибка при загрузке данных о платежах')
+    }
+  }
+
+  useEffect(() => {
+    fetchData()
+  }, [dateType, start, end, posts])
+
+  const bar = {
+    labels: ['Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота', 'Воскресенье'],
+    datasets: [
+      {
+        label: 'Общая сумма',
+        data: [12, 19, 3, 5, 2, 3, 7],
+        backgroundColor: 'rgb(110, 189, 116)',
+      },
+    ],
+  }
+
+  return { bar }
+}

src/entities/dashboard/bar-chart/index.ts

@@ -0,0 +1,3 @@
+import { useBarChart } from 'entities/dashboard/bar-chart/bar-chart'
+
+export { useBarChart }

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

@@ -4,7 +4,7 @@ import { IColumnPayments } from 'entities/dashboard/payment-data/model/interface
 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 { setPaymentsPostsData, setPaymentsState } from 'shared/redux/dashboard/dashboard-slice'
 import { useAppDispatch } from 'shared/redux/store'
 
 export const usePaymentData = () => {
@@ -21,6 +21,7 @@ export const usePaymentData = () => {
         label: item.name,
       }))
       setPostSelect(select)
+      dispatch(setPaymentsPostsData(select))
     } catch (error) {
       openNotification('Произошла ошибка при загрузке данных о пользователях')
     }

src/entities/dashboard/pie-chart/index.ts

@@ -0,0 +1,3 @@
+import { usePieChart } from 'entities/dashboard/pie-chart/pie-chart'
+
+export { usePieChart }

src/entities/dashboard/pie-chart/pie-chart.ts

@@ -0,0 +1,39 @@
+import { useNotify } from 'app/providers/app'
+import { useEffect } from 'react'
+import { getAxiosInstance } from 'shared/api/api-query/api-query'
+import { useAppSelector } from 'shared/redux/store'
+
+export const usePieChart = () => {
+  const { openNotification } = useNotify()
+  const dateType = useAppSelector((state) => state.dashboard.typeDate)
+  const { start, end } = useAppSelector((state) => state.dashboard.selectedDates)
+  const posts = useAppSelector((state) => state.dashboard.posts)
+
+  const fetchData = async () => {
+    try {
+      const axiosInstance = await getAxiosInstance()
+      const res = await axiosInstance.get('/payments/pie-type', {
+        params: { dateType: dateType, start: start, end: end, posts: posts },
+      })
+      console.log(res.data)
+    } catch (error) {
+      openNotification('Произошла ошибка при загрузке данных о платежах')
+    }
+  }
+
+  useEffect(() => {
+    fetchData()
+  }, [dateType, start, end, posts])
+
+  const pie = {
+    labels: ['Наличные', 'Каспи'],
+    datasets: [
+      {
+        data: [60, 40],
+        backgroundColor: ['rgb(110, 189, 116)', 'rgba(218,18,18,0.8)'],
+      },
+    ],
+  }
+
+  return { pie }
+}

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

@@ -19,7 +19,7 @@ export const useTableData = () => {
       setPaymentTableSum((prevState) => prevState + transformPrice(row.sum))
       return {
         key: row.id,
-        date: unixDate(row.date * 1000, 'DMYHM'),
+        date: row.date ? unixDate(row.date * 1000, 'DMYHM') : '',
         post: row.device.name,
         sum: transformPrice(row.sum),
       }

src/pages/dashboard/dashboard.tsx

@@ -1,6 +1,8 @@
-import { Select, Table } from 'antd'
 import { usePaymentData } from 'entities/dashboard/payment-data'
 import { useTableData } from 'entities/dashboard/table-data'
+import { DashboardCharts } from 'pages/dashboard/ui/dashboard-charts'
+import { DashboardFilters } from 'pages/dashboard/ui/dashboard-filters'
+import { DashboardPayment } from 'pages/dashboard/ui/dashboard-payment'
 import React, { FC } from 'react'
 
 export const Dashboard: FC = () => {
@@ -9,46 +11,16 @@ export const Dashboard: FC = () => {
 
   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>
+      <DashboardFilters refetch={fetchData} options={postSelect} />
 
-        <div>
-          <div style={{ marginBottom: '5px' }}>Дата</div>
-          <Select
-            options={[]}
-            style={{ width: 200 }}
-            onChange={(value) => {
-              fetchData()
-            }}
-          />
-        </div>
-      </div>
+      <DashboardCharts />
 
-      <Table
+      <DashboardPayment
+        total={totalPaymentTable}
+        sum={paymentTableSum}
         columns={columns}
-        dataSource={paymentTable}
-        bordered={true}
-        showHeader={true}
-        tableLayout={'fixed'}
-        pagination={{
-          total: totalPaymentTable,
-        }}
+        rows={paymentTable}
       />
-      <div style={{ display: 'flex', alignItems: 'end', justifyContent: 'end' }}>
-        {'Итого: ' + paymentTableSum}
-      </div>
     </>
   )
 }

src/pages/dashboard/ui/dashboard-charts/dashboard-charts.tsx

@@ -0,0 +1,68 @@
+import {
+  ArcElement,
+  BarElement,
+  CategoryScale,
+  Chart as ChartJS,
+  Legend,
+  LinearScale,
+  Tooltip,
+} from 'chart.js'
+import { useBarChart } from 'entities/dashboard/bar-chart'
+import { usePieChart } from 'entities/dashboard/pie-chart'
+import { FC } from 'react'
+import { Bar, Pie } from 'react-chartjs-2'
+import { useMediaQuery } from 'react-responsive'
+import { useAppSelector } from 'shared/redux/store'
+import { PostCard } from 'shared/ui/post-card'
+
+ChartJS.register(ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement)
+
+export const DashboardCharts: FC = () => {
+  const isMobile = useMediaQuery({ query: '(max-width: 768px )' })
+  const { pie } = usePieChart()
+  const { bar } = useBarChart()
+  const posts: { label: string; value: number }[] = useAppSelector(
+    (state) => state.dashboard.postsData,
+  )
+
+  return (
+    <>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginBottom: 20,
+          flexDirection: isMobile ? 'column' : 'row',
+          gap: isMobile ? 20 : 0,
+        }}
+      >
+        <div style={{ width: isMobile ? '100%' : '50%', height: isMobile ? 'fit-content' : 300 }}>
+          <Pie data={pie} />
+        </div>
+
+        <div style={{ width: isMobile ? '100%' : '50%', height: isMobile ? 'fit-content' : 300 }}>
+          <Bar data={bar} />
+        </div>
+      </div>
+
+      <div
+        style={{
+          height: 100,
+          background: '#fafafa',
+          padding: '1rem',
+          marginBottom: 20,
+          borderRadius: 8,
+          overflow: 'auto',
+          display: 'flex',
+          gap: '20px',
+          alignItems: 'center',
+        }}
+      >
+        {posts.map((item) => (
+          <PostCard key={item.value} value={item.value} name={item.label} />
+        ))}
+      </div>
+    </>
+  )
+}

src/pages/dashboard/ui/dashboard-charts/index.ts

@@ -0,0 +1,3 @@
+import { DashboardCharts } from 'pages/dashboard/ui/dashboard-charts/dashboard-charts'
+
+export { DashboardCharts }

src/pages/dashboard/ui/dashboard-filters/dashboard-filters.tsx

@@ -0,0 +1,68 @@
+import { DatePicker, Select } from 'antd'
+import { IDashboardProps } from 'pages/dashboard/ui/dashboard-filters/model/interface'
+import React, { FC } from 'react'
+import { useMediaQuery } from 'react-responsive'
+import { dateFilter } from 'shared/lib/constants'
+import {
+  setPaymentsPost,
+  setPaymentsSelectedDates,
+  setPaymentsTypeDate,
+} from 'shared/redux/dashboard/dashboard-slice'
+import { useAppDispatch, useAppSelector } from 'shared/redux/store'
+
+export const DashboardFilters: FC<IDashboardProps> = ({ refetch, options }) => {
+  const isMobile = useMediaQuery({ query: '(max-width: 768px )' })
+  const dispatch = useAppDispatch()
+  const type = useAppSelector((state) => state.dashboard.typeDate)
+
+  return (
+    <div
+      style={{
+        marginBottom: '10px',
+        display: 'flex',
+        gap: '10px',
+        flexDirection: isMobile ? 'column' : 'row',
+      }}
+    >
+      <div>
+        <div style={{ marginBottom: '5px' }}>Посты</div>
+        <Select
+          mode={'multiple'}
+          allowClear={true}
+          options={options}
+          maxTagCount={1}
+          onChange={(value) => {
+            dispatch(setPaymentsPost(value))
+            refetch()
+          }}
+          style={{ width: isMobile ? '100%' : 200 }}
+        />
+      </div>
+
+      <div>
+        <div style={{ marginBottom: '5px' }}>Дата</div>
+        <Select
+          defaultValue={1}
+          options={dateFilter}
+          style={{ width: isMobile ? '100%' : 200, marginRight: 10 }}
+          onChange={(value: number) => {
+            if (value === 6)
+              dispatch(setPaymentsSelectedDates({ start: undefined, end: undefined }))
+
+            dispatch(setPaymentsTypeDate(value))
+            refetch()
+          }}
+        />
+        {type === 6 && (
+          <DatePicker.RangePicker
+            onChange={(date) => {
+              dispatch(
+                setPaymentsSelectedDates({ start: date?.[0]?.toDate(), end: date?.[1]?.toDate() }),
+              )
+            }}
+          />
+        )}
+      </div>
+    </div>
+  )
+}

src/pages/dashboard/ui/dashboard-filters/index.ts

@@ -0,0 +1,3 @@
+import { DashboardFilters } from 'pages/dashboard/ui/dashboard-filters/dashboard-filters'
+
+export { DashboardFilters }

src/pages/dashboard/ui/dashboard-filters/model/interface.ts

@@ -0,0 +1,4 @@
+export interface IDashboardProps {
+  refetch: () => void
+  options: { label: string; value: number }[]
+}

src/pages/dashboard/ui/dashboard-payment/dashboard-payment.tsx

@@ -0,0 +1,23 @@
+import { Table } from 'antd'
+import { IDashboardPaymentProps } from 'pages/dashboard/ui/dashboard-payment/model/interface'
+import React, { FC } from 'react'
+
+export const DashboardPayment: FC<IDashboardPaymentProps> = ({ total, sum, columns, rows }) => {
+  return (
+    <>
+      <Table
+        columns={columns}
+        dataSource={rows}
+        bordered={true}
+        showHeader={true}
+        tableLayout={'fixed'}
+        pagination={{
+          total: total,
+        }}
+      />
+      <div style={{ display: 'flex', alignItems: 'end', justifyContent: 'end' }}>
+        {'Итого: ' + sum}
+      </div>
+    </>
+  )
+}

src/pages/dashboard/ui/dashboard-payment/index.ts

@@ -0,0 +1,3 @@
+import { DashboardPayment } from 'pages/dashboard/ui/dashboard-payment/dashboard-payment'
+
+export { DashboardPayment }

src/pages/dashboard/ui/dashboard-payment/model/interface.ts

@@ -0,0 +1,10 @@
+import { ColumnsType } from 'antd/es/table'
+import { IColumnPayments } from 'entities/dashboard/payment-data/model/interface'
+import { ITablePaymentsState } from 'entities/dashboard/table-data/model/interface'
+
+export interface IDashboardPaymentProps {
+  total: number
+  sum: number
+  rows: ITablePaymentsState[]
+  columns: ColumnsType<IColumnPayments>
+}

src/shared/lib/constants/index.ts

@@ -0,0 +1,9 @@
+export const dateFilter = [
+  { label: 'За все время', value: 0 },
+  { label: 'Сегодня', value: 1 },
+  { label: 'Вчера', value: 2 },
+  { label: 'Эта неделя', value: 3 },
+  { label: 'Этот месяц', value: 4 },
+  { label: 'Прошлая неделя', value: 5 },
+  { label: 'Выбрать даты', value: 6 },
+]