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

Again. Fixes :D

Browse Source
This commit is contained in:
Vasileios Kousaridas
2026-02-18 21:10:33 +02:00
parent 8d53701d8b
commit 7cf54c3f1f
1 changed files with 23 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
frontend/src/devices/DeviceDetail.jsx
View File

@@ -457,10 +457,11 @@ export default function DeviceDetail() {
// ===== Section definitions =====
const deviceInfoSection = (
<section className="rounded-lg border p-5" style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}>
<section className="rounded-lg border p-6" style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}>
<h2 className="text-lg font-semibold mb-4" style={{ color: "var(--text-heading)" }}>Device Information</h2>
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gridTemplateRows: "auto auto", gap: "1rem", alignItems: "start" }}>
{/* Row 1, Col 1: Status */}
<div style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}>
<div style={{ gridColumn: 1, gridRow: 1, display: "flex", alignItems: "center", gap: "0.75rem" }}>
<div
className="w-10 h-10 rounded-full flex items-center justify-center shrink-0"
style={{ backgroundColor: isOnline ? "var(--success-bg)" : "var(--bg-card-hover)" }}
@@ -484,25 +485,25 @@ export default function DeviceDetail() {
</div>
{/* Row 1, Col 2: Hardware Variant */}
<div>
<div style={{ gridColumn: 2, gridRow: 1 }}>
<div className="text-xs font-medium uppercase tracking-wide" style={{ color: "var(--text-muted)" }}>Hardware Variant</div>
<div className="text-sm mt-0.5" style={{ color: "var(--text-primary)" }}>VesperCore</div>
</div>
{/* Row 1-2, Col 3: Admin Notes (spans 2 rows) */}
<div style={{ gridRow: "1 / 3" }}>
{/* Row 1-2, Col 3: Admin Notes (spans 2 rows, far right) */}
<div style={{ gridColumn: 3, gridRow: "1 / 3" }}>
<div className="text-xs font-medium uppercase tracking-wide" style={{ color: "var(--text-muted)" }}>Admin Notes</div>
<div className="text-sm mt-0.5" style={{ color: "var(--text-muted)" }}>-</div>
</div>
{/* Row 2, Col 1: Serial Number */}
<div>
<div style={{ gridColumn: 1, gridRow: 2 }}>
<div className="text-xs font-medium uppercase tracking-wide" style={{ color: "var(--text-muted)" }}>Serial Number</div>
<div className="text-sm font-mono mt-0.5" style={{ color: "var(--text-primary)" }}>{device.device_id}</div>
</div>
{/* Row 2, Col 2: Document ID */}
<div>
<div style={{ gridColumn: 2, gridRow: 2 }}>
<div className="text-xs font-medium uppercase tracking-wide" style={{ color: "var(--text-muted)" }}>Document ID</div>
<div className="text-xs font-mono mt-0.5" style={{ color: "var(--text-muted)" }}>{device.id}</div>
</div>
@@ -512,7 +513,7 @@ export default function DeviceDetail() {
const subscriptionSection = (
<SectionCard title="Subscription">
<dl className="grid gap-4" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))" }}>
<dl className="grid gap-4" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))" }}>
<Field label="Tier">
<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}
@@ -783,7 +784,7 @@ export default function DeviceDetail() {
const miscSection = (
<SectionCard title="Misc">
<dl className="grid gap-4" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))" }}>
<dl className="grid gap-4" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))" }}>
<Field label="Automated Events"><BoolBadge value={device.events_on} yesLabel="ON" noLabel="OFF" /></Field>
<Field label="Device Locale"><span className="capitalize">{attr.deviceLocale || "-"}</span></Field>
<Field label="WebSocket URL">{device.websocket_url}</Field>
@@ -863,17 +864,17 @@ export default function DeviceDetail() {
</div>
{/* Row 2: Device Settings — full width */}
{deviceSettingsSection}
{/* Row 3: Location + Warranty */}
{/* Row 3: Left column (Location, Misc, Notes) | Right column (Warranty, App Users) */}
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1.5rem", alignItems: "start" }}>
{locationSection}
{warrantySection}
</div>
{/* Row 4: Misc full width */}
{miscSection}
{/* Row 5: Notes + App Users — equal width */}
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1.5rem", alignItems: "start" }}>
{notesSection}
{appUsersSection}
<div style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
{locationSection}
{miscSection}
{notesSection}
</div>
<div style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
{warrantySection}
{appUsersSection}
</div>
</div>
{/* Latest Logs */}
{logsSection}
@@ -888,9 +889,9 @@ export default function DeviceDetail() {
{subscriptionSection}
{locationSection}
</div>
{/* Row 2: Device Settings (cols 1-2) + Warranty (col 3) */}
<div style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: "1.5rem", alignItems: "stretch" }}>
{deviceSettingsSection}
{/* Row 2: Device Settings (cols 1-2) + Warranty (col 3) — same 3-col grid so borders align */}
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "1.5rem", alignItems: "stretch" }}>
<div style={{ gridColumn: "1 / 3" }}>{deviceSettingsSection}</div>
{warrantySection}
</div>
{/* Row 3: Misc + Notes + App Users — equal width */}