From 1a42dc9d4c8390776cf6cf4a8ba1f83c009de984 Mon Sep 17 00:00:00 2001
From: Boris Cherepanov <cherr_guw@mail.ru>
Date: Fri, 3 Oct 2025 01:57:47 +0300
Subject: [PATCH] feat: fetch dashboard data

---
 client/.env                              |  3 ++
 client/{src => }/.env.example            |  0
 client/{src => }/.prettierrc             |  0
 client/src/api/api.ts                    |  9 ++++
 client/src/api/certificates.ts           |  5 ++
 client/src/api/index.ts                  |  4 ++
 client/src/api/servers.ts                |  5 ++
 client/src/api/templates.ts              |  5 ++
 client/src/api/users.ts                  |  5 ++
 client/src/pages/dashboard/dashboard.tsx | 68 ++++++++++++++++++++++--
 10 files changed, 100 insertions(+), 4 deletions(-)
 create mode 100644 client/.env
 rename client/{src => }/.env.example (100%)
 rename client/{src => }/.prettierrc (100%)
 create mode 100644 client/src/api/api.ts
 create mode 100644 client/src/api/certificates.ts
 create mode 100644 client/src/api/index.ts
 create mode 100644 client/src/api/servers.ts
 create mode 100644 client/src/api/templates.ts
 create mode 100644 client/src/api/users.ts

diff --git a/client/.env b/client/.env
new file mode 100644
index 0000000..0f89983
--- /dev/null
+++ b/client/.env
@@ -0,0 +1,3 @@
+VITE_API_BASE=/api
+VITE_API_HOST=http://localhost
+VITE_API_PORT=8081
\ No newline at end of file
diff --git a/client/src/.env.example b/client/.env.example
similarity index 100%
rename from client/src/.env.example
rename to client/.env.example
diff --git a/client/src/.prettierrc b/client/.prettierrc
similarity index 100%
rename from client/src/.prettierrc
rename to client/.prettierrc
diff --git a/client/src/api/api.ts b/client/src/api/api.ts
new file mode 100644
index 0000000..8515bd9
--- /dev/null
+++ b/client/src/api/api.ts
@@ -0,0 +1,9 @@
+import axios from 'axios';
+
+const VITE_API_BASE = import.meta.env.VITE_API_BASE;
+const VITE_API_HOST = import.meta.env.VITE_API_HOST;
+const VITE_API_PORT = import.meta.env.VITE_API_PORT;
+
+export const api = axios.create({
+  baseURL: `${VITE_API_HOST}:${VITE_API_PORT}${VITE_API_BASE}`,
+});
diff --git a/client/src/api/certificates.ts b/client/src/api/certificates.ts
new file mode 100644
index 0000000..7cab77b
--- /dev/null
+++ b/client/src/api/certificates.ts
@@ -0,0 +1,5 @@
+import { api } from './api';
+
+export interface Certificate {}
+
+export const getCertificates = api.get<never, Certificate[]>('/certificates');
diff --git a/client/src/api/index.ts b/client/src/api/index.ts
new file mode 100644
index 0000000..f3e7afc
--- /dev/null
+++ b/client/src/api/index.ts
@@ -0,0 +1,4 @@
+export * from './certificates';
+export * from './servers';
+export * from './templates';
+export * from './users';
diff --git a/client/src/api/servers.ts b/client/src/api/servers.ts
new file mode 100644
index 0000000..4535e16
--- /dev/null
+++ b/client/src/api/servers.ts
@@ -0,0 +1,5 @@
+import { api } from './api';
+
+export interface Server {}
+
+export const getServers = api.get<never, Server[]>('/servers');
diff --git a/client/src/api/templates.ts b/client/src/api/templates.ts
new file mode 100644
index 0000000..3351246
--- /dev/null
+++ b/client/src/api/templates.ts
@@ -0,0 +1,5 @@
+import { api } from './api';
+
+export interface Template {}
+
+export const getTemplates = api.get<never, Template[]>('/templates');
diff --git a/client/src/api/users.ts b/client/src/api/users.ts
new file mode 100644
index 0000000..491438b
--- /dev/null
+++ b/client/src/api/users.ts
@@ -0,0 +1,5 @@
+import { api } from './api';
+
+export interface User {}
+
+export const getUsers = api.get<never, User[]>('/users');
diff --git a/client/src/pages/dashboard/dashboard.tsx b/client/src/pages/dashboard/dashboard.tsx
index becfeb0..7358ea0 100644
--- a/client/src/pages/dashboard/dashboard.tsx
+++ b/client/src/pages/dashboard/dashboard.tsx
@@ -1,21 +1,81 @@
 import type { RouteObject } from 'react-router';
+import {
+  getServers,
+  getTemplates,
+  getCertificates,
+  getUsers,
+  type Server,
+  type Template,
+  type Certificate,
+  type User,
+} from '../../api';
+import { useEffect, useState } from 'react';
+
+export const loadDashboard = async () => {
+  try {
+    const [servers, templates, certificates, users] = await Promise.all([
+      getServers.then((data) => data),
+      getTemplates.then((data) => data),
+      getCertificates.then((data) => data),
+      getUsers.then((data) => data),
+    ]);
+
+    return [servers, templates, certificates, users];
+  } catch (error) {
+    console.log(error);
+    alert('loading error');
+  }
+};
 
 export const Dashboard = () => {
+  const [servers, setServers] = useState<Server[] | undefined>(undefined);
+  const [templates, setTemplates] = useState<Template[] | undefined>(undefined);
+  const [certificates, setCertificates] = useState<Certificate[] | undefined>(
+    undefined,
+  );
+  const [users, setUsers] = useState<User[] | undefined>(undefined);
+
+  useEffect(() => {
+    loadDashboard()
+      .then((res) => {
+        if (res) {
+          const [servers, templates, certificates, users] = res;
+          setServers(servers);
+          setTemplates(templates);
+          setCertificates(certificates);
+          setUsers(users);
+        }
+      })
+      .catch((e) => {
+        console.log(e);
+      });
+  }, []);
+
   return (
     <div id="dashboard" className="tab-content active">
       <div className="section">
         <h2>Statistics</h2>
         <p>
-          Servers: <span id="serverCount">Loading...</span>
+          Servers:{' '}
+          <span id="serverCount">
+            {servers ? servers.length || 0 : 'Loading...'}
+          </span>
         </p>
         <p>
-          Templates: <span id="templateCount">Loading...</span>
+          Templates:{' '}
+          <span id="templateCount">
+            {templates ? templates.length || 0 : 'Loading...'}
+          </span>
         </p>
         <p>
-          Certificates: <span id="certCount">Loading...</span>
+          Certificates:{' '}
+          <span id="certCount">
+            {certificates ? certificates.length || 0 : 'Loading...'}
+          </span>
         </p>
         <p>
-          Users: <span id="userCount">Loading...</span>
+          Users:{' '}
+          <span id="userCount">{users ? users.length || 0 : 'Loading...'}</span>
         </p>
       </div>
     </div>