11"use client" ;
22import Footer from "@/components/footer" ;
3+ import PrivateRoute from "@/components/PrivateRoute" ;
34import "../../style/page.css" ;
45import Header from "../../components/header" ;
56import Sidebar , { MenuItem } from "../../components/sidebar" ;
67import { useState } from "react" ;
7- import { FaChartBar , FaCog , FaTachometerAlt , FaUsers } from "react-icons/fa" ;
8+ import { FaChartBar , FaCog , FaEdit , FaTachometerAlt , FaTrash , FaUsers } from "react-icons/fa" ;
9+
810
911export default function AdminDashboardPage ( ) {
1012 const [ selectedMenu , setSelectedMenu ] = useState ( "overview" ) ;
@@ -18,31 +20,268 @@ export default function AdminDashboardPage() {
1820
1921 let content ;
2022 if ( selectedMenu === "overview" ) {
21- content = < p > Overview Content</ p > ;
23+ content = (
24+ < div className = "space-y-6" >
25+ < h1 className = "text-2xl font-bold text-gray-800 dark:text-white" > Admin Dashboard Overview</ h1 >
26+ < div className = "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6" >
27+ < div className = "bg-blue-100 dark:bg-blue-900/50 p-6 rounded-xl shadow" >
28+ < h3 className = "text-lg font-semibold text-blue-800 dark:text-blue-200" > Total Users</ h3 >
29+ < p className = "text-3xl font-bold mt-2" > 1,248</ p >
30+ < p className = "text-sm text-blue-600 dark:text-blue-300 mt-1" > +12% from last month</ p >
31+ </ div >
32+ < div className = "bg-green-100 dark:bg-green-900/50 p-6 rounded-xl shadow" >
33+ < h3 className = "text-lg font-semibold text-green-800 dark:text-green-200" > Active Sessions</ h3 >
34+ < p className = "text-3xl font-bold mt-2" > 342</ p >
35+ < p className = "text-sm text-green-600 dark:text-green-300 mt-1" > +5% from last hour</ p >
36+ </ div >
37+ < div className = "bg-yellow-100 dark:bg-yellow-900/50 p-6 rounded-xl shadow" >
38+ < h3 className = "text-lg font-semibold text-yellow-800 dark:text-yellow-200" > Pending Requests</ h3 >
39+ < p className = "text-3xl font-bold mt-2" > 24</ p >
40+ < p className = "text-sm text-yellow-600 dark:text-yellow-300 mt-1" > 3 require immediate attention</ p >
41+ </ div >
42+ < div className = "bg-purple-100 dark:bg-purple-900/50 p-6 rounded-xl shadow" >
43+ < h3 className = "text-lg font-semibold text-purple-800 dark:text-purple-200" > System Status</ h3 >
44+ < p className = "text-3xl font-bold mt-2" > Operational</ p >
45+ < p className = "text-sm text-purple-600 dark:text-purple-300 mt-1" > All systems running smoothly</ p >
46+ </ div >
47+ </ div >
48+ < div className = "mt-8" >
49+ < h2 className = "text-xl font-semibold text-gray-800 dark:text-white mb-4" > Quick Actions</ h2 >
50+ < div className = "flex flex-wrap gap-4" >
51+ < button className = "bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition" >
52+ Add New User
53+ </ button >
54+ < button className = "bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg transition" >
55+ Generate Report
56+ </ button >
57+ < button className = "bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded-lg transition" >
58+ System Settings
59+ </ button >
60+ </ div >
61+ </ div >
62+ </ div >
63+ ) ;
2264 } else if ( selectedMenu === "users" ) {
23- content = < p > Users Content</ p > ;
65+ content = (
66+ < div className = "space-y-6" >
67+ < div className = "flex flex-col md:flex-row justify-between items-start md:items-center gap-4" >
68+ < h1 className = "text-2xl font-bold text-gray-800 dark:text-white" > User Management</ h1 >
69+ < div className = "flex flex-col sm:flex-row gap-3 w-full md:w-auto" >
70+ < div className = "relative" >
71+ < input
72+ type = "text"
73+ placeholder = "Search users..."
74+ className = "w-full sm:w-64 px-4 py-2 border border-gray-300 dark:border-dark3 rounded-lg bg-white dark:bg-dark3/20 focus:outline-none focus:ring-2 focus:ring-blue-500"
75+ />
76+ </ div >
77+ < button className = "bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition whitespace-nowrap" >
78+ Add New User
79+ </ button >
80+ </ div >
81+ </ div >
82+ < div className = "bg-white dark:bg-dark3/40 rounded-xl shadow overflow-hidden" >
83+ < table className = "w-full" >
84+ < thead className = "bg-gray-100 dark:bg-dark3/60" >
85+ < tr >
86+ < th className = "py-3 px-4 text-left" > User</ th >
87+ < th className = "py-3 px-4 text-left" > Role</ th >
88+ < th className = "py-3 px-4 text-left" > Email</ th >
89+ < th className = "py-3 px-4 text-left" > Last login</ th >
90+ < th className = "py-3 px-4 text-left" > Actions</ th >
91+ </ tr >
92+ </ thead >
93+ < tbody >
94+ < tr className = "border-b border-gray-200 dark:border-dark3/30" >
95+ < td className = "py-3 px-4" > John Doe</ td >
96+ < td className = "py-3 px-4" > Administrator</ td >
97+ < td className = "py-3 px-4" >
98+ < span className = "bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded" > john12@gmail.com</ span >
99+ </ td >
100+ < td className = "py-3 px-4" > 2023-05-15 14:30</ td >
101+ < td className = "py-3 px-4" >
102+ < button className = "text-blue-500 hover:text-blue-700 mr-2 p-1 rounded-full hover:bg-blue-100 dark:hover:bg-blue-900/30" >
103+ < FaEdit />
104+ </ button >
105+ < button className = "text-red-500 hover:text-red-700 p-1 rounded-full hover:bg-red-100 dark:hover:bg-red-900/30" >
106+ < FaTrash />
107+ </ button >
108+ </ td >
109+ </ tr >
110+ < tr className = "border-b border-gray-200 dark:border-dark3/30" >
111+ < td className = "py-3 px-4" > Jane Smith</ td >
112+ < td className = "py-3 px-4" > Editor</ td >
113+ < td className = "py-3 px-4" >
114+ < span className = "bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded" > smith9@gmail.com</ span >
115+ </ td >
116+ < td className = "py-3 px-4" > 2023-05-14 09:15</ td >
117+ < td className = "py-3 px-4" >
118+ < button className = "text-blue-500 hover:text-blue-700 mr-2 p-1 rounded-full hover:bg-blue-100 dark:hover:bg-blue-900/30" >
119+ < FaEdit />
120+ </ button >
121+ < button className = "text-red-500 hover:text-red-700 p-1 rounded-full hover:bg-red-100 dark:hover:bg-red-900/30" >
122+ < FaTrash />
123+ </ button >
124+ </ td >
125+ </ tr >
126+ < tr >
127+ < td className = "py-3 px-4" > Robert Johnson</ td >
128+ < td className = "py-3 px-4" > Viewer</ td >
129+ < td className = "py-3 px-4" >
130+ < span className = "bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded" > rbjohn@gmail.com</ span >
131+ </ td >
132+ < td className = "py-3 px-4" > 2023-05-10 16:45</ td >
133+ < td className = "py-3 px-4" >
134+ < button className = "text-blue-500 hover:text-blue-700 mr-2 p-1 rounded-full hover:bg-blue-100 dark:hover:bg-blue-900/30" >
135+ < FaEdit />
136+ </ button >
137+
138+ < button className = "text-red-500 hover:text-red-700 p-1 rounded-full hover:bg-red-100 dark:hover:bg-red-900/30" >
139+ < FaTrash />
140+ </ button >
141+ </ td >
142+ </ tr >
143+ </ tbody >
144+ </ table >
145+ </ div >
146+ </ div >
147+ ) ;
24148 } else if ( selectedMenu === "analytics" ) {
25- content = < p > Analytics Content</ p > ;
149+ content = (
150+ < div className = "space-y-6" >
151+ < h1 className = "text-2xl font-bold text-gray-800 dark:text-white" > Analytics Dashboard</ h1 >
152+ < div className = "grid grid-cols-1 lg:grid-cols-2 gap-6" >
153+ < div className = "bg-white dark:bg-dark3/40 p-6 rounded-xl shadow" >
154+ < h2 className = "text-lg font-semibold mb-4" > User Activity</ h2 >
155+ < div className = "h-64 flex items-center justify-center bg-gray-100 dark:bg-dark3/20 rounded-lg" >
156+ < p className = "text-gray-500 dark:text-gray-400" > User Activity Chart</ p >
157+ </ div >
158+ </ div >
159+ < div className = "bg-white dark:bg-dark3/40 p-6 rounded-xl shadow" >
160+ < h2 className = "text-lg font-semibold mb-4" > System Performance</ h2 >
161+ < div className = "h-64 flex items-center justify-center bg-gray-100 dark:bg-dark3/20 rounded-lg" >
162+ < p className = "text-gray-500 dark:text-gray-400" > Performance Metrics Chart</ p >
163+ </ div >
164+ </ div >
165+ </ div >
166+ < div className = "bg-white dark:bg-dark3/40 p-6 rounded-xl shadow" >
167+ < h2 className = "text-lg font-semibold mb-4" > Recent Activity</ h2 >
168+ < ul className = "space-y-3" >
169+ < li className = "flex justify-between border-b border-gray-200 dark:border-dark3/30 pb-2" >
170+ < span > New user registered</ span >
171+ < span className = "text-gray-500 dark:text-gray-400" > 2 hours ago</ span >
172+ </ li >
173+ < li className = "flex justify-between border-b border-gray-200 dark:border-dark3/30 pb-2" >
174+ < span > Report generated</ span >
175+ < span className = "text-gray-500 dark:text-gray-400" > 5 hours ago</ span >
176+ </ li >
177+ < li className = "flex justify-between border-b border-gray-200 dark:border-dark3/30 pb-2" >
178+ < span > Settings updated</ span >
179+ < span className = "text-gray-500 dark:text-gray-400" > 1 day ago</ span >
180+ </ li >
181+ < li className = "flex justify-between pb-2" >
182+ < span > Security scan completed</ span >
183+ < span className = "text-gray-500 dark:text-gray-400" > 2 days ago</ span >
184+ </ li >
185+ </ ul >
186+ </ div >
187+ </ div >
188+ ) ;
26189 } else if ( selectedMenu === "settings" ) {
27- content = < p > Settings Content</ p > ;
190+ content = (
191+ < div className = "space-y-6" >
192+ < h1 className = "text-2xl font-bold text-gray-800 dark:text-white" > System Settings</ h1 >
193+ < div className = "bg-white dark:bg-dark3/40 rounded-xl shadow overflow-hidden" >
194+ < div className = "p-6" >
195+ < h2 className = "text-lg font-semibold mb-4" > General Settings</ h2 >
196+ < div className = "space-y-4" >
197+ < div >
198+ < label className = "block text-gray-700 dark:text-gray-300 mb-2" > Site Name</ label >
199+ < input
200+ type = "text"
201+ defaultValue = "Admin Dashboard"
202+ className = "w-full p-2 border border-gray-300 dark:border-dark3 rounded bg-white dark:bg-dark3/20"
203+ />
204+ </ div >
205+ < div >
206+ < label className = "block text-gray-700 dark:text-gray-300 mb-2" > Admin Email</ label >
207+ < input
208+ type = "email"
209+ defaultValue = "admin@example.com"
210+ className = "w-full p-2 border border-gray-300 dark:border-dark3 rounded bg-white dark:bg-dark3/20"
211+ />
212+ </ div >
213+ < div >
214+ < label className = "block text-gray-700 dark:text-gray-300 mb-2" > Maintenance Mode</ label >
215+ < div className = "flex items-center" >
216+ < input
217+ type = "checkbox"
218+ id = "maintenance"
219+ className = "mr-2"
220+ />
221+ < label htmlFor = "maintenance" className = "text-gray-700 dark:text-gray-300" >
222+ Enable maintenance mode
223+ </ label >
224+ </ div >
225+ </ div >
226+ </ div >
227+ </ div >
228+ < div className = "p-6 border-t border-gray-200 dark:border-dark3/30" >
229+ < h2 className = "text-lg font-semibold mb-4" > Security Settings</ h2 >
230+ < div className = "space-y-4" >
231+ < div >
232+ < label className = "block text-gray-700 dark:text-gray-300 mb-2" > Session Timeout (minutes)</ label >
233+ < input
234+ type = "number"
235+ defaultValue = "30"
236+ className = "w-full p-2 border border-gray-300 dark:border-dark3 rounded bg-white dark:bg-dark3/20"
237+ />
238+ </ div >
239+ < div >
240+ < label className = "block text-gray-700 dark:text-gray-300 mb-2" > Two-Factor Authentication</ label >
241+ < div className = "flex items-center" >
242+ < input
243+ type = "checkbox"
244+ id = "2fa"
245+ defaultChecked
246+ className = "mr-2"
247+ />
248+ < label htmlFor = "2fa" className = "text-gray-700 dark:text-gray-300" >
249+ Require 2FA for all admin users
250+ </ label >
251+ </ div >
252+ </ div >
253+ </ div >
254+ </ div >
255+ < div className = "p-6 border-t border-gray-200 dark:border-dark3/30" >
256+ < button className = "bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition" >
257+ Save Settings
258+ </ button >
259+ </ div >
260+ </ div >
261+ </ div >
262+ ) ;
28263 }
29264
30265 return (
31- < div className = "pagebackground min-h-screen flex flex-col" >
32- < Header />
33- < div className = "flex flex-1 flex-col md:flex-row w-full" >
34- < Sidebar
35- menuItems = { menuItems }
36- onMenuSelect = { setSelectedMenu }
37- selectedMenu = { selectedMenu }
38- />
39- < div className = "flex-1 flex justify-center items-start p-4" >
40- < div className = "w-full bg-white/40 dark:bg-dark3/30 rounded-xl p-4 shadow-lg" >
41- { content }
42- </ div >
266+ < PrivateRoute >
267+ < div className = "pagebackground min-h-screen flex flex-col" >
268+
269+ < Header />
270+
271+ < div className = "flex flex-1 flex-col md:flex-row w-full pt-20" >
272+ < Sidebar
273+ menuItems = { menuItems }
274+ onMenuSelect = { setSelectedMenu }
275+ selectedMenu = { selectedMenu }
276+ />
277+ < div className = "flex-1 flex justify-center items-start p-4 mt-4" >
278+ < div className = "w-full bg-white/40 dark:bg-dark3/30 rounded-xl p-4 shadow-lg overflow-y-auto max-h-[calc(100vh-120px)]" >
279+ { content }
280+ </ div >
281+ </ div >
43282 </ div >
44- </ div >
45- < Footer / >
46- </ div >
283+ < Footer / >
284+ </ div >
285+ </ PrivateRoute >
47286 ) ;
48287}
0 commit comments