bunny-lab/Borealis-Github-Replica
1
0
Fork 0
mirror of https://github.com/bunny-lab-io/Borealis.git synced 2025-12-15 00:35:47 -07:00
Code Issues Packages Projects Releases Wiki Activity

Updated Site List

Browse Source
This commit is contained in:
Nicole Rappe
2025-11-08 17:46:34 -07:00
parent fa90b3c6b6
commit 39122e9e7d
1 changed files with 59 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
Data/Engine/web-interface/src/Sites/Site_List.jsx
View File

@@ -8,6 +8,8 @@ import {
Tooltip, Tooltip,
} from "@mui/material"; } from "@mui/material";
import AddIcon from "@mui/icons-material/Add"; import AddIcon from "@mui/icons-material/Add";
import LocationCityIcon from "@mui/icons-material/LocationCity";
import DeleteIcon from "@mui/icons-material/DeleteOutline"; import DeleteIcon from "@mui/icons-material/DeleteOutline";
import EditIcon from "@mui/icons-material/Edit"; import EditIcon from "@mui/icons-material/Edit";
import { AgGridReact } from "ag-grid-react"; import { AgGridReact } from "ag-grid-react";
@@ -139,77 +141,68 @@ export default function SiteList({ onOpenDevicesForSite }) {
}} }}
elevation={0} elevation={0}
> >
{/* Hero Section */} {/* Hero Section Removed — integrated header and buttons */}
<Box sx={{ p: { xs: 2, md: 3 }, pb: 1 }}> <Box sx={{ p: { xs: 2, md: 3 }, pb: 1, display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap" }}>
<Box <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
sx={{ <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
borderRadius: 4, <LocationCityIcon sx={{ color: MAGIC_UI.accentA }} />
border: `1px solid ${MAGIC_UI.panelBorder}`, <Typography variant="h6" sx={{ color: MAGIC_UI.textBright, fontWeight: 700, fontSize: "1.3rem" }}>
background: MAGIC_UI.panelBg, Managed Sites
p: { xs: 2, md: 3 }, </Typography>
display: "flex",
justifyContent: "space-between",
flexWrap: "wrap",
gap: 3,
}}
>
<Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
<Typography variant="h5" sx={{ color: MAGIC_UI.textBright, fontWeight: 700 }}>
Managed Sites
</Typography>
<Typography sx={{ color: MAGIC_UI.textMuted }}>
{`Monitoring ${heroStats.totalDevices} devices across ${heroStats.totalSites} site(s)`}
</Typography>
{heroStats.selected > 0 && (
<Typography sx={{ color: MAGIC_UI.accentA, fontSize: "0.85rem", fontWeight: 600 }}>
{heroStats.selected} selected
</Typography>
)}
</Box>
<Box sx={{ display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }}>
<Button variant="contained" size="small" startIcon={<AddIcon />} sx={RAINBOW_BUTTON_SX} onClick={() => setCreateOpen(true)}>
Create Site
</Button>
<Button
variant="outlined"
size="small"
startIcon={<EditIcon />}
disabled={selectedIds.size !== 1}
onClick={() => {
const selId = selectedIds.size === 1 ? Array.from(selectedIds)[0] : null;
if (selId != null) {
const site = rows.find((r) => r.id === selId);
setRenameValue(site?.name || "");
setRenameOpen(true);
}
}}
sx={{
borderColor: "rgba(148,163,184,0.4)",
color: MAGIC_UI.textBright,
"&:hover": { borderColor: MAGIC_UI.accentA },
}}
>
Rename
</Button>
<Button
variant="outlined"
size="small"
startIcon={<DeleteIcon />}
disabled={selectedIds.size === 0}
onClick={() => setDeleteOpen(true)}
sx={{
borderColor: selectedIds.size ? "#f87171" : "rgba(148,163,184,0.3)",
color: selectedIds.size ? "#f87171" : MAGIC_UI.textMuted,
"&:hover": { borderColor: "#fb7185" },
}}
>
Delete
</Button>
</Box> </Box>
<Typography sx={{ color: MAGIC_UI.textMuted }}>
{`Monitoring ${heroStats.totalDevices} devices across ${heroStats.totalSites} site(s)`}
</Typography>
{heroStats.selected > 0 && (
<Typography sx={{ color: MAGIC_UI.accentA, fontSize: "0.85rem", fontWeight: 600 }}>
{heroStats.selected} selected
</Typography>
)}
</Box>
<Box sx={{ display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap", justifyContent: "flex-end" }}>
<Button variant="contained" size="small" startIcon={<AddIcon />} sx={RAINBOW_BUTTON_SX} onClick={() => setCreateOpen(true)}>
Create Site
</Button>
<Button
variant="outlined"
size="small"
startIcon={<EditIcon />}
disabled={selectedIds.size !== 1}
onClick={() => {
const selId = selectedIds.size === 1 ? Array.from(selectedIds)[0] : null;
if (selId != null) {
const site = rows.find((r) => r.id === selId);
setRenameValue(site?.name || "");
setRenameOpen(true);
}
}}
sx={{
borderColor: "rgba(148,163,184,0.4)",
color: MAGIC_UI.textBright,
"&:hover": { borderColor: MAGIC_UI.accentA },
}}
>
Rename
</Button>
<Button
variant="outlined"
size="small"
startIcon={<DeleteIcon />}
disabled={selectedIds.size === 0}
onClick={() => setDeleteOpen(true)}
sx={{
borderColor: selectedIds.size ? "#f87171" : "rgba(148,163,184,0.3)",
color: selectedIds.size ? "#f87171" : MAGIC_UI.textMuted,
"&:hover": { borderColor: "#fb7185" },
}}
>
Delete
</Button>
</Box> </Box>
</Box> </Box>
{/* AG Grid */} {/* AG Grid */}
}
<Box sx={{ px: { xs: 2, md: 3 }, pb: 3, flexGrow: 1, display: "flex", flexDirection: "column" }}> <Box sx={{ px: { xs: 2, md: 3 }, pb: 3, flexGrow: 1, display: "flex", flexDirection: "column" }}>
<Box <Box
className={themeClassName} className={themeClassName}