From 2ae59c063ccbbec951fb75d0f7b3b98422ec4d25 Mon Sep 17 00:00:00 2001
From: ashwin <aswin.1231@gmail.com>
Date: Sat, 24 May 2025 12:56:05 +0530
Subject: [PATCH] Refactor user management pages: consolidate user addition and
 organization details, remove redundant files, and enhance user role editing
 functionality.

---
 src/app.d.ts                                  |   6 +-
 src/hooks.server.js                           |   9 +-
 src/routes/(app)/app/users/+page.server.js    | 224 +++++++++++++-
 src/routes/(app)/app/users/+page.svelte       | 275 +++++++++++++++---
 .../(app)/app/users/new/+page.server.js       |  91 ------
 src/routes/(app)/app/users/new/+page.svelte   |  96 ------
 .../(no-layout)/org/[org_id]/+page.server.js  | 215 --------------
 .../(no-layout)/org/[org_id]/+page.svelte     | 247 ----------------
 8 files changed, 472 insertions(+), 691 deletions(-)
 delete mode 100644 src/routes/(app)/app/users/new/+page.server.js
 delete mode 100644 src/routes/(app)/app/users/new/+page.svelte
 delete mode 100644 src/routes/(no-layout)/org/[org_id]/+page.server.js
 delete mode 100644 src/routes/(no-layout)/org/[org_id]/+page.svelte

diff --git a/src/app.d.ts b/src/app.d.ts
index da08e6d..e4ad273 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -3,7 +3,11 @@
 declare global {
 	namespace App {
 		// interface Error {}
-		// interface Locals {}
+		interface Locals {
+			user?: any; // You might want to replace 'any' with a more specific type for user
+			org?: any; // You might want to replace 'any' with a more specific type for org
+			org_name?: string;
+		}
 		// interface PageData {}
 		// interface PageState {}
 		// interface Platform {}
diff --git a/src/hooks.server.js b/src/hooks.server.js
index 1a623db..ddbefa1 100644
--- a/src/hooks.server.js
+++ b/src/hooks.server.js
@@ -46,8 +46,13 @@ export async function handle({ event, resolve }) {
           event.locals.org_name = userOrg.organization.name;
         }
       } else {
-        // User doesn't have access to this organization, redirect to logout
-        throw redirect(307, '/logout');
+        // User doesn't have access to this organization or orgId is stale.
+        // Clear the invalid org cookies.
+        event.cookies.delete('org', { path: '/' });
+        event.cookies.delete('org_name', { path: '/' });
+        // Redirect to the organization selection page.
+        // The user is still authenticated.
+        throw redirect(307, '/org');
       }
 	  }
 	}
diff --git a/src/routes/(app)/app/users/+page.server.js b/src/routes/(app)/app/users/+page.server.js
index c797d09..8c5e812 100644
--- a/src/routes/(app)/app/users/+page.server.js
+++ b/src/routes/(app)/app/users/+page.server.js
@@ -1,4 +1,222 @@
+import prisma from '$lib/prisma'
+import { fail, redirect } from '@sveltejs/kit';
+
 /** @type {import('./$types').PageServerLoad} */
-export async function load() {
-    return {};
-};
\ No newline at end of file
+export async function load({ params, locals }) {
+    const org_id = locals.org.id; // Changed from params.org_id
+    const user = locals.user;
+
+    // Check if user is admin of the organization
+    const userOrg = await prisma.userOrganization.findFirst({
+        where: {
+            userId: user.id,
+            organizationId: org_id,
+            role: 'ADMIN'
+        }
+    });
+    if (!userOrg) {
+        return {
+            error: {
+                name: 'You do not have permission to access this organization'
+            }
+        };
+    }
+    // Fetch organization details
+    const organization = await prisma.organization.findUnique({
+        where: {
+            id: org_id // Changed from params.org_id
+        }
+    });
+
+    // fetch all users in the organization
+    const users = await prisma.userOrganization.findMany({
+        where: {
+            organizationId: org_id
+        },
+        include: {
+            user: true
+        }
+    });
+    // Pass logged-in user id to page for UI logic
+    return { organization, users, user: { id: user.id } };
+};
+
+/** @type {import('./$types').Actions} */
+export const actions = {
+    update: async ({ request, params, locals }) => {
+        const org_id = locals.org.id; // Changed from params.org_id
+        const user = locals.user;
+        if (!user) return fail(401, { error: 'Unauthorized' });
+
+        // Only ADMIN can update
+        const userOrg = await prisma.userOrganization.findFirst({
+            where: {
+                userId: user.id,
+                organizationId: org_id,
+                role: 'ADMIN'
+            }
+        });
+        if (!userOrg) return fail(403, { error: 'Forbidden' });
+
+        const formData = await request.formData();
+        const name = formData.get('name')?.toString().trim();
+        const domain = formData.get('domain')?.toString().trim();
+        const description = formData.get('description')?.toString().trim();
+
+        if (!name) return fail(400, { error: 'Name is required' });
+
+        try {
+            await prisma.organization.update({
+                where: { id: org_id },
+                data: {
+                    name,
+                    domain,
+                    description
+                }
+            });
+            // Update locals for the current request so layout reloads with new name
+            if (name) {
+                if (locals.org) {
+                    locals.org.name = name;
+                }
+                locals.org_name = name;
+            }
+            return { success: true };
+        } catch (err) {
+            return fail(500, { error: 'Failed to update organization' });
+        }
+    },
+
+    add_user: async ({ request, params, locals }) => {
+        const org_id = locals.org.id; // Changed from params.org_id
+        const user = locals.user;
+        if (!user) return fail(401, { error: 'Unauthorized' });
+
+        // Only ADMIN can add
+        const userOrg = await prisma.userOrganization.findFirst({
+            where: {
+                userId: user.id,
+                organizationId: org_id,
+                role: 'ADMIN'
+            }
+        });
+        if (!userOrg) return fail(403, { error: 'Forbidden' });
+
+        const formData = await request.formData();
+        const email = formData.get('email')?.toString().trim().toLowerCase();
+        const role = formData.get('role')?.toString();
+        if (!email || !role) return fail(400, { error: 'Email and role are required' });
+
+        // Find user by email
+        const foundUser = await prisma.user.findUnique({ where: { email } });
+        if (!foundUser) return fail(404, { error: 'No user found with that email' });
+
+        // Check if already in org
+        const already = await prisma.userOrganization.findFirst({
+            where: { userId: foundUser.id, organizationId: org_id }
+        });
+        if (already) return fail(400, { error: 'User already in organization' });
+
+        // Add user to org
+        await prisma.userOrganization.create({
+            data: {
+                userId: foundUser.id,
+                organizationId: org_id,
+                role
+            }
+        });
+        return { success: true };
+    },
+
+    edit_role: async ({ request, params, locals }) => {
+        const org_id = locals.org.id; // Changed from params.org_id
+        const user = locals.user;
+        if (!user) return fail(401, { error: 'Unauthorized' });
+
+        // Only ADMIN can edit
+        const userOrg = await prisma.userOrganization.findFirst({
+            where: {
+                userId: user.id,
+                organizationId: org_id,
+                role: 'ADMIN'
+            }
+        });
+        if (!userOrg) return fail(403, { error: 'Forbidden' });
+
+        const formData = await request.formData();
+        const user_id = formData.get('user_id')?.toString();
+        const role = formData.get('role')?.toString();
+        if (!user_id || !role) return fail(400, { error: 'User and role are required' });
+
+        // Don't allow editing own role (prevent lockout)
+        if (user_id === user.id) return fail(400, { error: 'You cannot change your own role' });
+
+        // Don't allow editing role of the only remaining admin
+        if (role !== 'ADMIN') {
+            // Count number of admins in org
+            const adminCount = await prisma.userOrganization.count({
+                where: {
+                    organizationId: org_id,
+                    role: 'ADMIN'
+                }
+            });
+            // If target user is admin and only one admin left, prevent demotion
+            const target = await prisma.userOrganization.findUnique({
+                where: { userId_organizationId: { userId: user_id, organizationId: org_id } }
+            });
+            if (target && target.role === 'ADMIN' && adminCount === 1) {
+                return fail(400, { error: 'Organization must have at least one admin' });
+            }
+        }
+
+        await prisma.userOrganization.update({
+            where: { userId_organizationId: { userId: user_id, organizationId: org_id } },
+            data: { role }
+        });
+        return { success: true };
+    },
+
+    remove_user: async ({ request, params, locals }) => {
+        const org_id = locals.org.id; // Changed from params.org_id
+        const user = locals.user;
+        if (!user) return fail(401, { error: 'Unauthorized' });
+
+        // Only ADMIN can remove
+        const userOrg = await prisma.userOrganization.findFirst({
+            where: {
+                userId: user.id,
+                organizationId: org_id,
+                role: 'ADMIN'
+            }
+        });
+        if (!userOrg) return fail(403, { error: 'Forbidden' });
+
+        const formData = await request.formData();
+        const user_id = formData.get('user_id')?.toString();
+        if (!user_id) return fail(400, { error: 'User is required' });
+
+        // Don't allow removing self (prevent lockout)
+        if (user_id === user.id) return fail(400, { error: 'You cannot remove yourself' });
+
+        // Don't allow removing the only remaining admin
+        const target = await prisma.userOrganization.findUnique({
+            where: { userId_organizationId: { userId: user_id, organizationId: org_id } }
+        });
+        if (target && target.role === 'ADMIN') {
+            const adminCount = await prisma.userOrganization.count({
+                where: {
+                    organizationId: org_id,
+                    role: 'ADMIN'
+                }
+            });
+            if (adminCount === 1) {
+                return fail(400, { error: 'Organization must have at least one admin' });
+            }
+        }
+
+        await prisma.userOrganization.delete({
+            where: { userId_organizationId: { userId: user_id, organizationId: org_id } }
+        });
+        return { success: true };
+    }
+};
diff --git a/src/routes/(app)/app/users/+page.svelte b/src/routes/(app)/app/users/+page.svelte
index c87ef85..f289553 100644
--- a/src/routes/(app)/app/users/+page.svelte
+++ b/src/routes/(app)/app/users/+page.svelte
@@ -1,52 +1,255 @@
 <script>
-    /** @type {{ data: import('./$types').PageData }} */
-    let { data } = $props();
+	import '../../../../app.css';
+	import { Fa } from 'svelte-fa';
+	import {
+		faBuilding,
+		faGlobe,
+		faUsers,
+		faUser,
+		faUserShield,
+		faUserTie
+	} from '@fortawesome/free-solid-svg-icons';
+	import { faPen, faSignOutAlt } from '@fortawesome/free-solid-svg-icons';
 
-    // Example static data for design
-    const users = [
-        { id: 1, name: "Alice Smith", email: "alice@example.com", role: "Admin" },
-        { id: 2, name: "Bob Jones", email: "bob@example.com", role: "User" },
-        { id: 3, name: "Charlie Brown", email: "charlie@example.com", role: "Manager" }
-    ];
-    import { Fa } from 'svelte-fa';
-    import { faEdit, faTrash } from '@fortawesome/free-solid-svg-icons';
+	export let data;
+	let org = data.organization;
+	let editing = false;
+	let formOrg = { name: org.name, domain: org.domain || '', description: org.description || '' };
+	function startEdit() {
+		formOrg = { name: org.name, domain: org.domain || '', description: org.description || '' };
+		editing = true;
+	}
+	function cancelEdit() {
+		editing = false;
+	}
+// Get logged-in user id from data (must be provided by server load)
+let loggedInUserId = data.user?.id;
+let users = Array.isArray(data.users)
+    ? data.users.map((u) => ({
+            id: u.user.id,
+            name: u.user.name || u.user.email,
+            email: u.user.email,
+            role: u.role,
+            joined: u.joinedAt
+                ? typeof u.joinedAt === 'string'
+                    ? u.joinedAt.slice(0, 10)
+                    : new Date(u.joinedAt).toISOString().slice(0, 10)
+                : '',
+            avatar: u.user.profilePhoto || '',
+            isSelf: loggedInUserId === u.user.id,
+            editingRole: false
+        }))
+    : [];
+
+	// Map roles to icons (cover all UserRole enum values)
+	const roleIcons = {
+		ADMIN: faUserShield,
+		USER: faUser,
+		SALES_REP: faUserTie,
+		SUPPORT_REP: faUser,
+		READ_ONLY: faUser
+	};
 </script>
 
-<div class="container mx-auto px-4 py-8">
-    <h1 class="text-2xl font-bold mb-6">Users</h1>
-    <div class="flex justify-end mb-4">
-        <a href="/app/users/new"
-           class="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-semibold rounded shadow hover:bg-blue-700 transition">
-            Add User
+<div class="mx-auto max-w-5xl p-6">
+   <!-- Logout Icon Top Right -->
+    <div class="absolute top-4 right-4 z-10">
+        <a href="/logout" title="Logout" class="text-gray-500 hover:text-red-600 transition">
+            <Fa icon={faSignOutAlt} class="w-6 h-6" /> Logout
         </a>
     </div>
-    <div class="overflow-x-auto bg-white rounded-lg shadow">
+	<!-- Organization Details -->
+	<div
+		class="relative mb-8 flex flex-col items-center gap-6 rounded-lg bg-white p-6 shadow sm:flex-row"
+	>
+		<button
+			type="button"
+			class="absolute top-4 right-4 text-gray-400 hover:text-blue-600"
+			on:click={startEdit}
+			aria-label="Edit"
+			style:display={editing ? 'none' : 'inline-block'}
+		>
+			<Fa icon={faPen} class="h-5 w-5" />
+		</button>
+		{#if editing}
+			<form method="POST" action="?/update" class="w-full space-y-4">
+				<div>
+					<label for="org-name" class="block text-sm font-medium text-gray-700 mb-1">Organization Name</label>
+					<div class="flex items-center gap-2">
+						<Fa icon={faBuilding} class="h-5 w-5 text-gray-400" />
+						<input
+							id="org-name"
+							name="name"
+							type="text"
+							bind:value={formOrg.name}
+							required
+							class="flex-grow rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm p-2"
+						/>
+					</div>
+				</div>
+
+				<div>
+					<label for="org-domain" class="block text-sm font-medium text-gray-700 mb-1">Domain</label>
+					<div class="flex items-center gap-2">
+						<Fa icon={faGlobe} class="h-5 w-5 text-gray-400" />
+						<input
+							id="org-domain"
+							name="domain"
+							type="text"
+							bind:value={formOrg.domain}
+							placeholder="yourcompany.com"
+							class="flex-grow rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm p-2"
+						/>
+					</div>
+				</div>
+				
+				
+
+				<div>
+					<label for="org-description" class="block text-sm font-medium text-gray-700 mb-1">Description</label>
+					<textarea
+						id="org-description"
+						name="description"
+						rows="3"
+						bind:value={formOrg.description}
+						class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm p-2"
+						placeholder="Describe your organization"
+					></textarea>
+				</div>
+
+				<div class="mt-6 flex justify-end gap-3">
+					<button
+						type="button"
+						class="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+						on:click={cancelEdit}>Cancel</button
+					>
+					<button type="submit" class="rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+						>Save Changes</button
+					>
+				</div>
+			</form>
+		{:else}
+			<div class="w-full">
+				<h1 class="flex items-center gap-2 text-2xl font-bold text-gray-800">
+					<Fa icon={faBuilding} class="h-6 w-6 text-blue-500" />
+					<span>{org.name}</span>
+				</h1>
+				<div class="mt-2 flex flex-wrap gap-4 text-gray-500">
+					<span class="flex items-center gap-1">
+						<Fa icon={faGlobe} class="h-4 w-4" />
+						<span class="text-blue-600">{org.domain || '—'}</span>
+					</span>
+					<span class="flex items-center gap-1">
+						<Fa icon={faUsers} class="h-4 w-4" />
+						{org.industry}
+					</span>
+				</div>
+				{#if org.description}
+					<p class="mt-3 whitespace-pre-line text-gray-600">{org.description}</p>
+				{/if}
+			</div>
+		{/if}
+	</div>
+
+	<!-- Users Table -->
+<div class="rounded-lg bg-white p-6 shadow">
+    <h2 class="mb-4 flex items-center gap-2 text-xl font-semibold text-gray-800">
+        <Fa icon={faUsers} class="h-5 w-5 text-blue-500" /> Users
+    </h2>
+    <!-- Add User Form -->
+    <form method="POST" action="?/add_user" class="mb-4 flex flex-wrap items-end gap-2 bg-gray-50 p-3 rounded">
+        <div>
+            <label for="add-user-email" class="block text-xs font-semibold text-gray-600 mb-1">Email</label>
+            <input id="add-user-email" name="email" type="email" required class="border rounded px-2 py-1 text-sm" placeholder="user@email.com" />
+        </div>
+        <div>
+            <label for="add-user-role" class="block text-xs font-semibold text-gray-600 mb-1">Role</label>
+            <select id="add-user-role" name="role" class="border rounded px-2 py-1 text-sm w-full min-w-[120px]">
+                <option value="USER">User</option>
+                <option value="ADMIN">Admin</option>
+            </select>
+        </div>
+        <button type="submit" class="bg-blue-600 text-white px-3 py-1 rounded hover:bg-blue-700 text-sm">Add User</button>
+    </form>
+    <div class="overflow-x-auto">
         <table class="min-w-full divide-y divide-gray-200">
-            <thead class="bg-gray-50">
+            <thead>
                 <tr>
-                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
-                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
-                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Role</th>
-                    <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
+                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Name</th>
+                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Email</th>
+                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Role</th>
+                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Joined</th>
+                    <th class="px-4 py-2"></th>
                 </tr>
             </thead>
-            <tbody class="bg-white divide-y divide-gray-200">
-                {#each users as user}
-                    <tr class="hover:bg-gray-50 transition">
-                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{user.name}</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{user.email}</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{user.role}</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-center">
-                            <button class="inline-flex items-center px-2 py-1 text-blue-600 hover:text-blue-800 transition" title="Edit">
-                                <Fa icon={faEdit} class="w-4 h-4" />
-                            </button>
-                            <button class="inline-flex items-center px-2 py-1 text-red-600 hover:text-red-800 transition" title="Delete">
-                                <Fa icon={faTrash} class="w-4 h-4" />
-                            </button>
+            <tbody class="divide-y divide-gray-100">
+                {#each users as user, i}
+                    <tr>
+                        <td class="px-4 py-3 whitespace-nowrap">
+                            <div class="flex items-center gap-2">
+                                {#if user.avatar}
+                                    <img
+                                        src={user.avatar}
+                                        alt={user.name}
+                                        class="h-8 w-8 rounded-full bg-gray-100 object-cover"
+                                    />
+                                {:else}
+                                    <div
+                                        class="flex h-8 w-8 items-center justify-center rounded-full bg-gray-200 text-gray-400"
+                                    >
+                                        <Fa icon={faUser} class="h-4 w-4" />
+                                    </div>
+                                {/if}
+                                <span class="font-medium text-gray-800">{user.name}</span>
+                            </div>
+                        </td>
+                        <td class="px-4 py-3 text-gray-600">{user.email}</td>
+                        <td class="px-4 py-3">
+                            {#if user.isSelf}
+                                <span class="inline-flex items-center gap-1 rounded bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-400" title="You cannot edit your own role">
+                                    <Fa icon={roleIcons[user.role] || faUser} class="h-3.5 w-3.5" />
+                                    {user.role}
+                                </span>
+                            {:else}
+                                {#if user.editingRole}
+                                    <form method="POST" action="?/edit_role" class="flex items-center gap-1">
+                                        <input type="hidden" name="user_id" value={user.id} />
+                                        <select name="role" class="border rounded px-1 py-0.5 text-xs">
+                                            <option value="USER" selected={user.role === 'USER'}>User</option>
+                                            <option value="ADMIN" selected={user.role === 'ADMIN'}>Admin</option>
+                                            <option value="SALES_REP" selected={user.role === 'SALES_REP'}>Sales Rep</option>
+                                            <option value="SUPPORT_REP" selected={user.role === 'SUPPORT_REP'}>Support Rep</option>
+                                            <option value="READ_ONLY" selected={user.role === 'READ_ONLY'}>Read Only</option>
+                                        </select>
+                                        <button type="submit" class="text-blue-600 text-xs px-2 py-0.5 rounded hover:bg-blue-50">Save</button>
+                                        <button type="button" class="text-gray-400 text-xs px-2 py-0.5 rounded hover:bg-gray-100" on:click={() => { users[i].editingRole = false }}>Cancel</button>
+                                    </form>
+                                {:else}
+                                    <span class="inline-flex items-center gap-1 rounded bg-blue-100 px-2 py-1 text-xs font-semibold text-blue-800">
+                                        <Fa icon={roleIcons[user.role] || faUser} class="h-3.5 w-3.5" />
+                                        {user.role}
+                                        <button type="button" class="ml-1 text-gray-400 hover:text-blue-600" title="Edit Role" on:click={() => { users[i].editingRole = true }}>
+                                            <Fa icon={faPen} class="h-3 w-3" />
+                                        </button>
+                                    </span>
+                                {/if}
+                            {/if}
+                        </td>
+                        <td class="px-4 py-3 text-gray-500">{user.joined}</td>
+                        <td class="px-4 py-3">
+                            {#if user.isSelf}
+                                <span class="text-gray-300 text-xs px-2 py-1 rounded cursor-not-allowed">Remove</span>
+                            {:else}
+                                <form method="POST" action="?/remove_user" on:submit={() => confirm('Remove this user from organization?') || event.preventDefault()}>
+                                    <input type="hidden" name="user_id" value={user.id} />
+                                    <button type="submit" class="text-red-500 hover:text-red-700 text-xs px-2 py-1 rounded">Remove</button>
+                                </form>
+                            {/if}
                         </td>
                     </tr>
                 {/each}
             </tbody>
         </table>
     </div>
-</div>
\ No newline at end of file
+</div>
+</div>
diff --git a/src/routes/(app)/app/users/new/+page.server.js b/src/routes/(app)/app/users/new/+page.server.js
deleted file mode 100644
index 738dc65..0000000
--- a/src/routes/(app)/app/users/new/+page.server.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import { prisma } from '$lib/prisma';
-import { fail, redirect } from '@sveltejs/kit';
-
-export const actions = {
-  addUser: async ({ request, locals }) => {
-    if (!locals.org || !locals.org.id) {
-      return fail(500, { error: 'Organization not found' });
-    }
-    const organizationId = locals.org.id;
-
-    const formData = await request.formData();
-    const email = formData.get('email')?.toString();
-    const name = formData.get('name')?.toString();
-    const role = formData.get('role')?.toString();
-
-    // Basic validation
-    if (!email || !name || !role) {
-      return fail(400, { error: 'Missing required fields', data: { email, name, role } });
-    }
-
-    if (role !== 'ADMIN' && role !== 'USER') {
-      return fail(400, { error: 'Invalid role specified', data: { email, name, role } });
-    }
-
-    let userIdToLink;
-
-    try {
-      // Check if user exists globally
-      let existingUser = await prisma.user.findUnique({
-        where: { email },
-      });
-
-      if (existingUser) {
-        userIdToLink = existingUser.id;
-        // Check if user is already in this organization
-        const existingUserOrganization = await prisma.userOrganization.findFirst({
-          where: {
-            userId: existingUser.id,
-            organizationId: organizationId,
-          },
-        });
-
-        if (existingUserOrganization) {
-          return fail(400, { error: 'User already exists in this organization', data: { email, name, role } });
-        }
-        // If user exists globally but not in this org, we'll link them later
-      } else {
-        // Create new user if they don't exist globally
-        // Assuming user_id should be unique, often email is used or a generated cuid/uuid
-        // For now, let's assume user_id can be the email if it's meant to be a unique string identifier
-        // and the actual primary key is 'id' (auto-increment or CUID).
-        // If 'user_id' is meant to be the Clerk/Auth0 ID, this might need adjustment
-        // based on how that ID is obtained or if it's set post-creation.
-        // The schema provided has `user_id String @unique`
-        const newUser = await prisma.user.create({
-          data: {
-            email,
-            name,
-            user_id: email, // Assuming email can serve as the initial unique user_id
-          },
-        });
-        userIdToLink = newUser.id;
-      }
-    } catch (error) {
-      console.error('Error finding or creating user:', error);
-      return fail(500, { error: 'Could not process user information', data: { email, name, role } });
-    }
-
-    try {
-      // Link user to the organization
-      await prisma.userOrganization.create({
-        data: {
-          userId: userIdToLink,
-          organizationId: organizationId,
-          role: role, // 'ADMIN' or 'USER'
-        },
-      });
-      
-      // On success, it's often good to redirect to avoid form resubmission issues,
-      // or return a success object that the page can use to update its state.
-      // For this task, returning a success object is specified.
-      return { success: true, message: 'User added successfully!' };
-
-    } catch (error) {
-      console.error('Error linking user to organization:', error);
-      // This could happen if, for example, a race condition occurred or a DB constraint was violated.
-      // The earlier check for existingUserOrganization should prevent most common cases.
-      return fail(500, { error: 'Could not add user to organization', data: { email, name, role } });
-    }
-  },
-};
diff --git a/src/routes/(app)/app/users/new/+page.svelte b/src/routes/(app)/app/users/new/+page.svelte
deleted file mode 100644
index cf3cbad..0000000
--- a/src/routes/(app)/app/users/new/+page.svelte
+++ /dev/null
@@ -1,96 +0,0 @@
-<script lang="ts">
-  export let form;
-</script>
-
-<svelte:head>
-  <title>New User</title>
-</svelte:head>
-
-<div class="container">
-  <h1>Add New User</h1>
-
-  {#if form?.success}
-    <p class="success">User added successfully!</p>
-  {/if}
-
-  {#if form?.error}
-    <p class="error">{form.error}</p>
-  {/if}
-
-  <form method="POST" action="?/addUser">
-    <div class="form-group">
-      <label for="email">Email:</label>
-      <input type="email" id="email" name="email" required value={form?.data?.email ?? ''} />
-      {#if form?.errors?.email}
-        <p class="error">{form.errors.email}</p>
-      {/if}
-    </div>
-
-    <div class="form-group">
-      <label for="name">Name:</label>
-      <input type="text" id="name" name="name" required value={form?.data?.name ?? ''} />
-      {#if form?.errors?.name}
-        <p class="error">{form.errors.name}</p>
-      {/if}
-    </div>
-
-    <div class="form-group">
-      <label for="role">Role:</label>
-      <select id="role" name="role">
-        <option value="USER" selected={form?.data?.role === 'USER' || !form?.data?.role}>USER</option>
-        <option value="ADMIN" selected={form?.data?.role === 'ADMIN'}>ADMIN</option>
-      </select>
-      {#if form?.errors?.role}
-        <p class="error">{form.errors.role}</p>
-      {/if}
-    </div>
-
-    <button type="submit">Add User</button>
-  </form>
-</div>
-
-<style>
-  .container {
-    max-width: 500px;
-    margin: 2rem auto;
-    padding: 1rem;
-    border: 1px solid #ccc;
-    border-radius: 8px;
-  }
-  .form-group {
-    margin-bottom: 1rem;
-  }
-  label {
-    display: block;
-    margin-bottom: 0.25rem;
-  }
-  input[type="email"],
-  input[type="text"],
-  select {
-    width: 100%;
-    padding: 0.5rem;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    box-sizing: border-box;
-  }
-  button[type="submit"] {
-    background-color: #007bff;
-    color: white;
-    padding: 0.75rem 1.5rem;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-  }
-  button[type="submit"]:hover {
-    background-color: #0056b3;
-  }
-  .error {
-    color: red;
-    font-size: 0.875rem;
-    margin-top: 0.25rem;
-  }
-  .success {
-    color: green;
-    margin-bottom: 1rem;
-  }
-</style>
diff --git a/src/routes/(no-layout)/org/[org_id]/+page.server.js b/src/routes/(no-layout)/org/[org_id]/+page.server.js
deleted file mode 100644
index 353baf9..0000000
--- a/src/routes/(no-layout)/org/[org_id]/+page.server.js
+++ /dev/null
@@ -1,215 +0,0 @@
-import prisma from '$lib/prisma'
-import { fail, redirect } from '@sveltejs/kit';
-
-/** @type {import('./$types').PageServerLoad} */
-export async function load({ params, locals }) {
-    const org_id = params.org_id;
-    const user = locals.user;
-
-    // Check if user is admin of the organization
-    const userOrg = await prisma.userOrganization.findFirst({
-        where: {
-            userId: user.id,
-            organizationId: org_id,
-            role: 'ADMIN'
-        }
-    });
-    if (!userOrg) {
-        return {
-            error: {
-                name: 'You do not have permission to access this organization'
-            }
-        };
-    }
-    // Fetch organization details
-    const organization = await prisma.organization.findUnique({
-        where: {
-            id: params.org_id
-        }
-    });
-
-    // fetch all users in the organization
-    const users = await prisma.userOrganization.findMany({
-        where: {
-            organizationId: org_id
-        },
-        include: {
-            user: true
-        }
-    });
-    // Pass logged-in user id to page for UI logic
-    return { organization, users, user: { id: user.id } };
-};
-
-/** @type {import('./$types').Actions} */
-export const actions = {
-    update: async ({ request, params, locals }) => {
-        const org_id = params.org_id;
-        const user = locals.user;
-        if (!user) return fail(401, { error: 'Unauthorized' });
-
-        // Only ADMIN can update
-        const userOrg = await prisma.userOrganization.findFirst({
-            where: {
-                userId: user.id,
-                organizationId: org_id,
-                role: 'ADMIN'
-            }
-        });
-        if (!userOrg) return fail(403, { error: 'Forbidden' });
-
-        const formData = await request.formData();
-        const name = formData.get('name')?.toString().trim();
-        const domain = formData.get('domain')?.toString().trim();
-        const description = formData.get('description')?.toString().trim();
-
-        if (!name) return fail(400, { error: 'Name is required' });
-
-        try {
-            await prisma.organization.update({
-                where: { id: org_id },
-                data: {
-                    name,
-                    domain,
-                    description
-                }
-            });
-            return { success: true };
-        } catch (err) {
-            return fail(500, { error: 'Failed to update organization' });
-        }
-    },
-
-    add_user: async ({ request, params, locals }) => {
-        const org_id = params.org_id;
-        const user = locals.user;
-        if (!user) return fail(401, { error: 'Unauthorized' });
-
-        // Only ADMIN can add
-        const userOrg = await prisma.userOrganization.findFirst({
-            where: {
-                userId: user.id,
-                organizationId: org_id,
-                role: 'ADMIN'
-            }
-        });
-        if (!userOrg) return fail(403, { error: 'Forbidden' });
-
-        const formData = await request.formData();
-        const email = formData.get('email')?.toString().trim().toLowerCase();
-        const role = formData.get('role')?.toString();
-        if (!email || !role) return fail(400, { error: 'Email and role are required' });
-
-        // Find user by email
-        const foundUser = await prisma.user.findUnique({ where: { email } });
-        if (!foundUser) return fail(404, { error: 'No user found with that email' });
-
-        // Check if already in org
-        const already = await prisma.userOrganization.findFirst({
-            where: { userId: foundUser.id, organizationId: org_id }
-        });
-        if (already) return fail(400, { error: 'User already in organization' });
-
-        // Add user to org
-        await prisma.userOrganization.create({
-            data: {
-                userId: foundUser.id,
-                organizationId: org_id,
-                role
-            }
-        });
-        return { success: true };
-    },
-
-    edit_role: async ({ request, params, locals }) => {
-        const org_id = params.org_id;
-        const user = locals.user;
-        if (!user) return fail(401, { error: 'Unauthorized' });
-
-        // Only ADMIN can edit
-        const userOrg = await prisma.userOrganization.findFirst({
-            where: {
-                userId: user.id,
-                organizationId: org_id,
-                role: 'ADMIN'
-            }
-        });
-        if (!userOrg) return fail(403, { error: 'Forbidden' });
-
-        const formData = await request.formData();
-        const user_id = formData.get('user_id')?.toString();
-        const role = formData.get('role')?.toString();
-        if (!user_id || !role) return fail(400, { error: 'User and role are required' });
-
-        // Don't allow editing own role (prevent lockout)
-        if (user_id === user.id) return fail(400, { error: 'You cannot change your own role' });
-
-        // Don't allow editing role of the only remaining admin
-        if (role !== 'ADMIN') {
-            // Count number of admins in org
-            const adminCount = await prisma.userOrganization.count({
-                where: {
-                    organizationId: org_id,
-                    role: 'ADMIN'
-                }
-            });
-            // If target user is admin and only one admin left, prevent demotion
-            const target = await prisma.userOrganization.findUnique({
-                where: { userId_organizationId: { userId: user_id, organizationId: org_id } }
-            });
-            if (target && target.role === 'ADMIN' && adminCount === 1) {
-                return fail(400, { error: 'Organization must have at least one admin' });
-            }
-        }
-
-        await prisma.userOrganization.update({
-            where: { userId_organizationId: { userId: user_id, organizationId: org_id } },
-            data: { role }
-        });
-        return { success: true };
-    },
-
-    remove_user: async ({ request, params, locals }) => {
-        const org_id = params.org_id;
-        const user = locals.user;
-        if (!user) return fail(401, { error: 'Unauthorized' });
-
-        // Only ADMIN can remove
-        const userOrg = await prisma.userOrganization.findFirst({
-            where: {
-                userId: user.id,
-                organizationId: org_id,
-                role: 'ADMIN'
-            }
-        });
-        if (!userOrg) return fail(403, { error: 'Forbidden' });
-
-        const formData = await request.formData();
-        const user_id = formData.get('user_id')?.toString();
-        if (!user_id) return fail(400, { error: 'User is required' });
-
-        // Don't allow removing self (prevent lockout)
-        if (user_id === user.id) return fail(400, { error: 'You cannot remove yourself' });
-
-        // Don't allow removing the only remaining admin
-        const target = await prisma.userOrganization.findUnique({
-            where: { userId_organizationId: { userId: user_id, organizationId: org_id } }
-        });
-        if (target && target.role === 'ADMIN') {
-            const adminCount = await prisma.userOrganization.count({
-                where: {
-                    organizationId: org_id,
-                    role: 'ADMIN'
-                }
-            });
-            if (adminCount === 1) {
-                return fail(400, { error: 'Organization must have at least one admin' });
-            }
-        }
-
-        await prisma.userOrganization.delete({
-            where: { userId_organizationId: { userId: user_id, organizationId: org_id } }
-        });
-        return { success: true };
-    }
-};
diff --git a/src/routes/(no-layout)/org/[org_id]/+page.svelte b/src/routes/(no-layout)/org/[org_id]/+page.svelte
deleted file mode 100644
index 3bcd0bc..0000000
--- a/src/routes/(no-layout)/org/[org_id]/+page.svelte
+++ /dev/null
@@ -1,247 +0,0 @@
-<script>
-	import '../../../../app.css';
-	import { Fa } from 'svelte-fa';
-	import {
-		faBuilding,
-		faGlobe,
-		faUsers,
-		faUser,
-		faUserShield,
-		faUserTie
-	} from '@fortawesome/free-solid-svg-icons';
-	import { faPen, faSignOutAlt } from '@fortawesome/free-solid-svg-icons';
-
-	export let data;
-	let org = data.organization;
-	let editing = false;
-	let formOrg = { name: org.name, domain: org.domain || '', description: org.description || '' };
-	function startEdit() {
-		formOrg = { name: org.name, domain: org.domain || '', description: org.description || '' };
-		editing = true;
-	}
-	function cancelEdit() {
-		editing = false;
-	}
-// Get logged-in user id from data (must be provided by server load)
-let loggedInUserId = data.user?.id;
-let users = Array.isArray(data.users)
-    ? data.users.map((u) => ({
-            id: u.user.id,
-            name: u.user.name || u.user.email,
-            email: u.user.email,
-            role: u.role,
-            joined: u.joinedAt
-                ? typeof u.joinedAt === 'string'
-                    ? u.joinedAt.slice(0, 10)
-                    : new Date(u.joinedAt).toISOString().slice(0, 10)
-                : '',
-            avatar: u.user.profilePhoto || '',
-            isSelf: loggedInUserId === u.user.id,
-            editingRole: false
-        }))
-    : [];
-
-	// Map roles to icons (cover all UserRole enum values)
-	const roleIcons = {
-		ADMIN: faUserShield,
-		USER: faUser,
-		SALES_REP: faUserTie,
-		SUPPORT_REP: faUser,
-		READ_ONLY: faUser
-	};
-</script>
-
-<div class="mx-auto max-w-5xl p-6">
-   <!-- Logout Icon Top Right -->
-    <div class="absolute top-4 right-4 z-10">
-        <a href="/logout" title="Logout" class="text-gray-500 hover:text-red-600 transition">
-            <Fa icon={faSignOutAlt} class="w-6 h-6" /> Logout
-        </a>
-    </div>
-	<!-- Organization Details -->
-	<div
-		class="relative mb-8 flex flex-col items-center gap-6 rounded-lg bg-white p-6 shadow sm:flex-row"
-	>
-		<button
-			type="button"
-			class="absolute top-4 right-4 text-gray-400 hover:text-blue-600"
-			on:click={startEdit}
-			aria-label="Edit"
-			style:display={editing ? 'none' : 'inline-block'}
-		>
-			<Fa icon={faPen} class="h-5 w-5" />
-		</button>
-		{#if editing}
-			<form method="POST" action="?/update" class="w-full">
-				<h1 class="flex items-center gap-2 text-2xl font-bold text-gray-800">
-					<Fa icon={faBuilding} class="h-6 w-6 text-blue-500" />
-					<input
-						name="name"
-						type="text"
-						bind:value={formOrg.name}
-						required
-						class="w-auto min-w-[120px] border-b border-gray-300 bg-transparent font-bold text-gray-800 focus:border-blue-500 focus:outline-none"
-					/>
-				</h1>
-				<div class="mt-2 flex flex-wrap gap-4 text-gray-500">
-					<span class="flex items-center gap-1">
-						<Fa icon={faGlobe} class="h-4 w-4" />
-						<input
-							name="domain"
-							type="text"
-							bind:value={formOrg.domain}
-							placeholder="Domain"
-							class="w-auto min-w-[100px] border-b border-gray-200 bg-transparent text-blue-600 focus:border-blue-500 focus:outline-none"
-						/>
-					</span>
-					<span class="flex items-center gap-1">
-						<Fa icon={faUsers} class="h-4 w-4" />
-						{org.industry}
-					</span>
-				</div>
-				<textarea
-					name="description"
-					rows="2"
-					bind:value={formOrg.description}
-					class="mt-3 w-full resize-none border-b border-gray-200 bg-transparent text-gray-600 focus:border-blue-500 focus:outline-none"
-					placeholder="Description"
-				></textarea>
-				<div class="mt-4 flex gap-2">
-					<button type="submit" class="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700"
-						>Save</button
-					>
-					<button
-						type="button"
-						class="rounded bg-gray-200 px-4 py-2 text-gray-700 hover:bg-gray-300"
-						on:click={cancelEdit}>Cancel</button
-					>
-				</div>
-			</form>
-		{:else}
-			<div class="w-full">
-				<h1 class="flex items-center gap-2 text-2xl font-bold text-gray-800">
-					<Fa icon={faBuilding} class="h-6 w-6 text-blue-500" />
-					<span>{org.name}</span>
-				</h1>
-				<div class="mt-2 flex flex-wrap gap-4 text-gray-500">
-					<span class="flex items-center gap-1">
-						<Fa icon={faGlobe} class="h-4 w-4" />
-						<span class="text-blue-600">{org.domain || '—'}</span>
-					</span>
-					<span class="flex items-center gap-1">
-						<Fa icon={faUsers} class="h-4 w-4" />
-						{org.industry}
-					</span>
-				</div>
-				{#if org.description}
-					<p class="mt-3 whitespace-pre-line text-gray-600">{org.description}</p>
-				{/if}
-			</div>
-		{/if}
-	</div>
-
-	<!-- Users Table -->
-<div class="rounded-lg bg-white p-6 shadow">
-    <h2 class="mb-4 flex items-center gap-2 text-xl font-semibold text-gray-800">
-        <Fa icon={faUsers} class="h-5 w-5 text-blue-500" /> Users
-    </h2>
-    <!-- Add User Form -->
-    <form method="POST" action="?/add_user" class="mb-4 flex flex-wrap items-end gap-2 bg-gray-50 p-3 rounded">
-        <div>
-            <label for="add-user-email" class="block text-xs font-semibold text-gray-600 mb-1">Email</label>
-            <input id="add-user-email" name="email" type="email" required class="border rounded px-2 py-1 text-sm" placeholder="user@email.com" />
-        </div>
-        <div>
-            <label for="add-user-role" class="block text-xs font-semibold text-gray-600 mb-1">Role</label>
-            <select id="add-user-role" name="role" class="border rounded px-2 py-1 text-sm">
-                <option value="USER">User</option>
-                <option value="ADMIN">Admin</option>
-                <option value="SALES_REP">Sales Rep</option>
-                <option value="SUPPORT_REP">Support Rep</option>
-                <option value="READ_ONLY">Read Only</option>
-            </select>
-        </div>
-        <button type="submit" class="bg-blue-600 text-white px-3 py-1 rounded hover:bg-blue-700 text-sm">Add User</button>
-    </form>
-    <div class="overflow-x-auto">
-        <table class="min-w-full divide-y divide-gray-200">
-            <thead>
-                <tr>
-                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Name</th>
-                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Email</th>
-                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Role</th>
-                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Joined</th>
-                    <th class="px-4 py-2"></th>
-                </tr>
-            </thead>
-            <tbody class="divide-y divide-gray-100">
-                {#each users as user, i}
-                    <tr>
-                        <td class="px-4 py-3 whitespace-nowrap">
-                            <div class="flex items-center gap-2">
-                                {#if user.avatar}
-                                    <img
-                                        src={user.avatar}
-                                        alt={user.name}
-                                        class="h-8 w-8 rounded-full bg-gray-100 object-cover"
-                                    />
-                                {:else}
-                                    <div
-                                        class="flex h-8 w-8 items-center justify-center rounded-full bg-gray-200 text-gray-400"
-                                    >
-                                        <Fa icon={faUser} class="h-4 w-4" />
-                                    </div>
-                                {/if}
-                                <span class="font-medium text-gray-800">{user.name}</span>
-                            </div>
-                        </td>
-                        <td class="px-4 py-3 text-gray-600">{user.email}</td>
-                        <td class="px-4 py-3">
-                            {#if user.isSelf}
-                                <span class="inline-flex items-center gap-1 rounded bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-400" title="You cannot edit your own role">
-                                    <Fa icon={roleIcons[user.role] || faUser} class="h-3.5 w-3.5" />
-                                    {user.role}
-                                </span>
-                            {:else}
-                                {#if user.editingRole}
-                                    <form method="POST" action="?/edit_role" class="flex items-center gap-1">
-                                        <input type="hidden" name="user_id" value={user.id} />
-                                        <select name="role" class="border rounded px-1 py-0.5 text-xs">
-                                            <option value="USER" selected={user.role === 'USER'}>User</option>
-                                            <option value="ADMIN" selected={user.role === 'ADMIN'}>Admin</option>
-                                            <option value="SALES_REP" selected={user.role === 'SALES_REP'}>Sales Rep</option>
-                                            <option value="SUPPORT_REP" selected={user.role === 'SUPPORT_REP'}>Support Rep</option>
-                                            <option value="READ_ONLY" selected={user.role === 'READ_ONLY'}>Read Only</option>
-                                        </select>
-                                        <button type="submit" class="text-blue-600 text-xs px-2 py-0.5 rounded hover:bg-blue-50">Save</button>
-                                        <button type="button" class="text-gray-400 text-xs px-2 py-0.5 rounded hover:bg-gray-100" on:click={() => { users[i].editingRole = false }}>Cancel</button>
-                                    </form>
-                                {:else}
-                                    <span class="inline-flex items-center gap-1 rounded bg-blue-100 px-2 py-1 text-xs font-semibold text-blue-800">
-                                        <Fa icon={roleIcons[user.role] || faUser} class="h-3.5 w-3.5" />
-                                        {user.role}
-                                        <button type="button" class="ml-1 text-gray-400 hover:text-blue-600" title="Edit Role" on:click={() => { users[i].editingRole = true }}>
-                                            <Fa icon={faPen} class="h-3 w-3" />
-                                        </button>
-                                    </span>
-                                {/if}
-                            {/if}
-                        </td>
-                        <td class="px-4 py-3 text-gray-500">{user.joined}</td>
-                        <td class="px-4 py-3">
-                            {#if user.isSelf}
-                                <span class="text-gray-300 text-xs px-2 py-1 rounded cursor-not-allowed">Remove</span>
-                            {:else}
-                                <form method="POST" action="?/remove_user" on:submit={() => confirm('Remove this user from organization?') || event.preventDefault()}>
-                                    <input type="hidden" name="user_id" value={user.id} />
-                                    <button type="submit" class="text-red-500 hover:text-red-700 text-xs px-2 py-1 rounded">Remove</button>
-                                </form>
-                            {/if}
-                        </td>
-                    </tr>
-                {/each}
-            </tbody>
-        </table>
-    </div>
-</div>
-</div>