From 2b3ff2c461ff331a38467335bca79c6662b05b4e Mon Sep 17 00:00:00 2001
From: vboxuser <drew.morris@cleverthis.com>
Date: Sun, 2 Feb 2025 16:39:21 +0000
Subject: [PATCH] Add feature/fix: user administration enhancements

---
 .../ChatDemo/utils/userDialogInfo.tsx         | 286 ++++++++++++++----
 src/components/UserForm.tsx                   | 178 +++++++++++
 src/context/UserContext.tsx                   |  57 ++++
 src/pages/users.tsx                           |  43 ++-
 src/types.ts                                  |  17 ++
 5 files changed, 519 insertions(+), 62 deletions(-)
 create mode 100644 src/components/UserForm.tsx

diff --git a/src/components/ChatDemo/utils/userDialogInfo.tsx b/src/components/ChatDemo/utils/userDialogInfo.tsx
index 19169d2..a77eeb6 100644
--- a/src/components/ChatDemo/utils/userDialogInfo.tsx
+++ b/src/components/ChatDemo/utils/userDialogInfo.tsx
@@ -1,8 +1,9 @@
-import { Loader, UserRound, ChevronDown, ChevronUp } from 'lucide-react';
+import { Loader, UserRound, ChevronDown, ChevronUp, Edit2, Save, X } from 'lucide-react';
 import { User } from 'r2r-js';
 import React, { useState, useEffect } from 'react';
 
 import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/Button';
 import { Card, CardHeader, CardContent } from '@/components/ui/card';
 import CopyableContent from '@/components/ui/CopyableContent';
 import {
@@ -11,6 +12,22 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@/components/ui/alert-dialog';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Switch } from '@/components/ui/switch';
+import { Label } from '@/components/ui/label';
+import { useToast } from '@/components/ui/use-toast';
 import { useUserContext } from '@/context/UserContext';
 
 interface UserInfoDialogProps {
@@ -101,9 +118,20 @@ export const UserInfoDialog: React.FC<UserInfoDialogProps> = ({
   open,
   onClose,
 }) => {
-  const { getClient } = useUserContext();
+  const { getClient, deleteUser, updateUser } = useUserContext();
+  const { toast } = useToast();
   const [userProfile, setUserProfile] = useState<User | null>(null);
   const [loading, setLoading] = useState(true);
+  const [isEditing, setIsEditing] = useState(false);
+  const [editedData, setEditedData] = useState<{
+    name: string;
+    bio: string;
+    isSuperuser: boolean;
+  }>({
+    name: '',
+    bio: '',
+    isSuperuser: false,
+  });
 
   useEffect(() => {
     const fetchUser = async () => {
@@ -120,6 +148,11 @@ export const UserInfoDialog: React.FC<UserInfoDialogProps> = ({
 
         const user = await client.users.retrieve({ id });
         setUserProfile(user.results);
+        setEditedData({
+          name: user.results.name || '',
+          bio: user.results.bio || '',
+          isSuperuser: user.results.isSuperuser || false,
+        });
       } catch (error) {
         console.error('Error fetching user:', error);
       } finally {
@@ -130,11 +163,74 @@ export const UserInfoDialog: React.FC<UserInfoDialogProps> = ({
     fetchUser();
   }, [id, open, getClient]);
 
+  const handleDeleteUser = async () => {
+    try {
+      await deleteUser(id);
+      toast({
+        title: "User Deleted",
+        description: "The user has been successfully deleted.",
+      });
+      onClose();
+    } catch (error) {
+      toast({
+        title: "Error",
+        description: "Failed to delete user. Please try again.",
+        variant: "destructive",
+      });
+    }
+  };
+
+  const handleSaveChanges = async () => {
+    try {
+      // Transform the editedData to match API's expected snake_case
+      const transformedData = {
+        name: editedData.name,
+        bio: editedData.bio,
+        is_superuser: editedData.isSuperuser
+      };
+      
+      const updatedUser = await updateUser(id, transformedData);
+      setUserProfile(updatedUser);
+      setIsEditing(false);
+      toast({
+        title: "Success",
+        description: "User information updated successfully.",
+      });
+    } catch (error) {
+      toast({
+        title: "Error",
+        description: "Failed to update user information.",
+        variant: "destructive",
+      });
+    }
+  };
+
   return (
     <Dialog open={open} onOpenChange={onClose}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>User Details</DialogTitle>
+          <div className="flex items-center justify-between">
+            <DialogTitle>User Details</DialogTitle>
+            {!loading && userProfile && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setIsEditing(!isEditing)}
+              >
+                {isEditing ? (
+                  <>
+                    <X className="h-4 w-4 mr-2" />
+                    Cancel
+                  </>
+                ) : (
+                  <>
+                    <Edit2 className="h-4 w-4 mr-2" />
+                    Edit
+                  </>
+                )}
+              </Button>
+            )}
+          </div>
         </DialogHeader>
 
         {loading ? (
@@ -150,67 +246,147 @@ export const UserInfoDialog: React.FC<UserInfoDialogProps> = ({
                     <UserRound size={40} />
                   </div>
                   <div>
-                    <div className="flex items-center space-x-2">
-                      <h2 className="text-xl font-semibold">
-                        {userProfile?.name || 'Unnamed User'}
-                      </h2>
-                      {userProfile?.isSuperuser && (
-                        <Badge variant="secondary">Admin</Badge>
-                      )}
-                    </div>
-                    <p className="text-gray-400">{userProfile?.email}</p>
-                    <p className="text-gray-400">
-                      <CopyableContent
-                        content={userProfile?.id}
-                        truncated={userProfile?.id}
-                      />
-                    </p>
+                    {isEditing ? (
+                      <div className="space-y-4">
+                        <div>
+                          <Label htmlFor="name">Name</Label>
+                          <Input
+                            id="name"
+                            value={editedData.name}
+                            onChange={(e) => 
+                              setEditedData({ ...editedData, name: e.target.value })
+                            }
+                            placeholder="User name"
+                          />
+                        </div>
+                        <div className="flex items-center space-x-2">
+                          <Switch
+                            checked={editedData.isSuperuser}
+                            onCheckedChange={(checked) =>
+                              setEditedData({ ...editedData, isSuperuser: checked })
+                            }
+                          />
+                          <Label>Admin privileges</Label>
+                        </div>
+                      </div>
+                    ) : (
+                      <>
+                        <div className="flex items-center space-x-2">
+                          <h2 className="text-xl font-semibold">
+                            {userProfile?.name || 'Unnamed User'}
+                          </h2>
+                          {userProfile?.isSuperuser && (
+                            <Badge variant="secondary">Admin</Badge>
+                          )}
+                        </div>
+                        <p className="text-gray-400">{userProfile?.email}</p>
+                        <p className="text-gray-400">
+                          <CopyableContent
+                            content={userProfile?.id}
+                            truncated={userProfile?.id}
+                          />
+                        </p>
+                      </>
+                    )}
                   </div>
                 </div>
               </div>
             </CardHeader>
             <CardContent>
               <div className="space-y-6">
-                <InfoRow
-                  label="Account Status"
-                  values={[
-                    { label: 'Active', value: userProfile?.isActive },
-                    { label: 'Verified', value: userProfile?.isVerified },
-                    { label: 'Super User', value: userProfile?.isSuperuser },
-                  ]}
-                />
+                {!isEditing && (
+                  <>
+                    <InfoRow
+                      label="Account Status"
+                      values={[
+                        { label: 'Active', value: userProfile?.isActive },
+                        { label: 'Verified', value: userProfile?.isVerified },
+                        { label: 'Super User', value: userProfile?.isSuperuser },
+                      ]}
+                    />
 
-                <InfoRow
-                  label="Account Dates"
-                  values={[
-                    {
-                      label: 'Created',
-                      value: new Date(
-                        userProfile?.createdAt || ''
-                      ).toLocaleDateString(),
-                    },
-                    {
-                      label: 'Updated',
-                      value: new Date(
-                        userProfile?.updatedAt || ''
-                      ).toLocaleDateString(),
-                    },
-                  ]}
-                />
+                    <InfoRow
+                      label="Account Dates"
+                      values={[
+                        {
+                          label: 'Created',
+                          value: new Date(
+                            userProfile?.createdAt || ''
+                          ).toLocaleDateString(),
+                        },
+                        {
+                          label: 'Updated',
+                          value: new Date(
+                            userProfile?.updatedAt || ''
+                          ).toLocaleDateString(),
+                        },
+                      ]}
+                    />
+                  </>
+                )}
 
-                {userProfile?.bio && (
-                  <div>
-                    <h3 className="text-sm font-medium text-gray-400 mb-2">
-                      Bio
-                    </h3>
-                    <p className="text-gray-300">{userProfile.bio}</p>
+                {isEditing ? (
+                  <div className="space-y-4">
+                    <div>
+                      <Label htmlFor="bio">Bio</Label>
+                      <Textarea
+                        id="bio"
+                        value={editedData.bio}
+                        onChange={(e) =>
+                          setEditedData({ ...editedData, bio: e.target.value })
+                        }
+                        placeholder="User bio"
+                        rows={4}
+                      />
+                    </div>
+                    <Button
+                      className="w-full"
+                      onClick={handleSaveChanges}
+                    >
+                      <Save className="h-4 w-4 mr-2" />
+                      Save Changes
+                    </Button>
                   </div>
-                )}
+                ) : (
+                  <>
+                    {userProfile?.bio && (
+                      <div>
+                        <h3 className="text-sm font-medium text-gray-400 mb-2">
+                          Bio
+                        </h3>
+                        <p className="text-gray-300">{userProfile.bio}</p>
+                      </div>
+                    )}
 
-                <ExpandableInfoRow
-                  label="Collections"
-                  values={userProfile?.collectionIds}
-                />
+                    <ExpandableInfoRow
+                      label="Collections"
+                      values={userProfile?.collectionIds}
+                    />
+
+                    <AlertDialog>
+                      <AlertDialogTrigger asChild>
+                        <Button variant="destructive" className="w-full">
+                          Delete User
+                        </Button>
+                      </AlertDialogTrigger>
+                      <AlertDialogContent>
+                        <AlertDialogHeader>
+                          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+                          <AlertDialogDescription>
+                            This action cannot be undone. This will permanently delete the
+                            user account and remove all associated data.
+                          </AlertDialogDescription>
+                        </AlertDialogHeader>
+                        <AlertDialogFooter>
+                          <AlertDialogCancel>Cancel</AlertDialogCancel>
+                          <AlertDialogAction onClick={handleDeleteUser}>
+                            Delete
+                          </AlertDialogAction>
+                        </AlertDialogFooter>
+                      </AlertDialogContent>
+                    </AlertDialog>
+                  </>
+                )}
               </div>
             </CardContent>
           </Card>
@@ -222,4 +398,4 @@ export const UserInfoDialog: React.FC<UserInfoDialogProps> = ({
   );
 };
 
-export default UserInfoDialog;
+export default UserInfoDialog;
\ No newline at end of file
diff --git a/src/components/UserForm.tsx b/src/components/UserForm.tsx
new file mode 100644
index 0000000..b8050a0
--- /dev/null
+++ b/src/components/UserForm.tsx
@@ -0,0 +1,178 @@
+import React, { useState } from 'react';
+import { useUserContext } from '@/context/UserContext';
+import { Card } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Loader, UserPlus } from 'lucide-react';
+
+interface UserFormProps {
+  open: boolean;
+  onClose: () => void;
+  onUserCreated?: () => void;
+}
+
+const UserForm: React.FC<UserFormProps> = ({ open, onClose, onUserCreated }) => {
+  const { createUser } = useUserContext();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [role, setRole] = useState('user');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState(false);
+
+  const validateEmail = (email) => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  };
+
+  const validatePassword = (password) => {
+    return password.length >= 8;
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    setSuccess(false);
+
+    if (!validateEmail(email)) {
+      setError('Please enter a valid email address');
+      return;
+    }
+
+    if (!validatePassword(password)) {
+      setError('Password must be at least 8 characters long');
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      const newUser = await createUser({ email, password, role });
+      setSuccess(true);
+      setEmail('');
+      setPassword('');
+      setRole('user');
+      console.log('User created successfully:', newUser);
+      
+      // Call the onUserCreated callback if provided
+      if (onUserCreated) {
+        onUserCreated();
+      }
+
+      // Close the dialog after a short delay to show success message
+      setTimeout(() => {
+        onClose();
+      }, 1500);
+    } catch (error) {
+      setError(error.message || 'Error creating user. Please try again.');
+      console.error('Error creating user:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleDialogClose = () => {
+    // Reset form state when dialog is closed
+    setEmail('');
+    setPassword('');
+    setRole('user');
+    setError('');
+    setSuccess(false);
+    onClose();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleDialogClose}>
+      <DialogContent>
+        <DialogHeader>
+          <div className="flex items-center space-x-4">
+            <div className="p-4 rounded-full bg-muted">
+              <UserPlus size={24} />
+            </div>
+            <div>
+              <DialogTitle>Create New User</DialogTitle>
+              <div className="flex items-center space-x-2 mt-1">
+                <Badge variant="secondary">{role}</Badge>
+              </div>
+            </div>
+          </div>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <label className="text-sm font-medium">Email</label>
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2"
+              required
+              disabled={isLoading}
+              placeholder="user@example.com"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium">Password</label>
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2"
+              required
+              disabled={isLoading}
+              placeholder="••••••••"
+            />
+            <p className="text-xs text-muted-foreground">Must be at least 8 characters long</p>
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium">Role</label>
+            <select 
+              value={role} 
+              onChange={(e) => setRole(e.target.value)}
+              className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2"
+              disabled={isLoading}
+            >
+              <option value="user">User</option>
+              <option value="admin">Admin</option>
+            </select>
+          </div>
+
+          {error && (
+            <Alert variant="destructive">
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          )}
+
+          {success && (
+            <Alert>
+              <AlertDescription>User created successfully!</AlertDescription>
+            </Alert>
+          )}
+
+          <button
+            type="submit"
+            disabled={isLoading}
+            className="w-full px-4 py-2 text-white bg-blue-600 rounded-md 
+                     hover:bg-blue-700 focus:outline-none focus:ring-2 
+                     focus:ring-offset-2 focus:ring-blue-500 
+                     disabled:opacity-50 disabled:cursor-not-allowed 
+                     flex items-center justify-center"
+          >
+            {isLoading ? (
+              <>
+                <Loader className="animate-spin mr-2" size={16} />
+                Creating...
+              </>
+            ) : (
+              'Create User'
+            )}
+          </button>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default UserForm;
\ No newline at end of file
diff --git a/src/context/UserContext.tsx b/src/context/UserContext.tsx
index 6365846..46759e5 100644
--- a/src/context/UserContext.tsx
+++ b/src/context/UserContext.tsx
@@ -44,6 +44,13 @@ const UserContext = createContext<UserContextProps>({
   viewMode: 'admin',
   setViewMode: () => {},
   isSuperUser: () => false,
+  // Add createUser with a placeholder implementation
+  createUser: async () => {
+    throw new Error('createUser is not implemented in the default context');
+  },
+  deleteUser: async () => {
+    throw new Error('deleteUser is not implemented in the default context');
+  },
 });
 
 export const useUserContext = () => useContext(UserContext);
@@ -393,6 +400,50 @@ export const UserProvider: React.FC<{ children: React.ReactNode }> = ({
     }
   }, [selectedModel]);
 
+  const createUser = useCallback(
+    async (userData: { email: string; password: string; role: string }) => {
+      if (!client) throw new Error('Client not initialized');
+      try {
+        const newUser = await client.users.create(userData);
+        return newUser;
+      } catch (error) {
+        console.error('Failed to create user:', error);
+        throw error;
+      }
+    },
+    [client]
+  );
+
+  const deleteUser = useCallback(
+    async (userId: string) => {
+      if (!client) throw new Error('Client not initialized');
+      try {
+        await client.users.delete({ id: userId });
+      } catch (error) {
+        console.error('Failed to delete user:', error);
+        throw error;
+      }
+    },
+    [client]
+  );
+
+  const updateUser = useCallback(
+    async (userId: string, userData: Partial<User>) => {
+      if (!client) throw new Error('Client not initialized');
+      try {
+        const response = await client.users.update({
+          id: userId,
+          ...userData
+        });
+        return response.results;
+      } catch (error) {
+        console.error('Update user error:', error);
+        throw error;
+      }
+    },
+    [client]
+  );
+
   const contextValue = React.useMemo(
     () => ({
       pipeline,
@@ -411,6 +462,9 @@ export const UserProvider: React.FC<{ children: React.ReactNode }> = ({
       viewMode,
       setViewMode,
       isSuperUser,
+      createUser,
+      deleteUser,
+      updateUser,
     }),
     [
       pipeline,
@@ -425,6 +479,9 @@ export const UserProvider: React.FC<{ children: React.ReactNode }> = ({
       unsetCredentials,
       register,
       getClient,
+      createUser,
+      deleteUser,
+      updateUser,
     ]
   );
 
diff --git a/src/pages/users.tsx b/src/pages/users.tsx
index d1b7edc..3768610 100644
--- a/src/pages/users.tsx
+++ b/src/pages/users.tsx
@@ -9,6 +9,7 @@ import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/input';
 import { useToast } from '@/components/ui/use-toast';
+import UserForm from '@/components/UserForm';
 import { useUserContext } from '@/context/UserContext';
 
 const PAGE_SIZE = 100;
@@ -23,6 +24,7 @@ const Index: React.FC = () => {
   const [selectedUserID, setSelectedUserID] = useState<string>();
   const [isUserInfoDialogOpen, setIsUserInfoDialogOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
+  const [isUserFormOpen, setIsUserFormOpen] = useState(false);
 
   const { toast } = useToast();
 
@@ -106,6 +108,16 @@ const Index: React.FC = () => {
     setCurrentPage(pageNumber);
   };
 
+  const handleUserDelete = () => {
+    // Refresh the users list
+    fetchAllUsers();
+  };
+
+  const handleUserCreated = () => {
+    // Refresh the users list
+    fetchAllUsers();
+  };
+
   const columns: Column<User>[] = [
     {
       key: 'id',
@@ -114,6 +126,11 @@ const Index: React.FC = () => {
       copyable: true,
     },
     {
+      key: 'name',
+      label: 'Name',
+      renderCell: (user) => user.name || 'Unnamed User',  // Provides a fallback if name is empty
+    },
+   {
       key: 'isSuperuser',
       label: 'Role',
       renderCell: (user) =>
@@ -134,6 +151,9 @@ const Index: React.FC = () => {
               <div className="mb-6">
                 <div className="flex items-center justify-between">
                   <h1 className="text-2xl font-bold text-white">Users</h1>
+                  <Button onClick={() => setIsUserFormOpen(true)}>
+                    Add New User
+                  </Button>
                 </div>
 
                 <div className="flex items-center mt-6 gap-2">
@@ -146,8 +166,13 @@ const Index: React.FC = () => {
                     }}
                     className="flex-grow"
                   />
-                  {/* Add any action buttons here if needed */}
                 </div>
+                {/* Keep the UserForm here */}
+                <UserForm 
+                  open={isUserFormOpen} 
+                  onClose={() => setIsUserFormOpen(false)}
+                  onUserCreated={handleUserCreated}  // Add this prop
+                />
               </div>
 
               <Table<User>
@@ -179,12 +204,16 @@ const Index: React.FC = () => {
       </main>
 
       {selectedUserID && (
-        <UserInfoDialog
-          id={selectedUserID}
-          open={isUserInfoDialogOpen}
-          onClose={() => setIsUserInfoDialogOpen(false)}
-        />
-      )}
+      <UserInfoDialog
+        id={selectedUserID}
+        open={isUserInfoDialogOpen}
+        onClose={() => {
+          setIsUserInfoDialogOpen(false);
+          handleUserDelete(); // Refresh list after dialog closes
+        }}
+      />
+    )}
+      
     </Layout>
   );
 };
diff --git a/src/types.ts b/src/types.ts
index b386ce5..36fe617 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -440,8 +440,25 @@ export interface UserContextProps {
   viewMode: 'admin' | 'user';
   setViewMode: React.Dispatch<React.SetStateAction<'admin' | 'user'>>;
   isSuperUser: () => boolean;
+  createUser: (userData: {
+    email: string;
+    password: string;
+    role: string;
+  }) => Promise<any>;
 }
 
+export type CreateUserRequest = {
+  email: string;
+  password: string;
+  role: 'admin' | 'user';
+};
+
+export type User = {
+  id: string;
+  email: string;
+  role: 'admin' | 'user';
+};
+
 export type Collection = {
   name: string;
   id: string;