source: pages/dashboard/admin/+Page.tsx@ 87b79bc

main
Last change on this file since 87b79bc was 87b79bc, checked in by Mihail <mihail2.naumov@…>, 6 months ago

Fixed suggests component and also added hamburger menu for small screens for the navbar.
  • Property mode set to 100644
File size: 26.1 KB
Line 
1import React, {useEffect, useState} from 'react';
2import {
3 Container, Grid, Paper, Typography, Box, Avatar, Divider, Button,
4 CircularProgress, Table, TableBody, TableCell, TableHead, TableRow,
5 Chip, IconButton, TextField, Dialog, DialogTitle, DialogContent, DialogActions
6} from '@mui/material';
7import AdminPanelSettingsIcon from '@mui/icons-material/AdminPanelSettings';
8import CheckCircleIcon from '@mui/icons-material/CheckCircle';
9import CancelIcon from '@mui/icons-material/Cancel';
10import BuildIcon from '@mui/icons-material/Build';
11import MemoryIcon from '@mui/icons-material/Memory';
12import AddIcon from '@mui/icons-material/Add';
13import DeleteIcon from '@mui/icons-material/Delete';
14
15import {
16 getAdminInfoAndData,
17 onSetBuildApprovalStatus,
18 onSetComponentSuggestionStatus
19} from './adminDashboard.telefunc';
20
21import BuildCard from '../../../components/BuildCard';
22import BuildDetailsDialog from '../../../components/BuildDetailsDialog';
23import {onDeleteBuild} from "../user/userDashboard.telefunc";
24import AddComponentDialog from "../../../components/AddComponentDialog";
25
26export default function AdminDashboard() {
27 const [data, setData] = useState<any>(null);
28 const [loading, setLoading] = useState(true);
29 const [selectedBuildId, setSelectedBuildId] = useState<number | null>(null);
30 const [deleteDialog, setDeleteDialog] = useState<{
31 open: boolean,
32 buildId: number | null,
33 buildName: string
34 }>({open: false, buildId: null, buildName: ''});
35 const [deleteLoading, setDeleteLoading] = useState(false);
36 const [addDialogOpen, setAddDialogOpen] = useState(false);
37
38 const [buildApprovalDialog, setBuildApprovalDialog] = useState<{
39 open: boolean,
40 buildId: number | null,
41 buildName: string
42 }>({open: false, buildId: null, buildName: ''});
43 const [rejectReason, setRejectReason] = useState('');
44 const [approvalLoading, setApprovalLoading] = useState(false);
45
46 const [suggestionDialog, setSuggestionDialog] = useState<{
47 open: boolean,
48 id: number | null,
49 action: 'approved' | 'rejected'
50 }>({open: false, id: null, action: 'approved'});
51 const [adminComment, setAdminComment] = useState("");
52
53 const [createComponentDialog, setCreateComponentDialog] = useState<{
54 open: boolean;
55 suggestion: any | null;
56 }>({open: false, suggestion: null});
57
58 const loadData = () => {
59 setLoading(true);
60 getAdminInfoAndData()
61 .then(res => {
62 setData(res);
63 setLoading(false);
64 })
65 .catch(err => {
66 console.error(err);
67 alert("Failed to load admin data. Are you an admin?");
68 setLoading(false);
69 });
70 };
71
72 useEffect(() => {
73 loadData();
74 }, []);
75
76 const openBuildApproval = (buildId: number, buildName: string) => {
77 setBuildApprovalDialog({open: true, buildId, buildName});
78 setRejectReason('');
79 };
80
81 const handleApproveBuild = async () => {
82 if (!buildApprovalDialog.buildId) return;
83 setApprovalLoading(true);
84 try {
85 await onSetBuildApprovalStatus({buildId: buildApprovalDialog.buildId, isApproved: true});
86 setBuildApprovalDialog({open: false, buildId: null, buildName: ''});
87 loadData();
88 } catch (e) {
89 alert("Approve failed");
90 } finally {
91 setApprovalLoading(false);
92 }
93 };
94
95 const handleRejectBuild = async () => {
96 if (!buildApprovalDialog.buildId || !rejectReason.trim()) return;
97 setApprovalLoading(true);
98 try {
99 await onSetBuildApprovalStatus({buildId: buildApprovalDialog.buildId, isApproved: false});
100 setBuildApprovalDialog({open: false, buildId: null, buildName: ''});
101 loadData();
102 } catch (e) {
103 alert("Reject failed");
104 } finally {
105 setApprovalLoading(false);
106 }
107 };
108
109 const openSuggestionReview = (id: number, action: 'approved' | 'rejected') => {
110 setSuggestionDialog({open: true, id, action});
111 setAdminComment(action === 'approved' ? "" : "");
112 };
113
114 const submitSuggestionReview = async () => {
115 if (!suggestionDialog.id) return;
116 try {
117 await onSetComponentSuggestionStatus({
118 suggestionId: suggestionDialog.id,
119 status: suggestionDialog.action,
120 adminComment: adminComment
121 });
122 setSuggestionDialog({...suggestionDialog, open: false});
123 loadData();
124 } catch (e) {
125 alert("Failed to update suggestion");
126 }
127 };
128
129 const openDeleteDialog = (buildId: number, buildName: string) => {
130 setDeleteDialog({open: true, buildId, buildName});
131 };
132
133 const handleDelete = async () => {
134 if (!deleteDialog.buildId) return;
135 setDeleteLoading(true);
136 try {
137 await onDeleteBuild({buildId: deleteDialog.buildId});
138 setDeleteDialog({open: false, buildId: null, buildName: ''});
139 loadData();
140 setSelectedBuildId(null);
141 } catch (e) {
142 alert("Failed to delete build");
143 } finally {
144 setDeleteLoading(false);
145 }
146 };
147
148 if (loading) {
149 return (
150 <Container maxWidth="xl" sx={{
151 mt: 4,
152 mb: 10,
153 display: 'flex',
154 justifyContent: 'center',
155 alignItems: 'center',
156 minHeight: '50vh'
157 }}>
158 <CircularProgress/>
159 </Container>
160 );
161 }
162
163 if (!data) {
164 return (
165 <Container maxWidth="xl" sx={{mt: 4, mb: 10, textAlign: 'center', p: 5}}>
166 <Typography variant="h6" color="error">
167 Access Denied - Admin privileges required
168 </Typography>
169 </Container>
170 );
171 }
172
173 return (
174 <Container maxWidth="xl" sx={{mt: 4, mb: 10}}>
175 <Grid container spacing={4}>
176 <Grid item xs={12} md={3}>
177 <Paper elevation={3} sx={{
178 p: 4,
179 display: 'flex',
180 flexDirection: 'column',
181 alignItems: 'center',
182 height: '100%',
183 bgcolor: '#1e1e1e',
184 color: 'white'
185 }}>
186 <Avatar sx={{width: 120, height: 120, mb: 2, bgcolor: 'error.main'}}>
187 <AdminPanelSettingsIcon sx={{fontSize: 70}}/>
188 </Avatar>
189 <Typography variant="h5" fontWeight="bold">{data.admin?.username || 'Admin'}</Typography>
190 <Typography variant="body2" sx={{opacity: 0.7, mb: 3}}>
191 {data.admin?.email || 'admin@example.com'}
192 </Typography>
193
194 <Chip label="ADMINISTRATOR" color="error" variant="outlined" sx={{fontWeight: 'bold'}}/>
195 <Divider sx={{width: '100%', my: 3, bgcolor: 'rgba(255,255,255,0.1)'}}/>
196
197 <Box sx={{width: '100%', textAlign: 'center'}}>
198 <Typography variant="h3" fontWeight="bold" color="primary.main">
199 {data.pendingBuilds?.length || 0}
200 </Typography>
201 <Typography variant="caption">Pending Builds</Typography>
202 </Box>
203
204 <Box sx={{width: '100%', textAlign: 'center', mt: 3}}>
205 <Button
206 variant="contained"
207 color="warning"
208 size="large"
209 fullWidth
210 startIcon={<BuildIcon/>}
211 onClick={() => setAddDialogOpen(true)}
212 sx={{mb: 2}}
213 >
214 Add Component
215 </Button>
216 </Box>
217 </Paper>
218 </Grid>
219
220 <Grid item xs={12} md={9}>
221 <Grid container spacing={4} direction="column">
222 <Grid item xs={12}>
223 <Paper sx={{p: 3, borderLeft: '6px solid #9c27b0'}}>
224 <Box sx={{display: 'flex', alignItems: 'center', mb: 2}}>
225 <MemoryIcon color="secondary" sx={{mr: 1}}/>
226 <Typography variant="h6" fontWeight="bold">
227 Component Suggestions ({data.componentSuggestions?.length || 0})
228 </Typography>
229 </Box>
230
231 {data.componentSuggestions?.length === 0 ? (
232 <Typography color="text.secondary">No suggestions.</Typography>
233 ) : (
234 <Table size="small">
235 <TableHead>
236 <TableRow>
237 <TableCell>Link/Description</TableCell>
238 <TableCell>Type</TableCell>
239 <TableCell>User</TableCell>
240 <TableCell>Status</TableCell>
241 <TableCell align="right">Actions</TableCell>
242 </TableRow>
243 </TableHead>
244 <TableBody>
245 {data.componentSuggestions?.map((sug: any) => (
246 <TableRow key={sug.id}>
247 <TableCell sx={{maxWidth: 300}}>
248 <a
249 href={sug.link}
250 target="_blank"
251 rel="noopener noreferrer"
252 title={sug.link}
253 style={{textDecoration: 'none', color: 'inherit'}}
254 >
255 {sug.description || sug.link}
256 </a>
257 </TableCell>
258 <TableCell>{sug.componentType?.toUpperCase()}</TableCell>
259 <TableCell>{sug.userId}</TableCell>
260 <TableCell>
261 <Chip
262 label={sug.status || 'pending'}
263 size="small"
264 color={
265 sug.status === 'approved' ? 'success' :
266 sug.status === 'rejected' ? 'error' :
267 'default'
268 }
269 />
270 </TableCell>
271 <TableCell align="right">
272 {sug.status === 'pending' ? (
273 <>
274 <IconButton
275 size="small"
276 color="success"
277 onClick={() => openSuggestionReview(sug.id, 'approved')}
278 >
279 <CheckCircleIcon/>
280 </IconButton>
281 <IconButton
282 size="small"
283 color="error"
284 onClick={() => openSuggestionReview(sug.id, 'rejected')}
285 >
286 <CancelIcon/>
287 </IconButton>
288 </>
289 ) : sug.status === 'approved' ? (
290 <Button
291 size="small"
292 variant="contained"
293 color="warning"
294 startIcon={<AddIcon/>}
295 onClick={() => setCreateComponentDialog({
296 open: true,
297 suggestion: sug
298 })}
299 >
300 Create
301 </Button>
302 ) : (
303 <Typography variant="caption" color="text.secondary">
304 {sug.adminComment || 'Rejected'}
305 </Typography>
306 )}
307 </TableCell>
308 </TableRow>
309 ))}
310 </TableBody>
311 </Table>
312 )}
313 </Paper>
314 </Grid>
315
316 <Grid item xs={12}>
317 <Paper sx={{p: 3, borderLeft: '6px solid #ed6c02', bgcolor: '#121212'}}>
318 <Box sx={{display: 'flex', alignItems: 'center', mb: 2}}>
319 <BuildIcon color="warning" sx={{mr: 1}}/>
320 <Typography variant="h6" fontWeight="bold">
321 Builds Waiting for Approval ({data.pendingBuilds?.length || 0})
322 </Typography>
323 </Box>
324
325 {data.pendingBuilds?.length === 0 ? (
326 <Typography color="text.secondary">No pending builds.</Typography>
327 ) : (
328 <Grid container spacing={2}>
329 {data.pendingBuilds.map((build: any) => (
330 <Grid item xs={12} sm={6} md={4} lg={3} key={build.id}>
331 <Box sx={{position: 'relative'}}>
332 <BuildCard
333 build={build}
334 onClick={() => setSelectedBuildId(build.id)}
335 />
336 <Box sx={{
337 mt: 1,
338 display: 'flex',
339 gap: 1,
340 justifyContent: 'center'
341 }}>
342 <Button
343 variant="contained"
344 color="warning"
345 size="small"
346 startIcon={<BuildIcon/>}
347 onClick={(e) => {
348 e.stopPropagation();
349 openBuildApproval(build.id, build.name);
350 }}
351 >
352 Review
353 </Button>
354 </Box>
355 </Box>
356 </Grid>
357 ))}
358 </Grid>
359 )}
360 </Paper>
361 </Grid>
362
363 <Grid item xs={12}>
364 <Paper sx={{p: 3, borderLeft: '6px solid #2e7d32'}}>
365 <Typography variant="h6" fontWeight="bold" gutterBottom>
366 My Builds / Sandbox
367 </Typography>
368 {data.userBuilds?.length === 0 ? (
369 <Typography color="text.secondary">No builds created by admin.</Typography>
370 ) : (
371 <Grid container spacing={2}>
372 {data.userBuilds.slice(0, 4).map((build: any) => (
373 <Grid item xs={12} sm={6} md={4} lg={3} key={build.id}>
374 <Box sx={{position: 'relative'}}>
375 <BuildCard
376 build={build}
377 onClick={() => setSelectedBuildId(build.id)}
378 />
379 <Box sx={{mt: 1, display: 'flex', justifyContent: 'center'}}>
380 <Button
381 variant="outlined"
382 color="error"
383 size="small"
384 startIcon={<DeleteIcon/>}
385 onClick={(e) => {
386 e.stopPropagation();
387 openDeleteDialog(build.id, build.name);
388 }}
389 fullWidth
390 >
391 Delete
392 </Button>
393 </Box>
394 </Box>
395 </Grid>
396 ))}
397 </Grid>
398 )}
399 </Paper>
400 </Grid>
401 </Grid>
402 </Grid>
403 </Grid>
404
405 <Dialog open={suggestionDialog.open}
406 onClose={() => setSuggestionDialog({...suggestionDialog, open: false})}>
407 <DialogTitle>Review Component Suggestion</DialogTitle>
408 <DialogContent>
409 <Typography gutterBottom>Status: <b>{suggestionDialog.action.toUpperCase()}</b></Typography>
410 <TextField
411 fullWidth
412 label="Admin Comment"
413 multiline
414 rows={3}
415 value={adminComment}
416 onChange={(e) => setAdminComment(e.target.value)}
417 sx={{mt: 2}}
418 />
419 </DialogContent>
420 <DialogActions>
421 <Button onClick={() => setSuggestionDialog({...suggestionDialog, open: false})}>Cancel</Button>
422 <Button variant="contained" onClick={submitSuggestionReview}>Submit</Button>
423 </DialogActions>
424 </Dialog>
425
426 <Dialog
427 open={buildApprovalDialog.open}
428 onClose={() => setBuildApprovalDialog({open: false, buildId: null, buildName: ''})}
429 >
430 <DialogTitle>Review Build</DialogTitle>
431 <DialogContent>
432 <Typography variant="h6" gutterBottom>{buildApprovalDialog.buildName}</Typography>
433 <Typography color="text.secondary" sx={{mb: 2}}>
434 Build ID: {buildApprovalDialog.buildId}
435 </Typography>
436 <TextField
437 fullWidth
438 multiline
439 rows={2}
440 label="Reject reason (optional)"
441 value={rejectReason}
442 onChange={(e) => setRejectReason(e.target.value)}
443 placeholder="Why reject this build?"
444 sx={{mt: 1}}
445 />
446 </DialogContent>
447 <DialogActions>
448 <Button
449 onClick={() => setBuildApprovalDialog({open: false, buildId: null, buildName: ''})}
450 disabled={approvalLoading}
451 >
452 Cancel
453 </Button>
454 <Button
455 onClick={handleRejectBuild}
456 variant="outlined"
457 color="error"
458 disabled={approvalLoading || !rejectReason.trim()}
459 >
460 {approvalLoading ? <CircularProgress size={20}/> : 'Reject'}
461 </Button>
462 <Button
463 onClick={handleApproveBuild}
464 variant="contained"
465 color="success"
466 disabled={approvalLoading}
467 >
468 {approvalLoading ? <CircularProgress size={20}/> : 'Approve'}
469 </Button>
470 </DialogActions>
471 </Dialog>
472
473 <Dialog
474 open={deleteDialog.open}
475 onClose={() => setDeleteDialog({open: false, buildId: null, buildName: ''})}
476 >
477 <DialogTitle>Delete Build</DialogTitle>
478 <DialogContent>
479 <Typography variant="h6" gutterBottom>{deleteDialog.buildName}</Typography>
480 <Typography color="text.secondary">
481 Are you sure you want to permanently delete this build? This action cannot be undone.
482 </Typography>
483 </DialogContent>
484 <DialogActions>
485 <Button
486 onClick={() => setDeleteDialog({open: false, buildId: null, buildName: ''})}
487 disabled={deleteLoading}
488 >
489 Cancel
490 </Button>
491 <Button
492 onClick={handleDelete}
493 variant="contained"
494 color="error"
495 disabled={deleteLoading}
496 startIcon={deleteLoading ? <CircularProgress size={20}/> : <DeleteIcon/>}
497 >
498 {deleteLoading ? 'Deleting...' : 'Delete Build'}
499 </Button>
500 </DialogActions>
501 </Dialog>
502
503 <BuildDetailsDialog
504 open={!!selectedBuildId}
505 buildId={selectedBuildId!}
506 currentUser={data.admin}
507 onClose={() => setSelectedBuildId(null)}
508 isDashboardView={true}
509 />
510
511 <AddComponentDialog
512 open={addDialogOpen}
513 onClose={() => setAddDialogOpen(false)}
514 onSuccess={() => {
515 loadData();
516 setAddDialogOpen(false);
517 }}
518 />
519
520 <AddComponentDialog
521 open={createComponentDialog.open}
522 onClose={() => setCreateComponentDialog({ open: false, suggestion: null })}
523 onSuccess={() => {
524 loadData();
525 setCreateComponentDialog({ open: false, suggestion: null });
526 }}
527 prefillData={createComponentDialog.suggestion ? {
528 type: createComponentDialog.suggestion.componentType,
529 suggestionLink: createComponentDialog.suggestion.link,
530 suggestionDescription: createComponentDialog.suggestion.description
531 } : undefined}
532 />
533 </Container>
534 );
535}
Note: See TracBrowser for help on using the repository browser.