mirror of
https://github.com/bunny-lab-io/Borealis.git
synced 2025-12-15 17:35:48 -07:00
373 lines
12 KiB
JavaScript
373 lines
12 KiB
JavaScript
import React, { useCallback, useEffect, useMemo, useState, useRef } from "react";
|
|
import {
|
|
Box,
|
|
Paper,
|
|
Typography,
|
|
Button,
|
|
Stack,
|
|
Alert,
|
|
FormControl,
|
|
InputLabel,
|
|
MenuItem,
|
|
Select,
|
|
CircularProgress,
|
|
Tooltip
|
|
} from "@mui/material";
|
|
import {
|
|
ContentCopy as CopyIcon,
|
|
DeleteOutline as DeleteIcon,
|
|
Refresh as RefreshIcon,
|
|
Key as KeyIcon,
|
|
} from "@mui/icons-material";
|
|
import { AgGridReact } from "ag-grid-react";
|
|
import { ModuleRegistry, AllCommunityModule, themeQuartz } from "ag-grid-community";
|
|
// IMPORTANT: Do NOT import global AG Grid CSS here to avoid overriding other pages.
|
|
// We rely on the project's existing CSS and themeQuartz class name like other MagicUI pages.
|
|
ModuleRegistry.registerModules([AllCommunityModule]);
|
|
|
|
// Match the palette used on other pages (see Site_List / Device_List)
|
|
const MAGIC_UI = {
|
|
shellBg:
|
|
"radial-gradient(120% 120% at 0% 0%, rgba(76, 186, 255, 0.16), transparent 55%), " +
|
|
"radial-gradient(120% 120% at 100% 0%, rgba(214, 130, 255, 0.18), transparent 60%), #040711",
|
|
panelBg:
|
|
"linear-gradient(135deg, rgba(10, 16, 31, 0.98) 0%, rgba(6, 10, 24, 0.94) 60%, rgba(15, 6, 26, 0.96) 100%)",
|
|
panelBorder: "rgba(148, 163, 184, 0.35)",
|
|
textBright: "#e2e8f0",
|
|
textMuted: "#94a3b8",
|
|
accentA: "#7dd3fc",
|
|
accentB: "#c084fc",
|
|
};
|
|
|
|
// Generate a scoped Quartz theme class (same pattern as other pages)
|
|
const gridTheme = themeQuartz.withParams({
|
|
accentColor: "#8b5cf6",
|
|
backgroundColor: "#070b1a",
|
|
browserColorScheme: "dark",
|
|
fontFamily: { googleFont: "IBM Plex Sans" },
|
|
foregroundColor: "#f4f7ff",
|
|
headerFontSize: 13,
|
|
});
|
|
const themeClassName = gridTheme.themeName || "ag-theme-quartz";
|
|
|
|
const TTL_PRESETS = [
|
|
{ value: 1, label: "1 hour" },
|
|
{ value: 3, label: "3 hours" },
|
|
{ value: 6, label: "6 hours" },
|
|
{ value: 12, label: "12 hours" },
|
|
{ value: 24, label: "24 hours" },
|
|
];
|
|
|
|
const determineStatus = (record) => {
|
|
if (!record) return "expired";
|
|
const maxUses = Number.isFinite(record?.max_uses) ? record.max_uses : 1;
|
|
const useCount = Number.isFinite(record?.use_count) ? record.use_count : 0;
|
|
if (useCount >= Math.max(1, maxUses || 1)) return "used";
|
|
if (!record.expires_at) return "expired";
|
|
const expires = new Date(record.expires_at);
|
|
if (Number.isNaN(expires.getTime())) return "expired";
|
|
return expires.getTime() > Date.now() ? "active" : "expired";
|
|
};
|
|
|
|
const formatDateTime = (value) => {
|
|
if (!value) return "—";
|
|
const date = new Date(value);
|
|
if (Number.isNaN(date.getTime())) return value;
|
|
return date.toLocaleString();
|
|
};
|
|
|
|
const maskCode = (code) => {
|
|
if (!code) return "—";
|
|
const parts = code.split("-");
|
|
if (parts.length <= 1) {
|
|
const prefix = code.slice(0, 4);
|
|
return `${prefix}${"•".repeat(Math.max(0, code.length - prefix.length))}`;
|
|
}
|
|
return parts
|
|
.map((part, idx) => (idx === 0 || idx === parts.length - 1 ? part : "•".repeat(part.length)))
|
|
.join("-");
|
|
};
|
|
|
|
export default function EnrollmentCodes() {
|
|
const [codes, setCodes] = useState([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState("");
|
|
const [feedback, setFeedback] = useState(null);
|
|
const [statusFilter, setStatusFilter] = useState("all");
|
|
const [ttlHours, setTtlHours] = useState(6);
|
|
const [generating, setGenerating] = useState(false);
|
|
const [maxUses, setMaxUses] = useState(2);
|
|
const gridRef = useRef(null);
|
|
|
|
const fetchCodes = useCallback(async () => {
|
|
setLoading(true);
|
|
setError("");
|
|
try {
|
|
const query = statusFilter === "all" ? "" : `?status=${encodeURIComponent(statusFilter)}`;
|
|
const resp = await fetch(`/api/admin/enrollment-codes${query}`, { credentials: "include" });
|
|
if (!resp.ok) {
|
|
const body = await resp.json().catch(() => ({}));
|
|
throw new Error(body.error || `Request failed (${resp.status})`);
|
|
}
|
|
const data = await resp.json();
|
|
setCodes(Array.isArray(data.codes) ? data.codes : []);
|
|
} catch (err) {
|
|
setError(err.message || "Unable to load codes");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [statusFilter]);
|
|
|
|
useEffect(() => { fetchCodes(); }, [fetchCodes]);
|
|
|
|
const handleGenerate = useCallback(async () => {
|
|
setGenerating(true);
|
|
try {
|
|
const resp = await fetch("/api/admin/enrollment-codes", {
|
|
method: "POST",
|
|
credentials: "include",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ ttl_hours: ttlHours, max_uses: maxUses }),
|
|
});
|
|
if (!resp.ok) {
|
|
const body = await resp.json().catch(() => ({}));
|
|
throw new Error(body.error || `Request failed (${resp.status})`);
|
|
}
|
|
await fetchCodes();
|
|
setFeedback({ type: "success", message: "New installer code created" });
|
|
} catch (err) {
|
|
setFeedback({ type: "error", message: err.message });
|
|
} finally {
|
|
setGenerating(false);
|
|
}
|
|
}, [ttlHours, maxUses, fetchCodes]);
|
|
|
|
const handleCopy = (code) => {
|
|
if (!code) return;
|
|
try {
|
|
if (navigator.clipboard?.writeText) {
|
|
navigator.clipboard.writeText(code);
|
|
setFeedback({ type: "success", message: "Code copied to clipboard" });
|
|
}
|
|
} catch (_) {}
|
|
};
|
|
|
|
const handleDelete = async (id) => {
|
|
if (!id) return;
|
|
if (!window.confirm("Delete this installer code?")) return;
|
|
try {
|
|
const resp = await fetch(`/api/admin/enrollment-codes/${id}`, {
|
|
method: "DELETE",
|
|
credentials: "include",
|
|
});
|
|
if (!resp.ok) {
|
|
const body = await resp.json().catch(() => ({}));
|
|
throw new Error(body.error || `Request failed (${resp.status})`);
|
|
}
|
|
await fetchCodes();
|
|
setFeedback({ type: "success", message: "Code deleted" });
|
|
} catch (err) {
|
|
setFeedback({ type: "error", message: err.message });
|
|
}
|
|
};
|
|
|
|
const columns = useMemo(() => [
|
|
{
|
|
headerName: "Status",
|
|
field: "status",
|
|
cellRenderer: (params) => {
|
|
const status = determineStatus(params.data);
|
|
const color =
|
|
status === "active" ? "#34d399" :
|
|
status === "used" ? "#7dd3fc" :
|
|
"#fbbf24";
|
|
return <span style={{ color, fontWeight: 600 }}>{status}</span>;
|
|
},
|
|
minWidth: 100
|
|
},
|
|
{
|
|
headerName: "Installer Code",
|
|
field: "code",
|
|
cellRenderer: (params) => (
|
|
<span style={{ fontFamily: "monospace", color: "#7dd3fc" }}>{maskCode(params.value)}</span>
|
|
),
|
|
minWidth: 340
|
|
},
|
|
{ headerName: "Expires At",
|
|
field: "expires_at",
|
|
valueFormatter: p => formatDateTime(p.value)
|
|
},
|
|
{ headerName: "Created By", field: "created_by_user_id" },
|
|
{
|
|
headerName: "Usage",
|
|
valueGetter: (p) => `${p.data.use_count || 0} / ${p.data.max_uses || 1}`,
|
|
cellStyle: { fontFamily: "monospace" },
|
|
width: 120
|
|
},
|
|
{ headerName: "Last Used", field: "last_used_at", valueFormatter: p => formatDateTime(p.value) },
|
|
{ headerName: "Used By GUID", field: "used_by_guid" },
|
|
{
|
|
headerName: "Actions",
|
|
cellRenderer: (params) => {
|
|
const record = params.data;
|
|
const disableDelete = (record.use_count || 0) !== 0;
|
|
return (
|
|
<Stack direction="row" spacing={1} justifyContent="flex-end">
|
|
<Tooltip title="Copy code">
|
|
<span>
|
|
<Button size="small" onClick={() => handleCopy(record.code)}>
|
|
<CopyIcon fontSize="small" />
|
|
</Button>
|
|
</span>
|
|
</Tooltip>
|
|
<Tooltip title={disableDelete ? "Only unused codes can be deleted" : "Delete code"}>
|
|
<span>
|
|
<Button size="small" disabled={disableDelete} onClick={() => handleDelete(record.id)}>
|
|
<DeleteIcon fontSize="small" />
|
|
</Button>
|
|
</span>
|
|
</Tooltip>
|
|
</Stack>
|
|
);
|
|
},
|
|
width: 160
|
|
}
|
|
], []);
|
|
|
|
const defaultColDef = useMemo(() => ({
|
|
sortable: true,
|
|
filter: true,
|
|
resizable: true,
|
|
flex: 1,
|
|
minWidth: 140,
|
|
}), []);
|
|
|
|
return (
|
|
<Paper
|
|
sx={{
|
|
m: 0,
|
|
p: 0,
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
flexGrow: 1,
|
|
minWidth: 0,
|
|
height: "100%",
|
|
borderRadius: 0,
|
|
border: `1px solid ${MAGIC_UI.panelBorder}`,
|
|
background: MAGIC_UI.shellBg,
|
|
boxShadow: "0 25px 80px rgba(6, 12, 30, 0.8)",
|
|
overflow: "hidden",
|
|
}}
|
|
elevation={0}
|
|
>
|
|
{/* Hero header */}
|
|
<Box sx={{ p: 3 }}>
|
|
<Stack direction="row" spacing={2} alignItems="center" justifyContent="space-between">
|
|
<Stack direction="row" spacing={1} alignItems="center">
|
|
<KeyIcon sx={{ color: MAGIC_UI.accentA }} />
|
|
<Typography variant="h6" sx={{ color: MAGIC_UI.textBright, fontWeight: 700 }}>
|
|
Enrollment Installer Codes
|
|
</Typography>
|
|
</Stack>
|
|
<Stack direction="row" spacing={1}>
|
|
<Button
|
|
variant="contained"
|
|
disabled={generating}
|
|
startIcon={generating ? <CircularProgress size={16} color="inherit" /> : null}
|
|
onClick={handleGenerate}
|
|
sx={{ background: "linear-gradient(135deg,#7dd3fc,#c084fc)", borderRadius: 999 }}
|
|
>
|
|
{generating ? "Generating…" : "Generate Code"}
|
|
</Button>
|
|
<Button variant="outlined" startIcon={<RefreshIcon />} onClick={fetchCodes} disabled={loading}>
|
|
Refresh
|
|
</Button>
|
|
</Stack>
|
|
</Stack>
|
|
</Box>
|
|
|
|
{/* Controls */}
|
|
<Box sx={{ p: 2, display: "flex", gap: 2, alignItems: "center", flexWrap: "wrap" }}>
|
|
<FormControl size="small" sx={{ minWidth: 140 }}>
|
|
<InputLabel>Status</InputLabel>
|
|
<Select value={statusFilter} label="Status" onChange={(e) => setStatusFilter(e.target.value)}>
|
|
<MenuItem value="all">All</MenuItem>
|
|
<MenuItem value="active">Active</MenuItem>
|
|
<MenuItem value="used">Used</MenuItem>
|
|
<MenuItem value="expired">Expired</MenuItem>
|
|
</Select>
|
|
</FormControl>
|
|
|
|
<FormControl size="small" sx={{ minWidth: 160 }}>
|
|
<InputLabel>Duration</InputLabel>
|
|
<Select value={ttlHours} label="Duration" onChange={(e) => setTtlHours(Number(e.target.value))}>
|
|
{TTL_PRESETS.map((p) => (
|
|
<MenuItem key={p.value} value={p.value}>
|
|
{p.label}
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
</FormControl>
|
|
|
|
<FormControl size="small" sx={{ minWidth: 160 }}>
|
|
<InputLabel>Allowed Uses</InputLabel>
|
|
<Select value={maxUses} label="Allowed Uses" onChange={(e) => setMaxUses(Number(e.target.value))}>
|
|
{[1, 2, 3, 5].map((n) => (
|
|
<MenuItem key={n} value={n}>
|
|
{n === 1 ? "Single use" : `${n} uses`}
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
</FormControl>
|
|
</Box>
|
|
|
|
{feedback && (
|
|
<Box sx={{ px: 3 }}>
|
|
<Alert severity={feedback.type} onClose={() => setFeedback(null)}>
|
|
{feedback.message}
|
|
</Alert>
|
|
</Box>
|
|
)}
|
|
{error && (
|
|
<Box sx={{ px: 3 }}>
|
|
<Alert severity="error">{error}</Alert>
|
|
</Box>
|
|
)}
|
|
|
|
{/* Grid wrapper — all overrides are SCOPED to this instance via inline CSS vars */}
|
|
<Box
|
|
className={themeClassName}
|
|
sx={{
|
|
flex: 1,
|
|
p: 2,
|
|
overflow: "hidden",
|
|
}}
|
|
// Inline style ensures the CSS variables only affect THIS grid instance
|
|
style={{
|
|
"--ag-background-color": "#070b1a",
|
|
"--ag-foreground-color": "#f4f7ff",
|
|
"--ag-header-background-color": "#0f172a",
|
|
"--ag-header-foreground-color": "#cfe0ff",
|
|
"--ag-odd-row-background-color": "rgba(255,255,255,0.02)",
|
|
"--ag-row-hover-color": "rgba(125,183,255,0.08)",
|
|
"--ag-selected-row-background-color": "rgba(64,164,255,0.18)",
|
|
"--ag-font-family": "'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif",
|
|
"--ag-border-color": "rgba(125,183,255,0.18)",
|
|
"--ag-row-border-color": "rgba(125,183,255,0.14)",
|
|
"--ag-border-radius": "8px",
|
|
}}
|
|
>
|
|
<AgGridReact
|
|
ref={gridRef}
|
|
rowData={codes}
|
|
columnDefs={columns}
|
|
defaultColDef={defaultColDef}
|
|
animateRows
|
|
pagination
|
|
paginationPageSize={20}
|
|
/>
|
|
</Box>
|
|
</Paper>
|
|
);
|
|
}
|