ta_data_mas 0.0.2

package/apps/web/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "web",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --port 3001",
+    "build": "next build",
+    "start": "next start --port 3001",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@apiDatabase/constants": "workspace:*",
+    "@apiDatabase/types": "workspace:*",
+    "@hookform/resolvers": "^5.4.0",
+    "@monaco-editor/react": "^4.7.0",
+    "@radix-ui/react-scroll-area": "^1.2.13",
+    "@tanstack/react-table": "^8.21.3",
+    "@uploadthing/react": "^7.3.3",
+    "axios": "^1.18.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cn": "^0.2.5",
+    "jose": "^6.2.3",
+    "lucide-react": "^1.17.0",
+    "next": "16.3.4",
+    "radix-ui": "^1.5.0",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "react-hook-form": "^7.78.0",
+    "react-resizable-panels": "^4.12.1",
+    "socket.io-client": "^4.8.3",
+    "tailwind-merge": "^3.6.0",
+    "tw-animate-css": "^1.4.0",
+    "uploadthing": "^7.7.4",
+    "zod": "^4.4.3"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "babel-plugin-react-compiler": "1.0.0",
+    "eslint": "^9",
+    "eslint-config-next": "16.3.4",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

package/apps/web/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

package/apps/web/public/file.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

package/apps/web/public/globe.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

package/apps/web/public/logo.svg

@@ -0,0 +1,4 @@
+<svg width="44" height="31" viewBox="0 0 44 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M29.825 11.829 18.797.805a2.75 2.75 0 0 0-3.89 0L.806 14.9a2.75 2.75 0 0 0 0 3.89l11.028 11.023a2.75 2.75 0 0 0 3.89 0l14.1-14.094a2.75 2.75 0 0 0 0-3.889" fill="#d4d4d8"/>
+  <path d="M42.892 11.829 31.863.805a2.75 2.75 0 0 0-3.89 0L13.873 14.9a2.75 2.75 0 0 0 0 3.89L24.9 29.811a2.75 2.75 0 0 0 3.89 0l14.1-14.094a2.75 2.75 0 0 0 0-3.889" fill="#27272a"/>
+</svg>

package/apps/web/public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

package/apps/web/public/vercel.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

package/apps/web/public/window.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

package/apps/web/src/app/(dashboard)/layout.tsx

@@ -0,0 +1,33 @@
+import { SidebarProvider, SidebarInset } from "@/components/ui/sidebar";
+import { AppSidebar } from "@/components/app-sidebar";
+
+import { retrieveTokenFromCookie } from "@/server-utils/utils";
+import { retrieveMyOrganizationsFromApi } from "@/features/organization/organization-helpers.server";
+
+async function getCurrentUser() {
+  const token = await retrieveTokenFromCookie();
+
+  const payload = JSON.parse(
+    Buffer.from(token.split(".")[1], "base64").toString(),
+  );
+
+  return { email: payload.email as string, name: null };
+}
+
+export default async function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [orgs, user] = await Promise.all([
+    retrieveMyOrganizationsFromApi(),
+    getCurrentUser(),
+  ]);
+
+  return (
+    <SidebarProvider>
+      <AppSidebar orgs={orgs} user={user} />
+      <SidebarInset className="bg-background">{children}</SidebarInset>
+    </SidebarProvider>
+  );
+}

package/apps/web/src/app/(dashboard)/organizations/(list)/layout.tsx

@@ -0,0 +1,7 @@
+export default function OrganizationsListLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <main className="flex-1 overflow-y-auto p-6 md:p-8">{children}</main>;
+}

package/apps/web/src/app/(dashboard)/organizations/(list)/new/page.tsx

@@ -0,0 +1,26 @@
+import Link from "next/link";
+import { ChevronLeft } from "lucide-react";
+import { CreateOrgForm } from "@/features/organization/create-org-form";
+
+export default function NewOrganizationPage() {
+  return (
+    <div>
+      <Link
+        href="/organizations"
+        className="mb-6 inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
+      >
+        <ChevronLeft className="size-4" />
+        Back to organizations
+      </Link>
+
+      <div className="mb-6">
+        <h1 className="text-2xl font-medium">New organization</h1>
+        <p className="mt-1 text-sm text-muted-foreground">
+          Organizations group projects and team members.
+        </p>
+      </div>
+
+      <CreateOrgForm />
+    </div>
+  );
+}

package/apps/web/src/app/(dashboard)/organizations/(list)/page.tsx

@@ -0,0 +1,44 @@
+import Link from "next/link";
+import { Plus, Building2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { retrieveMyOrganizationsFromApi } from "@/features/organization/organization-helpers.server";
+
+export default async function OrganizationsPage() {
+  const orgs = await retrieveMyOrganizationsFromApi();
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-2xl font-medium">Your Organizations</h1>
+        <Button asChild size="sm">
+          <Link href="/organizations/new">
+            <Plus size={14} className="mr-1.5" />
+            New organization
+          </Link>
+        </Button>
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+        {orgs.map((org) => (
+          <Link
+            key={org.id}
+            href={`/organizations/${org.slug}/projects`}
+            className="flex items-center gap-4 p-5 rounded-xl border border-border bg-background hover:bg-accent transition-colors"
+          >
+            <div className="w-10 h-10 rounded-lg bg-muted flex items-center justify-center shrink-0">
+              <Building2 size={18} className="text-muted-foreground" />
+            </div>
+            <div className="min-w-0">
+              <p className="font-medium text-sm truncate">{org.name}</p>
+              <p className="text-xs text-muted-foreground mt-0.5">
+                {org.projectCount}{" "}
+                {org.projectCount === 1 ? "project" : "projects"} -{" "}
+                {org.memberCount} {org.memberCount === 1 ? "member" : "members"}
+              </p>
+            </div>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}

package/apps/web/src/app/(dashboard)/organizations/[slug]/[projectSlug]/api/page.tsx

@@ -0,0 +1,13 @@
+import { retrieveApiDocsFromApi } from "@/features/api-docs/api-docs-helpers.server";
+import { ApiDocsClient } from "@/features/api-docs/api-docs-client";
+
+export default async function ApiDocsPage({
+  params,
+}: {
+  params: Promise<{ slug: string; projectSlug: string }>;
+}) {
+  const { slug, projectSlug } = await params;
+  const docs = await retrieveApiDocsFromApi(slug, projectSlug);
+
+  return <ApiDocsClient docs={docs} />;
+}

package/apps/web/src/app/(dashboard)/organizations/[slug]/[projectSlug]/auth/layout.tsx

@@ -0,0 +1,19 @@
+import { ProjectAuthShell } from "@/features/project-auth/project-auth-shell";
+
+export default async function AuthLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: Promise<{ slug: string; projectSlug: string }>;
+}) {
+  const { slug, projectSlug } = await params;
+
+  return (
+    <div className="-mx-6 -mt-6 -mb-6 flex h-[calc(100svh-3rem)] min-h-0 flex-col overflow-hidden">
+      <ProjectAuthShell orgSlug={slug} projectSlug={projectSlug}>
+        {children}
+      </ProjectAuthShell>
+    </div>
+  );
+}

package/apps/web/src/app/(dashboard)/organizations/[slug]/[projectSlug]/auth/page.tsx

@@ -0,0 +1,10 @@
+import { redirect } from "next/navigation";
+
+export default async function AuthIndexPage({
+  params,
+}: {
+  params: Promise<{ slug: string; projectSlug: string }>;
+}) {
+  const { slug, projectSlug } = await params;
+  redirect(`/organizations/${slug}/${projectSlug}/auth/users`);
+}

package/apps/web/src/app/(dashboard)/organizations/[slug]/[projectSlug]/auth/providers/page.tsx

@@ -0,0 +1,19 @@
+import { retrieveOAuthSettingsFromApi } from "@/features/project-auth/project-auth-helpers.server";
+import { ProjectAuthProviders } from "@/features/project-auth/project-auth-providers";
+
+export default async function AuthProvidersPage({
+  params,
+}: {
+  params: Promise<{ slug: string; projectSlug: string }>;
+}) {
+  const { slug, projectSlug } = await params;
+  const settings = await retrieveOAuthSettingsFromApi(slug, projectSlug);
+
+  return (
+    <ProjectAuthProviders
+      orgSlug={slug}
+      projectSlug={projectSlug}
+      initialSettings={settings}
+    />
+  );
+}

package/apps/web/src/app/(dashboard)/organizations/[slug]/[projectSlug]/auth/url-configuration/page.tsx

@@ -0,0 +1,24 @@
+import { retrieveOAuthSettingsFromApi } from "@/features/project-auth/project-auth-helpers.server";
+import { ProjectAuthUrlConfig } from "@/features/project-auth/project-auth-url-config";
+
+export default async function AuthUrlConfigurationPage({
+  params,
+}: {
+  params: Promise<{ slug: string; projectSlug: string }>;
+}) {
+  const { slug, projectSlug } = await params;
+  const apiBaseUrl =
+    process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:3000/api";
+  const settings = await retrieveOAuthSettingsFromApi(slug, projectSlug);
+  const fallbackSiteUrl =
+    process.env.NEXT_PUBLIC_WEB_URL ?? "http://localhost:3001";
+
+  return (
+    <ProjectAuthUrlConfig
+      orgSlug={slug}
+      projectSlug={projectSlug}
+      initialSiteUrl={settings.siteUrl ?? fallbackSiteUrl}
+      apiBaseUrl={apiBaseUrl}
+    />
+  );
+}

package/apps/web/src/app/(dashboard)/organizations/[slug]/[projectSlug]/auth/users/page.tsx

@@ -0,0 +1,13 @@
+import { retrieveProjectAuthUsersFromApi } from "@/features/project-auth/project-auth-helpers.server";
+import { ProjectAuthUsers } from "@/features/project-auth/project-auth-users";
+
+export default async function AuthUsersPage({
+  params,
+}: {
+  params: Promise<{ slug: string; projectSlug: string }>;
+}) {
+  const { slug, projectSlug } = await params;
+  const users = await retrieveProjectAuthUsersFromApi(slug, projectSlug);
+
+  return <ProjectAuthUsers users={users} />;
+}

package/apps/web/src/app/(dashboard)/organizations/[slug]/[projectSlug]/database/page.tsx

@@ -0,0 +1,29 @@
+import { TableEditorClient } from "@/features/table-editor/table-editor-client";
+import {
+  retrieveTablesFromApi,
+  retrieveProjectDbSchema,
+} from "@/features/table-editor/table-editor-helpers.server";
+
+export default async function DatabasePage({
+  params,
+}: {
+  params: Promise<{ slug: string; projectSlug: string }>;
+}) {
+  const { slug, projectSlug } = await params;
+
+  const [tables, dbSchema] = await Promise.all([
+    retrieveTablesFromApi(slug, projectSlug),
+    retrieveProjectDbSchema(slug, projectSlug),
+  ]);
+
+  return (
+    <div className="-mx-6 -mt-6 -mb-6 flex h-[calc(100svh-3rem)] min-h-0 flex-col overflow-hidden">
+      <TableEditorClient
+        orgSlug={slug}
+        projectSlug={projectSlug}
+        dbSchema={dbSchema}
+        initialTables={tables}
+      />
+    </div>
+  );
+}

package/apps/web/src/app/(dashboard)/organizations/[slug]/[projectSlug]/realtime/page.tsx

@@ -0,0 +1,28 @@
+import {
+  retrieveProjectForRealtime,
+  retrieveTablesForRealtime,
+} from "@/features/realtime/realtime-helpers.server";
+import { RealtimeClient } from "@/features/realtime/realtime-client";
+
+export default async function RealtimePage({
+  params,
+}: {
+  params: Promise<{ slug: string; projectSlug: string }>;
+}) {
+  const { slug, projectSlug } = await params;
+
+  const [project, tables] = await Promise.all([
+    retrieveProjectForRealtime(slug, projectSlug),
+    retrieveTablesForRealtime(slug, projectSlug),
+  ]);
+
+  return (
+    <RealtimeClient
+      orgSlug={slug}
+      projectSlug={projectSlug}
+      projectId={project.id}
+      anonKey={project.anonKey}
+      tables={tables}
+    />
+  );
+}

package/apps/web/src/app/(dashboard)/organizations/[slug]/[projectSlug]/sql/page.tsx

@@ -0,0 +1,21 @@
+import { retrieveSqlHistoryFromApi } from "@/features/sql-editor/sql-editor-helpers.server";
+import { SqlEditorClient } from "@/features/sql-editor/sql-editor-client";
+
+export default async function SqlEditorPage({
+  params,
+}: {
+  params: Promise<{ slug: string; projectSlug: string }>;
+}) {
+  const { slug, projectSlug } = await params;
+  const history = await retrieveSqlHistoryFromApi(slug, projectSlug);
+
+  return (
+    <div className="-mx-6 -mt-6 -mb-6 flex h-[calc(100svh-3rem)] min-h-0 flex-col overflow-hidden">
+      <SqlEditorClient
+        orgSlug={slug}
+        projectSlug={projectSlug}
+        initialHistory={history}
+      />
+    </div>
+  );
+}

package/apps/web/src/app/(dashboard)/organizations/[slug]/[projectSlug]/storage/page.tsx

@@ -0,0 +1,28 @@
+import {
+  retrieveBucketsFromApi,
+  retrieveObjectsFromApi,
+} from "@/features/storage/storage-helpers.server";
+import { StorageClient } from "@/features/storage/storage-client";
+
+export default async function StoragePage({
+  params,
+}: {
+  params: Promise<{ slug: string; projectSlug: string }>;
+}) {
+  const { slug, projectSlug } = await params;
+  const buckets = await retrieveBucketsFromApi(slug, projectSlug);
+  const initialObjects = buckets[0]
+    ? await retrieveObjectsFromApi(slug, projectSlug, buckets[0].id)
+    : [];
+
+  return (
+    <div className="-mx-6 -mt-6 -mb-6 flex h-[calc(100svh-3rem)] min-h-0 flex-col overflow-hidden">
+      <StorageClient
+        orgSlug={slug}
+        projectSlug={projectSlug}
+        initialBuckets={buckets}
+        initialObjects={initialObjects}
+      />
+    </div>
+  );
+}

package/apps/web/src/app/(dashboard)/organizations/[slug]/layout.tsx

@@ -0,0 +1,20 @@
+import { TopNav } from "@/components/topNav";
+import { retrieveProjectsFromApi } from "@/features/projects/project-helpers.server";
+
+export default async function OrgLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = await params;
+  const projects = await retrieveProjectsFromApi(slug);
+
+  return (
+    <>
+      <TopNav projects={projects} />
+      <main className="flex-1 overflow-y-auto p-6">{children}</main>
+    </>
+  );
+}

package/apps/web/src/app/(dashboard)/organizations/[slug]/projects/page.tsx

@@ -0,0 +1,62 @@
+import Link from "next/link";
+import { Database } from "lucide-react";
+import { retrieveOrganizationBySlugFromApi } from "@/features/organization/organization-helpers.server";
+import { retrieveProjectsFromApi } from "@/features/projects/project-helpers.server";
+import { ORG_ROLES } from "@apiDatabase/constants";
+import { CreateProjectModal } from "@/features/projects/create-project-modal";
+
+export default async function ProjectsPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = await params;
+
+  const [org, projects] = await Promise.all([
+    retrieveOrganizationBySlugFromApi(slug),
+    retrieveProjectsFromApi(slug),
+  ]);
+
+  const isAdmin = org.role === ORG_ROLES.ADMIN;
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-2xl font-medium">Projects</h1>
+        {isAdmin && <CreateProjectModal slug={slug} />}
+      </div>
+
+      {/* Empty state */}
+      {projects.length === 0 ? (
+        <div className="flex flex-col items-center justify-center py-24 text-center border border-dashed border-border rounded-xl">
+          <p className="text-muted-foreground text-sm">
+            No projects yet in {org.name}
+          </p>
+          <p className="text-muted-foreground text-xs mt-1">
+            Create your first project to get started
+          </p>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          {projects.map((project) => (
+            <Link
+              key={project.id}
+              href={`/organizations/${slug}/${project.slug}/database`}
+              className="flex items-center gap-4 p-5 rounded-xl border border-border bg-background hover:bg-accent transition-colors"
+            >
+              <div className="w-10 h-10 rounded-lg bg-muted flex items-center justify-center shrink-0">
+                <Database size={18} className="text-muted-foreground" />
+              </div>
+              <div className="min-w-0">
+                <p className="font-medium text-sm truncate">{project.name}</p>
+                <p className="text-xs text-muted-foreground mt-0.5 truncate">
+                  {project.projectUrl}
+                </p>
+              </div>
+            </Link>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/apps/web/src/app/(dashboard)/organizations/[slug]/settings/members/page.tsx

@@ -0,0 +1,28 @@
+import { MembersClient } from "@/features/members/members-client";
+import { retrieveMembersFromApi } from "@/features/members/members-helpers.server";
+import { retrieveOrganizationBySlugFromApi } from "@/features/organization/organization-helpers.server";
+
+export default async function MembersSettingsPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = await params;
+
+  const [org, members] = await Promise.all([
+    retrieveOrganizationBySlugFromApi(slug),
+    retrieveMembersFromApi(slug),
+  ]);
+
+  return (
+    <div>
+      <div className="mb-6">
+        <h1 className="text-2xl font-medium">Members</h1>
+        <p className="text-sm text-muted-foreground mt-1">
+          Manage who has access to {org.name}
+        </p>
+      </div>
+      <MembersClient slug={slug} members={members} currentUserRole={org.role} />
+    </div>
+  );
+}

package/apps/web/src/app/(dashboard)/organizations/[slug]/settings/page.tsx

@@ -0,0 +1,10 @@
+import { redirect } from "next/navigation";
+
+export default async function OrgSettingsIndexPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = await params;
+  redirect(`/organizations/${slug}/settings/members`);
+}

package/apps/web/src/app/(dashboard)/settings/page.tsx

@@ -0,0 +1,12 @@
+import { redirect } from "next/navigation";
+import { retrieveMyOrganizationsFromApi } from "@/features/organization/organization-helpers.server";
+
+export default async function SettingsPage() {
+  const orgs = await retrieveMyOrganizationsFromApi();
+
+  if (orgs.length === 0) {
+    redirect("/organizations/new");
+  }
+
+  redirect(`/organizations/${orgs[0].slug}/settings/members`);
+}

package/apps/web/src/app/dashboard/page.tsx

@@ -0,0 +1,14 @@
+import { redirect } from "next/navigation";
+import { retrieveMyOrganizationsFromApi } from "@/features/organization/organization-helpers.server";
+
+export default async function DashboardPage() {
+  const orgs = await retrieveMyOrganizationsFromApi();
+
+  console.log("ORG", orgs);
+
+  if (orgs.length === 1) {
+    redirect(`/organizations/${orgs[0].slug}/projects`);
+  }
+
+  redirect("/organizations");
+}