Context Navigation

+Page.tsx@ 92fafb3

main

Last change on this file since 92fafb3 was 546a194, checked in by Mihail <mihail2.naumov@…>, 5 months ago
Optimized sites (changed from deprecated Grid to Box+CSS Grid)
Property mode set to `100644`
File size: 25.6 KB

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

Note: See TracBrowser for help on using the repository browser.

Download in other formats:

Original Format