From 9cd77f94d24261b14620865665f7cedbeb957327 Mon Sep 17 00:00:00 2001
From: Chris Carlon <cmcarleone@gmail.com>
Date: Fri, 22 Nov 2024 23:27:49 +0000
Subject: [PATCH] feat!(frontend and backend): Memebers can now be added to
 workspaces, changed the backend memebers endpoint to accept an email not an
 id [2024-11-22]

BREAKING CHANGE: Memebers can now be added to workspaces, changed the backend memebers endpoint to accept an email not an id
---
 gridwalk-backend/src/routes/workspace.rs      |  74 +++--
 gridwalk-ui/src/app/page.tsx                  | 305 +++++++-----------
 .../components/navBars/mainMapNavigation.tsx  |  17 +-
 .../app/workspace/[workspaceId]/actions.ts    | 204 ------------
 .../[workspaceId]/actions/lib /auth.ts        |  12 +
 .../[workspaceId]/actions/projects/create.ts  |  36 +++
 .../[workspaceId]/actions/projects/get.ts     |  45 +++
 .../[workspaceId]/actions/projects/index.ts   |   3 +
 .../[workspaceId]/actions/projects/types.ts   |  10 +
 .../[workspaceId]/actions/workspace/index.ts  |   2 +
 .../actions/workspace/members.ts              |  46 +++
 .../[workspaceId]/actions/workspace/types.ts  |   5 +
 .../[workspaceId]/addMemberModal.tsx          | 144 +++++++++
 .../src/app/workspace/[workspaceId]/page.tsx  |   4 +-
 .../workspace/[workspaceId]/projectModal.tsx  |   3 -
 .../[workspaceId]/workspaceProjects.tsx       |  52 ++-
 gridwalk-ui/src/middleware.ts                 |  36 +--
 17 files changed, 545 insertions(+), 453 deletions(-)
 delete mode 100644 gridwalk-ui/src/app/workspace/[workspaceId]/actions.ts
 create mode 100644 gridwalk-ui/src/app/workspace/[workspaceId]/actions/lib /auth.ts
 create mode 100644 gridwalk-ui/src/app/workspace/[workspaceId]/actions/projects/create.ts
 create mode 100644 gridwalk-ui/src/app/workspace/[workspaceId]/actions/projects/get.ts
 create mode 100644 gridwalk-ui/src/app/workspace/[workspaceId]/actions/projects/index.ts
 create mode 100644 gridwalk-ui/src/app/workspace/[workspaceId]/actions/projects/types.ts
 create mode 100644 gridwalk-ui/src/app/workspace/[workspaceId]/actions/workspace/index.ts
 create mode 100644 gridwalk-ui/src/app/workspace/[workspaceId]/actions/workspace/members.ts
 create mode 100644 gridwalk-ui/src/app/workspace/[workspaceId]/actions/workspace/types.ts
 create mode 100644 gridwalk-ui/src/app/workspace/[workspaceId]/addMemberModal.tsx

diff --git a/gridwalk-backend/src/routes/workspace.rs b/gridwalk-backend/src/routes/workspace.rs
index d78ffcb..0a27af2 100644
--- a/gridwalk-backend/src/routes/workspace.rs
+++ b/gridwalk-backend/src/routes/workspace.rs
@@ -22,6 +22,13 @@ pub struct ReqCreateWorkspace {
     name: String,
 }
 
+#[derive(Debug, Deserialize)]
+pub struct ReqAddWorkspaceMember {
+    workspace_id: String,
+    email: String,
+    role: WorkspaceRole,
+}
+
 impl Workspace {
     pub fn from_req(req: ReqCreateWorkspace, owner: String) -> Self {
         Workspace {
@@ -59,29 +66,35 @@ pub async fn create_workspace(
     }
 }
 
-#[derive(Debug, Deserialize)]
-pub struct ReqAddWorkspaceMember {
-    workspace_id: String,
-    user_id: String,
-    role: WorkspaceRole,
-}
-
 pub async fn add_workspace_member(
     State(state): State<Arc<AppState>>,
     Extension(auth_user): Extension<AuthUser>,
-    Json(req): Json<ReqAddWorkspaceMember>,
+    Json(req): Json<ReqAddWorkspaceMember>, // Using your existing struct
 ) -> Response {
     if let Some(req_user) = auth_user.user {
-        // TODO: sort out unwraps and response
-        let wsp = Workspace::from_id(&state.app_data, &req.workspace_id)
+        // Get the target user by email
+        let user_to_add = match User::from_email(&state.app_data, &req.email).await {
+            Ok(user) => user,
+            Err(_) => return "user not found".into_response(),
+        };
+
+        // Get the workspace
+        let workspace = match Workspace::from_id(&state.app_data, &req.workspace_id).await {
+            Ok(ws) => ws,
+            Err(_) => return "workspace not found".into_response(),
+        };
+
+        // Attempt to add member (role is already parsed since you use WorkspaceRole in ReqAddWorkspaceMember)
+        match workspace
+            .add_member(&state.app_data, &req_user, &user_to_add, req.role)
             .await
-            .unwrap();
-        let user = User::from_id(&state.app_data, &req.user_id).await.unwrap();
-        let _ = wsp
-            .add_member(&state.app_data, &req_user, &user, req.role)
-            .await;
-    };
-    "added workspace member".into_response()
+        {
+            Ok(_) => "member added".into_response(),
+            Err(_) => "failed to add member".into_response(),
+        }
+    } else {
+        "unauthorized".into_response()
+    }
 }
 
 pub async fn remove_workspace_member(
@@ -90,14 +103,25 @@ pub async fn remove_workspace_member(
     Json(req): Json<ReqAddWorkspaceMember>,
 ) -> Response {
     if let Some(req_user) = auth_user.user {
-        // TODO: sort out unwraps and response
-        let wsp = Workspace::from_id(&state.app_data, &req.workspace_id)
-            .await
-            .unwrap();
-        let user = User::from_id(&state.app_data, &req.user_id).await.unwrap();
-        let _ = wsp.remove_member(&state.app_data, &req_user, &user).await;
-    };
-    "removed workspace member".into_response()
+        // Get the workspace
+        let wsp = match Workspace::from_id(&state.app_data, &req.workspace_id).await {
+            Ok(ws) => ws,
+            Err(_) => return "workspace not found".into_response(),
+        };
+
+        // Get the user to remove by email instead of id
+        let user = match User::from_email(&state.app_data, &req.email).await {
+            Ok(user) => user,
+            Err(_) => return "user not found".into_response(),
+        };
+
+        match wsp.remove_member(&state.app_data, &req_user, &user).await {
+            Ok(_) => "removed workspace member".into_response(),
+            Err(_) => "failed to remove member".into_response(),
+        }
+    } else {
+        "unauthorized".into_response()
+    }
 }
 
 pub async fn get_workspaces(
diff --git a/gridwalk-ui/src/app/page.tsx b/gridwalk-ui/src/app/page.tsx
index 61f2461..3deb253 100644
--- a/gridwalk-ui/src/app/page.tsx
+++ b/gridwalk-ui/src/app/page.tsx
@@ -3,57 +3,19 @@ import {
   Database,
   Check,
   Star,
-  Lock,
+  Coins,
   Zap,
   Map,
   Activity,
   Users,
+  Mail,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import React, { useRef, useState } from "react";
 import GridBackground from "./login/components/gridBackground";
 import { useRouter } from "next/navigation";
-import { saveEmail } from "./actions";
 
 export default function Home() {
   const router = useRouter();
-  const [email, setEmail] = useState("");
-  const [isSubmitted, setIsSubmitted] = useState(false);
-  const [error, setError] = useState("");
-  const emailFormRef = useRef<HTMLFormElement>(null);
-
-  const scrollToEmailForm = () => {
-    const element = emailFormRef.current;
-    if (element) {
-      const elementRect = element.getBoundingClientRect();
-      const absoluteElementTop = elementRect.top + window.pageYOffset;
-      const middle =
-        absoluteElementTop - window.innerHeight / 2 + elementRect.height / 2;
-      window.scrollTo({ top: middle, behavior: "smooth" });
-    }
-  };
-
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    try {
-      const result = await saveEmail(email);
-
-      if (result.success) {
-        setIsSubmitted(true);
-        setError("");
-        setTimeout(() => {
-          setEmail("");
-          setIsSubmitted(false);
-        }, 3000);
-      } else {
-        setError("Failed to save email. Please try again.");
-      }
-    } catch (err) {
-      setError("An error occurred. Please try again.");
-      console.error("Error in handleSubmit:", err);
-    }
-  };
 
   const handleLoginRedirect = () => {
     router.push("/login");
@@ -91,11 +53,8 @@ export default function Home() {
               <div className="mb-8 inline-flex items-center bg-blue-500/10 backdrop-blur-sm rounded-full px-6 py-2">
                 <Star className="h-5 w-5 text-blue-400 mr-2" />
                 <span className="text-blue-200 font-medium">
-                  Early Access Available
+                  Early Access Available During MVP Phase
                 </span>
-                <div className="ml-2 px-2 py-0.5 bg-blue-500 text-white text-xs font-bold rounded-full">
-                  50% OFF
-                </div>
               </div>
 
               <h1 className="text-5xl font-bold tracking-tight text-gray-100 sm:text-7xl mb-6">
@@ -105,63 +64,11 @@ export default function Home() {
                 </span>
               </h1>
               <p className="mt-6 text-xl leading-8 text-gray-300 max-w-2xl mx-auto">
-                GridWalk transforms complex location data into crystal-clear
-                insights. Build beautiful maps, analyze patterns, and share
-                discoveries with your team in minutes.
+                GridWalk provides a collaborative environment to manage your
+                location data and turn it into crystal-clear insights. Build
+                beautiful maps, analyse patterns, and share discoveries with
+                your team in minutes.
               </p>
-
-              {/* CTA Section */}
-              <div className="mt-12 flex flex-col items-center gap-4">
-                <form
-                  ref={emailFormRef}
-                  onSubmit={handleSubmit}
-                  className="flex w-full max-w-md flex-col gap-y-4"
-                >
-                  <div className="flex flex-col sm:flex-row gap-4">
-                    <div className="flex-1 relative">
-                      <Input
-                        type="email"
-                        placeholder="Enter your email"
-                        value={email}
-                        onChange={(e) => setEmail(e.target.value)}
-                        className="flex-1 h-14 text-md pl-5 pr-12 rounded-xl bg-white/10 backdrop-blur-sm border-blue-300/20 text-white placeholder:text-gray-400"
-                        required
-                      />
-                      {isSubmitted && (
-                        <div className="absolute right-0 top-0 bottom-0 flex items-center pr-3">
-                          <Check className="h-6 w-6 text-green-400" />
-                        </div>
-                      )}
-                    </div>
-                    <Button
-                      type="submit"
-                      size="lg"
-                      className="h-14 px-8 text-lg text-white bg-blue-500 hover:bg-blue-600 shadow-lg hover:shadow-blue-500/25 hover:shadow-2xl transition-all rounded-xl"
-                    >
-                      Get Early Access
-                    </Button>
-                  </div>
-                  {error && (
-                    <p className="text-red-400 text-sm text-center">{error}</p>
-                  )}
-                </form>
-
-                {/* Social Proof */}
-                <div className="flex flex-col items-center mt-8 space-y-4">
-                  <div className="flex -space-x-2">
-                    {[...Array(5)].map((_, i) => (
-                      <div
-                        key={i}
-                        className="w-8 h-8 rounded-full bg-gradient-to-r from-blue-400 to-blue-600 border-2 border-gray-900"
-                      />
-                    ))}
-                  </div>
-                  <p className="text-sm text-gray-300">
-                    <span className="font-semibold text-white">180+ teams</span>{" "}
-                    already on the waitlist
-                  </p>
-                </div>
-              </div>
             </div>
           </div>
         </header>
@@ -175,32 +82,32 @@ export default function Home() {
                 Powerful Features
               </div>
               <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">
-                Everything You Need for Modern Mapping
+                Everything You Need from a Modern Mapping Application
               </h2>
             </div>
             <div className="mx-auto mt-16 max-w-7xl">
               <div className="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-3">
                 {[
                   {
-                    icon: Activity,
-                    title: "Real-time Analysis",
+                    icon: Database,
+                    title: "Workspace Management",
                     description:
-                      "Watch your data come alive with instant updates and dynamic visualizations.",
-                    benefit: "Live data processing",
+                      "A space to manage your geospatial data projects efficiently - providing a workspace environment that drives collaboration.",
+                    benefit: "Team collaboration",
                   },
                   {
-                    icon: Database,
-                    title: "Universal Compatibility",
+                    icon: Activity,
+                    title: "Flexible Data Integration",
                     description:
-                      "Import from any source: CSV, GeoJSON, Shapefiles, or connect your database directly.",
-                    benefit: "Works with your stack",
+                      "Upload data from the UI or connect your own database allowing you to use your geospatial data instantly.",
+                    benefit: "Instant connectivity",
                   },
                   {
                     icon: Users,
-                    title: "Team Collaboration",
+                    title: "Intuitive Workflows",
                     description:
-                      "Built for teams with real-time editing, version control, and granular permissions.",
-                    benefit: "True multiplayer",
+                      "Intuitive workflows and UI to make sure you have more time to focus on your analysis and stakeholders.",
+                    benefit: "Streamlined experience",
                   },
                 ].map((feature, index) => (
                   <div
@@ -226,106 +133,133 @@ export default function Home() {
         </section>
 
         {/* Pricing Section */}
-        <section className="py-32">
-          <div className="mx-auto max-w-7xl px-6">
+        <section className="py-32 overflow-x-auto">
+          <div className="mx-auto max-w-[90rem] px-6">
             <div className="mx-auto max-w-2xl text-center mb-16">
-              <div className="inline-flex items-center rounded-full bg-green-500/10 backdrop-blur-sm px-6 py-2 text-sm font-semibold text-green-400 mb-6">
-                <Lock className="h-4 w-4 mr-2" />
-                Lock In Launch Pricing
+              <div className="inline-flex items-center rounded-full bg-blue-500/10 backdrop-blur-sm px-6 py-2 text-sm font-semibold text-blue-300 mb-6">
+                <Coins className="h-4 w-4 mr-2" />
+                Simple Pricing Plans
               </div>
               <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">
-                Early Adopter Pricing
+                Choose Your Plan
               </h2>
               <p className="mt-6 text-lg leading-8 text-gray-300">
-                Join now to secure lifetime discounted pricing
+                Flexible options for teams of all sizes
               </p>
             </div>
-            <div className="mx-auto grid max-w-5xl grid-cols-1 gap-8 lg:grid-cols-3">
+
+            <div className="flex gap-6 min-w-max px-4">
               {[
                 {
-                  name: "Starter",
-                  price: "49",
-                  originalPrice: "99",
+                  name: "Free",
+                  price: "0",
+                  features: [
+                    "1 user",
+                    "1 workspace",
+                    "5 projects",
+                    "500MB storage",
+                    "Basic features",
+                  ],
+                  popular: false,
+                  colors: {
+                    card: "from-emerald-600/20 to-teal-600/20",
+                    ring: "ring-emerald-500/30",
+                    badge: "bg-emerald-400/10 text-emerald-300",
+                    button:
+                      "bg-gradient-to-r from-emerald-500 to-teal-500 hover:from-emerald-600 hover:to-teal-600",
+                    check: "text-emerald-400",
+                  },
+                },
+                {
+                  name: "Solo",
+                  price: "15",
                   features: [
-                    "10GB storage",
-                    "Up to 5 team members",
-                    "Real-time analytics",
+                    "1 user",
+                    "5 workspaces",
+                    "Unlimited projects",
+                    "5GB storage",
                     "Community support",
                   ],
                   popular: false,
-                  discount: "50% OFF",
+                  colors: {
+                    card: "from-blue-600/20 to-cyan-600/20",
+                    ring: "ring-blue-500/30",
+                    badge: "bg-blue-400/10 text-blue-300",
+                    button:
+                      "bg-gradient-to-r from-blue-500 to-cyan-500 hover:from-blue-600 hover:to-cyan-600",
+                    check: "text-blue-400",
+                  },
                 },
                 {
-                  name: "Professional",
-                  price: "99",
-                  originalPrice: "199",
+                  name: "Team",
+                  price: "50",
                   features: [
-                    "50GB storage",
-                    "up to 30 team members",
-                    "Advanced analytics",
+                    "15 users",
+                    "15 workspaces",
+                    "Unlimited projects",
+                    "15GB storage",
                     "Priority support",
-                    "Custom styling",
+                    "Advanced features",
                   ],
                   popular: true,
-                  discount: "50% OFF",
+                  colors: {
+                    card: "from-purple-600/20 to-pink-600/20",
+                    ring: "ring-purple-500/30",
+                    badge: "bg-purple-400/10 text-purple-300",
+                    button:
+                      "bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600",
+                    check: "text-purple-400",
+                  },
                 },
                 {
-                  name: "Enterprise",
-                  price: "Custom",
+                  name: "Organisation",
+                  price: "150",
                   features: [
-                    "Unlimited storage",
-                    "Custom deployment",
+                    "30 users",
+                    "30 workspaces",
+                    "Unlimited projects",
+                    "20GB storage",
                     "24/7 support",
-                    "SLA guarantees",
+                    "Custom integrations",
                     "Advanced security",
                   ],
                   popular: false,
+                  colors: {
+                    card: "from-orange-600/20 to-red-600/20",
+                    ring: "ring-orange-500/30",
+                    badge: "bg-orange-400/10 text-orange-300",
+                    button:
+                      "bg-gradient-to-r from-orange-500 to-red-500 hover:from-orange-600 hover:to-red-600",
+                    check: "text-orange-400",
+                  },
                 },
               ].map((plan, index) => (
                 <div
                   key={index}
-                  className={`relative flex flex-col justify-between rounded-3xl p-8 xl:p-10 ${
-                    index === 1
-                      ? "bg-blue-600/20 backdrop-blur-sm ring-blue-500/30"
-                      : "bg-white/5 backdrop-blur-sm ring-white/10"
-                  } ring-1 transform transition-all duration-300 hover:scale-105 hover:shadow-2xl`}
+                  className={`relative flex flex-col justify-between rounded-3xl p-8 xl:p-10 w-80
+                    bg-gradient-to-b ${plan.colors.card} backdrop-blur-sm ${plan.colors.ring}
+                    ring-1 transform transition-all duration-300 hover:scale-105 hover:shadow-2xl`}
                 >
-                  {plan.discount && (
-                    <div className="absolute -top-4 -right-4 bg-green-500 text-white px-4 py-1 rounded-full text-sm font-semibold shadow-lg">
-                      {plan.discount}
-                    </div>
-                  )}
                   <div>
                     <div className="flex items-center justify-between gap-x-4">
                       <h3 className="text-lg font-semibold leading-8 text-white">
                         {plan.name}
                       </h3>
                       {plan.popular && (
-                        <p className="rounded-full bg-blue-400/10 px-2.5 py-1 text-xs font-semibold leading-5 text-blue-300">
+                        <p
+                          className={`rounded-full px-2.5 py-1 text-xs font-semibold leading-5 ${plan.colors.badge}`}
+                        >
                           Most popular
                         </p>
                       )}
                     </div>
                     <p className="mt-6 flex items-baseline gap-x-1 text-white">
-                      {plan.price !== "Custom" ? (
-                        <>
-                          <span className="text-4xl font-bold tracking-tight">
-                            ${plan.price}
-                          </span>
-                          <span className="text-sm font-semibold leading-6 text-gray-300">
-                            /month
-                          </span>
-                          {plan.originalPrice && (
-                            <span className="ml-2 text-sm line-through text-gray-500">
-                              ${plan.originalPrice}
-                            </span>
-                          )}
-                        </>
-                      ) : (
-                        <span className="text-4xl font-bold tracking-tight">
-                          Custom
-                        </span>
-                      )}
+                      <span className="text-4xl font-bold tracking-tight">
+                        ${plan.price}
+                      </span>
+                      <span className="text-sm font-semibold leading-6 text-gray-300">
+                        /month
+                      </span>
                     </p>
                     <ul
                       role="list"
@@ -333,22 +267,24 @@ export default function Home() {
                     >
                       {plan.features.map((feature) => (
                         <li key={feature} className="flex gap-x-3">
-                          <Check className="h-6 w-5 flex-none text-blue-400" />
+                          <Check
+                            className={`h-6 w-5 flex-none ${plan.colors.check}`}
+                          />
                           <span className="text-gray-300">{feature}</span>
                         </li>
                       ))}
                     </ul>
                   </div>
-                  <Button
-                    onClick={scrollToEmailForm}
-                    className={`mt-8 w-full rounded-xl h-12 ${
-                      index === 1
-                        ? "bg-blue-500 text-white hover:bg-blue-600"
-                        : "bg-white/10 text-white hover:bg-white/20"
-                    }`}
+                  <a
+                    href={`mailto:hello@enmeshed.dev?subject=Interest in ${plan.name} Plan&body=Hi, I'm interested in learning more about the ${plan.name} plan for GridWalk.`}
+                    className="mt-8 block"
                   >
-                    Get Started
-                  </Button>
+                    <Button
+                      className={`w-full rounded-xl h-12 text-white ${plan.colors.button}`}
+                    >
+                      Contact Us
+                    </Button>
+                  </a>
                 </div>
               ))}
             </div>
@@ -360,15 +296,20 @@ export default function Home() {
           <div className="mx-auto max-w-7xl px-6 md:flex md:items-center md:justify-between">
             <div className="flex justify-center space-x-6 md:order-2">
               {[
+                {
+                  name: "Contact",
+                  href: "mailto:hello@enmeshed.dev",
+                  icon: Mail,
+                },
                 { name: "Terms", href: "#" },
                 { name: "Privacy", href: "#" },
-                { name: "Contact", href: "#" },
               ].map((item) => (
                 <a
                   key={item.name}
                   href={item.href}
-                  className="text-gray-400 hover:text-gray-300 transition-colors"
+                  className="text-gray-400 hover:text-gray-300 transition-colors inline-flex items-center"
                 >
+                  {item.icon && <item.icon className="h-4 w-4 mr-1" />}
                   {item.name}
                 </a>
               ))}
diff --git a/gridwalk-ui/src/app/project/[workspaceId]/[projectName]/components/navBars/mainMapNavigation.tsx b/gridwalk-ui/src/app/project/[workspaceId]/[projectName]/components/navBars/mainMapNavigation.tsx
index b38b608..2fe9bfd 100644
--- a/gridwalk-ui/src/app/project/[workspaceId]/[projectName]/components/navBars/mainMapNavigation.tsx
+++ b/gridwalk-ui/src/app/project/[workspaceId]/[projectName]/components/navBars/mainMapNavigation.tsx
@@ -1,4 +1,4 @@
-'use client'
+"use client";
 import React from "react";
 import {
   Map,
@@ -25,7 +25,7 @@ const MapModal: React.FC<ModalProps> = ({
   uploadSuccess,
 }) => {
   const router = useRouter();
-  
+
   const MainMapNavs: MainMapNav[] = [
     {
       id: "map",
@@ -43,7 +43,8 @@ const MapModal: React.FC<ModalProps> = ({
       id: "upload",
       title: "File Upload",
       icon: "file",
-      description: "Upload files and add a layer to the map",
+      description:
+        "Upload files and add a layer to the map. Currently accepts .geojson, .json, and .gpkg files.",
     },
     {
       id: "settings",
@@ -172,12 +173,12 @@ const MapModal: React.FC<ModalProps> = ({
             </span>
           </button>
         ))}
-        
+
         {/* Back Button */}
         <div className="mt-auto mb-6">
           <button
-            onClick={() => router.push('/workspace')}
-            className="w-10 h-8 flex items-center justify-center rounded-lg text-gray-300 hover:bg-blue-400 hover:text-white transition-colors group relative"
+            onClick={() => router.push("/workspace")}
+            className="w-10 h-8 flex items-center justify-center rounded-lg text-white bg-orange-500 hover:text-white group relative"
             aria-label="Back to workspace"
           >
             <ArrowLeft className="w-5 h-5" />
@@ -187,7 +188,7 @@ const MapModal: React.FC<ModalProps> = ({
           </button>
         </div>
       </div>
-      
+
       {/* Modal Content */}
       {isOpen && selectedItem && (
         <div
@@ -203,7 +204,7 @@ const MapModal: React.FC<ModalProps> = ({
               className="absolute right-2 top-2 p-1 hover:bg-gray-100 rounded-full transition-colors"
               aria-label="Close modal"
             >
-              <X className="h-5 w-5" />
+              <X className="h-5 w-5 text-black" />
             </button>
             {/* Content with black text override */}
             <div className="max-h-[50vh] overflow-y-auto p-4">
diff --git a/gridwalk-ui/src/app/workspace/[workspaceId]/actions.ts b/gridwalk-ui/src/app/workspace/[workspaceId]/actions.ts
deleted file mode 100644
index f3b9034..0000000
--- a/gridwalk-ui/src/app/workspace/[workspaceId]/actions.ts
+++ /dev/null
@@ -1,204 +0,0 @@
-"use server";
-
-import { cookies } from "next/headers";
-import { NextResponse } from "next/server";
-
-// CREATE PROJECTS
-export type CreateProjectRequest = {
-  name: string;
-  workspace_id: string;
-};
-
-export type ProjectData = {
-  id: string;
-  name: string;
-  workspace_id: string;
-};
-
-export async function createProject(
-  data: CreateProjectRequest,
-): Promise<ProjectData> {
-  const cookieStore = await cookies();
-  const sid = cookieStore.get("sid");
-
-  if (!sid?.value) {
-    throw new Error("Authentication token not found");
-  }
-
-  if (!data.workspace_id) {
-    throw new Error("Workspace ID is required");
-  }
-
-  if (!data.name) {
-    throw new Error("Project name is required");
-  }
-
-  const response = await fetch(`${process.env.GRIDWALK_API}/create_project`, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `Bearer ${sid.value}`,
-    },
-    body: JSON.stringify({
-      workspace_id: data.workspace_id,
-      name: data.name.trim(),
-    }),
-  });
-
-  if (!response.ok) {
-    const errorText = await response.text();
-    if (response.status === 401) {
-      throw new Error("Authentication failed");
-    }
-    throw new Error(errorText || "Failed to create project");
-  }
-
-  const projectData = await response.json();
-  return projectData;
-}
-
-export async function POST(request: Request) {
-  try {
-    const body = (await request.json()) as CreateProjectRequest;
-    const project = await createProject(body);
-
-    return NextResponse.json(
-      {
-        success: true,
-        data: project,
-      },
-      { status: 201 },
-    );
-  } catch (error: unknown) {
-    console.error("Project creation error:", {
-      message: error instanceof Error ? error.message : "Unknown error",
-      stack: error instanceof Error ? error.stack : "No stack trace",
-    });
-
-    if (error instanceof Error && error.message.includes("Authentication")) {
-      return NextResponse.json(
-        {
-          success: false,
-          error: "Authentication failed. Please log in again.",
-        },
-        { status: 401 },
-      );
-    }
-
-    return NextResponse.json(
-      {
-        success: false,
-        error:
-          error instanceof Error ? error.message : "Failed to create project",
-      },
-      { status: 400 },
-    );
-  }
-}
-
-// GET PROJECTS
-export type ApiResponse = {
-  status: string;
-  data: string[];
-  error: string | null;
-};
-
-export type ProjectsResponse = {
-  success: boolean;
-  data?: string[];
-  error?: string;
-};
-
-export async function getProjectsServer(
-  workspaceId: string,
-): Promise<string[]> {
-  const cookieStore = await cookies();
-  const sid = cookieStore.get("sid");
-
-  if (!sid?.value) {
-    throw new Error("Authentication token not found");
-  }
-
-  if (!workspaceId) {
-    throw new Error("Workspace ID is required");
-  }
-
-  const response = await fetch(
-    `${process.env.GRIDWALK_API}/projects?workspace_id=${workspaceId}`,
-    {
-      method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${sid.value}`,
-      },
-    },
-  );
-
-  if (!response.ok) {
-    const errorText = await response.text();
-    if (response.status === 401) {
-      throw new Error("Authentication failed");
-    }
-    throw new Error(errorText || "Failed to fetch projects");
-  }
-
-  const projectsData = await response.json();
-
-  if (!Array.isArray(projectsData.data)) {
-    console.warn("Projects data is not an array:", projectsData.data);
-    return [];
-  }
-
-  return projectsData.data;
-}
-
-export async function GET(request: Request) {
-  try {
-    const { searchParams } = new URL(request.url);
-    const workspaceId = searchParams.get("workspace_id");
-
-    if (!workspaceId) {
-      return NextResponse.json(
-        {
-          success: false,
-          error: "Workspace ID is required",
-        },
-        { status: 400 },
-      );
-    }
-
-    const projects = await getProjectsServer(workspaceId);
-
-    return NextResponse.json(
-      {
-        success: true,
-        data: projects,
-      },
-      { status: 200 },
-    );
-  } catch (error: unknown) {
-    console.error("Project fetch error:", {
-      message: error instanceof Error ? error.message : "Unknown error",
-      stack: error instanceof Error ? error.stack : "No stack trace",
-    });
-
-    if (error instanceof Error && error.message.includes("Authentication")) {
-      return NextResponse.json(
-        {
-          success: false,
-          error: "Authentication failed. Please log in again.",
-        },
-        { status: 401 },
-      );
-    }
-
-    return NextResponse.json(
-      {
-        success: false,
-        error:
-          error instanceof Error ? error.message : "Failed to fetch projects",
-      },
-      { status: 400 },
-    );
-  }
-}
diff --git a/gridwalk-ui/src/app/workspace/[workspaceId]/actions/lib /auth.ts b/gridwalk-ui/src/app/workspace/[workspaceId]/actions/lib /auth.ts
new file mode 100644
index 0000000..7db107e
--- /dev/null
+++ b/gridwalk-ui/src/app/workspace/[workspaceId]/actions/lib /auth.ts	
@@ -0,0 +1,12 @@
+import { cookies } from "next/headers";
+
+export async function getAuthToken() {
+  const cookieStore = await cookies();
+  const sid = cookieStore.get("sid");
+
+  if (!sid?.value) {
+    throw new Error("Authentication token not found");
+  }
+
+  return sid.value;
+}
diff --git a/gridwalk-ui/src/app/workspace/[workspaceId]/actions/projects/create.ts b/gridwalk-ui/src/app/workspace/[workspaceId]/actions/projects/create.ts
new file mode 100644
index 0000000..fe65918
--- /dev/null
+++ b/gridwalk-ui/src/app/workspace/[workspaceId]/actions/projects/create.ts
@@ -0,0 +1,36 @@
+"use server";
+
+import { getAuthToken } from "../lib /auth";
+import { CreateProjectRequest, ProjectData } from "./types";
+import { revalidatePath } from "next/cache";
+
+export async function createProject(
+  data: CreateProjectRequest,
+): Promise<ProjectData> {
+  const token = await getAuthToken();
+
+  if (!data.workspace_id) throw new Error("Workspace ID is required");
+  if (!data.name) throw new Error("Project name is required");
+
+  const response = await fetch(`${process.env.GRIDWALK_API}/create_project`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${token}`,
+    },
+    body: JSON.stringify({
+      workspace_id: data.workspace_id,
+      name: data.name.trim(),
+    }),
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    if (response.status === 401) throw new Error("Authentication failed");
+    throw new Error(errorText || "Failed to create project");
+  }
+
+  const projectData = await response.json();
+  revalidatePath(`/workspaces/${data.workspace_id}/projects`);
+  return projectData;
+}
diff --git a/gridwalk-ui/src/app/workspace/[workspaceId]/actions/projects/get.ts b/gridwalk-ui/src/app/workspace/[workspaceId]/actions/projects/get.ts
new file mode 100644
index 0000000..84c0ff1
--- /dev/null
+++ b/gridwalk-ui/src/app/workspace/[workspaceId]/actions/projects/get.ts
@@ -0,0 +1,45 @@
+"use server";
+
+import { getAuthToken } from "../lib /auth";
+
+export async function getProjects(workspaceId: string): Promise<string[]> {
+  const token = await getAuthToken();
+
+  if (!workspaceId) {
+    throw new Error("Workspace ID is required");
+  }
+
+  try {
+    const response = await fetch(
+      `${process.env.GRIDWALK_API}/projects?workspace_id=${workspaceId}`,
+      {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+        cache: "no-store", // DO WE NEED THIS?
+      },
+    );
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      if (response.status === 401) {
+        throw new Error("Authentication failed");
+      }
+      throw new Error(errorText || "Failed to fetch projects");
+    }
+
+    const projectsData = await response.json();
+
+    if (!Array.isArray(projectsData.data)) {
+      console.warn("Projects data is not an array:", projectsData.data);
+      return [];
+    }
+
+    return projectsData.data;
+  } catch (error) {
+    console.error("Failed to fetch projects:", error);
+    throw error; // Re-throw to handle in the component
+  }
+}
diff --git a/gridwalk-ui/src/app/workspace/[workspaceId]/actions/projects/index.ts b/gridwalk-ui/src/app/workspace/[workspaceId]/actions/projects/index.ts
new file mode 100644
index 0000000..5287230
--- /dev/null
+++ b/gridwalk-ui/src/app/workspace/[workspaceId]/actions/projects/index.ts
@@ -0,0 +1,3 @@
+export * from "./get";
+export * from "./create";
+export * from "./types";
diff --git a/gridwalk-ui/src/app/workspace/[workspaceId]/actions/projects/types.ts b/gridwalk-ui/src/app/workspace/[workspaceId]/actions/projects/types.ts
new file mode 100644
index 0000000..e065148
--- /dev/null
+++ b/gridwalk-ui/src/app/workspace/[workspaceId]/actions/projects/types.ts
@@ -0,0 +1,10 @@
+export type CreateProjectRequest = {
+  name: string;
+  workspace_id: string;
+};
+
+export type ProjectData = {
+  id: string;
+  name: string;
+  workspace_id: string;
+};
diff --git a/gridwalk-ui/src/app/workspace/[workspaceId]/actions/workspace/index.ts b/gridwalk-ui/src/app/workspace/[workspaceId]/actions/workspace/index.ts
new file mode 100644
index 0000000..fd61e49
--- /dev/null
+++ b/gridwalk-ui/src/app/workspace/[workspaceId]/actions/workspace/index.ts
@@ -0,0 +1,2 @@
+export * from "./members";
+export * from "./types";
diff --git a/gridwalk-ui/src/app/workspace/[workspaceId]/actions/workspace/members.ts b/gridwalk-ui/src/app/workspace/[workspaceId]/actions/workspace/members.ts
new file mode 100644
index 0000000..566ef22
--- /dev/null
+++ b/gridwalk-ui/src/app/workspace/[workspaceId]/actions/workspace/members.ts
@@ -0,0 +1,46 @@
+"use server";
+
+import { getAuthToken } from "../lib /auth";
+import { AddWorkspaceMemberRequest } from "./types";
+import { revalidatePath } from "next/cache";
+
+export async function addWorkspaceMember(
+  data: AddWorkspaceMemberRequest,
+): Promise<void> {
+  const token = await getAuthToken();
+
+  // Validation
+  if (!data.workspace_id) throw new Error("Workspace ID is required");
+  if (!data.email) throw new Error("Email is required");
+  if (!data.role) throw new Error("Role is required");
+
+  try {
+    const response = await fetch(
+      `${process.env.GRIDWALK_API}/workspace/members`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({
+          workspace_id: data.workspace_id,
+          email: data.email.trim(),
+          role: data.role,
+        }),
+      },
+    );
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      if (response.status === 401) throw new Error("Authentication failed");
+      throw new Error(errorText || "Failed to add workspace member");
+    }
+
+    // Revalidate the members list page/cache
+    revalidatePath(`/workspaces/${data.workspace_id}/members`);
+  } catch (error) {
+    console.error("Failed to add workspace member:", error);
+    throw error; // Re-throw to handle in the component
+  }
+}
diff --git a/gridwalk-ui/src/app/workspace/[workspaceId]/actions/workspace/types.ts b/gridwalk-ui/src/app/workspace/[workspaceId]/actions/workspace/types.ts
new file mode 100644
index 0000000..479261b
--- /dev/null
+++ b/gridwalk-ui/src/app/workspace/[workspaceId]/actions/workspace/types.ts
@@ -0,0 +1,5 @@
+export type AddWorkspaceMemberRequest = {
+  workspace_id: string;
+  email: string;
+  role: "Admin" | "Read";
+};
diff --git a/gridwalk-ui/src/app/workspace/[workspaceId]/addMemberModal.tsx b/gridwalk-ui/src/app/workspace/[workspaceId]/addMemberModal.tsx
new file mode 100644
index 0000000..053817e
--- /dev/null
+++ b/gridwalk-ui/src/app/workspace/[workspaceId]/addMemberModal.tsx
@@ -0,0 +1,144 @@
+"use client";
+import React, { useState } from "react";
+import { useRouter } from "next/navigation";
+
+interface AddWorkspaceMemberModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: (email: string, role: "Admin" | "Read") => Promise<void>;
+}
+
+export const AddWorkspaceMemberModal: React.FC<
+  AddWorkspaceMemberModalProps
+> = ({ isOpen, onClose, onSubmit }) => {
+  const router = useRouter();
+  const [email, setEmail] = useState("");
+  const [role, setRole] = useState<"Admin" | "Read">("Read");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      await onSubmit(email.trim(), role);
+      onClose();
+      setEmail("");
+      setRole("Read");
+      router.refresh();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "An error occurred");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  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">
+            Add Workspace Member
+          </h2>
+          <button
+            onClick={onClose}
+            className="text-gray-500 hover:text-gray-700"
+          >
+            ✕
+          </button>
+        </div>
+
+        {error && (
+          <div className="bg-red-50 text-red-600 p-3 rounded-md mb-4">
+            {error}
+          </div>
+        )}
+
+        <form onSubmit={handleSubmit}>
+          <div className="mb-4">
+            <label
+              htmlFor="email"
+              className="block text-sm font-medium text-gray-700 mb-1"
+            >
+              Email Address
+            </label>
+            <input
+              id="email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md text-gray-900 placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              placeholder="colleague@company.com"
+              required
+            />
+          </div>
+
+          <div className="mb-6">
+            <label
+              htmlFor="role"
+              className="block text-sm font-medium text-gray-700 mb-1"
+            >
+              Role
+            </label>
+            <select
+              id="role"
+              value={role}
+              onChange={(e) => setRole(e.target.value as "Admin" | "Read")}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            >
+              <option value="Read">Read</option>
+              <option value="Admin">Admin</option>
+            </select>
+          </div>
+
+          <div className="flex justify-end gap-2">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-4 py-2 text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={isLoading || !email.trim()}
+              className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+            >
+              {isLoading ? (
+                <>
+                  <LoadingSpinner />
+                  Inviting...
+                </>
+              ) : (
+                "Send Invitation"
+              )}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+const LoadingSpinner: React.FC = () => (
+  <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
+    <circle
+      className="opacity-25"
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      strokeWidth="4"
+      fill="none"
+    />
+    <path
+      className="opacity-75"
+      fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    />
+  </svg>
+);
diff --git a/gridwalk-ui/src/app/workspace/[workspaceId]/page.tsx b/gridwalk-ui/src/app/workspace/[workspaceId]/page.tsx
index f5efb66..5ead02e 100644
--- a/gridwalk-ui/src/app/workspace/[workspaceId]/page.tsx
+++ b/gridwalk-ui/src/app/workspace/[workspaceId]/page.tsx
@@ -1,4 +1,4 @@
-import { getProjectsServer } from "./actions";
+import { getProjects } from "./actions/projects/get";
 import WorkspaceProjectsClient from "./workspaceProjects";
 
 type PageProps = {
@@ -7,7 +7,7 @@ type PageProps = {
 
 export default async function Page({ params }: PageProps) {
   const { workspaceId } = await params;
-  const initialProjects = await getProjectsServer(workspaceId);
+  const initialProjects = await getProjects(workspaceId);
   return (
     <WorkspaceProjectsClient
       workspaceId={workspaceId}
diff --git a/gridwalk-ui/src/app/workspace/[workspaceId]/projectModal.tsx b/gridwalk-ui/src/app/workspace/[workspaceId]/projectModal.tsx
index 2940d6e..f3b7c21 100644
--- a/gridwalk-ui/src/app/workspace/[workspaceId]/projectModal.tsx
+++ b/gridwalk-ui/src/app/workspace/[workspaceId]/projectModal.tsx
@@ -1,6 +1,5 @@
 "use client";
 import React, { useState } from "react";
-import { useRouter } from "next/navigation";
 import { ApiResponse } from "./types";
 import { CreateProjectModalProps } from "./types";
 
@@ -9,7 +8,6 @@ export const CreateProjectModal: React.FC<CreateProjectModalProps> = ({
   onClose,
   onSubmit,
 }) => {
-  const router = useRouter();
   const [projectName, setProjectName] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -23,7 +21,6 @@ export const CreateProjectModal: React.FC<CreateProjectModalProps> = ({
       await onSubmit(projectName.trim());
       onClose();
       setProjectName("");
-      router.refresh();
     } catch (err) {
       setError(err instanceof Error ? err.message : "An error occurred");
     } finally {
diff --git a/gridwalk-ui/src/app/workspace/[workspaceId]/workspaceProjects.tsx b/gridwalk-ui/src/app/workspace/[workspaceId]/workspaceProjects.tsx
index c4778c4..7145470 100644
--- a/gridwalk-ui/src/app/workspace/[workspaceId]/workspaceProjects.tsx
+++ b/gridwalk-ui/src/app/workspace/[workspaceId]/workspaceProjects.tsx
@@ -1,10 +1,13 @@
 "use client";
 import React, { useState } from "react";
-import { Plus } from "lucide-react";
+import { Plus, UserPlus } from "lucide-react";
 import { CreateProjectModal } from "./projectModal";
+import { AddWorkspaceMemberModal } from "./addMemberModal";
 import { useWorkspaces } from "../workspaceContext";
-import { createProject } from "./actions";
+import { createProject } from "./actions/projects/create";
+import { addWorkspaceMember } from "./actions/workspace";
 import { useRouter } from "next/navigation";
+
 interface WorkspaceProjectsClientProps {
   workspaceId: string;
   initialProjects: string[];
@@ -18,6 +21,7 @@ export default function WorkspaceProjectsClient({
   const { workspaces } = useWorkspaces();
   const [projects, setProjects] = useState(initialProjects);
   const [isProjectDialogOpen, setIsProjectDialogOpen] = useState(false);
+  const [isMemberDialogOpen, setIsMemberDialogOpen] = useState(false);
   const currentWorkspace = workspaces.find((w) => w.id === workspaceId);
 
   const handleCreateProject = async (name: string) => {
@@ -43,6 +47,22 @@ export default function WorkspaceProjectsClient({
     router.push(`/project/${workspaceId}/${safeProjectName}`);
   };
 
+  const handleAddMember = async (email: string, role: "Admin" | "Read") => {
+    try {
+      await addWorkspaceMember({
+        workspace_id: workspaceId,
+        email: email.trim(),
+        role,
+      });
+      setIsMemberDialogOpen(false);
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        throw new Error(error.message || "Failed to add member");
+      }
+      throw new Error("Failed to add member");
+    }
+  };
+
   return (
     <div className="w-full min-h-screen bg-gray-50">
       <div className="p-4 sm:p-6">
@@ -54,6 +74,13 @@ export default function WorkspaceProjectsClient({
             </p>
           </div>
           <div className="flex flex-col sm:flex-row gap-2">
+            <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"
+            >
+              <UserPlus size={20} />
+              Add Member
+            </button>
             <button
               onClick={() => setIsProjectDialogOpen(true)}
               className="bg-blue-500 hover:bg-blue-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"
@@ -74,7 +101,7 @@ export default function WorkspaceProjectsClient({
                 <div
                   key={index}
                   onClick={() => handleProjectClick(project)}
-                  className="p-4 bg-white rounded-lg shadow hover:shadow-md transition-shadow cursor-pointer" // Added cursor-pointer
+                  className="p-4 bg-white rounded-lg shadow hover:shadow-md transition-shadow cursor-pointer"
                 >
                   <h3 className="font-medium text-gray-900">{project}</h3>
                 </div>
@@ -82,13 +109,18 @@ export default function WorkspaceProjectsClient({
             </div>
           )}
         </div>
-        {isProjectDialogOpen && (
-          <CreateProjectModal
-            isOpen={isProjectDialogOpen}
-            onClose={() => setIsProjectDialogOpen(false)}
-            onSubmit={handleCreateProject}
-          />
-        )}
+
+        <CreateProjectModal
+          isOpen={isProjectDialogOpen}
+          onClose={() => setIsProjectDialogOpen(false)}
+          onSubmit={handleCreateProject}
+        />
+
+        <AddWorkspaceMemberModal
+          isOpen={isMemberDialogOpen}
+          onClose={() => setIsMemberDialogOpen(false)}
+          onSubmit={handleAddMember}
+        />
       </div>
     </div>
   );
diff --git a/gridwalk-ui/src/middleware.ts b/gridwalk-ui/src/middleware.ts
index 6456f79..3ac938b 100644
--- a/gridwalk-ui/src/middleware.ts
+++ b/gridwalk-ui/src/middleware.ts
@@ -1,47 +1,45 @@
-// middleware.ts
-import { NextResponse } from 'next/server'
-import type { NextRequest } from 'next/server'
+import { NextResponse } from "next/server";
+import type { NextRequest } from "next/server";
 
 export async function middleware(request: NextRequest) {
   // Only run this middleware for the login page
-  if (request.nextUrl.pathname === '/login') {
-    const sessionId = request.cookies.get('sid')
+  if (request.nextUrl.pathname === "/login") {
+    const sessionId = request.cookies.get("sid");
 
     // If no session cookie exists, allow access to login page
     if (!sessionId) {
-      return NextResponse.next()
+      return NextResponse.next();
     }
 
     try {
-      const apiHost = process.env.GRIDWALK_API
+      const apiHost = process.env.GRIDWALK_API;
       if (!apiHost) {
-        throw new Error('GRIDWALK_API environment variable is not set')
+        throw new Error("GRIDWALK_API environment variable is not set");
       }
 
       const response = await fetch(`${apiHost}/profile`, {
         headers: {
-          'Authorization': `Bearer ${sessionId.value}`
-        }
-      })
+          Authorization: `Bearer ${sessionId.value}`,
+        },
+      });
 
       // If authenticated, redirect to workspace
       if (response.ok) {
-        return NextResponse.redirect(new URL('/workspace', request.url))
+        return NextResponse.redirect(new URL("/workspace", request.url));
       }
 
       // If not authenticated, allow access to login page
-      return NextResponse.next()
-      
+      return NextResponse.next();
     } catch (error) {
-      console.error('Error checking auth status:', error)
-      return NextResponse.next()
+      console.error("Error checking auth status:", error);
+      return NextResponse.next();
     }
   }
 
-  return NextResponse.next()
+  return NextResponse.next();
 }
 
 // Configure the middleware to only run on the login page
 export const config = {
-  matcher: '/login'
-}
+  matcher: "/login",
+};