Fixes to Add Melody Page, minor UI Tweaks
This commit is contained in:
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user