create-fullstack-boilerplate 2.1.11 → 2.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +60 -20
- package/template/Frontend/package-lock.json +421 -63
- package/template/Frontend/package.json +2 -1
- package/template/Frontend/src/App.jsx +2 -0
- package/template/Frontend/src/config/routes.js +9 -1
- package/template/Frontend/src/pages/Architecture.jsx +137 -0
- package/template/Frontend/src/pages/Dashboard.jsx +503 -116
|
@@ -22,6 +22,7 @@
|
|
|
22
22
|
"react-is": "^19.1.1",
|
|
23
23
|
"react-router-dom": "^7.9.2",
|
|
24
24
|
"react-spinners": "^0.17.0",
|
|
25
|
+
"reactflow": "^11.11.4",
|
|
25
26
|
"recharts": "^3.2.1",
|
|
26
27
|
"tailwindcss": "^4.1.13"
|
|
27
28
|
},
|
|
@@ -36,4 +37,4 @@
|
|
|
36
37
|
"globals": "^16.4.0",
|
|
37
38
|
"vite": "^7.1.7"
|
|
38
39
|
}
|
|
39
|
-
}
|
|
40
|
+
}
|
|
@@ -7,6 +7,7 @@ import ProtectedRoute from './components/ProtectedRoute';
|
|
|
7
7
|
import Login from './pages/Login';
|
|
8
8
|
import Settings from './pages/Settings';
|
|
9
9
|
import Dashboard from './pages/Dashboard';
|
|
10
|
+
import Architecture from './pages/Architecture';
|
|
10
11
|
import NotFound from './pages/NotFound';
|
|
11
12
|
|
|
12
13
|
// Reusable wrapper component for protected routes with layout
|
|
@@ -44,6 +45,7 @@ const AppContent = () => {
|
|
|
44
45
|
{/* Protected routes */}
|
|
45
46
|
<Route path="/" element={<Navigate to="/dashboard" replace />} />
|
|
46
47
|
<Route path="/dashboard" element={<ProtectedLayout component={Dashboard} />} />
|
|
48
|
+
<Route path="/architecture" element={<ProtectedLayout component={Architecture} />} />
|
|
47
49
|
<Route path="/settings" element={<ProtectedLayout component={Settings} />} />
|
|
48
50
|
|
|
49
51
|
{/* 404 */}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
|
|
2
2
|
import {
|
|
3
3
|
Network,
|
|
4
|
-
Settings
|
|
4
|
+
Settings,
|
|
5
|
+
Boxes
|
|
5
6
|
} from 'lucide-react';
|
|
6
7
|
|
|
7
8
|
export const sidebarRoutes = [
|
|
@@ -12,6 +13,13 @@ export const sidebarRoutes = [
|
|
|
12
13
|
icon: Network,
|
|
13
14
|
category: 'monitoring'
|
|
14
15
|
},
|
|
16
|
+
{
|
|
17
|
+
id: 'architecture',
|
|
18
|
+
name: 'Architecture',
|
|
19
|
+
path: '/architecture',
|
|
20
|
+
icon: Boxes,
|
|
21
|
+
category: 'monitoring'
|
|
22
|
+
},
|
|
15
23
|
{
|
|
16
24
|
id: 'settings',
|
|
17
25
|
name: 'Settings',
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
import { useState, useEffect } from 'react';
|
|
2
|
+
import { useTheme } from '../contexts/ThemeContext';
|
|
3
|
+
import { axiosDashboardClient } from '../config/axiosClient';
|
|
4
|
+
import SpinningLoader from '../components/Loader';
|
|
5
|
+
|
|
6
|
+
const Architecture = () => {
|
|
7
|
+
const { isDark } = useTheme();
|
|
8
|
+
const [sections, setSections] = useState([]);
|
|
9
|
+
const [loading, setLoading] = useState(false);
|
|
10
|
+
const [error, setError] = useState(null);
|
|
11
|
+
|
|
12
|
+
const fetchDashboardInfo = async () => {
|
|
13
|
+
setLoading(true);
|
|
14
|
+
try {
|
|
15
|
+
const response = await axiosDashboardClient.get('getDashboardHealth');
|
|
16
|
+
setSections(response.data);
|
|
17
|
+
} catch (err) {
|
|
18
|
+
setError(err.message);
|
|
19
|
+
} finally {
|
|
20
|
+
setLoading(false);
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
useEffect(() => {
|
|
25
|
+
fetchDashboardInfo();
|
|
26
|
+
}, []);
|
|
27
|
+
|
|
28
|
+
return (
|
|
29
|
+
<div className={`min-h-screen transition-colors duration-300
|
|
30
|
+
${isDark ? "bg-[#0a0a0a]" : "bg-[#fafafa]"}`}>
|
|
31
|
+
|
|
32
|
+
{/* Content Container */}
|
|
33
|
+
<div className="max-w-6xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
|
|
34
|
+
|
|
35
|
+
{/* Header */}
|
|
36
|
+
<div className="mb-12">
|
|
37
|
+
<h1 className={`text-4xl sm:text-5xl font-semibold mb-3 tracking-tight
|
|
38
|
+
${isDark ? "text-white" : "text-gray-900"}`}
|
|
39
|
+
style={{ fontFamily: "'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif" }}>
|
|
40
|
+
System Architecture
|
|
41
|
+
</h1>
|
|
42
|
+
<p className={`text-lg ${isDark ? "text-gray-400" : "text-gray-600"}`}>
|
|
43
|
+
System architecture and configuration details
|
|
44
|
+
</p>
|
|
45
|
+
</div>
|
|
46
|
+
|
|
47
|
+
{/* Loading State */}
|
|
48
|
+
{loading && (
|
|
49
|
+
<div className="flex justify-center items-center py-20">
|
|
50
|
+
<SpinningLoader size={50} />
|
|
51
|
+
</div>
|
|
52
|
+
)}
|
|
53
|
+
|
|
54
|
+
{/* Error State */}
|
|
55
|
+
{error && (
|
|
56
|
+
<div className={`p-4 rounded-xl border ${isDark
|
|
57
|
+
? "bg-red-900/20 border-red-800/50 text-red-400"
|
|
58
|
+
: "bg-red-50 border-red-200 text-red-700"}`}>
|
|
59
|
+
<p className="font-medium">Error: {error}</p>
|
|
60
|
+
</div>
|
|
61
|
+
)}
|
|
62
|
+
|
|
63
|
+
{/* Dashboard Cards */}
|
|
64
|
+
{!loading && !error && (
|
|
65
|
+
<div className="space-y-6">
|
|
66
|
+
{sections.map((section, index) => (
|
|
67
|
+
<div
|
|
68
|
+
key={index}
|
|
69
|
+
className={`group rounded-2xl transition-all duration-300 overflow-hidden
|
|
70
|
+
${isDark
|
|
71
|
+
? "bg-[#141414] border border-gray-800/50 hover:border-gray-700/80"
|
|
72
|
+
: "bg-white border border-gray-200 hover:border-gray-300 shadow-sm hover:shadow-md"}`}
|
|
73
|
+
style={{
|
|
74
|
+
animation: `fadeInUp 0.5s ease-out ${index * 0.1}s both`
|
|
75
|
+
}}>
|
|
76
|
+
|
|
77
|
+
{/* Card Header */}
|
|
78
|
+
<div className={`px-8 py-6 border-b ${isDark ? "border-gray-800/50" : "border-gray-100"}`}>
|
|
79
|
+
<div className="flex items-center gap-4">
|
|
80
|
+
<div className={`flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-xl text-2xl
|
|
81
|
+
${isDark ? "bg-gray-800/80" : "bg-gray-100"}`}>
|
|
82
|
+
{section.icon}
|
|
83
|
+
</div>
|
|
84
|
+
<h2 className={`text-xl font-semibold ${isDark ? "text-gray-100" : "text-gray-900"}`}
|
|
85
|
+
style={{ fontFamily: "'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif" }}>
|
|
86
|
+
{section.title}
|
|
87
|
+
</h2>
|
|
88
|
+
</div>
|
|
89
|
+
</div>
|
|
90
|
+
|
|
91
|
+
{/* Card Content */}
|
|
92
|
+
<div className="px-8 py-6">
|
|
93
|
+
<ul className="space-y-4">
|
|
94
|
+
{section.items.map((item, i) => (
|
|
95
|
+
<li
|
|
96
|
+
key={i}
|
|
97
|
+
className="flex items-start gap-3 group/item">
|
|
98
|
+
<div className={`flex-shrink-0 w-1.5 h-1.5 rounded-full mt-2.5 transition-all duration-200
|
|
99
|
+
${isDark
|
|
100
|
+
? "bg-gray-600 group-hover/item:bg-blue-500"
|
|
101
|
+
: "bg-gray-400 group-hover/item:bg-blue-600"}`}>
|
|
102
|
+
</div>
|
|
103
|
+
<span className={`text-[15px] leading-relaxed transition-colors duration-200
|
|
104
|
+
${isDark
|
|
105
|
+
? "text-gray-400 group-hover/item:text-gray-300"
|
|
106
|
+
: "text-gray-600 group-hover/item:text-gray-900"}`}
|
|
107
|
+
style={{ fontFamily: "'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif" }}>
|
|
108
|
+
{item}
|
|
109
|
+
</span>
|
|
110
|
+
</li>
|
|
111
|
+
))}
|
|
112
|
+
</ul>
|
|
113
|
+
</div>
|
|
114
|
+
</div>
|
|
115
|
+
))}
|
|
116
|
+
</div>
|
|
117
|
+
)}
|
|
118
|
+
</div>
|
|
119
|
+
|
|
120
|
+
{/* Minimal Animations */}
|
|
121
|
+
<style>{`
|
|
122
|
+
@keyframes fadeInUp {
|
|
123
|
+
from {
|
|
124
|
+
opacity: 0;
|
|
125
|
+
transform: translateY(20px);
|
|
126
|
+
}
|
|
127
|
+
to {
|
|
128
|
+
opacity: 1;
|
|
129
|
+
transform: translateY(0);
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
`}</style>
|
|
133
|
+
</div>
|
|
134
|
+
);
|
|
135
|
+
};
|
|
136
|
+
|
|
137
|
+
export default Architecture;
|