115 lines
3.9 KiB
TypeScript
115 lines
3.9 KiB
TypeScript
'use client'
|
||
|
||
import React, { useEffect } from 'react'
|
||
import { useRouter, useSearchParams } from 'next/navigation'
|
||
import Sidebar from '../../../components/ui/Sidebar'
|
||
import useNavigationStore from '../../store/navigationStore'
|
||
import ReportsList from '../../../components/reports/ReportsList'
|
||
import ExportMenu from '../../../components/ui/ExportMenu'
|
||
import detectorsData from '../../../data/detectors.json'
|
||
import axios from 'axios'
|
||
|
||
const ReportsPage: React.FC = () => {
|
||
const router = useRouter()
|
||
const searchParams = useSearchParams()
|
||
const { currentObject, setCurrentObject } = useNavigationStore()
|
||
|
||
const urlObjectId = searchParams.get('objectId')
|
||
const urlObjectTitle = searchParams.get('objectTitle')
|
||
const objectId = currentObject.id || urlObjectId
|
||
const objectTitle = currentObject.title || urlObjectTitle
|
||
|
||
useEffect(() => {
|
||
if (urlObjectId && urlObjectTitle && (!currentObject.id || currentObject.id !== urlObjectId)) {
|
||
setCurrentObject(urlObjectId, urlObjectTitle)
|
||
}
|
||
}, [urlObjectId, urlObjectTitle, currentObject.id, setCurrentObject])
|
||
|
||
const handleBackClick = () => {
|
||
router.push('/dashboard')
|
||
}
|
||
|
||
const handleExport = async (format: 'csv' | 'pdf') => {
|
||
try {
|
||
const response = await axios.post(
|
||
`${process.env.NEXT_PUBLIC_API_URL}/account/get-reports/`,
|
||
{ report_format: format },
|
||
{
|
||
responseType: 'blob',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
}
|
||
)
|
||
|
||
const contentDisposition = response.headers['content-disposition']
|
||
const filenameMatch = contentDisposition?.match(/filename="(.+)"/)
|
||
const timestamp = new Date().toISOString().replace(/[:.]/g, '-').replace(/T/g, '_')
|
||
const filename = filenameMatch ? filenameMatch[1] : `alerts_report_${timestamp}.${format}`
|
||
|
||
const url = window.URL.createObjectURL(new Blob([response.data]))
|
||
const link = document.createElement('a')
|
||
link.href = url
|
||
link.download = filename
|
||
|
||
document.body.appendChild(link)
|
||
link.click()
|
||
|
||
document.body.removeChild(link)
|
||
window.URL.revokeObjectURL(url)
|
||
} catch (error) {
|
||
console.error('Error:', error)
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className="flex h-screen bg-[#0e111a]">
|
||
<Sidebar
|
||
activeItem={9} // Reports
|
||
/>
|
||
|
||
<div className="flex flex-1 flex-col">
|
||
<header className="border-b border-gray-700 bg-[#161824] px-6 py-4">
|
||
<div className="flex items-center gap-4">
|
||
<button
|
||
onClick={handleBackClick}
|
||
className="text-gray-400 transition-colors hover:text-white"
|
||
aria-label="Назад к дашборду"
|
||
>
|
||
<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M15 19l-7-7 7-7"
|
||
/>
|
||
</svg>
|
||
</button>
|
||
<nav className="flex items-center gap-2 text-sm">
|
||
<span className="text-gray-400">Дашборд</span>
|
||
<span className="text-gray-600">/</span>
|
||
<span className="text-white">{objectTitle || 'Объект'}</span>
|
||
<span className="text-gray-600">/</span>
|
||
<span className="text-white">Отчеты</span>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<div className="flex-1 overflow-auto p-6">
|
||
<div className="mb-6">
|
||
<div className="mb-6 flex items-center justify-between">
|
||
<h1 className="text-2xl font-semibold text-white">Отчеты по датчикам</h1>
|
||
|
||
<ExportMenu onExport={handleExport} />
|
||
</div>
|
||
|
||
<ReportsList objectId={objectId || undefined} detectorsData={detectorsData} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default ReportsPage
|