Added Roles and Permissions. Some minor UI fixes

frontend/src/users/UserDetail.jsx

@@ -24,8 +24,8 @@ function Field({ label, children }) {
 export default function UserDetail() {
   const { id } = useParams();
   const navigate = useNavigate();
-  const { hasRole } = useAuth();
-  const canEdit = hasRole("superadmin", "user_manager");
+  const { hasPermission } = useAuth();
+  const canEdit = hasPermission("app_users", "edit");
 
   const [user, setUser] = useState(null);
   const [devices, setDevices] = useState([]);
@@ -165,7 +165,7 @@ export default function UserDetail() {
             className="text-sm hover:underline mb-2 inline-block"
             style={{ color: "var(--accent)" }}
           >
-            ← Back to Users
+            ← Back to App Users
           </button>
           <div className="flex items-center gap-3">
             <h1

frontend/src/users/UserList.jsx

@@ -17,8 +17,8 @@ export default function UserList() {
   const [deleteTarget, setDeleteTarget] = useState(null);
   const [hoveredRow, setHoveredRow] = useState(null);
   const navigate = useNavigate();
-  const { hasRole } = useAuth();
-  const canEdit = hasRole("superadmin", "user_manager");
+  const { hasPermission } = useAuth();
+  const canEdit = hasPermission("app_users", "edit");
 
   const fetchUsers = async () => {
     setLoading(true);
@@ -57,7 +57,7 @@ export default function UserList() {
   return (
     <div>
       <div className="flex items-center justify-between mb-6">
-        <h1 className="text-2xl font-bold" style={{ color: "var(--text-heading)" }}>Users</h1>
+        <h1 className="text-2xl font-bold" style={{ color: "var(--text-heading)" }}>App Users</h1>
         {canEdit && (
           <button
             onClick={() => navigate("/users/new")}