Feat/project

app/(main)/dashboard.tsx

@@ -5,6 +5,7 @@ import EmptyProjectMessage from "@/components/EmptyProjectMessage";
 import HeaderV2 from "@/components/HeaderV2";
 import ProjectList from "@/components/ProjectList";
 import ProjectOverviewInputForm from "@/components/ProjectOverviewInputForm";
+import ProjectShareModal from "@/components/ProjectShareModal";
 import { useAppContext } from "@/contexts/AppContext";
 import { Project } from "@/types/Project";
 import { useUser } from "@auth0/nextjs-auth0/client";
@@ -20,6 +21,8 @@ const Dashboard: React.FC = () => {
   const { projects, dispatchProjectsUpdate, projectsLoading } = useAppContext();
   const [showCreateForm, setShowCreateForm] = useState(false);
   const [isCreatingProject, setIsCreatingProject] = useState(false);
+  const [showShareModal, setShowShareModal] = useState(false);
+const [selectedProjectId, setSelectedProjectId] = useState<string | null>(null);
   const router = useRouter();
 
   const handleCreateProject = async (description: string) => {
@@ -53,6 +56,11 @@ const Dashboard: React.FC = () => {
     router.push(`/workspaces/${projectId}`);
   };
 
+  const handleShareClick = (projectId: string) => {
+    setSelectedProjectId(projectId);
+    setShowShareModal(true);
+  };
+
   const handleProjectDeleted = async (deletedProjectId: string) => {
     try {
       await projectApi.deleteProject(deletedProjectId);
@@ -94,6 +102,7 @@ const Dashboard: React.FC = () => {
                 onCreateProject={() => setShowCreateForm(true)}
                 onOpenProject={handleOpenProject}
                 onProjectDeleted={handleProjectDeleted}
+                onShareClick={handleShareClick}
               />
             </>
           ) : (
@@ -120,6 +129,15 @@ const Dashboard: React.FC = () => {
         </div>
       )}
       <Toaster position="bottom-right" />
+      {showShareModal && selectedProjectId && (
+      <ProjectShareModal
+        isOpen={showShareModal}
+        onClose={() => setShowShareModal(false)}
+        projectId={selectedProjectId}
+        projectTitle={projects.find(p => p.id === selectedProjectId)?.title || ''}
+        userAccessLevel="owner" // Assuming the user is the owner on the dashboard
+      />
+)}
     </div>
   );
 };

app/(main)/workspace.tsx

@@ -28,6 +28,7 @@ import Alert from "@/components/Alert";
 import { Attachment } from "@/types/Attachment";
 import { defaultDependencies } from "@/utils/config";
 import { SandpackError } from "@codesandbox/sandpack-client";
+import { checkAccess } from "@/utils/access";
 
 interface WorkspaceProps {
   projectId: string;
@@ -54,6 +55,7 @@ const Workspace: React.FC<WorkspaceProps> = memo(({ projectId }) => {
     type: "error" | "info" | "warning" | "success";
     message: string;
   } | null>(null);
+  const [accessLevel, setAccessLevel] = useState<string>("none");
 
   const router = useRouter();
 
@@ -74,10 +76,13 @@ const Workspace: React.FC<WorkspaceProps> = memo(({ projectId }) => {
           throw new Error("Project ID is undefined");
         }
         console.log("Fetching project with ID:", projectId);
-        const fetchedProject = await projectApi.getProject(projectId);
-        console.log("Fetched project:", fetchedProject);
+        const { project, accessLevel } = await projectApi.getProject(projectId);
+        console.log("Fetched project:", project);
         const artifacts = await artifactApi.getArtifacts(projectId);
         console.log("Fetched artifacts:", artifacts);
+
+        console.log("Access level:", accessLevel);
+        setAccessLevel(accessLevel);
 
         // Update artifacts to ensure each message in the chat session has attachments set to an empty array
         const updatedArtifacts = artifacts.map(artifact => ({
@@ -93,7 +98,7 @@ const Workspace: React.FC<WorkspaceProps> = memo(({ projectId }) => {
 
         updateProjectAndArtifact(
           (prevProject) => ({
-            ...fetchedProject,
+            ...project,
             artifacts: updatedArtifacts,
           }),
           updatedArtifacts.length > 0 ? updatedArtifacts[0] : null
@@ -169,6 +174,7 @@ const Workspace: React.FC<WorkspaceProps> = memo(({ projectId }) => {
       updatedArtifact
     );
   };
+  const isViewer = accessLevel === 'viewer';
 
   const showAlert = (
     type: "error" | "info" | "warning" | "success",
@@ -636,6 +642,7 @@ ${instructions}
           onShareClick={handleShare}
           onDeleteClick={handleDelete}
           projectId={project.id}
+          isViewer={isViewer}
         />
         {project.artifacts && project.artifacts.length > 0 ? (
           <PanelGroup direction="horizontal" className="flex-1">
@@ -654,6 +661,7 @@ ${instructions}
                 onCreateArtifact={() => setShowCreateForm(true)}
                 onDeleteArtifact={handleDeleteArtifact}
                 onArtifactHover={handleArtifactHover}
+                isViewer={isViewer}
               />
             </Panel>
             {!isArtifactListCollapsed && (
@@ -690,7 +698,7 @@ ${instructions}
               maxSize={100}
               collapsible={true}
             >
-              {selectedArtifact && (
+              {selectedArtifact && !isViewer && (
                 <UpdateArtifact
                   artifact={selectedArtifact}
                   isCollapsed={isUpdateArtifactCollapsed}
@@ -703,7 +711,8 @@ ${instructions}
           </PanelGroup>
         ) : (
           <EmptyArtifactsMessage
-            onCreateArtifact={() => setShowCreateForm(true)}
+            onCreateArtifact={() => !isViewer && setShowCreateForm(true)}
+            isViewer={isViewer}
           />
         )}
       </div>
@@ -748,6 +757,7 @@ ${instructions}
           onClose={() => setShowShareModal(false)}
           projectId={project.id}
           projectTitle={project.title}
+          userAccessLevel={accessLevel}
         />
       )}
       {showDeleteArtifactConfirmation && artifactToDelete && (

app/api/projects/[projectId]/artifacts/[artifactId]/route.ts

@@ -1,22 +1,13 @@
 import { NextResponse } from 'next/server';
 import { ddbClient } from '@/utils/ddbClient';
+import { checkAccess } from '@/utils/access';
 import { Artifact } from '@/types/Artifact';
 // @ts-ignore
 import { getSession } from '@auth0/nextjs-auth0';
 import fgaClient from "@/lib/oktaFGA";
 
 const TABLE_NAME = process.env.DDB_TABLE_NAME || "ti-artifacts";
 
-// Helper function to check user access
-async function checkAccess(userId: string, projectId: string, requiredRelation: string) {
-  const response = await fgaClient.check({
-    user: `user:${userId}`,
-    relation: requiredRelation,
-    object: `project:${projectId}`,
-  });
-  return response.allowed;
-}
-
 // Read an artifact by ID
 export async function GET(
   request: Request,
@@ -31,8 +22,8 @@ export async function GET(
     const { projectId, artifactId } = params;
 
     // Check if user has access to view this project
-    const hasAccess = await checkAccess(session.user.sub, projectId, 'can_view');
-    if (!hasAccess) {
+    const { allowed, accessLevel } = await checkAccess(session.user.sub, session.user.email, projectId);
+    if (!allowed) {
       return NextResponse.json({ error: 'Access denied' }, { status: 403 });
     }
 
@@ -66,8 +57,8 @@ export async function PUT(
     const now = new Date().toISOString();
 
     // Check if user has access to modify artifacts in this project
-    const hasAccess = await checkAccess(session.user.sub, projectId, 'can_modify');
-    if (!hasAccess) {
+    const { allowed, accessLevel } = await checkAccess(session.user.sub, session.user.email, projectId);
+    if (!allowed || accessLevel !== 'owner' && accessLevel !== 'editor') {
       return NextResponse.json({ error: 'Access denied' }, { status: 403 });
     }
 
@@ -121,8 +112,8 @@ export async function DELETE(
     const { projectId, artifactId } = params;
 
     // Check if user has access to delete artifacts in this project
-    const hasAccess = await checkAccess(session.user.sub, projectId, 'can_modify');
-    if (!hasAccess) {
+    const { allowed, accessLevel } = await checkAccess(session.user.sub, session.user.email, projectId);
+    if (!allowed || accessLevel !== 'owner') {
       return NextResponse.json({ error: 'Access denied' }, { status: 403 });
     }
 

app/api/projects/[projectId]/artifacts/route.ts

@@ -1,22 +1,13 @@
 import { NextResponse } from 'next/server';
 import { ddbClient } from '@/utils/ddbClient';
+import { checkAccess } from '@/utils/access';
 import { Artifact } from '@/types/Artifact';
 // @ts-ignore
 import { getSession } from '@auth0/nextjs-auth0';
 import fgaClient from "@/lib/oktaFGA";
 
 const TABLE_NAME = process.env.DDB_TABLE_NAME || "ti-artifacts";
 
-// Helper function to check user access
-async function checkAccess(userId: string, projectId: string, requiredRelation: string) {
-  const response = await fgaClient.check({
-    user: `user:${userId}`,
-    relation: requiredRelation,
-    object: `project:${projectId}`,
-  });
-  return response.allowed;
-}
-
 // Get all artifacts for a project
 export async function GET(
   request: Request,
@@ -31,8 +22,8 @@ export async function GET(
     const { projectId } = params;
 
     // Check if user has access to view this project
-    const hasAccess = await checkAccess(session.user.sub, projectId, 'can_view');
-    if (!hasAccess) {
+    const { allowed, accessLevel } = await checkAccess(session.user.sub, session.user.email, projectId);
+    if (!allowed) {
       return NextResponse.json({ error: 'Access denied' }, { status: 403 });
     }
 
@@ -74,8 +65,8 @@ export async function POST(
     };
 
     // Check if user has access to create artifacts in this project
-    const hasAccess = await checkAccess(session.user.sub, projectId, 'can_modify');
-    if (!hasAccess) {
+    const { allowed, accessLevel } = await checkAccess(session.user.sub, session.user.email, projectId);
+    if (!allowed || accessLevel !== 'owner' && accessLevel !== 'editor') {
       return NextResponse.json({ error: 'Access denied' }, { status: 403 });
     }
 

app/api/projects/route.ts

@@ -1,5 +1,6 @@
 import { NextResponse } from 'next/server';
 import { ddbClient } from '@/utils/ddbClient';
+import { checkAccess } from '@/utils/access';
 import { v4 as uuidv4 } from 'uuid';
 import { Project } from '@/types/Project';
 import { FileContext } from '@/types/FileContext';
@@ -9,16 +10,6 @@ import fgaClient from "@/lib/oktaFGA";
 
 const TABLE_NAME = process.env.DDB_TABLE_NAME || "ti-artifacts";
 
-// Helper function to check user access
-async function checkAccess(userId: string, projectId: string, requiredRelation: string) {
-  const response = await fgaClient.check({
-    user: `user:${userId}`,
-    relation: requiredRelation,
-    object: `project:${projectId}`,
-  });
-  return response.allowed;
-}
-
 // Create a new project
 export async function POST(request: Request) {
   try {
@@ -82,8 +73,8 @@ export async function GET(request: Request) {
 
     if (id) {
       // Check if user has access to this project
-      const hasAccess = await checkAccess(session.user.sub, id, 'can_view');
-      if (!hasAccess) {
+      const { allowed, accessLevel } = await checkAccess(session.user.sub, session.user.email, id);
+      if (!allowed) {
         return NextResponse.json({ error: 'Access denied' }, { status: 403 });
       }
 
@@ -109,7 +100,7 @@ export async function GET(request: Request) {
         publishedUrl: result.Item.publishedUrl,
       };
 
-      return NextResponse.json(project);
+      return NextResponse.json({project, accessLevel});
     } else {
 
       // Fetch all projects the user has access to
@@ -183,8 +174,8 @@ export async function PUT(request: Request) {
     }
 
     // Check if user has access to modify this project
-    const hasAccess = await checkAccess(session.user.sub, id, 'can_modify');
-    if (!hasAccess) {
+    const { allowed, accessLevel } = await checkAccess(session.user.sub, session.user.email, id);
+    if (!allowed || accessLevel !== 'owner' && accessLevel !== 'editor') {
       return NextResponse.json({ error: 'Access denied' }, { status: 403 });
     }
 
@@ -250,8 +241,8 @@ export async function DELETE(request: Request) {
     }
 
     // Check if user has access to delete this project
-    const hasAccess = await checkAccess(session.user.sub, id, 'can_delete');
-    if (!hasAccess) {
+    const { allowed, accessLevel } = await checkAccess(session.user.sub, session.user.email, id);
+    if (!allowed || accessLevel !== 'owner') {
       return NextResponse.json({ error: 'Access denied' }, { status: 403 });
     }
 

components/ArtifactLIst.tsx

@@ -11,6 +11,7 @@ interface ArtifactListProps {
   onCreateArtifact: () => void;
   onDeleteArtifact: (artifact: Artifact) => void;
   onArtifactHover: (artifact: Artifact | null, event: React.MouseEvent) => void;
+  isViewer: boolean;
 }
 
 const ArtifactList: React.FC<ArtifactListProps> = ({
@@ -22,6 +23,7 @@ const ArtifactList: React.FC<ArtifactListProps> = ({
   onCreateArtifact,
   onDeleteArtifact,
   onArtifactHover,
+  isViewer
 }) => {
   const [searchTerm, setSearchTerm] = useState("");
   const [isSearchFocused, setIsSearchFocused] = useState(false);
@@ -95,29 +97,32 @@ const ArtifactList: React.FC<ArtifactListProps> = ({
                 onPreview={(artifact) => {/* Add preview logic */}}
                 onEdit={(artifact) => {/* Add edit logic */}}
                 onHover={onArtifactHover}
+                isViewer={isViewer}
               />
             ))}
           </ul>
         </div>
       </div>
-      <button
-        className="mt-4 flex items-center justify-center space-x-2 rounded-full bg-blue-600 px-6 py-3 font-semibold text-white shadow-md transition duration-300 ease-in-out hover:bg-blue-700"
-        onClick={() => {onCreateArtifact()}}
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          className="h-5 w-5"
-          viewBox="0 0 20 20"
-          fill="currentColor"
+      {!isViewer && (
+        <button
+          className="mt-4 flex items-center justify-center space-x-2 rounded-full bg-blue-600 px-6 py-3 font-semibold text-white shadow-md transition duration-300 ease-in-out hover:bg-blue-700"
+          onClick={() => {onCreateArtifact()}}
         >
-          <path
-            fillRule="evenodd"
-            d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
-            clipRule="evenodd"
-          />
-        </svg>
-        <span>Create New Artifact</span>
-      </button>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="h-5 w-5"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fillRule="evenodd"
+              d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
+              clipRule="evenodd"
+            />
+          </svg>
+          <span>Create New Artifact</span>
+        </button>
+      )}
     </div>
   );
 };
@@ -130,6 +135,7 @@ interface ArtifactItemProps {
   onPreview: (artifact: Artifact) => void;
   onEdit: (artifact: Artifact) => void;
   onHover: (artifact: Artifact | null, event: React.MouseEvent) => void;
+  isViewer: boolean;
 }
 
 const ArtifactItem: React.FC<ArtifactItemProps> = ({
@@ -138,6 +144,7 @@ const ArtifactItem: React.FC<ArtifactItemProps> = ({
   onClick,
   onDelete,
   onHover,
+  isViewer
 }) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
@@ -200,39 +207,41 @@ const ArtifactItem: React.FC<ArtifactItemProps> = ({
         </div>
         <span className="font-medium truncate max-w-[70%]">{artifact.name}</span>
       </div>
-      <div className="relative" ref={menuRef}>
-        <button
-          className="p-1 rounded-full hover:bg-gray-200 transition-colors duration-200"
-          onClick={(e) => {
-            e.stopPropagation();
-            setIsMenuOpen(!isMenuOpen);
-          }}
-        >
-          <FiMoreHorizontal className="w-4 h-4 text-gray-600" />
-        </button>
-        {isMenuOpen && (
-          <div className="absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10 overflow-hidden">
-            <button
-              className="w-full px-4 py-2 text-sm text-left text-gray-700 hover:bg-gray-100 transition duration-150 ease-in-out flex items-center"
-              onClick={(e) => {
-                e.stopPropagation();
-                onDelete(artifact);
-                setIsMenuOpen(false);
-              }}
-            >
-              <FiTrash2 className="mr-2 h-4 w-4 text-red-500" />
-              Delete
-            </button>
-            <button
-              className="w-full px-4 py-2 text-sm text-left text-gray-400 flex items-center cursor-not-allowed"
-              disabled
-            >
-              <FiAlertCircle className="mr-2 h-4 w-4 text-gray-400" />
-              Deprecate
-            </button>
-          </div>
-        )}
-      </div>
+      {!isViewer && (
+        <div className="relative" ref={menuRef}>
+          <button
+            className="p-1 rounded-full hover:bg-gray-200 transition-colors duration-200"
+            onClick={(e) => {
+              e.stopPropagation();
+              setIsMenuOpen(!isMenuOpen);
+            }}
+          >
+            <FiMoreHorizontal className="w-4 h-4 text-gray-600" />
+          </button>
+          {isMenuOpen && (
+            <div className="absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10 overflow-hidden">
+              <button
+                className="w-full px-4 py-2 text-sm text-left text-gray-700 hover:bg-gray-100 transition duration-150 ease-in-out flex items-center"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onDelete(artifact);
+                  setIsMenuOpen(false);
+                }}
+              >
+                <FiTrash2 className="mr-2 h-4 w-4 text-red-500" />
+                Delete
+              </button>
+              <button
+                className="w-full px-4 py-2 text-sm text-left text-gray-400 flex items-center cursor-not-allowed"
+                disabled
+              >
+                <FiAlertCircle className="mr-2 h-4 w-4 text-gray-400" />
+                Deprecate
+              </button>
+            </div>
+          )}
+        </div>
+      )}
     </li>
   );
 };

components/EditAccessModal.tsx

@@ -8,9 +8,10 @@ interface EditAccessModalProps {
   };
   onClose: () => void;
   onUpdateAccess: (email: string, newAccessLevel: string) => void;
+  userAccessLevel: string;
 }
 
-const EditAccessModal: React.FC<EditAccessModalProps> = ({ user, onClose, onUpdateAccess }) => {
+const EditAccessModal: React.FC<EditAccessModalProps> = ({ user, onClose, onUpdateAccess, userAccessLevel }) => {
   const [newAccessLevel, setNewAccessLevel] = useState(user.accessLevel);
 
   const handleSubmit = (e: React.FormEvent) => {
@@ -36,8 +37,8 @@ const EditAccessModal: React.FC<EditAccessModalProps> = ({ user, onClose, onUpda
               className="w-full rounded border p-2"
             >
               <option value="viewer">Viewer</option>
-              <option value="editor">Editor</option>
-              <option value="revoke">Revoke Access</option>
+              {userAccessLevel !== 'viewer' && <option value="editor">Editor</option>}
+              {userAccessLevel === 'owner' && <option value="revoke">Revoke Access</option>}
             </select>
           </div>
           <div className="flex justify-end">

components/EmptyArtifactsMessage.tsx

@@ -1,15 +1,27 @@
 import CreateArtifactButton from "./CreateArtifactButton";
 
-const EmptyArtifactsMessage: React.FC<{ onCreateArtifact: () => void }> = ({ onCreateArtifact }) => {
+interface EmptyArtifactsMessageProps {
+  onCreateArtifact: () => void;
+  isViewer: boolean;
+}
+
+const EmptyArtifactsMessage: React.FC<EmptyArtifactsMessageProps> = ({ onCreateArtifact, isViewer }) => {
   return (
-    <div className="flex h-[calc(100vh-200px)] flex-col items-center justify-center">
-      <h3 className="mt-4 text-xl font-semibold text-gray-700">
-        No artifacts yet
-      </h3>
-      <p className="mb-4 mt-2 text-gray-500">
-        Create a new artifact to get started
+    <div className="flex flex-col items-center justify-center h-full">
+      <h2 className="text-2xl font-semibold mb-4">No artifacts yet</h2>
+      <p className="text-gray-600 mb-8 text-center">
+        {isViewer
+          ? "This project doesn't have any artifacts yet."
+          : "Start by creating your first artifact for this project."}
       </p>
-      <CreateArtifactButton onClick={onCreateArtifact} />
+      {!isViewer && (
+        <button
+          onClick={onCreateArtifact}
+          className="bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 transition-colors"
+        >
+          Create New Artifact
+        </button>
+      )}
     </div>
   );
 };

components/ProjectHeader.tsx

@@ -9,6 +9,7 @@ interface ProjectHeaderProps {
   onShareClick: (projectId: string) => void;
   onDeleteClick: () => void;
   projectId: string;
+  isViewer: boolean;
 }
 
 const ProjectHeader: React.FC<ProjectHeaderProps> = ({
@@ -17,7 +18,8 @@ const ProjectHeader: React.FC<ProjectHeaderProps> = ({
   onMyProjectsClick,
   onShareClick,
   onDeleteClick,
-  projectId
+  projectId,
+  isViewer
 }) => {
   const [showMenu, setShowMenu] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
@@ -67,15 +69,17 @@ const ProjectHeader: React.FC<ProjectHeaderProps> = ({
             >
               <FiShare2 className="mr-2" /> Share
             </button>
-            <button
-              onClick={() => {
-                onDeleteClick();
-                setShowMenu(false);
-              }}
-              className="w-full text-left px-4 py-2 hover:bg-red-50 flex items-center text-red-600"
-            >
-              <FiTrash2 className="mr-2" /> Delete
-            </button>
+            {!isViewer && (
+              <button
+                onClick={() => {
+                  onDeleteClick();
+                  setShowMenu(false);
+                }}
+                className="w-full text-left px-4 py-2 hover:bg-red-50 flex items-center text-red-600"
+              >
+                <FiTrash2 className="mr-2" /> Delete
+              </button>
+            )}
           </div>
         )}
       </div>

components/ProjectList.tsx

@@ -7,16 +7,18 @@ interface ProjectListProps {
   onCreateProject: () => void;
   onOpenProject: (projectId: string) => void;
   onProjectDeleted: (projectId: string) => void;
+  onShareClick: (projectId: string) => void;
 }
 
-const ProjectList: React.FC<ProjectListProps> = ({ projects, onCreateProject, onOpenProject, onProjectDeleted }) => {
+const ProjectList: React.FC<ProjectListProps> = ({ projects, onCreateProject, onOpenProject, onProjectDeleted, onShareClick }) => {
   return (
     <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
       {projects.map((project) => (
         <ProjectOverview
           key={project.id}
           project={project}
           onProjectDeleted={onProjectDeleted}
+          onShareClick={onShareClick}
         />
       ))}
     </div>

components/ProjectOverview.tsx

@@ -11,9 +11,10 @@ import logo from './../public/logo.png';
 interface ProjectOverviewProps {
   project: Project;
   onProjectDeleted: (projectId: string) => void;
+  onShareClick: (projectId: string) => void;
 }
 
-const ProjectOverview: React.FC<ProjectOverviewProps> = ({ project, onProjectDeleted }) => {  
+const ProjectOverview: React.FC<ProjectOverviewProps> = ({ project, onProjectDeleted, onShareClick }) => {  
   const router = useRouter();
   const [showDeleteConfirmation, setShowDeleteConfirmation] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
@@ -136,8 +137,11 @@ const ProjectOverview: React.FC<ProjectOverviewProps> = ({ project, onProjectDel
 
       <div className="flex justify-between items-center mt-4">
         <div className="flex space-x-2">
-          <Tooltip content="Share">
-            <button className="text-gray-500 hover:bg-gray-100 p-2 rounded-full transition duration-300 ease-in-out">
+          <Tooltip content="Share project">
+            <button
+              onClick={() => onShareClick(project.id)}
+              className="p-2 text-gray-600 hover:bg-gray-100 rounded-full transition duration-300 ease-in-out"
+            >
               <FiShare2 className="w-5 h-5" />
             </button>
           </Tooltip>

components/ProjectShareModal.tsx

@@ -9,6 +9,7 @@ interface ShareProjectModalProps {
   onClose: () => void;
   projectId: string;
   projectTitle: string;
+  userAccessLevel: string;
 }
 
 interface ProjectUser {
@@ -17,7 +18,7 @@ interface ProjectUser {
   accessLevel: string;
 }
 
-const ShareProjectModal: React.FC<ShareProjectModalProps> = ({ isOpen, onClose, projectId, projectTitle }) => {
+const ShareProjectModal: React.FC<ShareProjectModalProps> = ({ isOpen, onClose, projectId, projectTitle, userAccessLevel }) => {
   const [email, setEmail] = useState('');
   const [accessLevel, setAccessLevel] = useState('viewer');
   const [isSharing, setIsSharing] = useState(false);
@@ -182,7 +183,7 @@ const ShareProjectModal: React.FC<ShareProjectModalProps> = ({ isOpen, onClose,
           className="mb-4 w-full rounded border p-2"
         >
           <option value="viewer">Can view</option>
-          <option value="editor">Can edit</option>
+          {userAccessLevel !== 'viewer' && <option value="editor">Can edit</option>}
         </select>
         <button
           onClick={handleShare}
@@ -223,6 +224,7 @@ const ShareProjectModal: React.FC<ShareProjectModalProps> = ({ isOpen, onClose,
           user={editingUser}
           onClose={() => setEditingUser(null)}
           onUpdateAccess={handleAccessUpdate}
+          userAccessLevel={userAccessLevel}
         />
       )}
     </div>

utils/access.ts

@@ -0,0 +1,29 @@
+import fgaClient from "@/lib/oktaFGA";
+
+export async function checkAccess(userId: string, userEmail: string, projectId: string): Promise<{ allowed: boolean, accessLevel: string }> {
+    const relations = ['owner', 'editor', 'viewer'];
+    for (const relation of relations) {
+      const response = await fgaClient.check({
+        user: `user:${userId}`,
+        relation: relation,
+        object: `project:${projectId}`,
+      });
+      if (response.allowed) {
+        return { allowed: true, accessLevel: relation };
+      }
+    }
+
+    // Check if the project is shared with the user's email
+    for (const relation of ['editor', 'viewer']) {
+      const response = await fgaClient.check({
+        user: `user:${userEmail}`,
+        relation: relation,
+        object: `project:${projectId}`,
+      });
+      if (response.allowed) {
+        return { allowed: true, accessLevel: relation };
+      }
+    }
+
+    return { allowed: false, accessLevel: 'none' };
+  }

utils/apiClients/Project.ts

@@ -9,7 +9,7 @@ export const projectApi = {
         return response.json();
     },
 
-    getProject: async (id: string): Promise<Project> => {
+    getProject: async (id: string): Promise<{ project: Project; accessLevel: string }> => {
         const response = await fetch(`/api/projects?id=${id}`);
         if (!response.ok) {
             throw new Error('Failed to fetch project');