Added Roles and Permissions. Some minor UI fixes

frontend/src/auth/AuthContext.jsx

@@ -36,9 +36,26 @@ export function AuthProvider({ children }) {
   const login = async (email, password) => {
     const data = await api.post("/auth/login", { email, password });
     localStorage.setItem("access_token", data.access_token);
-    const userInfo = { name: data.name, role: data.role };
+    const userInfo = {
+      name: data.name,
+      role: data.role,
+      permissions: data.permissions || null,
+    };
     localStorage.setItem("user", JSON.stringify(userInfo));
     setUser(userInfo);
+
+    // Fetch full profile from /staff/me for up-to-date permissions
+    try {
+      const me = await api.get("/staff/me");
+      if (me.permissions) {
+        const updated = { ...userInfo, permissions: me.permissions };
+        localStorage.setItem("user", JSON.stringify(updated));
+        setUser(updated);
+      }
+    } catch {
+      // Non-critical, permissions from login response are used
+    }
+
     return data;
   };
 
@@ -50,12 +67,30 @@ export function AuthProvider({ children }) {
 
   const hasRole = (...roles) => {
     if (!user) return false;
-    if (user.role === "superadmin") return true;
+    if (user.role === "sysadmin") return true;
     return roles.includes(user.role);
   };
 
+  const hasPermission = (section, action) => {
+    if (!user) return false;
+    // sysadmin and admin have full access
+    if (user.role === "sysadmin" || user.role === "admin") return true;
+
+    const perms = user.permissions;
+    if (!perms) return false;
+
+    // MQTT is a global flag
+    if (section === "mqtt") {
+      return !!perms.mqtt;
+    }
+
+    const sectionPerms = perms[section];
+    if (!sectionPerms) return false;
+    return !!sectionPerms[action];
+  };
+
   return (
-    <AuthContext.Provider value={{ user, login, logout, loading, hasRole }}>
+    <AuthContext.Provider value={{ user, login, logout, loading, hasRole, hasPermission }}>
       {children}
     </AuthContext.Provider>
   );