Index: pages/dashboard/admin/+Page.tsx
===================================================================
--- pages/dashboard/admin/+Page.tsx	(revision b6e1b3c446e18031dea6a3444f7ec467670f9f2d)
+++ pages/dashboard/admin/+Page.tsx	(revision 41a2f81c85a6b12ebd6aff2f621dce1c8af277da)
@@ -10,4 +10,6 @@
 import BuildIcon from '@mui/icons-material/Build';
 import MemoryIcon from '@mui/icons-material/Memory';
+import AddIcon from '@mui/icons-material/Add';
+import DeleteIcon from '@mui/icons-material/Delete';
 
 import {
@@ -19,6 +21,6 @@
 import BuildCard from '../../../components/BuildCard';
 import BuildDetailsDialog from '../../../components/BuildDetailsDialog';
-import DeleteIcon from "@mui/icons-material/Delete";
 import {onDeleteBuild} from "../user/userDashboard.telefunc";
+import AddComponentDialog from "../../../components/AddComponentDialog";
 
 export default function AdminDashboard() {
@@ -26,6 +28,11 @@
     const [loading, setLoading] = useState(true);
     const [selectedBuildId, setSelectedBuildId] = useState<number | null>(null);
-    const [deleteDialog, setDeleteDialog] = useState<{ open: boolean, buildId: number | null, buildName: string }>({ open: false, buildId: null, buildName: '' });
+    const [deleteDialog, setDeleteDialog] = useState<{
+        open: boolean,
+        buildId: number | null,
+        buildName: string
+    }>({open: false, buildId: null, buildName: ''});
     const [deleteLoading, setDeleteLoading] = useState(false);
+    const [addDialogOpen, setAddDialogOpen] = useState(false);
 
     const [buildApprovalDialog, setBuildApprovalDialog] = useState<{
@@ -45,4 +52,5 @@
 
     const loadData = () => {
+        setLoading(true);
         getAdminInfoAndData()
             .then(res => {
@@ -53,4 +61,5 @@
                 console.error(err);
                 alert("Failed to load admin data. Are you an admin?");
+                setLoading(false);
             });
     };
@@ -114,5 +123,5 @@
 
     const openDeleteDialog = (buildId: number, buildName: string) => {
-        setDeleteDialog({ open: true, buildId, buildName });
+        setDeleteDialog({open: true, buildId, buildName});
     };
 
@@ -122,6 +131,6 @@
         try {
             await onDeleteBuild({buildId: deleteDialog.buildId});
-            setDeleteDialog({ open: false, buildId: null, buildName: '' });
-            loadData(); // refresh na user i favorite builds
+            setDeleteDialog({open: false, buildId: null, buildName: ''});
+            loadData();
             setSelectedBuildId(null);
         } catch (e) {
@@ -132,6 +141,21 @@
     };
 
-    if (loading) return <Box sx={{p: 5, textAlign: 'center'}}><CircularProgress/></Box>;
-    if (!data) return <Box sx={{p: 5, textAlign: 'center'}}>Access Denied</Box>;
+    if (loading) {
+        return (
+            <Container maxWidth="xl" sx={{mt: 4, mb: 10, display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '50vh'}}>
+                <CircularProgress />
+            </Container>
+        );
+    }
+
+    if (!data) {
+        return (
+            <Container maxWidth="xl" sx={{mt: 4, mb: 10, textAlign: 'center', p: 5}}>
+                <Typography variant="h6" color="error">
+                    Access Denied - Admin privileges required
+                </Typography>
+            </Container>
+        );
+    }
 
     return (
@@ -151,6 +175,8 @@
                             <AdminPanelSettingsIcon sx={{fontSize: 70}}/>
                         </Avatar>
-                        <Typography variant="h5" fontWeight="bold">{data.admin.username}</Typography>
-                        <Typography variant="body2" sx={{opacity: 0.7, mb: 3}}>{data.admin.email}</Typography>
+                        <Typography variant="h5" fontWeight="bold">{data.admin?.username || 'Admin'}</Typography>
+                        <Typography variant="body2" sx={{opacity: 0.7, mb: 3}}>
+                            {data.admin?.email || 'admin@example.com'}
+                        </Typography>
 
                         <Chip label="ADMINISTRATOR" color="error" variant="outlined" sx={{fontWeight: 'bold'}}/>
@@ -162,4 +188,18 @@
                             </Typography>
                             <Typography variant="caption">Pending Builds</Typography>
+                        </Box>
+
+                        <Box sx={{width: '100%', textAlign: 'center', mt: 3}}>
+                            <Button
+                                variant="contained"
+                                color="warning"
+                                size="large"
+                                fullWidth
+                                startIcon={<BuildIcon />}
+                                onClick={() => setAddDialogOpen(true)}
+                                sx={{ mb: 2 }}
+                            >
+                                Add Component
+                            </Button>
                         </Box>
                     </Paper>
@@ -190,21 +230,32 @@
                                         </TableHead>
                                         <TableBody>
-                                            {data.componentSuggestions.map((sug: any) => (
+                                            {data.componentSuggestions?.map((sug: any) => (
                                                 <TableRow key={sug.id}>
                                                     <TableCell sx={{maxWidth: 300}}>
-                                                        <a href={sug.link} title={sug.link}
-                                                           style={{textDecoration: 'none', color: 'inherit'}}>
+                                                        <a
+                                                            href={sug.link}
+                                                            target="_blank"
+                                                            rel="noopener noreferrer"
+                                                            title={sug.link}
+                                                            style={{textDecoration: 'none', color: 'inherit'}}
+                                                        >
                                                             {sug.description || sug.link}
                                                         </a>
                                                     </TableCell>
-                                                    <TableCell>{sug.componentType.toUpperCase()}</TableCell>
+                                                    <TableCell>{sug.componentType?.toUpperCase()}</TableCell>
                                                     <TableCell>{sug.userId}</TableCell>
                                                     <TableCell align="right">
-                                                        <IconButton size="small" color="success"
-                                                                    onClick={() => openSuggestionReview(sug.id, 'approved')}>
+                                                        <IconButton
+                                                            size="small"
+                                                            color="success"
+                                                            onClick={() => openSuggestionReview(sug.id, 'approved')}
+                                                        >
                                                             <CheckCircleIcon/>
                                                         </IconButton>
-                                                        <IconButton size="small" color="error"
-                                                                    onClick={() => openSuggestionReview(sug.id, 'rejected')}>
+                                                        <IconButton
+                                                            size="small"
+                                                            color="error"
+                                                            onClick={() => openSuggestionReview(sug.id, 'rejected')}
+                                                        >
                                                             <CancelIcon/>
                                                         </IconButton>
@@ -232,5 +283,5 @@
                                     <Grid container spacing={2}>
                                         {data.pendingBuilds.map((build: any) => (
-                                            <Grid item xs={12} md={4} key={build.id}>
+                                            <Grid item xs={12} sm={6} md={4} lg={3} key={build.id}>
                                                 <Box sx={{position: 'relative'}}>
                                                     <BuildCard
@@ -242,8 +293,5 @@
                                                         display: 'flex',
                                                         gap: 1,
-                                                        justifyContent: 'center',
-                                                        bgcolor: '#292929',
-                                                        p: 1,
-                                                        borderRadius: 1
+                                                        justifyContent: 'center'
                                                     }}>
                                                         <Button
@@ -251,6 +299,9 @@
                                                             color="warning"
                                                             size="small"
-                                                            startIcon={<BuildIcon/>}
-                                                            onClick={() => openBuildApproval(build.id, build.name)}
+                                                            startIcon={<BuildIcon />}
+                                                            onClick={(e) => {
+                                                                e.stopPropagation();
+                                                                openBuildApproval(build.id, build.name);
+                                                            }}
                                                         >
                                                             Review
@@ -275,11 +326,11 @@
                                     <Grid container spacing={2}>
                                         {data.userBuilds.slice(0, 4).map((build: any) => (
-                                            <Grid item xs={12} sm={6} md={4} key={build.id}>
-                                                <Box sx={{ position: 'relative' }}>
+                                            <Grid item xs={12} sm={6} md={4} lg={3} key={build.id}>
+                                                <Box sx={{position: 'relative'}}>
                                                     <BuildCard
                                                         build={build}
                                                         onClick={() => setSelectedBuildId(build.id)}
                                                     />
-                                                    <Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
+                                                    <Box sx={{mt: 1, display: 'flex', justifyContent: 'center'}}>
                                                         <Button
                                                             variant="outlined"
@@ -291,5 +342,5 @@
                                                                 openDeleteDialog(build.id, build.name);
                                                             }}
-                                                            sx={{ width: '100%' }}
+                                                            fullWidth
                                                         >
                                                             Delete
@@ -307,12 +358,16 @@
             </Grid>
 
-            <Dialog open={suggestionDialog.open}
-                    onClose={() => setSuggestionDialog({...suggestionDialog, open: false})}>
+            <Dialog open={suggestionDialog.open} onClose={() => setSuggestionDialog({...suggestionDialog, open: false})}>
                 <DialogTitle>Review Component Suggestion</DialogTitle>
                 <DialogContent>
                     <Typography gutterBottom>Status: <b>{suggestionDialog.action.toUpperCase()}</b></Typography>
                     <TextField
-                        fullWidth label="Admin Comment" multiline rows={3}
-                        value={adminComment} onChange={(e) => setAdminComment(e.target.value)}
+                        fullWidth
+                        label="Admin Comment"
+                        multiline
+                        rows={3}
+                        value={adminComment}
+                        onChange={(e) => setAdminComment(e.target.value)}
+                        sx={{ mt: 2 }}
                     />
                 </DialogContent>
@@ -323,6 +378,8 @@
             </Dialog>
 
-            <Dialog open={buildApprovalDialog.open}
-                    onClose={() => setBuildApprovalDialog({open: false, buildId: null, buildName: ''})}>
+            <Dialog
+                open={buildApprovalDialog.open}
+                onClose={() => setBuildApprovalDialog({open: false, buildId: null, buildName: ''})}
+            >
                 <DialogTitle>Review Build</DialogTitle>
                 <DialogContent>
@@ -368,5 +425,8 @@
             </Dialog>
 
-            <Dialog open={deleteDialog.open} onClose={() => setDeleteDialog({ open: false, buildId: null, buildName: '' })}>
+            <Dialog
+                open={deleteDialog.open}
+                onClose={() => setDeleteDialog({open: false, buildId: null, buildName: ''})}
+            >
                 <DialogTitle>Delete Build</DialogTitle>
                 <DialogContent>
@@ -378,5 +438,5 @@
                 <DialogActions>
                     <Button
-                        onClick={() => setDeleteDialog({ open: false, buildId: null, buildName: '' })}
+                        onClick={() => setDeleteDialog({open: false, buildId: null, buildName: ''})}
                         disabled={deleteLoading}
                     >
@@ -388,5 +448,5 @@
                         color="error"
                         disabled={deleteLoading}
-                        startIcon={deleteLoading ? <CircularProgress size={20} /> : <DeleteIcon />}
+                        startIcon={deleteLoading ? <CircularProgress size={20}/> : <DeleteIcon />}
                     >
                         {deleteLoading ? 'Deleting...' : 'Delete Build'}
@@ -397,9 +457,17 @@
             <BuildDetailsDialog
                 open={!!selectedBuildId}
-                buildId={selectedBuildId}
-                currentUser={data.admin?.id}
+                buildId={selectedBuildId!}
+                currentUser={data.admin}
                 onClose={() => setSelectedBuildId(null)}
-                onClone={() => alert("Clone disabled in admin view")}
                 isDashboardView={true}
+            />
+
+            <AddComponentDialog
+                open={addDialogOpen}
+                onClose={() => setAddDialogOpen(false)}
+                onSuccess={() => {
+                    loadData();
+                    setAddDialogOpen(false);
+                }}
             />
         </Container>