551 lines
19 KiB
JavaScript
551 lines
19 KiB
JavaScript
import { useState, useEffect, useRef } from "react";
|
|
import { useParams, useNavigate } from "react-router-dom";
|
|
import api from "../api/client";
|
|
import { useAuth } from "../auth/AuthContext";
|
|
import ConfirmDialog from "../components/ConfirmDialog";
|
|
import NotesPanel from "../equipment/NotesPanel";
|
|
|
|
function Field({ label, children }) {
|
|
return (
|
|
<div>
|
|
<dt
|
|
className="text-xs font-medium uppercase tracking-wide"
|
|
style={{ color: "var(--text-muted)" }}
|
|
>
|
|
{label}
|
|
</dt>
|
|
<dd className="mt-1 text-sm" style={{ color: "var(--text-primary)" }}>
|
|
{children || "-"}
|
|
</dd>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function UserDetail() {
|
|
const { id } = useParams();
|
|
const navigate = useNavigate();
|
|
const { hasPermission } = useAuth();
|
|
const canEdit = hasPermission("app_users", "edit");
|
|
|
|
const [user, setUser] = useState(null);
|
|
const [devices, setDevices] = useState([]);
|
|
const [allDevices, setAllDevices] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState("");
|
|
const [showDelete, setShowDelete] = useState(false);
|
|
const [blocking, setBlocking] = useState(false);
|
|
const [assigningDevice, setAssigningDevice] = useState(false);
|
|
const [selectedDeviceId, setSelectedDeviceId] = useState("");
|
|
const [showAssignPanel, setShowAssignPanel] = useState(false);
|
|
const [uploadingPhoto, setUploadingPhoto] = useState(false);
|
|
const photoInputRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
loadData();
|
|
}, [id]);
|
|
|
|
const loadData = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const [u, d] = await Promise.all([
|
|
api.get(`/users/${id}`),
|
|
api.get(`/users/${id}/devices`),
|
|
]);
|
|
setUser(u);
|
|
setDevices(d);
|
|
} catch (err) {
|
|
setError(err.message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const loadAllDevices = async () => {
|
|
try {
|
|
const data = await api.get("/devices");
|
|
setAllDevices(data.devices || []);
|
|
} catch (err) {
|
|
setError(err.message);
|
|
}
|
|
};
|
|
|
|
const handleDelete = async () => {
|
|
try {
|
|
await api.delete(`/users/${id}`);
|
|
navigate("/users");
|
|
} catch (err) {
|
|
setError(err.message);
|
|
setShowDelete(false);
|
|
}
|
|
};
|
|
|
|
const handleBlockToggle = async () => {
|
|
setBlocking(true);
|
|
setError("");
|
|
try {
|
|
const endpoint = user.status === "blocked"
|
|
? `/users/${id}/unblock`
|
|
: `/users/${id}/block`;
|
|
const updated = await api.post(endpoint);
|
|
setUser(updated);
|
|
} catch (err) {
|
|
setError(err.message);
|
|
} finally {
|
|
setBlocking(false);
|
|
}
|
|
};
|
|
|
|
const handleAssignDevice = async () => {
|
|
if (!selectedDeviceId) return;
|
|
setAssigningDevice(true);
|
|
setError("");
|
|
try {
|
|
await api.post(`/users/${id}/devices/${selectedDeviceId}`);
|
|
setSelectedDeviceId("");
|
|
setShowAssignPanel(false);
|
|
const d = await api.get(`/users/${id}/devices`);
|
|
setDevices(d);
|
|
} catch (err) {
|
|
setError(err.message);
|
|
} finally {
|
|
setAssigningDevice(false);
|
|
}
|
|
};
|
|
|
|
const handleUnassignDevice = async (deviceId) => {
|
|
setError("");
|
|
try {
|
|
await api.delete(`/users/${id}/devices/${deviceId}`);
|
|
const d = await api.get(`/users/${id}/devices`);
|
|
setDevices(d);
|
|
} catch (err) {
|
|
setError(err.message);
|
|
}
|
|
};
|
|
|
|
const openAssignPanel = () => {
|
|
setShowAssignPanel(true);
|
|
loadAllDevices();
|
|
};
|
|
|
|
const handlePhotoUpload = async (e) => {
|
|
const file = e.target.files?.[0];
|
|
if (!file) return;
|
|
setUploadingPhoto(true);
|
|
setError("");
|
|
try {
|
|
const result = await api.upload(`/users/${id}/photo`, file);
|
|
setUser((prev) => ({ ...prev, photo_url: result.photo_url }));
|
|
} catch (err) {
|
|
setError(err.message);
|
|
} finally {
|
|
setUploadingPhoto(false);
|
|
if (photoInputRef.current) photoInputRef.current.value = "";
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="text-center py-8" style={{ color: "var(--text-muted)" }}>
|
|
Loading...
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error && !user) {
|
|
return (
|
|
<div
|
|
className="text-sm rounded-md p-3 border"
|
|
style={{
|
|
backgroundColor: "var(--danger-bg)",
|
|
borderColor: "var(--danger)",
|
|
color: "var(--danger-text)",
|
|
}}
|
|
>
|
|
{error}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!user) return null;
|
|
|
|
const isBlocked = user.status === "blocked";
|
|
|
|
const assignedDeviceIds = new Set(devices.map((d) => d.id));
|
|
const availableDevices = allDevices.filter((d) => !assignedDeviceIds.has(d.id));
|
|
|
|
return (
|
|
<div>
|
|
<div className="flex items-center justify-between mb-6">
|
|
<div>
|
|
<button
|
|
onClick={() => navigate("/users")}
|
|
className="text-sm hover:underline mb-2 inline-block"
|
|
style={{ color: "var(--accent)" }}
|
|
>
|
|
← Back to App Users
|
|
</button>
|
|
<div className="flex items-center gap-3">
|
|
<h1
|
|
className="text-2xl font-bold"
|
|
style={{ color: "var(--text-heading)" }}
|
|
>
|
|
{user.display_name || "Unnamed User"}
|
|
</h1>
|
|
<span
|
|
className="px-2 py-0.5 text-xs rounded-full"
|
|
style={
|
|
isBlocked
|
|
? { backgroundColor: "var(--danger-bg)", color: "var(--danger-text)" }
|
|
: user.status === "active"
|
|
? { backgroundColor: "var(--success-bg)", color: "var(--success-text)" }
|
|
: { backgroundColor: "var(--bg-card-hover)", color: "var(--text-muted)" }
|
|
}
|
|
>
|
|
{user.status || "unknown"}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
{canEdit && (
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={handleBlockToggle}
|
|
disabled={blocking}
|
|
className="px-4 py-2 text-sm rounded-md transition-colors disabled:opacity-50"
|
|
style={
|
|
isBlocked
|
|
? { backgroundColor: "var(--success)", color: "var(--text-white)" }
|
|
: { backgroundColor: "var(--warning, #f59e0b)", color: "var(--text-white)" }
|
|
}
|
|
>
|
|
{blocking ? "..." : isBlocked ? "Unblock" : "Block"}
|
|
</button>
|
|
<button
|
|
onClick={() => navigate(`/users/${id}/edit`)}
|
|
className="px-4 py-2 text-sm rounded-md transition-colors"
|
|
style={{ backgroundColor: "var(--text-link)", color: "var(--text-white)" }}
|
|
>
|
|
Edit
|
|
</button>
|
|
<button
|
|
onClick={() => setShowDelete(true)}
|
|
className="px-4 py-2 text-sm rounded-md transition-colors"
|
|
style={{ backgroundColor: "var(--danger)", color: "var(--text-white)" }}
|
|
>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{error && (
|
|
<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>
|
|
)}
|
|
|
|
<div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
|
|
{/* Left column */}
|
|
<div className="space-y-6">
|
|
{/* Account Info */}
|
|
<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)" }}
|
|
>
|
|
Account Information
|
|
</h2>
|
|
<div style={{ display: "flex", gap: "1.5rem" }}>
|
|
{/* Profile Photo */}
|
|
<div className="shrink-0" style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "0.5rem" }}>
|
|
<div
|
|
className="relative rounded-full overflow-hidden"
|
|
style={{ width: 80, height: 80, backgroundColor: "var(--bg-card-hover)" }}
|
|
>
|
|
{user.photo_url ? (
|
|
<img
|
|
src={user.photo_url}
|
|
alt={user.display_name || "User"}
|
|
style={{ width: "100%", height: "100%", objectFit: "cover" }}
|
|
/>
|
|
) : (
|
|
<div
|
|
className="w-full h-full flex items-center justify-center text-2xl font-bold"
|
|
style={{ color: "var(--text-muted)" }}
|
|
>
|
|
{(user.display_name || user.email || "?").charAt(0).toUpperCase()}
|
|
</div>
|
|
)}
|
|
</div>
|
|
{canEdit && (
|
|
<>
|
|
<button
|
|
onClick={() => photoInputRef.current?.click()}
|
|
disabled={uploadingPhoto}
|
|
className="text-xs hover:opacity-80 cursor-pointer transition-colors"
|
|
style={{ color: "var(--text-link)" }}
|
|
>
|
|
{uploadingPhoto ? "Uploading..." : "Change Photo"}
|
|
</button>
|
|
<input
|
|
ref={photoInputRef}
|
|
type="file"
|
|
accept="image/*"
|
|
onChange={handlePhotoUpload}
|
|
style={{ display: "none" }}
|
|
/>
|
|
</>
|
|
)}
|
|
</div>
|
|
{/* Fields */}
|
|
<dl className="grid grid-cols-2 md:grid-cols-3 gap-4 flex-1">
|
|
<Field label="Title">{user.userTitle}</Field>
|
|
<Field label="Phone">{user.phone_number}</Field>
|
|
<Field label="UID">
|
|
<span className="font-mono text-xs" style={{ color: "var(--text-muted)" }}>
|
|
{user.uid || user.id}
|
|
</span>
|
|
</Field>
|
|
<Field label="Email">{user.email}</Field>
|
|
<Field label="Status">
|
|
<span
|
|
className="px-2 py-0.5 text-xs rounded-full"
|
|
style={
|
|
isBlocked
|
|
? { backgroundColor: "var(--danger-bg)", color: "var(--danger-text)" }
|
|
: user.status === "active"
|
|
? { backgroundColor: "var(--success-bg)", color: "var(--success-text)" }
|
|
: { backgroundColor: "var(--bg-card-hover)", color: "var(--text-muted)" }
|
|
}
|
|
>
|
|
{user.status || "unknown"}
|
|
</span>
|
|
</Field>
|
|
</dl>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Profile */}
|
|
<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)" }}
|
|
>
|
|
Profile
|
|
</h2>
|
|
<dl className="grid grid-cols-1 gap-4">
|
|
<Field label="Bio">{user.bio}</Field>
|
|
</dl>
|
|
</section>
|
|
|
|
{/* Timestamps */}
|
|
<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)" }}
|
|
>
|
|
Activity
|
|
</h2>
|
|
<dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
|
<Field label="Created Time">{user.created_time}</Field>
|
|
<Field label="Created At">{user.createdAt}</Field>
|
|
<Field label="Last Active">{user.lastActive}</Field>
|
|
</dl>
|
|
</section>
|
|
</div>
|
|
|
|
{/* Right column */}
|
|
<div className="space-y-6">
|
|
{/* Security */}
|
|
<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)" }}
|
|
>
|
|
Security
|
|
</h2>
|
|
<dl className="grid grid-cols-2 gap-4">
|
|
<Field label="Settings PIN">{user.settingsPIN ? "****" : "-"}</Field>
|
|
<Field label="Quick Settings PIN">{user.quickSettingsPIN ? "****" : "-"}</Field>
|
|
</dl>
|
|
</section>
|
|
|
|
{/* Friends */}
|
|
<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)" }}
|
|
>
|
|
Friends
|
|
</h2>
|
|
<dl className="grid grid-cols-2 gap-4">
|
|
<Field label="Friends">
|
|
{user.friendsList?.length ?? 0}
|
|
</Field>
|
|
<Field label="Friends Invited">
|
|
{user.friendsInvited?.length ?? 0}
|
|
</Field>
|
|
</dl>
|
|
</section>
|
|
|
|
{/* Assigned Devices */}
|
|
<section
|
|
className="rounded-lg border p-6"
|
|
style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}
|
|
>
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h2
|
|
className="text-lg font-semibold"
|
|
style={{ color: "var(--text-heading)" }}
|
|
>
|
|
Assigned Devices ({devices.length})
|
|
</h2>
|
|
{canEdit && (
|
|
<button
|
|
onClick={openAssignPanel}
|
|
className="px-3 py-1.5 text-xs rounded-md hover:opacity-90 transition-colors cursor-pointer"
|
|
style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
|
|
>
|
|
Assign Device
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{showAssignPanel && (
|
|
<div
|
|
className="mb-4 p-3 rounded-md border"
|
|
style={{ backgroundColor: "var(--bg-primary)", borderColor: "var(--border-primary)" }}
|
|
>
|
|
<div className="flex gap-2 items-end">
|
|
<div className="flex-1">
|
|
<label className="block text-xs font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
|
|
Select Device
|
|
</label>
|
|
<select
|
|
value={selectedDeviceId}
|
|
onChange={(e) => setSelectedDeviceId(e.target.value)}
|
|
className="w-full px-3 py-2 rounded-md text-sm border"
|
|
style={{
|
|
backgroundColor: "var(--bg-card)",
|
|
color: "var(--text-primary)",
|
|
borderColor: "var(--border-primary)",
|
|
}}
|
|
>
|
|
<option value="">Choose a device...</option>
|
|
{availableDevices.map((d) => (
|
|
<option key={d.id} value={d.id}>
|
|
{d.device_name || "Unnamed"} ({d.device_id || d.id})
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<button
|
|
onClick={handleAssignDevice}
|
|
disabled={!selectedDeviceId || assigningDevice}
|
|
className="px-3 py-2 text-sm rounded-md hover:opacity-90 disabled:opacity-50 transition-colors"
|
|
style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
|
|
>
|
|
{assigningDevice ? "..." : "Assign"}
|
|
</button>
|
|
<button
|
|
onClick={() => { setShowAssignPanel(false); setSelectedDeviceId(""); }}
|
|
className="px-3 py-2 text-sm rounded-md hover:opacity-80 transition-colors"
|
|
style={{ backgroundColor: "var(--bg-card-hover)", color: "var(--text-primary)" }}
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{devices.length === 0 ? (
|
|
<p className="text-sm" style={{ color: "var(--text-muted)" }}>
|
|
No devices assigned.
|
|
</p>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{devices.map((device) => (
|
|
<div
|
|
key={device.id}
|
|
className="flex items-center justify-between p-3 rounded-md border"
|
|
style={{ backgroundColor: "var(--bg-primary)", borderColor: "var(--border-primary)" }}
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<span
|
|
className={`inline-block w-2.5 h-2.5 rounded-full ${
|
|
device.is_Online ? "bg-green-500" : ""
|
|
}`}
|
|
style={!device.is_Online ? { backgroundColor: "var(--border-primary)" } : undefined}
|
|
title={device.is_Online ? "Online" : "Offline"}
|
|
/>
|
|
<div>
|
|
<button
|
|
onClick={() => navigate(`/devices/${device.id}`)}
|
|
className="text-sm font-medium hover:underline"
|
|
style={{ color: "var(--text-link)" }}
|
|
>
|
|
{device.device_name || "Unnamed Device"}
|
|
</button>
|
|
<p className="text-xs font-mono" style={{ color: "var(--text-muted)" }}>
|
|
{device.device_id || device.id}
|
|
</p>
|
|
{device.device_location && (
|
|
<p className="text-xs" style={{ color: "var(--text-muted)" }}>
|
|
{device.device_location}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{canEdit && (
|
|
<button
|
|
onClick={() => handleUnassignDevice(device.id)}
|
|
className="text-xs hover:opacity-80 cursor-pointer"
|
|
style={{ color: "var(--danger)" }}
|
|
>
|
|
Remove
|
|
</button>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</section>
|
|
|
|
{/* Issues and Notes */}
|
|
<NotesPanel userId={id} />
|
|
</div>
|
|
</div>
|
|
|
|
<ConfirmDialog
|
|
open={showDelete}
|
|
title="Delete User"
|
|
message={`Are you sure you want to delete "${user.display_name || "this user"}" (${user.email})? This action cannot be undone.`}
|
|
onConfirm={handleDelete}
|
|
onCancel={() => setShowDelete(false)}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|