Added Draft Melodies. Further improvements to the UI
This commit is contained in:
@@ -178,7 +178,7 @@ function DeviceLogsPanel({ deviceSerial }) {
|
||||
const [searchText, setSearchText] = useState("");
|
||||
const [autoRefresh, setAutoRefresh] = useState(false);
|
||||
const [liveLogs, setLiveLogs] = useState([]);
|
||||
const limit = 15;
|
||||
const limit = 25;
|
||||
|
||||
const fetchLogs = useCallback(async () => {
|
||||
if (!deviceSerial) return;
|
||||
@@ -278,9 +278,9 @@ function DeviceLogsPanel({ deviceSerial }) {
|
||||
<p className="text-xs" style={{ color: "var(--text-muted)" }}>No logs found.</p>
|
||||
) : (
|
||||
<div className="rounded-md overflow-hidden border" style={{ borderColor: "var(--border-primary)" }}>
|
||||
<div className="overflow-x-auto">
|
||||
<div className="overflow-x-auto" style={{ maxHeight: 220, overflowY: "auto" }}>
|
||||
<table className="w-full text-xs">
|
||||
<thead>
|
||||
<thead style={{ position: "sticky", top: 0, zIndex: 1 }}>
|
||||
<tr style={{ backgroundColor: "var(--bg-primary)", borderBottom: "1px solid var(--border-primary)" }}>
|
||||
<th className="px-3 py-2 text-left font-medium w-40" style={{ color: "var(--text-secondary)" }}>Time</th>
|
||||
<th className="px-3 py-2 text-left font-medium w-16" style={{ color: "var(--text-secondary)" }}>Level</th>
|
||||
@@ -322,6 +322,24 @@ function DeviceLogsPanel({ deviceSerial }) {
|
||||
);
|
||||
}
|
||||
|
||||
// --- Breakpoint hook ---
|
||||
|
||||
function useBreakpoint() {
|
||||
const [cols, setCols] = useState(() => {
|
||||
const w = window.innerWidth;
|
||||
return w >= 2100 ? 3 : w >= 900 ? 2 : 1;
|
||||
});
|
||||
useEffect(() => {
|
||||
const onResize = () => {
|
||||
const w = window.innerWidth;
|
||||
setCols(w >= 2100 ? 3 : w >= 900 ? 2 : 1);
|
||||
};
|
||||
window.addEventListener("resize", onResize);
|
||||
return () => window.removeEventListener("resize", onResize);
|
||||
}, []);
|
||||
return cols;
|
||||
}
|
||||
|
||||
// --- Main component ---
|
||||
|
||||
export default function DeviceDetail() {
|
||||
@@ -429,6 +447,456 @@ export default function DeviceDetail() {
|
||||
const nextMaintenance = maintainedOn && stats.maintainancePeriod ? addDays(maintainedOn, stats.maintainancePeriod) : null;
|
||||
const maintenanceDaysLeft = nextMaintenance ? daysUntil(nextMaintenance) : null;
|
||||
|
||||
const cols = useBreakpoint();
|
||||
|
||||
// ===== Section definitions =====
|
||||
|
||||
const deviceInfoSection = (
|
||||
<section className="rounded-lg border p-5" style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}>
|
||||
<div className="device-info-row">
|
||||
{/* Status */}
|
||||
<div className="device-info-item">
|
||||
<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)" }}
|
||||
>
|
||||
<span
|
||||
className="w-3 h-3 rounded-full inline-block"
|
||||
style={{ backgroundColor: isOnline ? "var(--success-text)" : "var(--text-muted)" }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs font-medium uppercase tracking-wide" style={{ color: "var(--text-muted)" }}>Status</div>
|
||||
<div className="text-sm font-semibold" style={{ color: isOnline ? "var(--success-text)" : "var(--text-muted)" }}>
|
||||
{isOnline ? "Online" : "Offline"}
|
||||
{mqttStatus && (
|
||||
<span className="ml-2 text-xs font-normal" style={{ color: "var(--text-muted)" }}>
|
||||
{mqttStatus.seconds_since_heartbeat}s ago
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Serial + Hardware Variant */}
|
||||
<div className="device-info-item">
|
||||
<div>
|
||||
<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 className="text-xs mt-0.5" style={{ color: "var(--text-muted)" }}>HW: VesperCore</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Admin Note */}
|
||||
<div className="device-info-item">
|
||||
<div>
|
||||
<div className="text-xs font-medium uppercase tracking-wide" style={{ color: "var(--text-muted)" }}>Admin Note</div>
|
||||
<div className="text-sm mt-0.5" style={{ color: "var(--text-muted)" }}>-</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Document ID */}
|
||||
<div className="device-info-item">
|
||||
<div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
const subscriptionSection = (
|
||||
<SectionCard title="Subscription">
|
||||
<dl className="grid gap-4" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(150px, 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}
|
||||
</span>
|
||||
</Field>
|
||||
<Field label="Start Date">{formatDate(sub.subscrStart)}</Field>
|
||||
<Field label="Duration">{sub.subscrDuration ? daysToDisplay(sub.subscrDuration) : "-"}</Field>
|
||||
<Field label="Expiration Date">{subscrEnd ? formatDateNice(subscrEnd) : "-"}</Field>
|
||||
<Field label="Time Left">
|
||||
{subscrDaysLeft === null ? "-" : subscrDaysLeft <= 0 ? (
|
||||
<span className="px-2 py-0.5 text-xs rounded-full" style={{ backgroundColor: "var(--danger-bg)", color: "var(--danger-text)" }}>
|
||||
Subscription Expired
|
||||
</span>
|
||||
) : (
|
||||
<span className="px-2 py-0.5 text-xs rounded-full" style={{ backgroundColor: "var(--success-bg)", color: "var(--success-text)" }}>
|
||||
{subscrDaysLeft} days left
|
||||
</span>
|
||||
)}
|
||||
</Field>
|
||||
<Field label="Max Users">{sub.maxUsers}</Field>
|
||||
<Field label="Max Outputs">{sub.maxOutputs}</Field>
|
||||
</dl>
|
||||
</SectionCard>
|
||||
);
|
||||
|
||||
const locationSection = (
|
||||
<SectionCard title="Location">
|
||||
{coords ? (
|
||||
<div className="location-split">
|
||||
<div className="location-fields">
|
||||
<dl className="space-y-4">
|
||||
<Field label="Location">{device.device_location}</Field>
|
||||
<Field label="Coordinates">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span>{formatCoordinates(coords)}</span>
|
||||
<a
|
||||
href={`https://www.google.com/maps?q=${coords.lat},${coords.lng}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="px-2 py-0.5 text-xs rounded-md inline-block"
|
||||
style={{ backgroundColor: "var(--badge-blue-bg)", color: "var(--badge-blue-text)" }}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
Open in Maps
|
||||
</a>
|
||||
</div>
|
||||
</Field>
|
||||
{locationName && <Field label="Nearest Place">{locationName}</Field>}
|
||||
</dl>
|
||||
</div>
|
||||
<div className="location-map">
|
||||
<div className="rounded-md overflow-hidden border w-full" style={{ borderColor: "var(--border-primary)", height: 250 }}>
|
||||
<MapContainer center={[coords.lat, coords.lng]} zoom={13} style={{ height: "100%", width: "100%" }} scrollWheelZoom={false}>
|
||||
<TileLayer
|
||||
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
/>
|
||||
<Marker position={[coords.lat, coords.lng]} />
|
||||
</MapContainer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<dl className="space-y-4">
|
||||
<Field label="Location">{device.device_location}</Field>
|
||||
<Field label="Coordinates">{device.device_location_coordinates || "-"}</Field>
|
||||
</dl>
|
||||
)}
|
||||
</SectionCard>
|
||||
);
|
||||
|
||||
const deviceSettingsSection = (
|
||||
<SectionCard title="Device Settings">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Left Column */}
|
||||
<div>
|
||||
<Subsection title="Basic Attributes" isFirst>
|
||||
<FieldRow>
|
||||
<Field label="Bell Guard"><BoolBadge value={attr.bellGuardOn} /></Field>
|
||||
<Field label="Warnings On"><BoolBadge value={attr.warningsOn} /></Field>
|
||||
<Field label="Bell Guard Safety"><BoolBadge value={attr.bellGuardSafetyOn} /></Field>
|
||||
</FieldRow>
|
||||
</Subsection>
|
||||
<Subsection title="Alert Settings">
|
||||
<FieldRow>
|
||||
<Field label="Alerts Status"><BoolBadge value={clock.ringAlertsMasterOn} yesLabel="ON" noLabel="OFF" /></Field>
|
||||
<Field label="Alerts Type"><span className="capitalize">{clock.ringAlerts || "-"}</span></Field>
|
||||
<Field label="Ring Intervals">{clock.ringIntervals}</Field>
|
||||
</FieldRow>
|
||||
<FieldRow>
|
||||
<Field label="Hour Bell">{clock.hourAlertsBell}</Field>
|
||||
<Field label="Half-Hour Bell">{clock.halfhourAlertsBell}</Field>
|
||||
<Field label="Quarter Bell">{clock.quarterAlertsBell}</Field>
|
||||
</FieldRow>
|
||||
<FieldRow>
|
||||
<Field label="Daytime Silence"><BoolBadge value={clock.isDaySilenceOn} yesLabel="ON" noLabel="OFF" /></Field>
|
||||
<Field label="Day-Time Period">
|
||||
{formatTimestamp(clock.daySilenceFrom)} - {formatTimestamp(clock.daySilenceTo)}
|
||||
</Field>
|
||||
</FieldRow>
|
||||
<FieldRow>
|
||||
<Field label="Nighttime Silence"><BoolBadge value={clock.isNightSilenceOn} yesLabel="ON" noLabel="OFF" /></Field>
|
||||
<Field label="Nighttime Period">
|
||||
{formatTimestamp(clock.nightSilenceFrom)} - {formatTimestamp(clock.nightSilenceTo)}
|
||||
</Field>
|
||||
</FieldRow>
|
||||
</Subsection>
|
||||
<Subsection title="Backlight Settings">
|
||||
<FieldRow>
|
||||
<Field label="Auto Backlight"><BoolBadge value={clock.isBacklightAutomationOn} yesLabel="ON" noLabel="OFF" /></Field>
|
||||
<Field label="Backlight Output">{clock.backlightOutput}</Field>
|
||||
<Field label="Period">
|
||||
{formatTimestamp(clock.backlightTurnOnTime)} - {formatTimestamp(clock.backlightTurnOffTime)}
|
||||
</Field>
|
||||
</FieldRow>
|
||||
</Subsection>
|
||||
<Subsection title="Logging">
|
||||
<FieldRow>
|
||||
<Field label="Serial Log Level">{attr.serialLogLevel}</Field>
|
||||
<Field label="SD Log Level">{attr.sdLogLevel}</Field>
|
||||
<Field label="MQTT Log Level">{attr.mqttLogLevel ?? 0}</Field>
|
||||
</FieldRow>
|
||||
</Subsection>
|
||||
</div>
|
||||
{/* Right Column */}
|
||||
<div>
|
||||
<Subsection title="Network" isFirst>
|
||||
<FieldRow>
|
||||
<Field label="Hostname">{net.hostname}</Field>
|
||||
<Field label="Has Static IP"><BoolBadge value={net.useStaticIP} /></Field>
|
||||
</FieldRow>
|
||||
</Subsection>
|
||||
<Subsection title="Clock Settings">
|
||||
<FieldRow>
|
||||
<Field label="Has Clock"><BoolBadge value={attr.hasClock} /></Field>
|
||||
<Field label="Ring Intervals">{clock.ringIntervals}</Field>
|
||||
</FieldRow>
|
||||
<FieldRow>
|
||||
<Field label="Odd Output">{clock.clockOutputs?.[0] ?? "-"}</Field>
|
||||
<Field label="Even Output">{clock.clockOutputs?.[1] ?? "-"}</Field>
|
||||
</FieldRow>
|
||||
<FieldRow>
|
||||
<Field label="Run Pulse">{clock.clockTimings?.[0] != null ? msToSeconds(clock.clockTimings[0]) : "-"}</Field>
|
||||
<Field label="Pause Pulse">{clock.clockTimings?.[1] != null ? msToSeconds(clock.clockTimings[1]) : "-"}</Field>
|
||||
</FieldRow>
|
||||
</Subsection>
|
||||
<Subsection title="Bell Settings">
|
||||
<FieldRow>
|
||||
<Field label="Bells Active"><BoolBadge value={attr.hasBells} /></Field>
|
||||
<Field label="Total">{attr.totalBells ?? "-"}</Field>
|
||||
</FieldRow>
|
||||
{attr.bellOutputs?.length > 0 && (
|
||||
<div className="mt-3">
|
||||
<dt className="text-xs font-medium uppercase tracking-wide mb-2" style={{ color: "var(--text-muted)" }}>
|
||||
Output & Timing Map
|
||||
</dt>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{attr.bellOutputs.map((output, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="relative rounded-md border px-4 py-3 text-center overflow-hidden"
|
||||
style={{ borderColor: "var(--border-primary)", backgroundColor: "var(--bg-primary)", minWidth: 90 }}
|
||||
>
|
||||
<span
|
||||
className="absolute inset-0 flex items-center justify-center font-bold pointer-events-none select-none"
|
||||
style={{ fontSize: "3rem", color: "var(--text-heading)", opacity: 0.06 }}
|
||||
>
|
||||
{i + 1}
|
||||
</span>
|
||||
<div className="relative">
|
||||
<div className="text-xs" style={{ color: "var(--text-muted)" }}>
|
||||
Output <span style={{ color: "var(--text-primary)" }}>{output}</span>
|
||||
</div>
|
||||
<div className="text-xs mt-1" style={{ color: "var(--text-muted)" }}>
|
||||
{attr.hammerTimings?.[i] != null ? (
|
||||
<><span style={{ color: "var(--text-primary)" }}>{attr.hammerTimings[i]}</span> ms</>
|
||||
) : "-"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Subsection>
|
||||
</div>
|
||||
</div>
|
||||
</SectionCard>
|
||||
);
|
||||
|
||||
const warrantySection = (
|
||||
<SectionCard title="Warranty, Maintenance & Statistics">
|
||||
<Subsection title="Warranty Information" isFirst>
|
||||
<dl className="grid gap-4" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))" }}>
|
||||
<Field label="Warranty Status">
|
||||
{warrantyDaysLeft !== null ? (
|
||||
warrantyDaysLeft > 0 ? (
|
||||
<span className="px-2 py-0.5 text-xs rounded-full" style={{ backgroundColor: "var(--success-bg)", color: "var(--success-text)" }}>Active</span>
|
||||
) : (
|
||||
<span className="px-2 py-0.5 text-xs rounded-full" style={{ backgroundColor: "var(--danger-bg)", color: "var(--danger-text)" }}>Expired</span>
|
||||
)
|
||||
) : (
|
||||
<BoolBadge value={stats.warrantyActive} yesLabel="Active" noLabel="Expired" />
|
||||
)}
|
||||
</Field>
|
||||
<Field label="Start Date">{formatDate(stats.warrantyStart)}</Field>
|
||||
<Field label="Warranty Period">{stats.warrantyPeriod ? daysToDisplay(stats.warrantyPeriod) : "-"}</Field>
|
||||
<Field label="Expiration Date">{warrantyEnd ? formatDateNice(warrantyEnd) : "-"}</Field>
|
||||
<Field label="Remaining">
|
||||
{warrantyDaysLeft === null ? "-" : warrantyDaysLeft <= 0 ? (
|
||||
<span style={{ color: "var(--danger-text)" }}>Expired</span>
|
||||
) : (
|
||||
`${warrantyDaysLeft} days`
|
||||
)}
|
||||
</Field>
|
||||
</dl>
|
||||
</Subsection>
|
||||
<Subsection title="Maintenance">
|
||||
<dl className="grid gap-4" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))" }}>
|
||||
<Field label="Last Maintained On">{formatDate(stats.maintainedOn)}</Field>
|
||||
<Field label="Maintenance Period">{stats.maintainancePeriod ? daysToDisplay(stats.maintainancePeriod) : "-"}</Field>
|
||||
<Field label="Next Scheduled">
|
||||
{nextMaintenance ? (
|
||||
<span>
|
||||
{formatDateNice(nextMaintenance)}
|
||||
{maintenanceDaysLeft !== null && (
|
||||
<span className="ml-1 text-xs" style={{ color: maintenanceDaysLeft <= 0 ? "var(--danger-text)" : "var(--text-muted)" }}>
|
||||
({maintenanceDaysLeft <= 0 ? "overdue" : formatRelativeTime(maintenanceDaysLeft)})
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
) : "-"}
|
||||
</Field>
|
||||
</dl>
|
||||
</Subsection>
|
||||
<Subsection title="Statistics">
|
||||
<dl className="grid gap-4" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))" }}>
|
||||
<Field label="Total Playbacks">{stats.totalPlaybacks}</Field>
|
||||
<Field label="Total Hammer Strikes">{stats.totalHammerStrikes}</Field>
|
||||
<Field label="Total Warnings Given">{stats.totalWarningsGiven}</Field>
|
||||
<Field label="Total Melodies">{device.device_melodies_all?.length ?? 0}</Field>
|
||||
<Field label="Favorite Melodies">{device.device_melodies_favorites?.length ?? 0}</Field>
|
||||
{stats.perBellStrikes?.length > 0 && (
|
||||
<div style={{ gridColumn: "1 / -1" }}>
|
||||
<Field label="Per Bell Strikes">
|
||||
<div className="flex flex-wrap gap-2 mt-1">
|
||||
{stats.perBellStrikes.slice(0, attr.totalBells || stats.perBellStrikes.length).map((count, i) => (
|
||||
<span key={i} className="px-2 py-1 text-xs rounded-md border" style={{ borderColor: "var(--border-primary)", color: "var(--text-primary)" }}>
|
||||
Bell {i + 1}: {count}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</Field>
|
||||
</div>
|
||||
)}
|
||||
</dl>
|
||||
</Subsection>
|
||||
</SectionCard>
|
||||
);
|
||||
|
||||
const miscSection = (
|
||||
<SectionCard title="Misc">
|
||||
<dl className="grid gap-4" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(150px, 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>
|
||||
<Field label="Has Assistant"><BoolBadge value={attr.hasAssistant} /></Field>
|
||||
<div style={{ gridColumn: "1 / -1" }}>
|
||||
<Field label="Church Assistant URL">{device.churchAssistantURL}</Field>
|
||||
</div>
|
||||
</dl>
|
||||
</SectionCard>
|
||||
);
|
||||
|
||||
const appUsersSection = (
|
||||
<SectionCard title={`App Users (${deviceUsers.length})`}>
|
||||
{usersLoading ? (
|
||||
<p className="text-sm" style={{ color: "var(--text-muted)" }}>Loading users...</p>
|
||||
) : deviceUsers.length === 0 ? (
|
||||
<p className="text-sm" style={{ color: "var(--text-muted)" }}>No users assigned to this device.</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{deviceUsers.map((user, i) => (
|
||||
<div
|
||||
key={user.user_id || i}
|
||||
className="p-3 rounded-md border cursor-pointer hover:opacity-90 transition-colors"
|
||||
style={{ backgroundColor: "var(--bg-primary)", borderColor: "var(--border-primary)" }}
|
||||
onClick={() => user.user_id && navigate(`/users/${user.user_id}`)}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium truncate" style={{ color: "var(--text-heading)" }}>
|
||||
{user.display_name || user.email || "Unknown User"}
|
||||
</p>
|
||||
{user.email && user.display_name && (
|
||||
<p className="text-xs truncate" style={{ color: "var(--text-muted)" }}>{user.email}</p>
|
||||
)}
|
||||
{user.user_id && (
|
||||
<p className="text-xs font-mono" style={{ color: "var(--text-muted)" }}>{user.user_id}</p>
|
||||
)}
|
||||
</div>
|
||||
{user.role && (
|
||||
<span className="px-2 py-0.5 text-xs rounded-full capitalize shrink-0 ml-2" style={{ backgroundColor: "var(--badge-blue-bg)", color: "var(--badge-blue-text)" }}>
|
||||
{user.role}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</SectionCard>
|
||||
);
|
||||
|
||||
const notesSection = <NotesPanel deviceId={id} />;
|
||||
const logsSection = <DeviceLogsPanel deviceSerial={device.device_id} />;
|
||||
|
||||
// ===== Layout rendering =====
|
||||
|
||||
const renderSingleColumn = () => (
|
||||
<div className="device-column">
|
||||
{deviceInfoSection}
|
||||
{locationSection}
|
||||
{notesSection}
|
||||
{subscriptionSection}
|
||||
{deviceSettingsSection}
|
||||
{warrantySection}
|
||||
{miscSection}
|
||||
{appUsersSection}
|
||||
{logsSection}
|
||||
</div>
|
||||
);
|
||||
|
||||
const renderDoubleColumn = () => (
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
|
||||
{/* Row 1: Device Info + Subscription — equal height */}
|
||||
<div className="device-equal-row">
|
||||
{deviceInfoSection}
|
||||
{subscriptionSection}
|
||||
</div>
|
||||
{/* Row 2: Device Settings — full width */}
|
||||
{deviceSettingsSection}
|
||||
{/* Row 3: Location+Misc (left) vs Warranty (right) */}
|
||||
<div className="device-columns">
|
||||
<div className="device-flex-fill" style={{ flex: 1, gap: "1.5rem" }}>
|
||||
<div className="flex-grow">{locationSection}</div>
|
||||
{miscSection}
|
||||
</div>
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
{warrantySection}
|
||||
</div>
|
||||
</div>
|
||||
{/* Row 4: Notes vs App Users */}
|
||||
<div className="device-columns">
|
||||
<div style={{ flex: 1, minWidth: 0 }}>{notesSection}</div>
|
||||
<div style={{ flex: 1, minWidth: 0 }}>{appUsersSection}</div>
|
||||
</div>
|
||||
{/* Latest Logs */}
|
||||
{logsSection}
|
||||
</div>
|
||||
);
|
||||
|
||||
const renderTripleColumn = () => (
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
|
||||
{/* Row 1: DevInfo+Subscription (cols 1-2 equal height) + Location (col 3) */}
|
||||
<div className="device-columns">
|
||||
<div className="device-equal-row" style={{ flex: 2 }}>
|
||||
{deviceInfoSection}
|
||||
{subscriptionSection}
|
||||
</div>
|
||||
<div style={{ flex: 1, minWidth: 0 }}>{locationSection}</div>
|
||||
</div>
|
||||
{/* Row 2: Device Settings (cols 1-2) + Warranty (col 3) */}
|
||||
<div className="device-columns">
|
||||
<div style={{ flex: 2, minWidth: 0 }}>{deviceSettingsSection}</div>
|
||||
<div style={{ flex: 1, minWidth: 0 }}>{warrantySection}</div>
|
||||
</div>
|
||||
{/* Row 3: Misc (col1) + Notes (col2) + App Users (col3) */}
|
||||
<div className="device-columns">
|
||||
<div style={{ flex: 1, minWidth: 0 }}>{miscSection}</div>
|
||||
<div style={{ flex: 1, minWidth: 0 }}>{notesSection}</div>
|
||||
<div style={{ flex: 1, minWidth: 0 }}>{appUsersSection}</div>
|
||||
</div>
|
||||
{/* Latest Logs */}
|
||||
{logsSection}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Header */}
|
||||
@@ -460,393 +928,7 @@ export default function DeviceDetail() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="device-sections">
|
||||
{/* ===== BASIC INFORMATION (double-width) ===== */}
|
||||
<div className="section-wide">
|
||||
<section className="rounded-lg border p-5" style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}>
|
||||
<div className="flex flex-wrap items-center gap-6 divide-x" style={{ borderColor: "var(--border-secondary)" }}>
|
||||
{/* Status — fancy */}
|
||||
<div className="flex items-center gap-3 pr-6">
|
||||
<div
|
||||
className="w-10 h-10 rounded-full flex items-center justify-center"
|
||||
style={{ backgroundColor: isOnline ? "var(--success-bg)" : "var(--bg-card-hover)" }}
|
||||
>
|
||||
<span
|
||||
className="w-3 h-3 rounded-full inline-block"
|
||||
style={{ backgroundColor: isOnline ? "var(--success-text)" : "var(--text-muted)" }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs font-medium uppercase tracking-wide" style={{ color: "var(--text-muted)" }}>Status</div>
|
||||
<div className="text-sm font-semibold" style={{ color: isOnline ? "var(--success-text)" : "var(--text-muted)" }}>
|
||||
{isOnline ? "Online" : "Offline"}
|
||||
{mqttStatus && (
|
||||
<span className="ml-2 text-xs font-normal" style={{ color: "var(--text-muted)" }}>
|
||||
(MQTT {mqttStatus.seconds_since_heartbeat}s ago)
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Serial + Hardware Variant */}
|
||||
<div className="pl-6">
|
||||
<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}
|
||||
<span className="ml-3 text-xs" style={{ color: "var(--text-muted)" }}>HW: -</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Admin Notes */}
|
||||
<div className="pl-6">
|
||||
<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>
|
||||
|
||||
{/* Document ID */}
|
||||
<div className="pl-6">
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* ===== DEVICE SETTINGS (double-width) ===== */}
|
||||
<div className="section-wide">
|
||||
<SectionCard title="Device Settings">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Left Column */}
|
||||
<div>
|
||||
{/* Basic Attributes */}
|
||||
<Subsection title="Basic Attributes" isFirst>
|
||||
<FieldRow>
|
||||
<Field label="Bell Guard"><BoolBadge value={attr.bellGuardOn} /></Field>
|
||||
<Field label="Warnings On"><BoolBadge value={attr.warningsOn} /></Field>
|
||||
<Field label="Bell Guard Safety"><BoolBadge value={attr.bellGuardSafetyOn} /></Field>
|
||||
</FieldRow>
|
||||
</Subsection>
|
||||
|
||||
{/* Alert Settings */}
|
||||
<Subsection title="Alert Settings">
|
||||
<FieldRow>
|
||||
<Field label="Alerts Status"><BoolBadge value={clock.ringAlertsMasterOn} yesLabel="ON" noLabel="OFF" /></Field>
|
||||
<Field label="Alerts Type"><span className="capitalize">{clock.ringAlerts || "-"}</span></Field>
|
||||
<Field label="Ring Intervals">{clock.ringIntervals}</Field>
|
||||
</FieldRow>
|
||||
<FieldRow>
|
||||
<Field label="Hour Bell">{clock.hourAlertsBell}</Field>
|
||||
<Field label="Half-Hour Bell">{clock.halfhourAlertsBell}</Field>
|
||||
<Field label="Quarter Bell">{clock.quarterAlertsBell}</Field>
|
||||
</FieldRow>
|
||||
<FieldRow>
|
||||
<Field label="Daytime Silence"><BoolBadge value={clock.isDaySilenceOn} yesLabel="ON" noLabel="OFF" /></Field>
|
||||
<Field label="Day-Time Period">
|
||||
{formatTimestamp(clock.daySilenceFrom)} - {formatTimestamp(clock.daySilenceTo)}
|
||||
</Field>
|
||||
</FieldRow>
|
||||
<FieldRow>
|
||||
<Field label="Nighttime Silence"><BoolBadge value={clock.isNightSilenceOn} yesLabel="ON" noLabel="OFF" /></Field>
|
||||
<Field label="Nighttime Period">
|
||||
{formatTimestamp(clock.nightSilenceFrom)} - {formatTimestamp(clock.nightSilenceTo)}
|
||||
</Field>
|
||||
</FieldRow>
|
||||
</Subsection>
|
||||
|
||||
{/* Backlight Settings */}
|
||||
<Subsection title="Backlight Settings">
|
||||
<FieldRow>
|
||||
<Field label="Auto Backlight"><BoolBadge value={clock.isBacklightAutomationOn} yesLabel="ON" noLabel="OFF" /></Field>
|
||||
<Field label="Backlight Output">{clock.backlightOutput}</Field>
|
||||
<Field label="Period">
|
||||
{formatTimestamp(clock.backlightTurnOnTime)} - {formatTimestamp(clock.backlightTurnOffTime)}
|
||||
</Field>
|
||||
</FieldRow>
|
||||
</Subsection>
|
||||
|
||||
{/* Logging */}
|
||||
<Subsection title="Logging">
|
||||
<FieldRow>
|
||||
<Field label="Serial Log Level">{attr.serialLogLevel}</Field>
|
||||
<Field label="SD Log Level">{attr.sdLogLevel}</Field>
|
||||
<Field label="MQTT Log Level">{attr.mqttLogLevel ?? 0}</Field>
|
||||
</FieldRow>
|
||||
</Subsection>
|
||||
</div>
|
||||
|
||||
{/* Right Column */}
|
||||
<div>
|
||||
{/* Network */}
|
||||
<Subsection title="Network" isFirst>
|
||||
<FieldRow>
|
||||
<Field label="Hostname">{net.hostname}</Field>
|
||||
<Field label="Has Static IP"><BoolBadge value={net.useStaticIP} /></Field>
|
||||
</FieldRow>
|
||||
</Subsection>
|
||||
|
||||
{/* Clock Settings */}
|
||||
<Subsection title="Clock Settings">
|
||||
<FieldRow>
|
||||
<Field label="Has Clock"><BoolBadge value={attr.hasClock} /></Field>
|
||||
<Field label="Ring Intervals">{clock.ringIntervals}</Field>
|
||||
</FieldRow>
|
||||
<FieldRow>
|
||||
<Field label="Odd Output">{clock.clockOutputs?.[0] ?? "-"}</Field>
|
||||
<Field label="Even Output">{clock.clockOutputs?.[1] ?? "-"}</Field>
|
||||
</FieldRow>
|
||||
<FieldRow>
|
||||
<Field label="Run Pulse">{clock.clockTimings?.[0] != null ? msToSeconds(clock.clockTimings[0]) : "-"}</Field>
|
||||
<Field label="Pause Pulse">{clock.clockTimings?.[1] != null ? msToSeconds(clock.clockTimings[1]) : "-"}</Field>
|
||||
</FieldRow>
|
||||
</Subsection>
|
||||
|
||||
{/* Bell Settings */}
|
||||
<Subsection title="Bell Settings">
|
||||
<FieldRow>
|
||||
<Field label="Bells Active"><BoolBadge value={attr.hasBells} /></Field>
|
||||
<Field label="Total">{attr.totalBells ?? "-"}</Field>
|
||||
</FieldRow>
|
||||
{/* Bell Output-to-Timing mapping with watermark numbers */}
|
||||
{attr.bellOutputs?.length > 0 && (
|
||||
<div className="mt-3">
|
||||
<dt className="text-xs font-medium uppercase tracking-wide mb-2" style={{ color: "var(--text-muted)" }}>
|
||||
Output & Timing Map
|
||||
</dt>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{attr.bellOutputs.map((output, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="relative rounded-md border px-4 py-3 text-center overflow-hidden"
|
||||
style={{ borderColor: "var(--border-primary)", backgroundColor: "var(--bg-primary)", minWidth: 90 }}
|
||||
>
|
||||
{/* Watermark number */}
|
||||
<span
|
||||
className="absolute inset-0 flex items-center justify-center font-bold pointer-events-none select-none"
|
||||
style={{ fontSize: "3rem", color: "var(--text-heading)", opacity: 0.06 }}
|
||||
>
|
||||
{i + 1}
|
||||
</span>
|
||||
{/* Content */}
|
||||
<div className="relative">
|
||||
<div className="text-xs" style={{ color: "var(--text-muted)" }}>
|
||||
Output <span style={{ color: "var(--text-primary)" }}>{output}</span>
|
||||
</div>
|
||||
<div className="text-xs mt-1" style={{ color: "var(--text-muted)" }}>
|
||||
{attr.hammerTimings?.[i] != null ? (
|
||||
<><span style={{ color: "var(--text-primary)" }}>{attr.hammerTimings[i]}</span> ms</>
|
||||
) : "-"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Subsection>
|
||||
</div>
|
||||
</div>
|
||||
</SectionCard>
|
||||
</div>
|
||||
|
||||
{/* ===== SINGLE-WIDTH SECTIONS ===== */}
|
||||
|
||||
{/* Misc */}
|
||||
<SectionCard title="Misc">
|
||||
<dl className="grid gap-4" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(150px, 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>
|
||||
<Field label="Has Assistant"><BoolBadge value={attr.hasAssistant} /></Field>
|
||||
<div style={{ gridColumn: "1 / -1" }}>
|
||||
<Field label="Church Assistant URL">{device.churchAssistantURL}</Field>
|
||||
</div>
|
||||
</dl>
|
||||
</SectionCard>
|
||||
|
||||
{/* Subscription */}
|
||||
<SectionCard title="Subscription">
|
||||
<dl className="grid gap-4" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(150px, 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}
|
||||
</span>
|
||||
</Field>
|
||||
<Field label="Start Date">{formatDate(sub.subscrStart)}</Field>
|
||||
<Field label="Duration">{sub.subscrDuration ? daysToDisplay(sub.subscrDuration) : "-"}</Field>
|
||||
<Field label="Expiration Date">{subscrEnd ? formatDateNice(subscrEnd) : "-"}</Field>
|
||||
<Field label="Time Left">
|
||||
{subscrDaysLeft === null ? "-" : subscrDaysLeft <= 0 ? (
|
||||
<span className="px-2 py-0.5 text-xs rounded-full" style={{ backgroundColor: "var(--danger-bg)", color: "var(--danger-text)" }}>
|
||||
Subscription Expired
|
||||
</span>
|
||||
) : (
|
||||
<span className="px-2 py-0.5 text-xs rounded-full" style={{ backgroundColor: "var(--success-bg)", color: "var(--success-text)" }}>
|
||||
{subscrDaysLeft} days left
|
||||
</span>
|
||||
)}
|
||||
</Field>
|
||||
<Field label="Max Users">{sub.maxUsers}</Field>
|
||||
<Field label="Max Outputs">{sub.maxOutputs}</Field>
|
||||
</dl>
|
||||
</SectionCard>
|
||||
|
||||
{/* Location */}
|
||||
<SectionCard title="Location">
|
||||
<div className={coords ? "grid grid-cols-1 md:grid-cols-2 gap-4" : ""}>
|
||||
<dl className="space-y-4">
|
||||
<Field label="Location">{device.device_location}</Field>
|
||||
<Field label="Coordinates">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span>{coords ? formatCoordinates(coords) : device.device_location_coordinates || "-"}</span>
|
||||
{coords && (
|
||||
<a
|
||||
href={`https://www.google.com/maps?q=${coords.lat},${coords.lng}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="px-2 py-0.5 text-xs rounded-md inline-block"
|
||||
style={{ backgroundColor: "var(--badge-blue-bg)", color: "var(--badge-blue-text)" }}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
Open in Maps
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</Field>
|
||||
{locationName && (
|
||||
<Field label="Nearest Place">{locationName}</Field>
|
||||
)}
|
||||
</dl>
|
||||
{coords && (
|
||||
<div className="rounded-md overflow-hidden border" style={{ borderColor: "var(--border-primary)", minHeight: 300 }}>
|
||||
<MapContainer center={[coords.lat, coords.lng]} zoom={13} style={{ height: "100%", width: "100%", minHeight: 300 }} scrollWheelZoom={false}>
|
||||
<TileLayer
|
||||
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
/>
|
||||
<Marker position={[coords.lat, coords.lng]} />
|
||||
</MapContainer>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</SectionCard>
|
||||
|
||||
{/* Warranty, Maintenance & Statistics */}
|
||||
<SectionCard title="Warranty, Maintenance & Statistics">
|
||||
<Subsection title="Warranty Information" isFirst>
|
||||
<dl className="grid gap-4" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))" }}>
|
||||
<Field label="Warranty Status">
|
||||
{warrantyDaysLeft !== null ? (
|
||||
warrantyDaysLeft > 0 ? (
|
||||
<span className="px-2 py-0.5 text-xs rounded-full" style={{ backgroundColor: "var(--success-bg)", color: "var(--success-text)" }}>Active</span>
|
||||
) : (
|
||||
<span className="px-2 py-0.5 text-xs rounded-full" style={{ backgroundColor: "var(--danger-bg)", color: "var(--danger-text)" }}>Expired</span>
|
||||
)
|
||||
) : (
|
||||
<BoolBadge value={stats.warrantyActive} yesLabel="Active" noLabel="Expired" />
|
||||
)}
|
||||
</Field>
|
||||
<Field label="Start Date">{formatDate(stats.warrantyStart)}</Field>
|
||||
<Field label="Warranty Period">{stats.warrantyPeriod ? daysToDisplay(stats.warrantyPeriod) : "-"}</Field>
|
||||
<Field label="Expiration Date">{warrantyEnd ? formatDateNice(warrantyEnd) : "-"}</Field>
|
||||
<Field label="Remaining">
|
||||
{warrantyDaysLeft === null ? "-" : warrantyDaysLeft <= 0 ? (
|
||||
<span style={{ color: "var(--danger-text)" }}>Expired</span>
|
||||
) : (
|
||||
`${warrantyDaysLeft} days`
|
||||
)}
|
||||
</Field>
|
||||
</dl>
|
||||
</Subsection>
|
||||
|
||||
<Subsection title="Maintenance">
|
||||
<dl className="grid gap-4" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))" }}>
|
||||
<Field label="Last Maintained On">{formatDate(stats.maintainedOn)}</Field>
|
||||
<Field label="Maintenance Period">{stats.maintainancePeriod ? daysToDisplay(stats.maintainancePeriod) : "-"}</Field>
|
||||
<Field label="Next Scheduled">
|
||||
{nextMaintenance ? (
|
||||
<span>
|
||||
{formatDateNice(nextMaintenance)}
|
||||
{maintenanceDaysLeft !== null && (
|
||||
<span className="ml-1 text-xs" style={{ color: maintenanceDaysLeft <= 0 ? "var(--danger-text)" : "var(--text-muted)" }}>
|
||||
({maintenanceDaysLeft <= 0 ? "overdue" : formatRelativeTime(maintenanceDaysLeft)})
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
) : "-"}
|
||||
</Field>
|
||||
</dl>
|
||||
</Subsection>
|
||||
|
||||
<Subsection title="Statistics">
|
||||
<dl className="grid gap-4" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))" }}>
|
||||
<Field label="Total Playbacks">{stats.totalPlaybacks}</Field>
|
||||
<Field label="Total Hammer Strikes">{stats.totalHammerStrikes}</Field>
|
||||
<Field label="Total Warnings Given">{stats.totalWarningsGiven}</Field>
|
||||
<Field label="Total Melodies">{device.device_melodies_all?.length ?? 0}</Field>
|
||||
<Field label="Favorite Melodies">{device.device_melodies_favorites?.length ?? 0}</Field>
|
||||
{stats.perBellStrikes?.length > 0 && (
|
||||
<div style={{ gridColumn: "1 / -1" }}>
|
||||
<Field label="Per Bell Strikes">
|
||||
<div className="flex flex-wrap gap-2 mt-1">
|
||||
{stats.perBellStrikes.slice(0, attr.totalBells || stats.perBellStrikes.length).map((count, i) => (
|
||||
<span key={i} className="px-2 py-1 text-xs rounded-md border" style={{ borderColor: "var(--border-primary)", color: "var(--text-primary)" }}>
|
||||
Bell {i + 1}: {count}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</Field>
|
||||
</div>
|
||||
)}
|
||||
</dl>
|
||||
</Subsection>
|
||||
</SectionCard>
|
||||
|
||||
{/* Users */}
|
||||
<SectionCard title={`App Users (${deviceUsers.length})`}>
|
||||
{usersLoading ? (
|
||||
<p className="text-sm" style={{ color: "var(--text-muted)" }}>Loading users...</p>
|
||||
) : deviceUsers.length === 0 ? (
|
||||
<p className="text-sm" style={{ color: "var(--text-muted)" }}>No users assigned to this device.</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{deviceUsers.map((user, i) => (
|
||||
<div
|
||||
key={user.user_id || i}
|
||||
className="p-3 rounded-md border cursor-pointer hover:opacity-90 transition-colors"
|
||||
style={{ backgroundColor: "var(--bg-primary)", borderColor: "var(--border-primary)" }}
|
||||
onClick={() => user.user_id && navigate(`/users/${user.user_id}`)}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium truncate" style={{ color: "var(--text-heading)" }}>
|
||||
{user.display_name || user.email || "Unknown User"}
|
||||
</p>
|
||||
{user.email && user.display_name && (
|
||||
<p className="text-xs truncate" style={{ color: "var(--text-muted)" }}>{user.email}</p>
|
||||
)}
|
||||
{user.user_id && (
|
||||
<p className="text-xs font-mono" style={{ color: "var(--text-muted)" }}>{user.user_id}</p>
|
||||
)}
|
||||
</div>
|
||||
{user.role && (
|
||||
<span className="px-2 py-0.5 text-xs rounded-full capitalize shrink-0 ml-2" style={{ backgroundColor: "var(--badge-blue-bg)", color: "var(--badge-blue-text)" }}>
|
||||
{user.role}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</SectionCard>
|
||||
|
||||
{/* Equipment Notes */}
|
||||
<NotesPanel deviceId={id} />
|
||||
|
||||
{/* Latest Logs */}
|
||||
<DeviceLogsPanel deviceSerial={device.device_id} />
|
||||
</div>
|
||||
{cols === 1 ? renderSingleColumn() : cols === 2 ? renderDoubleColumn() : renderTripleColumn()}
|
||||
|
||||
<ConfirmDialog
|
||||
open={showDelete}
|
||||
|
||||
Reference in New Issue
Block a user