Lukas Davidovic
249a672cd7
- migrate from SQLite to PostgreSQL with Drizzle ORM - implement comprehensive AdminLayout with expandable sidebar navigation - create professional dashboard with real-time charts and metrics - add advanced monitoring, reporting, and export functionality - fix menu alignment and remove non-existent pages - eliminate duplicate headers and improve UI consistency - add Tailwind CSS v3 for professional styling - expand database schema from 6 to 15 tables - implement role-based access control and API key management - create comprehensive settings, monitoring, and system info pages
60 lines
2.0 KiB
TypeScript
60 lines
2.0 KiB
TypeScript
import { useState, useEffect } from "react"
|
|
import type { NextPage } from "next"
|
|
import Head from "next/head"
|
|
import AdminLayout from '../../components/AdminLayout'
|
|
import { KeyIcon, PlusIcon } from '@heroicons/react/24/outline'
|
|
|
|
const ApiKeys: NextPage = () => {
|
|
const [keys, setKeys] = useState([])
|
|
useEffect(() => {
|
|
fetch("/api/admin/api-keys").then(res => res.json()).then(setKeys)
|
|
}, [])
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>API kľúče - Hliadka.sk Admin</title>
|
|
</Head>
|
|
<AdminLayout title="API kľúče">
|
|
<div className="px-4 py-6 sm:px-6 lg:px-8">
|
|
<div className="sm:flex sm:items-center">
|
|
<div className="sm:flex-auto">
|
|
<p className="text-sm text-gray-700">
|
|
Správa API kľúčov pre prístup k systému
|
|
</p>
|
|
</div>
|
|
<div className="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
|
|
<button
|
|
type="button"
|
|
className="btn-primary"
|
|
>
|
|
<PlusIcon className="h-4 w-4 mr-2" />
|
|
Vytvoriť kľúč
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-8">
|
|
<div className="card p-6">
|
|
<div className="flex items-center mb-4">
|
|
<KeyIcon className="h-6 w-6 text-gray-400 mr-3" />
|
|
<h2 className="text-lg font-medium text-gray-900">Aktívne API kľúče</h2>
|
|
</div>
|
|
<div className="text-sm text-gray-600">
|
|
Celkom aktívnych kľúčov: <span className="font-medium text-gray-900">{keys.length}</span>
|
|
</div>
|
|
{keys.length === 0 && (
|
|
<p className="text-gray-500 mt-4">
|
|
Zatiaľ neboli vytvorené žiadne API kľúče. Kliknite na "Vytvoriť kľúč" pre vytvorenie nového.
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AdminLayout>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default ApiKeys
|