bonamin/bellsystems-cp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adjustments to the Devices Layout

Browse Source
This commit is contained in:
Vasileios Kousaridas
2026-02-18 10:22:41 +02:00
parent d6e522deb8
commit f54cdd525d
8 changed files with 918 additions and 335 deletions
Download Patch File Download Diff File Expand all files Collapse all files

386
frontend/src/devices/DeviceList.jsx
View File

@@ -1,4 +1,4 @@
import { useState, useEffect } from "react";
import { useState, useEffect, useRef } from "react";
import { useNavigate } from "react-router-dom";
import api from "../api/client";
import { useAuth } from "../auth/AuthContext";
@@ -7,20 +7,125 @@ import ConfirmDialog from "../components/ConfirmDialog";
const TIER_OPTIONS = ["", "basic", "small", "mini", "premium", "vip", "custom"];
// All available columns with their defaults
const ALL_COLUMNS = [
{ key: "status", label: "Status", defaultOn: true },
{ key: "name", label: "Name", defaultOn: true, alwaysOn: true },
{ key: "serialNumber", label: "Serial Number", defaultOn: true },
{ key: "location", label: "Location", defaultOn: true },
{ key: "subscrTier", label: "Subscr Tier", defaultOn: true },
{ key: "maxOutputs", label: "Max Outputs", defaultOn: false },
{ key: "hasClock", label: "Has Clock", defaultOn: false },
{ key: "hasBells", label: "Has Bells", defaultOn: false },
{ key: "totalBells", label: "Total Bells", defaultOn: true },
{ key: "bellGuard", label: "Bell Guard", defaultOn: false },
{ key: "warningsOn", label: "Warnings On", defaultOn: false },
{ key: "serialLogLevel", label: "Serial Log Level", defaultOn: false },
{ key: "sdLogLevel", label: "SD Log Level", defaultOn: false },
{ key: "bellOutputs", label: "Bell Outputs", defaultOn: false },
{ key: "hammerTimings", label: "Hammer Timings", defaultOn: false },
{ key: "ringAlertsMaster", label: "Ring Alerts Master", defaultOn: false },
{ key: "totalPlaybacks", label: "Total Playbacks", defaultOn: false },
{ key: "totalHammerStrikes", label: "Total Hammer Strikes", defaultOn: false },
{ key: "totalWarnings", label: "Total Warnings", defaultOn: false },
{ key: "warrantyActive", label: "Warranty Active", defaultOn: false },
{ key: "totalMelodies", label: "Total Melodies", defaultOn: false },
{ key: "assignedUsers", label: "Assigned Users", defaultOn: true },
];
function getDefaultVisibleColumns() {
const saved = localStorage.getItem("deviceListColumns");
if (saved) {
try {
return JSON.parse(saved);
} catch {
// ignore
}
}
return ALL_COLUMNS.filter((c) => c.defaultOn).map((c) => c.key);
}
function BoolBadge({ value, yesLabel = "Yes", noLabel = "No" }) {
return (
<span
className="px-2 py-0.5 text-xs rounded-full"
style={
value
? { backgroundColor: "var(--success-bg)", color: "var(--success-text)" }
: { backgroundColor: "var(--bg-card-hover)", color: "var(--text-muted)" }
}
>
{value ? yesLabel : noLabel}
</span>
);
}
function isSubscriptionActive(device) {
const sub = device.device_subscription;
if (!sub?.subscrStart || !sub?.subscrDuration) return false;
try {
const start = parseFirestoreDate(sub.subscrStart);
if (!start) return false;
const end = new Date(start.getTime() + sub.subscrDuration * 86400000);
return end > new Date();
} catch {
return false;
}
}
function isWarrantyActive(device) {
const stats = device.device_stats;
if (!stats?.warrantyStart || !stats?.warrantyPeriod) return !!stats?.warrantyActive;
try {
const start = parseFirestoreDate(stats.warrantyStart);
if (!start) return !!stats?.warrantyActive;
const end = new Date(start.getTime() + stats.warrantyPeriod * 86400000);
return end > new Date();
} catch {
return !!stats?.warrantyActive;
}
}
function parseFirestoreDate(str) {
if (!str) return null;
// Handle format like "22 December 2025 at 16:35:56 UTC+0000"
const cleaned = str.replace(" at ", " ").replace("UTC+0000", "UTC").replace(/UTC\+(\d{4})/, "UTC");
const d = new Date(cleaned);
return isNaN(d.getTime()) ? null : d;
}
export default function DeviceList() {
const [devices, setDevices] = useState([]);
const [total, setTotal] = useState(0);
const [loading, setLoading] = useState(true);
const [error, setError] = useState("");
const [search, setSearch] = useState("");
const [onlineFilter, setOnlineFilter] = useState("");
const [tierFilter, setTierFilter] = useState("");
const [subscrStatusFilter, setSubscrStatusFilter] = useState("");
const [warrantyStatusFilter, setWarrantyStatusFilter] = useState("");
const [hasClockFilter, setHasClockFilter] = useState("");
const [hasBellsFilter, setHasBellsFilter] = useState("");
const [deleteTarget, setDeleteTarget] = useState(null);
const [hoveredRow, setHoveredRow] = useState(null);
const [visibleColumns, setVisibleColumns] = useState(getDefaultVisibleColumns);
const [showColumnPicker, setShowColumnPicker] = useState(false);
const columnPickerRef = useRef(null);
const navigate = useNavigate();
const { hasRole } = useAuth();
const canEdit = hasRole("superadmin", "device_manager");
// Close column picker on outside click
useEffect(() => {
const handleClick = (e) => {
if (columnPickerRef.current && !columnPickerRef.current.contains(e.target)) {
setShowColumnPicker(false);
}
};
if (showColumnPicker) {
document.addEventListener("mousedown", handleClick);
return () => document.removeEventListener("mousedown", handleClick);
}
}, [showColumnPicker]);
const fetchDevices = async () => {
setLoading(true);
setError("");
@@ -33,7 +138,6 @@ export default function DeviceList() {
const qs = params.toString();
const data = await api.get(`/devices${qs ? `?${qs}` : ""}`);
setDevices(data.devices);
setTotal(data.total);
} catch (err) {
setError(err.message);
} finally {
@@ -57,6 +161,115 @@ export default function DeviceList() {
}
};
const toggleColumn = (key) => {
const col = ALL_COLUMNS.find((c) => c.key === key);
if (col?.alwaysOn) return;
setVisibleColumns((prev) => {
const next = prev.includes(key)
? prev.filter((k) => k !== key)
: [...prev, key];
localStorage.setItem("deviceListColumns", JSON.stringify(next));
return next;
});
};
const isVisible = (key) => visibleColumns.includes(key);
const renderCellValue = (key, device) => {
const attr = device.device_attributes || {};
const clock = attr.clockSettings || {};
const sub = device.device_subscription || {};
const stats = device.device_stats || {};
switch (key) {
case "status":
return (
<span
className={`inline-block w-2.5 h-2.5 rounded-full ${device.is_Online ? "bg-green-500" : ""}`}
style={!device.is_Online ? { backgroundColor: "var(--border-primary)" } : undefined}
title={device.is_Online ? "Online" : "Offline"}
/>
);
case "name":
return (
<span className="font-medium" style={{ color: "var(--text-heading)" }}>
{device.device_name || "Unnamed Device"}
</span>
);
case "serialNumber":
return <span className="font-mono text-xs" style={{ color: "var(--text-muted)" }}>{device.device_id || "-"}</span>;
case "location":
return device.device_location || "-";
case "subscrTier":
return (
<span
className="px-2 py-0.5 text-xs rounded-full capitalize"
style={{ backgroundColor: "var(--badge-blue-bg)", color: "var(--badge-blue-text)" }}
>
{sub.subscrTier || "basic"}
</span>
);
case "maxOutputs":
return sub.maxOutputs ?? "-";
case "hasClock":
return <BoolBadge value={attr.hasClock} />;
case "hasBells":
return <BoolBadge value={attr.hasBells} />;
case "totalBells":
return attr.totalBells ?? 0;
case "bellGuard":
return <BoolBadge value={attr.bellGuardOn} />;
case "warningsOn":
return <BoolBadge value={attr.warningsOn} />;
case "serialLogLevel":
return attr.serialLogLevel ?? 0;
case "sdLogLevel":
return attr.sdLogLevel ?? 0;
case "bellOutputs":
return attr.bellOutputs?.length > 0 ? attr.bellOutputs.join(", ") : "-";
case "hammerTimings":
return attr.hammerTimings?.length > 0 ? attr.hammerTimings.join(", ") : "-";
case "ringAlertsMaster":
return <BoolBadge value={clock.ringAlertsMasterOn} yesLabel="ON" noLabel="OFF" />;
case "totalPlaybacks":
return stats.totalPlaybacks ?? 0;
case "totalHammerStrikes":
return stats.totalHammerStrikes ?? 0;
case "totalWarnings":
return stats.totalWarningsGiven ?? 0;
case "warrantyActive":
return <BoolBadge value={stats.warrantyActive} yesLabel="Active" noLabel="Expired" />;
case "totalMelodies":
return device.device_melodies_all?.length ?? 0;
case "assignedUsers":
return device.user_list?.length ?? 0;
default:
return "-";
}
};
// Apply client-side filters
const filteredDevices = devices.filter((device) => {
if (subscrStatusFilter === "active" && !isSubscriptionActive(device)) return false;
if (subscrStatusFilter === "expired" && isSubscriptionActive(device)) return false;
if (warrantyStatusFilter === "active" && !isWarrantyActive(device)) return false;
if (warrantyStatusFilter === "expired" && isWarrantyActive(device)) return false;
if (hasClockFilter === "yes" && !device.device_attributes?.hasClock) return false;
if (hasClockFilter === "no" && device.device_attributes?.hasClock) return false;
if (hasBellsFilter === "yes" && !device.device_attributes?.hasBells) return false;
if (hasBellsFilter === "no" && device.device_attributes?.hasBells) return false;
return true;
});
const activeColumns = ALL_COLUMNS.filter((c) => isVisible(c.key));
const selectClass = "px-3 py-2 rounded-md text-sm cursor-pointer border";
const selectStyle = {
backgroundColor: "var(--bg-card)",
color: "var(--text-primary)",
borderColor: "var(--border-primary)",
};
return (
<div>
<div className="flex items-center justify-between mb-6">
@@ -78,39 +291,86 @@ export default function DeviceList() {
placeholder="Search by name, location, or serial number..."
/>
<div className="flex flex-wrap gap-3 items-center">
<select
value={onlineFilter}
onChange={(e) => setOnlineFilter(e.target.value)}
className="px-3 py-2 rounded-md text-sm cursor-pointer border"
style={{
backgroundColor: "var(--bg-card)",
color: "var(--text-primary)",
borderColor: "var(--border-primary)",
}}
>
<select value={onlineFilter} onChange={(e) => setOnlineFilter(e.target.value)} className={selectClass} style={selectStyle}>
<option value="">All Status</option>
<option value="true">Online</option>
<option value="false">Offline</option>
</select>
<select
value={tierFilter}
onChange={(e) => setTierFilter(e.target.value)}
className="px-3 py-2 rounded-md text-sm cursor-pointer border"
style={{
backgroundColor: "var(--bg-card)",
color: "var(--text-primary)",
borderColor: "var(--border-primary)",
}}
>
<select value={tierFilter} onChange={(e) => setTierFilter(e.target.value)} className={selectClass} style={selectStyle}>
<option value="">All Tiers</option>
{TIER_OPTIONS.filter(Boolean).map((t) => (
<option key={t} value={t}>
{t.charAt(0).toUpperCase() + t.slice(1)}
</option>
<option key={t} value={t}>{t.charAt(0).toUpperCase() + t.slice(1)}</option>
))}
</select>
<select value={subscrStatusFilter} onChange={(e) => setSubscrStatusFilter(e.target.value)} className={selectClass} style={selectStyle}>
<option value="">Subscr Status</option>
<option value="active">Active</option>
<option value="expired">Expired</option>
</select>
<select value={warrantyStatusFilter} onChange={(e) => setWarrantyStatusFilter(e.target.value)} className={selectClass} style={selectStyle}>
<option value="">Warranty Status</option>
<option value="active">Active</option>
<option value="expired">Expired</option>
</select>
<select value={hasClockFilter} onChange={(e) => setHasClockFilter(e.target.value)} className={selectClass} style={selectStyle}>
<option value="">Has Clock</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<select value={hasBellsFilter} onChange={(e) => setHasBellsFilter(e.target.value)} className={selectClass} style={selectStyle}>
<option value="">Has Bells</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
{/* Column visibility dropdown */}
<div className="relative" ref={columnPickerRef}>
<button
type="button"
onClick={() => setShowColumnPicker((prev) => !prev)}
className="px-3 py-2 rounded-md text-sm transition-colors cursor-pointer flex items-center gap-1.5 border"
style={{
borderColor: "var(--border-primary)",
color: "var(--text-secondary)",
}}
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
</svg>
Columns
</button>
{showColumnPicker && (
<div
className="absolute right-0 top-full mt-1 z-20 rounded-lg shadow-lg py-2 w-52 border max-h-80 overflow-y-auto"
style={{
backgroundColor: "var(--bg-card)",
borderColor: "var(--border-primary)",
}}
>
{ALL_COLUMNS.map((col) => (
<label
key={col.key}
className="flex items-center gap-2 px-3 py-1.5 text-sm cursor-pointer"
style={{
color: col.alwaysOn ? "var(--text-muted)" : "var(--text-primary)",
}}
>
<input
type="checkbox"
checked={isVisible(col.key)}
onChange={() => toggleColumn(col.key)}
disabled={col.alwaysOn}
className="h-3.5 w-3.5 rounded cursor-pointer"
/>
{col.label}
</label>
))}
</div>
)}
</div>
<span className="flex items-center text-sm" style={{ color: "var(--text-muted)" }}>
{total} {total === 1 ? "device" : "devices"}
{filteredDevices.length} {filteredDevices.length === 1 ? "device" : "devices"}
</span>
</div>
</div>
@@ -130,7 +390,7 @@ export default function DeviceList() {
{loading ? (
<div className="text-center py-8" style={{ color: "var(--text-muted)" }}>Loading...</div>
) : devices.length === 0 ? (
) : filteredDevices.length === 0 ? (
<div
className="rounded-lg p-8 text-center text-sm border"
style={{
@@ -153,63 +413,39 @@ export default function DeviceList() {
<table className="w-full text-sm">
<thead>
<tr style={{ backgroundColor: "var(--bg-primary)", borderBottom: "1px solid var(--border-primary)" }}>
<th className="px-4 py-3 text-left font-medium w-10" style={{ color: "var(--text-secondary)" }}>Status</th>
<th className="px-4 py-3 text-left font-medium" style={{ color: "var(--text-secondary)" }}>Name</th>
<th className="px-4 py-3 text-left font-medium" style={{ color: "var(--text-secondary)" }}>Serial Number</th>
<th className="px-4 py-3 text-left font-medium" style={{ color: "var(--text-secondary)" }}>Location</th>
<th className="px-4 py-3 text-left font-medium" style={{ color: "var(--text-secondary)" }}>Tier</th>
<th className="px-4 py-3 text-left font-medium" style={{ color: "var(--text-secondary)" }}>Bells</th>
<th className="px-4 py-3 text-left font-medium" style={{ color: "var(--text-secondary)" }}>Users</th>
{activeColumns.map((col) => (
<th
key={col.key}
className={`px-4 py-3 text-left font-medium ${col.key === "status" ? "w-10" : ""}`}
style={{ color: "var(--text-secondary)" }}
>
{col.key === "status" ? "" : col.label}
</th>
))}
{canEdit && (
<th className="px-4 py-3 text-left font-medium w-24" style={{ color: "var(--text-secondary)" }} />
)}
</tr>
</thead>
<tbody>
{devices.map((device, index) => (
{filteredDevices.map((device) => (
<tr
key={device.id}
onClick={() => navigate(`/devices/${device.id}`)}
className="cursor-pointer"
style={{
borderBottom: index < devices.length - 1 ? "1px solid var(--border-primary)" : "none",
backgroundColor: hoveredRow === device.id ? "var(--bg-card-hover)" : "transparent",
}}
onMouseEnter={() => setHoveredRow(device.id)}
onMouseLeave={() => setHoveredRow(null)}
className="cursor-pointer transition-colors"
style={{ borderBottom: "1px solid var(--border-secondary)" }}
onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = "var(--bg-card-hover)")}
onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = "transparent")}
>
<td className="px-4 py-3">
<span
className={`inline-block w-2.5 h-2.5 rounded-full ${
device.is_Online ? "bg-green-500" : ""
}`}
style={!device.is_Online ? { backgroundColor: "var(--border-primary)" } : undefined}
title={device.is_Online ? "Online" : "Offline"}
/>
</td>
<td className="px-4 py-3 font-medium" style={{ color: "var(--text-heading)" }}>
{device.device_name || "Unnamed Device"}
</td>
<td className="px-4 py-3 font-mono text-xs" style={{ color: "var(--text-muted)" }}>
{device.device_id || "-"}
</td>
<td className="px-4 py-3" style={{ color: "var(--text-primary)" }}>
{device.device_location || "-"}
</td>
<td className="px-4 py-3">
<span
className="px-2 py-0.5 text-xs rounded-full capitalize"
style={{ backgroundColor: "var(--badge-blue-bg)", color: "var(--badge-blue-text)" }}
{activeColumns.map((col) => (
<td
key={col.key}
className={`px-4 py-3 ${col.key === "status" ? "w-10" : ""}`}
style={{ color: "var(--text-primary)" }}
>
{device.device_subscription?.subscrTier || "basic"}
</span>
</td>
<td className="px-4 py-3" style={{ color: "var(--text-primary)" }}>
{device.device_attributes?.totalBells ?? 0}
</td>
<td className="px-4 py-3" style={{ color: "var(--text-primary)" }}>
{device.user_list?.length ?? 0}
</td>
{renderCellValue(col.key, device)}
</td>
))}
{canEdit && (
<td className="px-4 py-3">
<div