Reports test

frontend_reactjs/src/pages/Reports.tsx

@@ -0,0 +1,71 @@
+import { useEffect, useState } from "react"
+import { Box, Button, Typography } from "@mui/material"
+import axiosInstance from "../http/axiosInstance"
+import DataTable from "../components/DataTable"
+
+export default function Reports() {
+    const [state, setState] = useState<any>(null)
+    const [exportData, setExportData] = useState<any>(null)
+
+    const fetch = async () => {
+        await axiosInstance.get(`/info/reports/0?to_export=true`, {
+            responseType: 'blob',
+        }).then(response => {
+            setExportData(response.data)
+
+            const url = window.URL.createObjectURL(response.data)
+            const link = document.createElement('a')
+            link.href = url
+            link.setAttribute('download', 'report.xlsx')
+            document.body.appendChild(link);
+            link.click();
+            link.remove();
+        })
+    }
+
+    const fetchBlob = async () => {
+        await axiosInstance.get(`/info/reports/0`).then(response => {
+            setState(JSON.parse(response.data))
+        })
+    }
+
+    return (
+        <>
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+                <Box>
+                    <Button onClick={() => fetchBlob()}>
+                        Получить отчет
+                    </Button>
+
+                    <Button onClick={() => fetch()}>
+                        Экспорт
+                    </Button>
+                </Box>
+
+                {state &&
+                    <DataTable
+                        checkboxSelection={false}
+                        columns={
+                            [
+                                { field: 'id', headerName: '№', width: 70 },
+                                ...Object.keys(state).map(key => ({
+                                    field: key,
+                                    headerName: key.charAt(0).toUpperCase() + key.slice(1),
+                                    width: 150
+                                }))
+                            ]
+                        }
+                        rows={
+                            [...new Set(Object.keys(state).flatMap(key => Object.keys(state[key])))].map(id => {
+                                const row: any = { id: Number(id) };
+                                Object.keys(state).forEach(key => {
+                                    row[key] = state[key][id];
+                                });
+                                return row;
+                            })
+                        } />
+                }
+            </Box>
+        </>
+    )
+}