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

Fixes to Add Melody Page, minor UI Tweaks

Browse Source
This commit is contained in:
Vasileios Kousaridas
2026-02-17 18:11:04 +02:00
parent dff1ec921d
commit bec0e606e6
21 changed files with 863 additions and 899 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,10 +7,15 @@ import ConfirmDialog from "../components/ConfirmDialog";
function Field({ label, children }) {
return (
<div>
<dt className="text-xs font-medium text-gray-500 uppercase tracking-wide">
<dt
className="text-xs font-medium uppercase tracking-wide"
style={{ color: "var(--text-muted)" }}
>
{label}
</dt>
<dd className="mt-1 text-sm text-gray-900">{children || "-"}</dd>
<dd className="mt-1 text-sm" style={{ color: "var(--text-primary)" }}>
{children || "-"}
</dd>
</div>
);
}
@@ -18,9 +23,12 @@ function Field({ label, children }) {
function BoolBadge({ value, yesLabel = "Yes", noLabel = "No" }) {
return (
<span
className={`px-2 py-0.5 text-xs rounded-full ${
value ? "bg-green-100 text-green-700" : "bg-gray-100 text-gray-500"
}`}
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>
@@ -65,12 +73,23 @@ export default function DeviceDetail() {
};
if (loading) {
return <div className="text-center py-8 text-gray-500">Loading...</div>;
return (
<div className="text-center py-8" style={{ color: "var(--text-muted)" }}>
Loading...
</div>
);
}
if (error) {
return (
<div className="bg-red-50 border border-red-200 text-red-700 text-sm rounded-md p-3">
<div
className="text-sm rounded-md p-3 border"
style={{
backgroundColor: "var(--danger-bg)",
borderColor: "var(--danger)",
color: "var(--danger-text)",
}}
>
{error}
</div>
);
@@ -90,18 +109,23 @@ export default function DeviceDetail() {
<div>
<button
onClick={() => navigate("/devices")}
className="text-sm text-blue-600 hover:text-blue-800 mb-2 inline-block"
className="text-sm hover:underline mb-2 inline-block"
style={{ color: "var(--accent)" }}
>
&larr; Back to Devices
</button>
<div className="flex items-center gap-3">
<h1 className="text-2xl font-bold text-gray-900">
<h1
className="text-2xl font-bold"
style={{ color: "var(--text-heading)" }}
>
{device.device_name || "Unnamed Device"}
</h1>
<span
className={`inline-block w-3 h-3 rounded-full ${
device.is_Online ? "bg-green-500" : "bg-gray-300"
device.is_Online ? "bg-green-500" : ""
}`}
style={!device.is_Online ? { backgroundColor: "var(--border-primary)" } : undefined}
title={device.is_Online ? "Online" : "Offline"}
/>
</div>
@@ -110,13 +134,15 @@ export default function DeviceDetail() {
<div className="flex gap-2">
<button
onClick={() => navigate(`/devices/${id}/edit`)}
className="px-4 py-2 bg-blue-600 text-white text-sm rounded-md hover:bg-blue-700 transition-colors"
className="px-4 py-2 text-sm rounded-md transition-colors"
style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-heading)" }}
>
Edit
</button>
<button
onClick={() => setShowDelete(true)}
className="px-4 py-2 bg-red-600 text-white text-sm rounded-md hover:bg-red-700 transition-colors"
className="px-4 py-2 text-sm rounded-md transition-colors"
style={{ backgroundColor: "var(--danger)", color: "#fff" }}
>
Delete
</button>
@@ -128,8 +154,14 @@ export default function DeviceDetail() {
{/* Left column */}
<div className="space-y-6">
{/* Basic Info */}
<section className="bg-white rounded-lg border border-gray-200 p-6">
<h2 className="text-lg font-semibold text-gray-800 mb-4">
<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)" }}
>
Basic Information
</h2>
<dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
@@ -137,7 +169,9 @@ export default function DeviceDetail() {
<span className="font-mono">{device.device_id}</span>
</Field>
<Field label="Document ID">
<span className="font-mono text-xs text-gray-500">{device.id}</span>
<span className="font-mono text-xs" style={{ color: "var(--text-muted)" }}>
{device.id}
</span>
</Field>
<Field label="Status">
<BoolBadge value={device.is_Online} yesLabel="Online" noLabel="Offline" />
@@ -157,8 +191,14 @@ export default function DeviceDetail() {
</section>
{/* Device Attributes */}
<section className="bg-white rounded-lg border border-gray-200 p-6">
<h2 className="text-lg font-semibold text-gray-800 mb-4">
<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 Attributes
</h2>
<dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
@@ -184,8 +224,14 @@ export default function DeviceDetail() {
</section>
{/* Network */}
<section className="bg-white rounded-lg border border-gray-200 p-6">
<h2 className="text-lg font-semibold text-gray-800 mb-4">
<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)" }}
>
Network Settings
</h2>
<dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
@@ -198,13 +244,22 @@ export default function DeviceDetail() {
{/* Right column */}
<div className="space-y-6">
{/* Subscription */}
<section className="bg-white rounded-lg border border-gray-200 p-6">
<h2 className="text-lg font-semibold text-gray-800 mb-4">
<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)" }}
>
Subscription
</h2>
<dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
<Field label="Tier">
<span className="px-2 py-0.5 text-xs rounded-full bg-blue-50 text-blue-700 capitalize">
<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>
@@ -216,8 +271,14 @@ export default function DeviceDetail() {
</section>
{/* Clock Settings */}
<section className="bg-white rounded-lg border border-gray-200 p-6">
<h2 className="text-lg font-semibold text-gray-800 mb-4">
<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)" }}
>
Clock Settings
</h2>
<dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
@@ -239,8 +300,16 @@ export default function DeviceDetail() {
</Field>
</dl>
{(clock.isDaySilenceOn || clock.isNightSilenceOn) && (
<div className="mt-4 pt-4 border-t border-gray-100">
<h3 className="text-sm font-semibold text-gray-700 mb-3">Silence Periods</h3>
<div
className="mt-4 pt-4 border-t"
style={{ borderColor: "var(--border-secondary)" }}
>
<h3
className="text-sm font-semibold mb-3"
style={{ color: "var(--text-primary)" }}
>
Silence Periods
</h3>
<dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
{clock.isDaySilenceOn && (
<>
@@ -262,8 +331,14 @@ export default function DeviceDetail() {
</section>
{/* Statistics */}
<section className="bg-white rounded-lg border border-gray-200 p-6">
<h2 className="text-lg font-semibold text-gray-800 mb-4">
<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)" }}
>
Statistics & Warranty
</h2>
<dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
@@ -282,8 +357,14 @@ export default function DeviceDetail() {
</section>
{/* Melodies & Users summary */}
<section className="bg-white rounded-lg border border-gray-200 p-6">
<h2 className="text-lg font-semibold text-gray-800 mb-4">
<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)" }}
>
Melodies & Users
</h2>
<dl className="grid grid-cols-2 gap-4">

204
frontend/src/devices/DeviceForm.jsx
View File

@@ -200,36 +200,62 @@ export default function DeviceForm() {
};
if (loading) {
return <div className="text-center py-8 text-gray-500">Loading...</div>;
return <div className="text-center py-8" style={{ color: "var(--text-muted)" }}>Loading...</div>;
}
const inputClass =
"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm";
const inputClass = "w-full px-3 py-2 rounded-md text-sm border";
return (
<div>
<h1 className="text-2xl font-bold text-gray-900 mb-6">
{isEdit ? "Edit Device" : "Add Device"}
</h1>
<div className="flex items-center justify-between mb-6">
<h1 className="text-2xl font-bold" style={{ color: "var(--text-heading)" }}>
{isEdit ? "Edit Device" : "Add Device"}
</h1>
<div className="flex gap-3">
<button
type="button"
onClick={() => navigate(isEdit ? `/devices/${id}` : "/devices")}
className="px-4 py-2 text-sm rounded-md hover:opacity-80 transition-colors"
style={{ backgroundColor: "var(--bg-card-hover)", color: "var(--text-primary)" }}
>
Cancel
</button>
<button
type="submit"
form="device-form"
disabled={saving}
className="px-4 py-2 text-sm rounded-md hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-heading)" }}
>
{saving ? "Saving..." : isEdit ? "Update Device" : "Create Device"}
</button>
</div>
</div>
{error && (
<div className="bg-red-50 border border-red-200 text-red-700 text-sm rounded-md p-3 mb-4">
<div
className="text-sm rounded-md p-3 mb-4 border"
style={{ backgroundColor: "var(--danger-bg)", borderColor: "var(--danger)", color: "var(--danger-text)" }}
>
{error}
</div>
)}
<form onSubmit={handleSubmit}>
<form id="device-form" onSubmit={handleSubmit}>
<div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
{/* ===== Left Column ===== */}
<div className="space-y-6">
{/* --- Basic Info --- */}
<section className="bg-white rounded-lg border border-gray-200 p-6">
<h2 className="text-lg font-semibold text-gray-800 mb-4">
<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)" }}>
Basic Information
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="md:col-span-2">
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
Device Name *
</label>
<input
@@ -241,7 +267,7 @@ export default function DeviceForm() {
/>
</div>
<div className="md:col-span-2">
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
Location
</label>
<input
@@ -253,7 +279,7 @@ export default function DeviceForm() {
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
Location Coordinates
</label>
<input
@@ -265,7 +291,7 @@ export default function DeviceForm() {
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
Device Photo URL
</label>
<input
@@ -283,15 +309,18 @@ export default function DeviceForm() {
onChange={(e) => setEventsOn(e.target.checked)}
className="h-4 w-4 text-blue-600 rounded border-gray-300"
/>
<span className="text-sm font-medium text-gray-700">Events On</span>
<span className="text-sm font-medium" style={{ color: "var(--text-primary)" }}>Events On</span>
</label>
</div>
</div>
</section>
{/* --- Device Attributes --- */}
<section className="bg-white rounded-lg border border-gray-200 p-6">
<h2 className="text-lg font-semibold text-gray-800 mb-4">
<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 Attributes
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -303,7 +332,7 @@ export default function DeviceForm() {
onChange={(e) => updateAttr("hasAssistant", e.target.checked)}
className="h-4 w-4 text-blue-600 rounded border-gray-300"
/>
<span className="text-sm text-gray-700">Has Assistant</span>
<span className="text-sm" style={{ color: "var(--text-primary)" }}>Has Assistant</span>
</label>
<label className="flex items-center gap-2">
<input
@@ -312,7 +341,7 @@ export default function DeviceForm() {
onChange={(e) => updateAttr("hasClock", e.target.checked)}
className="h-4 w-4 text-blue-600 rounded border-gray-300"
/>
<span className="text-sm text-gray-700">Has Clock</span>
<span className="text-sm" style={{ color: "var(--text-primary)" }}>Has Clock</span>
</label>
<label className="flex items-center gap-2">
<input
@@ -321,7 +350,7 @@ export default function DeviceForm() {
onChange={(e) => updateAttr("hasBells", e.target.checked)}
className="h-4 w-4 text-blue-600 rounded border-gray-300"
/>
<span className="text-sm text-gray-700">Has Bells</span>
<span className="text-sm" style={{ color: "var(--text-primary)" }}>Has Bells</span>
</label>
<label className="flex items-center gap-2">
<input
@@ -330,7 +359,7 @@ export default function DeviceForm() {
onChange={(e) => updateAttr("bellGuardOn", e.target.checked)}
className="h-4 w-4 text-blue-600 rounded border-gray-300"
/>
<span className="text-sm text-gray-700">Bell Guard</span>
<span className="text-sm" style={{ color: "var(--text-primary)" }}>Bell Guard</span>
</label>
<label className="flex items-center gap-2">
<input
@@ -339,7 +368,7 @@ export default function DeviceForm() {
onChange={(e) => updateAttr("bellGuardSafetyOn", e.target.checked)}
className="h-4 w-4 text-blue-600 rounded border-gray-300"
/>
<span className="text-sm text-gray-700">Bell Guard Safety</span>
<span className="text-sm" style={{ color: "var(--text-primary)" }}>Bell Guard Safety</span>
</label>
<label className="flex items-center gap-2">
<input
@@ -348,11 +377,11 @@ export default function DeviceForm() {
onChange={(e) => updateAttr("warningsOn", e.target.checked)}
className="h-4 w-4 text-blue-600 rounded border-gray-300"
/>
<span className="text-sm text-gray-700">Warnings On</span>
<span className="text-sm" style={{ color: "var(--text-primary)" }}>Warnings On</span>
</label>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
Total Bells
</label>
<input
@@ -364,7 +393,7 @@ export default function DeviceForm() {
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
Device Locale
</label>
<select
@@ -380,7 +409,7 @@ export default function DeviceForm() {
</select>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
Bell Outputs (comma-separated)
</label>
<input
@@ -392,7 +421,7 @@ export default function DeviceForm() {
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
Hammer Timings (comma-separated)
</label>
<input
@@ -404,7 +433,7 @@ export default function DeviceForm() {
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
Serial Log Level
</label>
<input
@@ -416,7 +445,7 @@ export default function DeviceForm() {
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
SD Log Level
</label>
<input
@@ -431,13 +460,16 @@ export default function DeviceForm() {
</section>
{/* --- Network Settings --- */}
<section className="bg-white rounded-lg border border-gray-200 p-6">
<h2 className="text-lg font-semibold text-gray-800 mb-4">
<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)" }}>
Network Settings
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
Hostname
</label>
<input
@@ -455,12 +487,12 @@ export default function DeviceForm() {
onChange={(e) => updateNetwork("useStaticIP", e.target.checked)}
className="h-4 w-4 text-blue-600 rounded border-gray-300"
/>
<label htmlFor="useStaticIP" className="text-sm font-medium text-gray-700">
<label htmlFor="useStaticIP" className="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
Use Static IP
</label>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
WebSocket URL
</label>
<input
@@ -471,7 +503,7 @@ export default function DeviceForm() {
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
Church Assistant URL
</label>
<input
@@ -488,13 +520,16 @@ export default function DeviceForm() {
{/* ===== Right Column ===== */}
<div className="space-y-6">
{/* --- Subscription --- */}
<section className="bg-white rounded-lg border border-gray-200 p-6">
<h2 className="text-lg font-semibold text-gray-800 mb-4">
<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)" }}>
Subscription
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
Tier
</label>
<select
@@ -510,7 +545,7 @@ export default function DeviceForm() {
</select>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
Start Date
</label>
<input
@@ -521,7 +556,7 @@ export default function DeviceForm() {
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
Duration (months)
</label>
<input
@@ -533,7 +568,7 @@ export default function DeviceForm() {
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
Max Users
</label>
<input
@@ -545,7 +580,7 @@ export default function DeviceForm() {
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
Max Outputs
</label>
<input
@@ -560,13 +595,16 @@ export default function DeviceForm() {
</section>
{/* --- Clock Settings --- */}
<section className="bg-white rounded-lg border border-gray-200 p-6">
<h2 className="text-lg font-semibold text-gray-800 mb-4">
<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)" }}>
Clock Settings
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
Ring Alerts
</label>
<select
@@ -582,7 +620,7 @@ export default function DeviceForm() {
</select>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
Ring Intervals
</label>
<input
@@ -600,10 +638,10 @@ export default function DeviceForm() {
onChange={(e) => updateClock("ringAlertsMasterOn", e.target.checked)}
className="h-4 w-4 text-blue-600 rounded border-gray-300"
/>
<span className="text-sm text-gray-700">Ring Alerts Master On</span>
<span className="text-sm" style={{ color: "var(--text-primary)" }}>Ring Alerts Master On</span>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
Clock Outputs (comma-separated)
</label>
<input
@@ -614,7 +652,7 @@ export default function DeviceForm() {
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
Clock Timings (comma-separated)
</label>
<input
@@ -625,7 +663,7 @@ export default function DeviceForm() {
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
Hour Alerts Bell
</label>
<input
@@ -637,7 +675,7 @@ export default function DeviceForm() {
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
Half-hour Alerts Bell
</label>
<input
@@ -649,7 +687,7 @@ export default function DeviceForm() {
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
Quarter Alerts Bell
</label>
<input
@@ -661,7 +699,7 @@ export default function DeviceForm() {
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
Backlight Output
</label>
<input
@@ -679,12 +717,12 @@ export default function DeviceForm() {
onChange={(e) => updateClock("isBacklightAutomationOn", e.target.checked)}
className="h-4 w-4 text-blue-600 rounded border-gray-300"
/>
<span className="text-sm text-gray-700">Backlight Automation</span>
<span className="text-sm" style={{ color: "var(--text-primary)" }}>Backlight Automation</span>
</div>
{/* Silence settings */}
<div className="md:col-span-2 border-t border-gray-100 pt-4 mt-2">
<h3 className="text-sm font-semibold text-gray-700 mb-3">Silence Periods</h3>
<div className="md:col-span-2 border-t pt-4 mt-2" style={{ borderColor: "var(--border-secondary)" }}>
<h3 className="text-sm font-semibold mb-3" style={{ color: "var(--text-secondary)" }}>Silence Periods</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="flex items-center gap-2">
<input
@@ -693,7 +731,7 @@ export default function DeviceForm() {
onChange={(e) => updateClock("isDaySilenceOn", e.target.checked)}
className="h-4 w-4 text-blue-600 rounded border-gray-300"
/>
<span className="text-sm text-gray-700">Day Silence</span>
<span className="text-sm" style={{ color: "var(--text-primary)" }}>Day Silence</span>
</div>
<div className="flex items-center gap-2">
<input
@@ -702,10 +740,10 @@ export default function DeviceForm() {
onChange={(e) => updateClock("isNightSilenceOn", e.target.checked)}
className="h-4 w-4 text-blue-600 rounded border-gray-300"
/>
<span className="text-sm text-gray-700">Night Silence</span>
<span className="text-sm" style={{ color: "var(--text-primary)" }}>Night Silence</span>
</div>
<div>
<label className="block text-xs text-gray-500 mb-1">Day Silence From</label>
<label className="block text-xs mb-1" style={{ color: "var(--text-muted)" }}>Day Silence From</label>
<input
type="time"
value={attributes.clockSettings.daySilenceFrom}
@@ -714,7 +752,7 @@ export default function DeviceForm() {
/>
</div>
<div>
<label className="block text-xs text-gray-500 mb-1">Day Silence To</label>
<label className="block text-xs mb-1" style={{ color: "var(--text-muted)" }}>Day Silence To</label>
<input
type="time"
value={attributes.clockSettings.daySilenceTo}
@@ -723,7 +761,7 @@ export default function DeviceForm() {
/>
</div>
<div>
<label className="block text-xs text-gray-500 mb-1">Night Silence From</label>
<label className="block text-xs mb-1" style={{ color: "var(--text-muted)" }}>Night Silence From</label>
<input
type="time"
value={attributes.clockSettings.nightSilenceFrom}
@@ -732,7 +770,7 @@ export default function DeviceForm() {
/>
</div>
<div>
<label className="block text-xs text-gray-500 mb-1">Night Silence To</label>
<label className="block text-xs mb-1" style={{ color: "var(--text-muted)" }}>Night Silence To</label>
<input
type="time"
value={attributes.clockSettings.nightSilenceTo}
@@ -746,13 +784,16 @@ export default function DeviceForm() {
</section>
{/* --- Statistics --- */}
<section className="bg-white rounded-lg border border-gray-200 p-6">
<h2 className="text-lg font-semibold text-gray-800 mb-4">
<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)" }}>
Statistics & Warranty
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
Total Playbacks
</label>
<input
@@ -764,7 +805,7 @@ export default function DeviceForm() {
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
Total Hammer Strikes
</label>
<input
@@ -776,7 +817,7 @@ export default function DeviceForm() {
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
Total Warnings Given
</label>
<input
@@ -788,7 +829,7 @@ export default function DeviceForm() {
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
Per-Bell Strikes (comma-separated)
</label>
<input
@@ -805,10 +846,10 @@ export default function DeviceForm() {
onChange={(e) => updateStats("warrantyActive", e.target.checked)}
className="h-4 w-4 text-blue-600 rounded border-gray-300"
/>
<span className="text-sm font-medium text-gray-700">Warranty Active</span>
<span className="text-sm font-medium" style={{ color: "var(--text-primary)" }}>Warranty Active</span>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
Warranty Start
</label>
<input
@@ -819,7 +860,7 @@ export default function DeviceForm() {
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
Warranty Period (months)
</label>
<input
@@ -831,7 +872,7 @@ export default function DeviceForm() {
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
Last Maintained On
</label>
<input
@@ -842,7 +883,7 @@ export default function DeviceForm() {
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
Maintenance Period (months)
</label>
<input
@@ -858,23 +899,6 @@ export default function DeviceForm() {
</div>
</div>
{/* --- Actions --- */}
<div className="flex gap-3 mt-6">
<button
type="submit"
disabled={saving}
className="px-6 py-2 bg-blue-600 text-white text-sm rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
>
{saving ? "Saving..." : isEdit ? "Update Device" : "Create Device"}
</button>
<button
type="button"
onClick={() => navigate(isEdit ? `/devices/${id}` : "/devices")}
className="px-6 py-2 bg-gray-100 text-gray-700 text-sm rounded-md hover:bg-gray-200 transition-colors"
>
Cancel
</button>
</div>
</form>
</div>
);

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

@@ -16,6 +16,7 @@ export default function DeviceList() {
const [onlineFilter, setOnlineFilter] = useState("");
const [tierFilter, setTierFilter] = useState("");
const [deleteTarget, setDeleteTarget] = useState(null);
const [hoveredRow, setHoveredRow] = useState(null);
const navigate = useNavigate();
const { hasRole } = useAuth();
const canEdit = hasRole("superadmin", "device_manager");
@@ -59,11 +60,12 @@ export default function DeviceList() {
return (
<div>
<div className="flex items-center justify-between mb-6">
<h1 className="text-2xl font-bold text-gray-900">Devices</h1>
<h1 className="text-2xl font-bold" style={{ color: "var(--text-heading)" }}>Devices</h1>
{canEdit && (
<button
onClick={() => navigate("/devices/new")}
className="px-4 py-2 bg-blue-600 text-white text-sm rounded-md hover:bg-blue-700 transition-colors cursor-pointer"
className="px-4 py-2 text-sm rounded-md hover:opacity-90 transition-colors cursor-pointer"
style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-heading)" }}
>
Add Device
</button>
@@ -79,7 +81,12 @@ export default function DeviceList() {
<select
value={onlineFilter}
onChange={(e) => setOnlineFilter(e.target.value)}
className="px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer"
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)",
}}
>
<option value="">All Status</option>
<option value="true">Online</option>
@@ -88,7 +95,12 @@ export default function DeviceList() {
<select
value={tierFilter}
onChange={(e) => setTierFilter(e.target.value)}
className="px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer"
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)",
}}
>
<option value="">All Tiers</option>
{TIER_OPTIONS.filter(Boolean).map((t) => (
@@ -97,75 +109,105 @@ export default function DeviceList() {
</option>
))}
</select>
<span className="flex items-center text-sm text-gray-500">
<span className="flex items-center text-sm" style={{ color: "var(--text-muted)" }}>
{total} {total === 1 ? "device" : "devices"}
</span>
</div>
</div>
{error && (
<div className="bg-red-50 border border-red-200 text-red-700 text-sm rounded-md p-3 mb-4">
<div
className="text-sm rounded-md p-3 mb-4 border"
style={{
backgroundColor: "var(--danger-bg)",
borderColor: "var(--danger)",
color: "var(--danger-text)",
}}
>
{error}
</div>
)}
{loading ? (
<div className="text-center py-8 text-gray-500">Loading...</div>
<div className="text-center py-8" style={{ color: "var(--text-muted)" }}>Loading...</div>
) : devices.length === 0 ? (
<div className="bg-white rounded-lg border border-gray-200 p-8 text-center text-gray-500 text-sm">
<div
className="rounded-lg p-8 text-center text-sm border"
style={{
backgroundColor: "var(--bg-card)",
borderColor: "var(--border-primary)",
color: "var(--text-muted)",
}}
>
No devices found.
</div>
) : (
<div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
<div
className="rounded-lg overflow-hidden border"
style={{
backgroundColor: "var(--bg-card)",
borderColor: "var(--border-primary)",
}}
>
<div className="overflow-x-auto">
<table className="w-full text-sm">
<thead>
<tr className="bg-gray-50 border-b border-gray-200">
<th className="px-4 py-3 text-left font-medium text-gray-600 w-10">Status</th>
<th className="px-4 py-3 text-left font-medium text-gray-600">Name</th>
<th className="px-4 py-3 text-left font-medium text-gray-600">Serial Number</th>
<th className="px-4 py-3 text-left font-medium text-gray-600">Location</th>
<th className="px-4 py-3 text-left font-medium text-gray-600">Tier</th>
<th className="px-4 py-3 text-left font-medium text-gray-600">Bells</th>
<th className="px-4 py-3 text-left font-medium text-gray-600">Users</th>
<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>
{canEdit && (
<th className="px-4 py-3 text-left font-medium text-gray-600 w-24" />
<th className="px-4 py-3 text-left font-medium w-24" style={{ color: "var(--text-secondary)" }} />
)}
</tr>
</thead>
<tbody>
{devices.map((device) => (
{devices.map((device, index) => (
<tr
key={device.id}
onClick={() => navigate(`/devices/${device.id}`)}
className="border-b border-gray-100 last:border-0 cursor-pointer hover:bg-gray-50"
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)}
>
<td className="px-4 py-3">
<span
className={`inline-block w-2.5 h-2.5 rounded-full ${
device.is_Online ? "bg-green-500" : "bg-gray-300"
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 text-gray-900">
<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 text-gray-500">
<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 text-gray-700">
<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 bg-blue-50 text-blue-700 capitalize">
<span
className="px-2 py-0.5 text-xs rounded-full capitalize"
style={{ backgroundColor: "var(--badge-blue-bg)", color: "var(--badge-blue-text)" }}
>
{device.device_subscription?.subscrTier || "basic"}
</span>
</td>
<td className="px-4 py-3 text-gray-700">
<td className="px-4 py-3" style={{ color: "var(--text-primary)" }}>
{device.device_attributes?.totalBells ?? 0}
</td>
<td className="px-4 py-3 text-gray-700">
<td className="px-4 py-3" style={{ color: "var(--text-primary)" }}>
{device.user_list?.length ?? 0}
</td>
{canEdit && (
@@ -176,13 +218,15 @@ export default function DeviceList() {
>
<button
onClick={() => navigate(`/devices/${device.id}/edit`)}
className="text-blue-600 hover:text-blue-800 text-xs cursor-pointer"
className="hover:opacity-80 text-xs cursor-pointer"
style={{ color: "var(--accent)" }}
>
Edit
</button>
<button
onClick={() => setDeleteTarget(device)}
className="text-red-600 hover:text-red-800 text-xs cursor-pointer"
className="hover:opacity-80 text-xs cursor-pointer"
style={{ color: "var(--danger)" }}
>
Delete
</button>