Phase 3 Complete by Claude Code
This commit is contained in:
@@ -1 +1,313 @@
|
||||
// TODO: Device detail view
|
||||
import { useState, useEffect } from "react";
|
||||
import { useParams, useNavigate } from "react-router-dom";
|
||||
import api from "../api/client";
|
||||
import { useAuth } from "../auth/AuthContext";
|
||||
import ConfirmDialog from "../components/ConfirmDialog";
|
||||
|
||||
function Field({ label, children }) {
|
||||
return (
|
||||
<div>
|
||||
<dt className="text-xs font-medium text-gray-500 uppercase tracking-wide">
|
||||
{label}
|
||||
</dt>
|
||||
<dd className="mt-1 text-sm text-gray-900">{children || "-"}</dd>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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"
|
||||
}`}
|
||||
>
|
||||
{value ? yesLabel : noLabel}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export default function DeviceDetail() {
|
||||
const { id } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const { hasRole } = useAuth();
|
||||
const canEdit = hasRole("superadmin", "device_manager");
|
||||
|
||||
const [device, setDevice] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState("");
|
||||
const [showDelete, setShowDelete] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, [id]);
|
||||
|
||||
const loadData = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const d = await api.get(`/devices/${id}`);
|
||||
setDevice(d);
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
try {
|
||||
await api.delete(`/devices/${id}`);
|
||||
navigate("/devices");
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
setShowDelete(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <div className="text-center py-8 text-gray-500">Loading...</div>;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="bg-red-50 border border-red-200 text-red-700 text-sm rounded-md p-3">
|
||||
{error}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!device) return null;
|
||||
|
||||
const attr = device.device_attributes || {};
|
||||
const clock = attr.clockSettings || {};
|
||||
const net = attr.networkSettings || {};
|
||||
const sub = device.device_subscription || {};
|
||||
const stats = device.device_stats || {};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<button
|
||||
onClick={() => navigate("/devices")}
|
||||
className="text-sm text-blue-600 hover:text-blue-800 mb-2 inline-block"
|
||||
>
|
||||
← Back to Devices
|
||||
</button>
|
||||
<div className="flex items-center gap-3">
|
||||
<h1 className="text-2xl font-bold text-gray-900">
|
||||
{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"
|
||||
}`}
|
||||
title={device.is_Online ? "Online" : "Offline"}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{canEdit && (
|
||||
<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"
|
||||
>
|
||||
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"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<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">
|
||||
Basic Information
|
||||
</h2>
|
||||
<dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
<Field label="Serial Number">
|
||||
<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>
|
||||
</Field>
|
||||
<Field label="Status">
|
||||
<BoolBadge value={device.is_Online} yesLabel="Online" noLabel="Offline" />
|
||||
</Field>
|
||||
<div className="col-span-2 md:col-span-3">
|
||||
<Field label="Location">{device.device_location}</Field>
|
||||
</div>
|
||||
<Field label="Coordinates">{device.device_location_coordinates}</Field>
|
||||
<Field label="Events On">
|
||||
<BoolBadge value={device.events_on} />
|
||||
</Field>
|
||||
<Field label="WebSocket URL">{device.websocket_url}</Field>
|
||||
<div className="col-span-2 md:col-span-3">
|
||||
<Field label="Church Assistant URL">{device.churchAssistantURL}</Field>
|
||||
</div>
|
||||
</dl>
|
||||
</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">
|
||||
Device Attributes
|
||||
</h2>
|
||||
<dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
<Field label="Has Assistant"><BoolBadge value={attr.hasAssistant} /></Field>
|
||||
<Field label="Has Clock"><BoolBadge value={attr.hasClock} /></Field>
|
||||
<Field label="Has Bells"><BoolBadge value={attr.hasBells} /></Field>
|
||||
<Field label="Total Bells">{attr.totalBells}</Field>
|
||||
<Field label="Bell Guard"><BoolBadge value={attr.bellGuardOn} /></Field>
|
||||
<Field label="Bell Guard Safety"><BoolBadge value={attr.bellGuardSafetyOn} /></Field>
|
||||
<Field label="Warnings On"><BoolBadge value={attr.warningsOn} /></Field>
|
||||
<Field label="Device Locale">
|
||||
<span className="capitalize">{attr.deviceLocale}</span>
|
||||
</Field>
|
||||
<Field label="Serial Log Level">{attr.serialLogLevel}</Field>
|
||||
<Field label="SD Log Level">{attr.sdLogLevel}</Field>
|
||||
<Field label="Bell Outputs">
|
||||
{attr.bellOutputs?.length > 0 ? attr.bellOutputs.join(", ") : "-"}
|
||||
</Field>
|
||||
<Field label="Hammer Timings">
|
||||
{attr.hammerTimings?.length > 0 ? attr.hammerTimings.join(", ") : "-"}
|
||||
</Field>
|
||||
</dl>
|
||||
</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">
|
||||
Network Settings
|
||||
</h2>
|
||||
<dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
<Field label="Hostname">{net.hostname}</Field>
|
||||
<Field label="Static IP"><BoolBadge value={net.useStaticIP} /></Field>
|
||||
</dl>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
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">
|
||||
{sub.subscrTier}
|
||||
</span>
|
||||
</Field>
|
||||
<Field label="Start Date">{sub.subscrStart}</Field>
|
||||
<Field label="Duration">{sub.subscrDuration} months</Field>
|
||||
<Field label="Max Users">{sub.maxUsers}</Field>
|
||||
<Field label="Max Outputs">{sub.maxOutputs}</Field>
|
||||
</dl>
|
||||
</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">
|
||||
Clock Settings
|
||||
</h2>
|
||||
<dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
<Field label="Ring Alerts Master"><BoolBadge value={clock.ringAlertsMasterOn} /></Field>
|
||||
<Field label="Ring Alerts">
|
||||
<span className="capitalize">{clock.ringAlerts}</span>
|
||||
</Field>
|
||||
<Field label="Ring Intervals">{clock.ringIntervals}</Field>
|
||||
<Field label="Hour Alerts Bell">{clock.hourAlertsBell}</Field>
|
||||
<Field label="Half-hour Bell">{clock.halfhourAlertsBell}</Field>
|
||||
<Field label="Quarter Bell">{clock.quarterAlertsBell}</Field>
|
||||
<Field label="Backlight Output">{clock.backlightOutput}</Field>
|
||||
<Field label="Backlight Auto"><BoolBadge value={clock.isBacklightAutomationOn} /></Field>
|
||||
<Field label="Clock Outputs">
|
||||
{clock.clockOutputs?.length > 0 ? clock.clockOutputs.join(", ") : "-"}
|
||||
</Field>
|
||||
<Field label="Clock Timings">
|
||||
{clock.clockTimings?.length > 0 ? clock.clockTimings.join(", ") : "-"}
|
||||
</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>
|
||||
<dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
{clock.isDaySilenceOn && (
|
||||
<>
|
||||
<Field label="Day Silence">
|
||||
{clock.daySilenceFrom} - {clock.daySilenceTo}
|
||||
</Field>
|
||||
</>
|
||||
)}
|
||||
{clock.isNightSilenceOn && (
|
||||
<>
|
||||
<Field label="Night Silence">
|
||||
{clock.nightSilenceFrom} - {clock.nightSilenceTo}
|
||||
</Field>
|
||||
</>
|
||||
)}
|
||||
</dl>
|
||||
</div>
|
||||
)}
|
||||
</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">
|
||||
Statistics & Warranty
|
||||
</h2>
|
||||
<dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
<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="Per-Bell Strikes">
|
||||
{stats.perBellStrikes?.length > 0 ? stats.perBellStrikes.join(", ") : "-"}
|
||||
</Field>
|
||||
<Field label="Warranty Active"><BoolBadge value={stats.warrantyActive} /></Field>
|
||||
<Field label="Warranty Start">{stats.warrantyStart}</Field>
|
||||
<Field label="Warranty Period">{stats.warrantyPeriod} months</Field>
|
||||
<Field label="Last Maintained">{stats.maintainedOn}</Field>
|
||||
<Field label="Maintenance Period">{stats.maintainancePeriod} months</Field>
|
||||
</dl>
|
||||
</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">
|
||||
Melodies & Users
|
||||
</h2>
|
||||
<dl className="grid grid-cols-2 gap-4">
|
||||
<Field label="Total Melodies">
|
||||
{device.device_melodies_all?.length ?? 0}
|
||||
</Field>
|
||||
<Field label="Favorite Melodies">
|
||||
{device.device_melodies_favorites?.length ?? 0}
|
||||
</Field>
|
||||
<Field label="Assigned Users">
|
||||
{device.user_list?.length ?? 0}
|
||||
</Field>
|
||||
</dl>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ConfirmDialog
|
||||
open={showDelete}
|
||||
title="Delete Device"
|
||||
message={`Are you sure you want to delete "${device.device_name || "this device"}" (${device.device_id})? This action cannot be undone.`}
|
||||
onConfirm={handleDelete}
|
||||
onCancel={() => setShowDelete(false)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user