Merge pull request #65 from trycompai/lewis/user-portal

Lewis/user portal

apps/app/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@ai-sdk/openai": "^1.1.12",
+    "@ai-sdk/provider": "^1.0.7",
     "@browserbasehq/sdk": "^2.3.0",
     "@bubba/notifications": "workspace:*",
     "@date-fns/tz": "^1.2.0",

apps/app/src/actions/integrations/delete-integration-connection.ts

@@ -3,7 +3,6 @@
 "use server";
 
 import { db } from "@bubba/db";
-import { Nango } from "@nangohq/node";
 import { revalidatePath } from "next/cache";
 import { authActionClient } from "../safe-action";
 import { deleteIntegrationConnectionSchema } from "../schema";
@@ -21,10 +20,6 @@ export const deleteIntegrationConnectionAction = authActionClient
     const { integrationId } = parsedInput;
     const { user } = ctx;
 
-    const nango = new Nango({
-      secretKey: process.env.NANGO_SECRET_KEY as string,
-    });
-
     const integration = await db.organizationIntegrations.findUnique({
       where: {
         name: integrationId.toLowerCase(),

apps/app/src/actions/integrations/retrieve-integration-session-token.ts

@@ -2,7 +2,6 @@
 
 "use server";
 
-import { Nango } from "@nangohq/node";
 import { authActionClient } from "../safe-action";
 import { createIntegrationSchema } from "../schema";
 
@@ -19,24 +18,8 @@ export const retrieveIntegrationSessionTokenAction = authActionClient
     const { integrationId } = parsedInput;
     const { user } = ctx;
 
-    const nango = new Nango({
-      secretKey: process.env.NANGO_SECRET_KEY as string,
-    });
-
-    const response = await nango.createConnectSession({
-      end_user: {
-        id: user.id,
-        email: user.email || undefined,
-        display_name: user.name || undefined,
-      },
-      organization: {
-        id: user.organizationId,
-      },
-      allowed_integrations: [integrationId],
-    });
-
     return {
       success: true,
-      sessionToken: response.data.token,
+      sessionToken: "123",
     };
   });

apps/app/src/components/integrations/integrations-card.tsx

@@ -10,7 +10,6 @@ import { Button } from "@bubba/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@bubba/ui/card";
 import { ScrollArea } from "@bubba/ui/scroll-area";
 import { Sheet, SheetContent, SheetHeader } from "@bubba/ui/sheet";
-import Nango from "@nangohq/frontend";
 import { useAction } from "next-safe-action/hooks";
 import { useRouter } from "next/navigation";
 import { parseAsBoolean, parseAsString, useQueryStates } from "nuqs";
@@ -46,11 +45,6 @@ export function IntegrationsCard({
   category: string;
   installedSettings: Record<string, any>;
 }) {
-  const nango = new Nango({
-    width: 400,
-    height: 600,
-  });
-
   const router = useRouter();
 
   const [params, setParams] = useQueryStates({
@@ -83,21 +77,6 @@ export function IntegrationsCard({
       const res = await retrieveIntegrationSessionToken.executeAsync({
         integrationId: id,
       });
-
-      const connect = nango.openConnectUI({
-        onEvent: async (event) => {
-          if (event.type === "close") {
-            setLoading(false);
-          } else if (event.type === "connect") {
-            toast.success("Integration connected successfully");
-            router.replace("/integrations");
-          }
-        },
-      });
-
-      if (res?.data?.sessionToken) {
-        connect.setSessionToken(res.data.sessionToken);
-      }
     } catch (error) {
       console.error("Connection error:", error);
       toast.error("Failed to connect integration");

apps/portal/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

apps/portal/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

apps/portal/next.config.ts

@@ -0,0 +1,31 @@
+import "./src/env.mjs";
+
+const config = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "**",
+      },
+    ],
+  },
+  async rewrites() {
+    return [
+      {
+        source: "/ingest/static/:path*",
+        destination: "https://us-assets.i.posthog.com/static/:path*",
+      },
+      {
+        source: "/ingest/:path*",
+        destination: "https://us.i.posthog.com/:path*",
+      },
+      {
+        source: "/ingest/decide",
+        destination: "https://us.i.posthog.com/decide",
+      },
+    ];
+  },
+  skipTrailingSlashRedirect: true,
+};
+
+export default config;

apps/portal/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "portal",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack -p 3002",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "better-auth": "^1.1.18",
+    "next": "15.1.7",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-otp-input": "^3.1.1"
+  },
+  "devDependencies": {
+    "@bubba/ui": "workspace:*",
+    "@types/node": "^22.13.2",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "postcss": "^8.5.2",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.7.3"
+  }
+}

apps/portal/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

apps/portal/public/site.webmanifest

@@ -0,0 +1,21 @@
+{
+  "name": "Comp AI",
+  "short_name": "Comp AI",
+  "icons": [
+    {
+      "src": "/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

apps/portal/src/app/[locale]/(app)/page.tsx

@@ -0,0 +1,55 @@
+import { auth } from "@/app/lib/auth";
+import { db } from "@bubba/db";
+import { unstable_cache } from "next/cache";
+import { headers } from "next/headers";
+
+export default async function Home() {
+  const session = await auth.api.getSession({
+    headers: await headers(),
+  });
+
+  if (!session) {
+    return null;
+  }
+
+  const user = await getUser(session.user.email);
+
+  return (
+    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
+      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
+        {user?.id && user?.organization?.id && (
+          <div>
+            <h1>Welcome to the portal</h1>
+
+            <p>You are logged in as {user.email}</p>
+
+            <p>
+              You work for {user.organization.name} and your employee ID is{" "}
+              {user.id}
+            </p>
+          </div>
+        )}
+      </main>
+    </div>
+  );
+}
+
+export const getUser = unstable_cache(async (email: string) => {
+  "use server";
+
+  const employee_data = await db.employee.findFirst({
+    where: {
+      email,
+    },
+    include: {
+      organization: {
+        select: {
+          id: true,
+          name: true,
+        },
+      },
+    },
+  });
+
+  return employee_data;
+});

apps/portal/src/app/[locale]/(public)/auth/page.tsx

@@ -0,0 +1,46 @@
+import { OtpSignIn } from "@/app/components/otp";
+import { getI18n } from "@/app/locales/server";
+import type { Metadata } from "next";
+import Link from "next/link";
+
+export const metadata: Metadata = {
+  title: "Login | Comp AI",
+};
+
+export default async function Page() {
+  const t = await getI18n();
+
+  const defaultSignInOptions = (
+    <div className="flex flex-col space-y-2">
+      <OtpSignIn />
+    </div>
+  );
+
+  return (
+    <>
+      <div className="flex min-h-[calc(100vh-15rem)] items-center justify-center overflow-hidden p-6 md:p-0">
+        <div className="relative z-20 m-auto flex w-full max-w-[380px] flex-col py-8">
+          <div className="relative flex w-full flex-col">
+            <div className="inline-block from-primary bg-clip-text pb-4">
+              <div className="flex flex-row items-center gap-2">
+                <Link href="/" className="flex flex-row items-center gap-2">
+                  <h1 className="font-mono text-xl font-semibold">Comp AI</h1>
+                </Link>
+              </div>
+              <h2 className="mt-4 text-lg font-medium">{t("auth.title")}</h2>
+              <div className="mt-2">
+                <span className="text-xs text-muted-foreground">
+                  {t("auth.description")}
+                </span>
+              </div>
+            </div>
+
+            <div className="pointer-events-auto mb-6 flex flex-col">
+              {defaultSignInOptions}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

apps/portal/src/app/[locale]/(public)/layout.tsx

@@ -0,0 +1,7 @@
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <>{children}</>;
+}