Add rocket chat user id field and show messages from linked user id on non-admin accounts

inventory/src/components/settings/UserForm.tsx

@@ -14,8 +14,11 @@ import {
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Switch } from "@/components/ui/switch";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { PermissionSelector } from "./PermissionSelector";
 import { Alert, AlertDescription } from "@/components/ui/alert";
+import config from "@/config";
 
 interface Permission {
   id: number;
@@ -25,12 +28,22 @@ interface Permission {
   category?: string;
 }
 
+interface RocketChatUser {
+  id: number;
+  username: string;
+  name: string;
+  type: string;
+  active: boolean;
+  mongo_id?: string;
+}
+
 interface User {
   id: number;
   username: string;
   email?: string;
   is_admin: boolean;
   is_active: boolean;
+  rocket_chat_user_id?: string;
   permissions?: Permission[];
 }
 
@@ -53,6 +66,7 @@ const userFormSchema = z.object({
   password: z.string().min(6, { message: "Password must be at least 6 characters" }).optional().or(z.literal("")),
   is_admin: z.boolean().default(false),
   is_active: z.boolean().default(true),
+  rocket_chat_user_id: z.string().optional(),
 });
 
 type FormValues = z.infer<typeof userFormSchema>;
@@ -80,12 +94,15 @@ interface UserSaveData {
   password?: string;
   is_admin: boolean;
   is_active: boolean;
+  rocket_chat_user_id?: string;
   permissions: Permission[];
 }
 
 export function UserForm({ user, permissions, onSave, onCancel }: UserFormProps) {
   const [selectedPermissions, setSelectedPermissions] = useState<number[]>([]);
   const [formError, setFormError] = useState<string | null>(null);
+  const [rocketChatUsers, setRocketChatUsers] = useState<RocketChatUser[]>([]);
+  const [loadingRocketChatUsers, setLoadingRocketChatUsers] = useState(true);
   
   // Initialize the form with React Hook Form
   const form = useForm<FormValues>({
@@ -96,10 +113,33 @@ export function UserForm({ user, permissions, onSave, onCancel }: UserFormProps)
       password: "", // Don't pre-fill password
       is_admin: user?.is_admin || false,
       is_active: user?.is_active !== false,
+      rocket_chat_user_id: user?.rocket_chat_user_id || "none",
     },
   });
   
-  // Initialize selected permissions
+  // Fetch Rocket Chat users
+  useEffect(() => {
+    const fetchRocketChatUsers = async () => {
+      try {
+        const response = await fetch(`${config.chatUrl}/users`);
+        const data = await response.json();
+        
+        if (data.status === 'success') {
+          setRocketChatUsers(data.users);
+        } else {
+          console.error('Failed to fetch Rocket Chat users:', data.error);
+        }
+      } catch (error) {
+        console.error('Error fetching Rocket Chat users:', error);
+      } finally {
+        setLoadingRocketChatUsers(false);
+      }
+    };
+
+    fetchRocketChatUsers();
+  }, []);
+
+  // Initialize selected permissions and form values
   useEffect(() => {
     console.log("User permissions:", user?.permissions);
     
@@ -112,7 +152,19 @@ export function UserForm({ user, permissions, onSave, onCancel }: UserFormProps)
       console.log("No permissions found or empty permissions array");
       setSelectedPermissions([]);
     }
-  }, [user]);
+
+    // Update form values when user data changes
+    if (user) {
+      form.reset({
+        username: user.username || "",
+        email: user.email || "",
+        password: "", // Don't pre-fill password
+        is_admin: user.is_admin || false,
+        is_active: user.is_active !== false,
+        rocket_chat_user_id: user.rocket_chat_user_id || "none",
+      });
+    }
+  }, [user, form]);
   
   // Handle form submission
   const onSubmit = (data: FormValues) => {
@@ -130,6 +182,7 @@ export function UserForm({ user, permissions, onSave, onCancel }: UserFormProps)
       const userData: UserSaveData = {
         ...data,
         id: user?.id, // Include ID if editing existing user
+        rocket_chat_user_id: data.is_admin ? undefined : (data.rocket_chat_user_id === "none" ? undefined : data.rocket_chat_user_id),
         permissions: [] // Initialize with empty array
       };
       
@@ -220,6 +273,64 @@ export function UserForm({ user, permissions, onSave, onCancel }: UserFormProps)
             )}
           />
           
+          <FormField
+            control={form.control}
+            name="rocket_chat_user_id"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Rocket Chat User</FormLabel>
+                <FormControl>
+                  {form.watch("is_admin") ? (
+                    <div className="flex items-center gap-2 p-2 border rounded-md bg-muted">
+                      <span className="text-muted-foreground">
+                        Admin users have access to all chat rooms by default
+                      </span>
+                    </div>
+                  ) : (
+                    <Select value={field.value} onValueChange={field.onChange}>
+                      <SelectTrigger>
+                        <SelectValue placeholder={loadingRocketChatUsers ? "Loading..." : "Select Rocket Chat user..."} />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {!loadingRocketChatUsers && (
+                          <SelectItem value="none">
+                            <span className="text-muted-foreground">None</span>
+                          </SelectItem>
+                        )}
+                        {rocketChatUsers.map((rcUser) => (
+                          <SelectItem key={rcUser.id} value={rcUser.id.toString()}>
+                            <div className="flex items-center gap-2">
+                              <Avatar className="h-6 w-6">
+                                <AvatarImage 
+                                  src={rcUser.mongo_id ? `${config.chatUrl}/avatar/${rcUser.mongo_id}` : undefined}
+                                  alt={rcUser.name || rcUser.username}
+                                />
+                                <AvatarFallback className="text-xs">
+                                  {(rcUser.name || rcUser.username).charAt(0).toUpperCase()}
+                                </AvatarFallback>
+                              </Avatar>
+                              <span className={rcUser.active ? '' : 'text-muted-foreground'}>
+                                {rcUser.name || rcUser.username}
+                                {!rcUser.active && <span className="text-xs ml-1">(inactive)</span>}
+                              </span>
+                            </div>
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  )}
+                </FormControl>
+                <FormDescription>
+                  {form.watch("is_admin") 
+                    ? "Admin users can view all chat rooms regardless of this setting"
+                    : "Connect this user to a Rocket Chat account to control their chat access"
+                  }
+                </FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          
           <FormField
             control={form.control}
             name="password"

inventory/src/contexts/AuthContext.tsx

@@ -14,6 +14,7 @@ export interface User {
   username: string;
   email?: string;
   is_admin: boolean;
+  rocket_chat_user_id?: string;
   permissions: string[];
 }
 
@@ -66,6 +67,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
       const userData = await response.json();
       console.log("Fetched current user data:", userData);
       console.log("User permissions:", userData.permissions);
+      console.log("User rocket_chat_user_id:", userData.rocket_chat_user_id);
       
       setUser(userData);
       // Ensure we have the sessionStorage isLoggedIn flag set

inventory/src/pages/Chat.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Input } from '@/components/ui/input';
@@ -8,6 +8,7 @@ import { Loader2, Search } from 'lucide-react';
 import { RoomList } from '@/components/chat/RoomList';
 import { ChatRoom } from '@/components/chat/ChatRoom';
 import { SearchResults } from '@/components/chat/SearchResults';
+import { AuthContext } from '@/contexts/AuthContext';
 import config from '@/config';
 
 interface User {
@@ -39,11 +40,13 @@ interface SearchResult {
 }
 
 export function Chat() {
+  const { user: currentUser, token } = useContext(AuthContext);
   const [users, setUsers] = useState<User[]>([]);
   const [selectedUserId, setSelectedUserId] = useState<string>('');
   const [selectedRoomId, setSelectedRoomId] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [userRocketChatId, setUserRocketChatId] = useState<string | null>(null);
   
   // Global search state
   const [globalSearchQuery, setGlobalSearchQuery] = useState('');
@@ -51,6 +54,12 @@ export function Chat() {
   const [showSearchResults, setShowSearchResults] = useState(false);
   const [searching, setSearching] = useState(false);
 
+  useEffect(() => {
+    if (currentUser) {
+      setUserRocketChatId(currentUser.rocket_chat_user_id || null);
+    }
+  }, [currentUser]);
+
   useEffect(() => {
     const fetchUsers = async () => {
       try {
@@ -59,6 +68,25 @@ export function Chat() {
         
         if (data.status === 'success') {
           setUsers(data.users);
+          
+          // Auto-select user based on permissions
+          if (currentUser && !currentUser.is_admin && userRocketChatId) {
+            console.log('Attempting to auto-select user:', {
+              currentUser: currentUser.username,
+              userRocketChatId,
+              userRocketChatIdType: typeof userRocketChatId,
+              availableUsers: data.users.map((u: User) => ({ id: u.id, idType: typeof u.id }))
+            });
+            
+            // Non-admin users should only see their connected rocket chat user
+            const userRocketChatUser = data.users.find((user: User) => user.id.toString() === userRocketChatId?.toString());
+            console.log('Found matching user:', userRocketChatUser);
+            
+            if (userRocketChatUser) {
+              setSelectedUserId(userRocketChatUser.id.toString());
+              console.log('Auto-selected user ID:', userRocketChatUser.id.toString());
+            }
+          }
         } else {
           throw new Error(data.error || 'Failed to fetch users');
         }
@@ -70,14 +98,19 @@ export function Chat() {
       }
     };
 
-    fetchUsers();
-  }, []);
+    if (currentUser) {
+      fetchUsers();
+    }
+  }, [currentUser, userRocketChatId]);
 
   const handleUserChange = (userId: string) => {
-    setSelectedUserId(userId);
-    setSelectedRoomId(null); // Reset room selection when user changes
-    setGlobalSearchQuery(''); // Clear search when user changes
-    setShowSearchResults(false);
+    // Only allow admins to change users, or if the user is selecting their own connected account
+    if (currentUser?.is_admin || userId === userRocketChatId) {
+      setSelectedUserId(userId);
+      setSelectedRoomId(null); // Reset room selection when user changes
+      setGlobalSearchQuery(''); // Clear search when user changes
+      setShowSearchResults(false);
+    }
   };
 
   const handleRoomSelect = (roomId: string) => {
@@ -181,32 +214,66 @@ export function Chat() {
             </div>
           )}
           
-          <Select value={selectedUserId} onValueChange={handleUserChange}>
-            <SelectTrigger className="w-64">
-              <SelectValue placeholder="View as user..." />
-            </SelectTrigger>
-            <SelectContent>
-              {users.map((user) => (
-                <SelectItem key={user.id} value={user.id.toString()}>
-                  <div className="flex items-center gap-2">
-                    <Avatar className="h-6 w-6">
-                      <AvatarImage 
-                        src={user.mongo_id ? `${config.chatUrl}/avatar/${user.mongo_id}` : undefined}
-                        alt={user.name || user.username}
-                      />
-                      <AvatarFallback className="text-xs">
-                        {(user.name || user.username).charAt(0).toUpperCase()}
-                      </AvatarFallback>
-                    </Avatar>
-                    <span className={user.active ? '' : 'text-muted-foreground'}>
-                      {user.name || user.username}
-                      {!user.active && <span className="text-xs ml-1">(inactive)</span>}
-                    </span>
-                  </div>
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+{currentUser?.is_admin ? (
+            <Select value={selectedUserId} onValueChange={handleUserChange}>
+              <SelectTrigger className="w-64">
+                <SelectValue placeholder="View as user..." />
+              </SelectTrigger>
+              <SelectContent>
+                {users.map((user) => (
+                  <SelectItem key={user.id} value={user.id.toString()}>
+                    <div className="flex items-center gap-2">
+                      <Avatar className="h-6 w-6">
+                        <AvatarImage 
+                          src={user.mongo_id ? `${config.chatUrl}/avatar/${user.mongo_id}` : undefined}
+                          alt={user.name || user.username}
+                        />
+                        <AvatarFallback className="text-xs">
+                          {(user.name || user.username).charAt(0).toUpperCase()}
+                        </AvatarFallback>
+                      </Avatar>
+                      <span className={user.active ? '' : 'text-muted-foreground'}>
+                        {user.name || user.username}
+                        {!user.active && <span className="text-xs ml-1">(inactive)</span>}
+                      </span>
+                    </div>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          ) : (
+            <div className="flex items-center gap-2 p-2 border rounded-md bg-muted w-64">
+              {selectedUserId && users.length > 0 ? (
+                <>
+                  {(() => {
+                    const selectedUser = users.find(u => u.id.toString() === selectedUserId);
+                    return selectedUser ? (
+                      <>
+                        <Avatar className="h-6 w-6">
+                          <AvatarImage 
+                            src={selectedUser.mongo_id ? `${config.chatUrl}/avatar/${selectedUser.mongo_id}` : undefined}
+                            alt={selectedUser.name || selectedUser.username}
+                          />
+                          <AvatarFallback className="text-xs">
+                            {(selectedUser.name || selectedUser.username).charAt(0).toUpperCase()}
+                          </AvatarFallback>
+                        </Avatar>
+                        <span>
+                          Viewing as: {selectedUser.name || selectedUser.username}
+                        </span>
+                      </>
+                    ) : (
+                      <span className="text-muted-foreground">No connected Rocket Chat user</span>
+                    );
+                  })()}
+                </>
+              ) : (
+                <span className="text-muted-foreground">
+                  {userRocketChatId ? 'Loading...' : 'No connected Rocket Chat user'}
+                </span>
+              )}
+            </div>
+          )}
         </div>
       </div>
 
@@ -233,9 +300,20 @@ export function Chat() {
       ) : (
         <Card>
           <CardContent className="flex items-center justify-center h-64">
-            <p className="text-muted-foreground">
-              Select a user to view their chat rooms and messages.
-            </p>
+            {currentUser?.is_admin ? (
+              <p className="text-muted-foreground">
+                Select a user to view their chat rooms and messages.
+              </p>
+            ) : (
+              <div className="text-center space-y-2">
+                <p className="text-muted-foreground">
+                  No Rocket Chat user connected to your account.
+                </p>
+                <p className="text-sm text-muted-foreground">
+                  Please contact your administrator to connect your account with a Rocket Chat user.
+                </p>
+              </div>
+            )}
           </CardContent>
         </Card>
       )}