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