feat(frontend): Added new view workspace members button - needs imple…

…mented in backend [2024-11-23]

gridwalk-ui/src/app/workspace/[workspaceId]/viewMembersModal.tsx

@@ -0,0 +1,43 @@
+"use client";
+import React from "react";
+
+interface ViewWorkspaceMemberModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const ViewWorkspaceMemberModal: React.FC<
+  ViewWorkspaceMemberModalProps
+> = ({ isOpen, onClose }) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+      <div className="bg-white rounded-lg p-6 w-full max-w-md relative">
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-xl font-bold text-gray-900">
+            View Workspace Member
+          </h2>
+          <button
+            onClick={onClose}
+            className="text-gray-500 hover:text-gray-700"
+          >
+            ✕
+          </button>
+        </div>
+
+        {/* Content will be added here in the future */}
+        <div className="py-4">{/* Placeholder for future content */}</div>
+
+        <div className="flex justify-end">
+          <button
+            onClick={onClose}
+            className="px-4 py-2 text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200"
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

gridwalk-ui/src/app/workspace/[workspaceId]/workspaceProjects.tsx

@@ -1,8 +1,9 @@
 "use client";
 import React, { useState } from "react";
-import { Plus, UserPlus } from "lucide-react";
+import { Plus, UserPlus, Users } from "lucide-react";
 import { CreateProjectModal } from "./projectModal";
 import { AddWorkspaceMemberModal } from "./addMemberModal";
+import { ViewWorkspaceMemberModal } from "./viewMembersModal";
 import { useWorkspaces } from "../workspaceContext";
 import { createProject } from "./actions/projects/create";
 import { addWorkspaceMember } from "./actions/workspace";
@@ -22,6 +23,7 @@ export default function WorkspaceProjectsClient({
   const [projects, setProjects] = useState(initialProjects);
   const [isProjectDialogOpen, setIsProjectDialogOpen] = useState(false);
   const [isMemberDialogOpen, setIsMemberDialogOpen] = useState(false);
+  const [isViewMemberDialogOpen, setIsViewMemberDialogOpen] = useState(false);
   const currentWorkspace = workspaces.find((w) => w.id === workspaceId);
 
   const handleCreateProject = async (name: string) => {
@@ -74,6 +76,13 @@ export default function WorkspaceProjectsClient({
             </p>
           </div>
           <div className="flex flex-col sm:flex-row gap-2">
+            <button
+              onClick={() => setIsViewMemberDialogOpen(true)}
+              className="bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded-lg flex items-center gap-2 transition-colors w-full sm:w-auto justify-center sm:justify-start"
+            >
+              <Users size={20} />
+              View Members
+            </button>
             <button
               onClick={() => setIsMemberDialogOpen(true)}
               className="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg flex items-center gap-2 transition-colors w-full sm:w-auto justify-center sm:justify-start"
@@ -121,6 +130,11 @@ export default function WorkspaceProjectsClient({
           onClose={() => setIsMemberDialogOpen(false)}
           onSubmit={handleAddMember}
         />
+
+        <ViewWorkspaceMemberModal
+          isOpen={isViewMemberDialogOpen}
+          onClose={() => setIsViewMemberDialogOpen(false)}
+        />
       </div>
     </div>
   );