From 05442bd57d991ff0f15a67e8b1fdbc6c19bf9f5b Mon Sep 17 00:00:00 2001
From: Arjun Komath <arjun@hey.com>
Date: Sat, 8 Feb 2025 23:28:33 +1100
Subject: [PATCH 01/24] Add teams page

---
 .../dialogs/manage-team-dialog.component.tsx  | 258 +++++++++++
 apps/web/components/entity/empty-state.tsx    |  24 +-
 .../components/layout/header.component.tsx    |   1 +
 apps/web/data/routes.data.ts                  |   3 +
 apps/web/data/schema.ts                       |   7 +-
 apps/web/pages/_app.tsx                       |  38 +-
 apps/web/pages/pages/index.tsx                |   3 +-
 apps/web/pages/teams/index.tsx                | 419 ++++++++++++++++++
 apps/web/utils/useDatabase.ts                 |   2 +-
 packages/supabase/migrations/16_teams.sql     |  71 +++
 packages/supabase/types/index.ts              | 144 +++++-
 packages/supabase/types/page.ts               |   4 +
 12 files changed, 930 insertions(+), 44 deletions(-)
 create mode 100644 apps/web/components/dialogs/manage-team-dialog.component.tsx
 create mode 100644 apps/web/pages/teams/index.tsx
 create mode 100644 packages/supabase/migrations/16_teams.sql

diff --git a/apps/web/components/dialogs/manage-team-dialog.component.tsx b/apps/web/components/dialogs/manage-team-dialog.component.tsx
new file mode 100644
index 0000000..05b75df
--- /dev/null
+++ b/apps/web/components/dialogs/manage-team-dialog.component.tsx
@@ -0,0 +1,258 @@
+import { ITeam } from "@changes-page/supabase/types/page";
+import { Dialog, Transition } from "@headlessui/react";
+import { PlusIcon } from "@heroicons/react/outline";
+import { useFormik } from "formik";
+import { useRouter } from "next/router";
+import { Fragment, useEffect, useRef } from "react";
+import { InferType } from "yup";
+import { ROUTES } from "../../data/routes.data";
+import { NewTeamSchema } from "../../data/schema";
+import { useUserData } from "../../utils/useUser";
+import { InlineErrorMessage } from "../forms/notification.component";
+
+export default function ManageTeamDialog({
+  open,
+  setOpen,
+  team,
+  onSuccess,
+  onCancel,
+}: {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  team?: ITeam;
+  onSuccess: () => void;
+  onCancel: () => void;
+}) {
+  const router = useRouter();
+  const cancelButtonRef = useRef(null);
+  const { supabase, user } = useUserData();
+
+  useEffect(() => {
+    if (open) {
+      formik.resetForm();
+    }
+
+    if (team) {
+      formik.setValues({
+        name: team.name,
+        image: team.image,
+      });
+    }
+  }, [open, team]);
+
+  const formik = useFormik<InferType<typeof NewTeamSchema>>({
+    initialValues: {
+      name: "",
+      image: null,
+    },
+    validationSchema: NewTeamSchema,
+    onSubmit: async (values) => {
+      if (!user) {
+        router.push(ROUTES.LOGIN);
+        return;
+      }
+
+      if (!values.name) {
+        formik.setFieldError("name", "Name is required");
+        return;
+      }
+
+      if (team) {
+        await supabase
+          .from("teams")
+          .update({
+            name: values.name,
+            image: values.image,
+          })
+          .match({ id: team.id });
+        onSuccess();
+      } else {
+        await supabase
+          .from("teams")
+          .insert([
+            {
+              name: values.name,
+              image: values.image,
+              owner_id: user.id,
+            },
+          ])
+          .select();
+        onSuccess();
+      }
+
+      setOpen(false);
+    },
+  });
+
+  return (
+    <Transition.Root show={open} as={Fragment}>
+      <Dialog
+        as="div"
+        className="fixed z-10 inset-0 overflow-y-auto"
+        initialFocus={cancelButtonRef}
+        onClose={setOpen}
+      >
+        <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-20 backdrop-blur transition-opacity" />
+          </Transition.Child>
+
+          {/* This element is to trick the browser into centering the modal contents. */}
+          <span
+            className="hidden sm:inline-block sm:align-middle sm:h-screen"
+            aria-hidden="true"
+          >
+            &#8203;
+          </span>
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            enterTo="opacity-100 translate-y-0 sm:scale-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+            leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+          >
+            <div className="inline-block align-bottom bg-white dark:bg-gray-900 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
+              <div className="bg-white dark:bg-gray-900 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                <div className="sm:flex sm:items-start">
+                  <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-indigo-100 dark:bg-indigo-900 sm:mx-0 sm:h-10 sm:w-10">
+                    <PlusIcon
+                      className="h-6 w-6 text-indigo-600 dark:text-indigo-400"
+                      aria-hidden="true"
+                    />
+                  </div>
+                  <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
+                    <Dialog.Title
+                      as="h3"
+                      className="text-lg leading-6 font-medium text-gray-900 dark:text-gray-50"
+                    >
+                      {team ? "Edit Team" : "Create Team"}
+                    </Dialog.Title>
+                    <div className="mt-2">
+                      <p className="text-sm text-gray-500 dark:text-gray-400">
+                        {team
+                          ? "Edit your team details."
+                          : "Create a new team to manage your pages and posts."}
+                      </p>
+                    </div>
+
+                    <div className="mt-3">
+                      <form
+                        className="space-y-8"
+                        onSubmit={formik.handleSubmit}
+                      >
+                        <div className="mt-2 sm:mt-2 space-y-6 sm:space-y-5">
+                          <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5">
+                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 sm:mt-px sm:pt-2">
+                              Name
+                            </label>
+
+                            <div className="mt-1 sm:col-span-2 sm:mt-0">
+                              <input
+                                type="text"
+                                name="name"
+                                id="name"
+                                className="block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md dark:bg-gray-800 dark:text-gray-100 dark:border-gray-700"
+                                placeholder="My Team"
+                                value={formik.values.name}
+                                onChange={formik.handleChange}
+                              />
+
+                              {formik.errors.name && formik.touched.name && (
+                                <div className="mt-2">
+                                  <InlineErrorMessage
+                                    message={formik.errors.name}
+                                  />
+                                </div>
+                              )}
+                            </div>
+                          </div>
+
+                          <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start">
+                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 sm:mt-px sm:pt-2">
+                              Image URL
+                            </label>
+
+                            <div className="mt-1 sm:col-span-2 sm:mt-0">
+                              <input
+                                type="url"
+                                name="image"
+                                id="image"
+                                className="block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md dark:bg-gray-800 dark:text-gray-100 dark:border-gray-700"
+                                placeholder="https://example.com/image.png"
+                                value={formik.values.image || ""}
+                                onChange={formik.handleChange}
+                              />
+
+                              {formik.errors.image && formik.touched.image && (
+                                <div className="mt-2">
+                                  <InlineErrorMessage
+                                    message={formik.errors.image}
+                                  />
+                                </div>
+                              )}
+
+                              {formik.values.image && !formik.errors.image && (
+                                <div className="mt-2">
+                                  <img
+                                    src={formik.values.image}
+                                    alt="Team Avatar Preview"
+                                    className="h-20 w-20 rounded-full object-cover"
+                                    onError={(e) => {
+                                      e.currentTarget.onerror = null;
+                                      formik.setFieldError(
+                                        "image",
+                                        "Failed to load image"
+                                      );
+                                    }}
+                                  />
+                                </div>
+                              )}
+                            </div>
+                          </div>
+                        </div>
+                      </form>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="bg-gray-50 dark:bg-gray-900 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+                <button
+                  type="button"
+                  className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm disabled:cursor-not-allowed disabled:bg-gray-600"
+                  disabled={formik.isSubmitting}
+                  onClick={() => {
+                    formik.submitForm();
+                  }}
+                >
+                  {formik.isSubmitting ? "Saving..." : "Confirm"}
+                </button>
+                <button
+                  type="button"
+                  className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-700 shadow-sm px-4 py-2 text-base font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+                  onClick={() => {
+                    setOpen(false);
+                    onCancel();
+                  }}
+                  ref={cancelButtonRef}
+                >
+                  Cancel
+                </button>
+              </div>
+            </div>
+          </Transition.Child>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+}
diff --git a/apps/web/components/entity/empty-state.tsx b/apps/web/components/entity/empty-state.tsx
index aec78af..74ca515 100644
--- a/apps/web/components/entity/empty-state.tsx
+++ b/apps/web/components/entity/empty-state.tsx
@@ -16,6 +16,15 @@ export function EntityEmptyState({
   buttonLabel,
   disabled = false,
   footer = null,
+  onButtonClick,
+}: {
+  title: string;
+  message: string;
+  buttonLink?: string;
+  buttonLabel?: string;
+  disabled?: boolean;
+  footer?: React.ReactNode;
+  onButtonClick?: () => void;
 }) {
   return (
     <div className="text-center h-96 flex flex-col items-center justify-center">
@@ -38,7 +47,7 @@ export function EntityEmptyState({
         {title}
       </h3>
       <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{message}</p>
-      {!disabled && (
+      {!disabled && buttonLabel && buttonLink ? (
         <div className="mt-6">
           <Link
             href={buttonLink}
@@ -47,7 +56,18 @@ export function EntityEmptyState({
             {buttonLabel}
           </Link>
         </div>
-      )}
+      ) : null}
+      {onButtonClick && buttonLabel ? (
+        <div className="mt-6">
+          <button
+            onClick={onButtonClick}
+            className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-lg font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+            disabled={disabled}
+          >
+            {buttonLabel}
+          </button>
+        </div>
+      ) : null}
       {footer}
     </div>
   );
diff --git a/apps/web/components/layout/header.component.tsx b/apps/web/components/layout/header.component.tsx
index 8660ada..39b35ba 100644
--- a/apps/web/components/layout/header.component.tsx
+++ b/apps/web/components/layout/header.component.tsx
@@ -27,6 +27,7 @@ export default function HeaderComponent() {
       if (billingDetails?.has_active_subscription) {
         return [
           { name: "Pages", href: ROUTES.PAGES },
+          { name: "Teams", href: ROUTES.TEAMS },
           { name: "Zapier", href: ROUTES.ZAPIER },
           { name: "Billing", href: ROUTES.BILLING },
           { name: "Support", href: ROUTES.SUPPORT, external: true },
diff --git a/apps/web/data/routes.data.ts b/apps/web/data/routes.data.ts
index 6a21fc5..798531d 100644
--- a/apps/web/data/routes.data.ts
+++ b/apps/web/data/routes.data.ts
@@ -12,6 +12,9 @@ export const ROUTES = {
   PAGES: "/pages",
   NEW_PAGE: "/pages/new",
 
+  // teams
+  TEAMS: "/teams",
+
   // account
   BILLING: "/account/billing",
 
diff --git a/apps/web/data/schema.ts b/apps/web/data/schema.ts
index 7d28b24..ff97989 100644
--- a/apps/web/data/schema.ts
+++ b/apps/web/data/schema.ts
@@ -39,4 +39,9 @@ export const NewPostSchema = object().shape({
   allow_reactions: boolean(),
   email_notified: boolean(),
   notes: string().optional().nullable(),
-});
\ No newline at end of file
+});
+
+export const NewTeamSchema = object().shape({
+  name: string().required("Name is required").min(3, "Name must be at least 3 characters long"),
+  image: string().optional().nullable(),
+});
diff --git a/apps/web/pages/_app.tsx b/apps/web/pages/_app.tsx
index 7e2f09d..2efebb2 100644
--- a/apps/web/pages/_app.tsx
+++ b/apps/web/pages/_app.tsx
@@ -3,9 +3,7 @@ import { SessionContextProvider } from "@supabase/auth-helpers-react";
 import { Analytics } from "@vercel/analytics/react";
 import localFont from "next/font/local";
 import Head from "next/head";
-import { useRouter } from "next/router";
-import Script from "next/script";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import "../styles/global.css";
 import { UserContextProvider } from "../utils/useUser";
 
@@ -26,22 +24,6 @@ export default function App({ Component, pageProps }) {
   const getLayout = Component.getLayout || ((page) => page);
   const [supabaseClient] = useState(() => createPagesBrowserClient());
 
-  const router = useRouter();
-  const googleTagId = "AW-11500375049";
-
-  useEffect(() => {
-    const handleRouteChange = (url: string) => {
-      // @ts-ignore
-      window.gtag("config", googleTagId, {
-        page_path: url,
-      });
-    };
-    router.events.on("routeChangeComplete", handleRouteChange);
-    return () => {
-      router.events.off("routeChangeComplete", handleRouteChange);
-    };
-  }, [router.events, googleTagId]);
-
   return (
     <>
       <Head>
@@ -55,24 +37,6 @@ export default function App({ Component, pageProps }) {
           --geist-font: ${geist.style.fontFamily};
         }
       `}</style>
-      <Script
-        strategy="afterInteractive"
-        src={`https://www.googletagmanager.com/gtag/js?id=${googleTagId}`}
-      />
-      <Script
-        id="google-ads-init"
-        strategy="afterInteractive"
-        dangerouslySetInnerHTML={{
-          __html: `
-            window.dataLayer = window.dataLayer || [];
-            function gtag(){dataLayer.push(arguments);}
-            gtag('js', new Date());
-            gtag('config', '${googleTagId}', {
-              send_page_view: false
-            });
-          `,
-        }}
-      />
       <SessionContextProvider
         supabaseClient={supabaseClient}
         initialSession={pageProps.initialSession}
diff --git a/apps/web/pages/pages/index.tsx b/apps/web/pages/pages/index.tsx
index 84166ca..c8d3c3b 100644
--- a/apps/web/pages/pages/index.tsx
+++ b/apps/web/pages/pages/index.tsx
@@ -67,7 +67,7 @@ export default function Pages({
         <div className="overflow-hidden sm:rounded-md">
           {!pages.length && (
             <EntityEmptyState
-              title=" No pages yet!"
+              title="No pages yet!"
               message="Get started by creating your first page."
               buttonLink={
                 billingDetails?.has_active_subscription
@@ -167,4 +167,3 @@ export default function Pages({
 }
 
 Pages.getLayout = (page: JSX.Element) => <AuthLayout>{page}</AuthLayout>;
-Pages.getLayout = (page: JSX.Element) => <AuthLayout>{page}</AuthLayout>;
diff --git a/apps/web/pages/teams/index.tsx b/apps/web/pages/teams/index.tsx
new file mode 100644
index 0000000..494093b
--- /dev/null
+++ b/apps/web/pages/teams/index.tsx
@@ -0,0 +1,419 @@
+import { IPage } from "@changes-page/supabase/types/page";
+import { SpinnerWithSpacing } from "@changes-page/ui";
+import { CheckCircleIcon, UserIcon } from "@heroicons/react/solid";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import { useHotkeys } from "react-hotkeys-hook";
+import {
+  PrimaryButton,
+  SecondaryButton,
+} from "../../components/core/buttons.component";
+import { notifyError } from "../../components/core/toast.component";
+import ConfirmDeleteDialog from "../../components/dialogs/confirm-delete-dialog.component";
+import ManageTeamDialog from "../../components/dialogs/manage-team-dialog.component";
+import { EntityEmptyState } from "../../components/entity/empty-state";
+import AuthLayout from "../../components/layout/auth-layout.component";
+import Page from "../../components/layout/page.component";
+import Changelog from "../../components/marketing/changelog";
+import { useUserData } from "../../utils/useUser";
+
+export default function Teams() {
+  const { billingDetails } = useUserData();
+  const router = useRouter();
+  const { supabase } = useUserData();
+
+  const [teams, setTeams] = useState([]);
+  const [showTeamModal, setShowTeamModal] = useState(false);
+  const [selectedTeam, setSelectedTeam] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [teamToDelete, setTeamToDelete] = useState(null);
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const [pages, setPages] = useState([]);
+  const [showAssignPage, setShowAssignPage] = useState<string | null>(null);
+  const [selectedPage, setSelectedPage] = useState(null);
+  const [assigningPage, setAssigningPage] = useState(false);
+
+  const fetchTeams = async () => {
+    setIsLoading(true);
+
+    const { data: teams, error: fetchError } = await supabase
+      .from("teams")
+      .select(
+        `
+        *,
+        pages (
+          id,
+          title,
+          created_at
+        ),
+        team_members (
+          id,
+          user_id,
+          role
+        ),
+        team_invitations (
+          id,
+          email,
+          role,
+          created_at
+        )
+      `
+      )
+      .order("created_at", { ascending: false });
+
+    const { data: pages, error: pagesError } = await supabase
+      .from("pages")
+      .select("*");
+
+    console.log(teams);
+    setTeams(teams ?? []);
+    setPages(pages ?? []);
+
+    if (fetchError) {
+      notifyError("Failed to fetch teams");
+    }
+
+    if (pagesError) {
+      notifyError("Failed to fetch pages");
+    }
+
+    setIsLoading(false);
+  };
+
+  useEffect(() => {
+    fetchTeams();
+  }, []);
+
+  useHotkeys(
+    "n",
+    () => {
+      setSelectedTeam(null);
+      setShowTeamModal(true);
+    },
+    [router]
+  );
+
+  const deleteTeam = async (teamId: string) => {
+    setIsDeleting(true);
+    const { error } = await supabase
+      .from("teams")
+      .delete()
+      .match({ id: teamId });
+
+    if (error) {
+      notifyError("Failed to delete team");
+      return;
+    }
+
+    fetchTeams();
+    setTeamToDelete(null);
+    setIsDeleting(false);
+  };
+
+  return (
+    <>
+      <Page
+        title={"My Teams"}
+        buttons={
+          <PrimaryButton
+            keyboardShortcut="N"
+            label="New"
+            onClick={() => setShowTeamModal(true)}
+            disabled={!billingDetails?.has_active_subscription}
+          />
+        }
+      >
+        {billingDetails?.has_active_subscription ? <Changelog /> : null}
+
+        <div className="overflow-hidden sm:rounded-md">
+          {isLoading ? (
+            <SpinnerWithSpacing />
+          ) : !teams.length ? (
+            <EntityEmptyState
+              title="No teams yet!"
+              message="Get started by creating your first team."
+              disabled={!billingDetails?.has_active_subscription}
+              buttonLabel={
+                billingDetails?.has_active_subscription
+                  ? "Create New Team"
+                  : "Start Free Trial"
+              }
+              onButtonClick={() => setShowTeamModal(true)}
+            />
+          ) : (
+            <div>
+              {teams.map((team) => (
+                <div
+                  key={team.id}
+                  className="overflow-hidden bg-white dark:bg-gray-800 shadow sm:rounded-lg mb-8"
+                >
+                  <div className="px-4 py-6 sm:px-6">
+                    <div className="flex items-center gap-4">
+                      {team.image ? (
+                        <img
+                          src={team.image}
+                          alt={team.name}
+                          className="h-12 w-12 rounded-full object-cover"
+                        />
+                      ) : (
+                        <div className="h-12 w-12 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
+                          <UserIcon className="h-6 w-6 text-gray-400 dark:text-gray-500" />
+                        </div>
+                      )}
+                      <div>
+                        <h3 className="text-base/7 font-semibold text-gray-900 dark:text-gray-100">
+                          {team.name}
+                        </h3>
+                        <div className="flex space-x-4 mt-1">
+                          <button
+                            type="button"
+                            onClick={() => {
+                              setSelectedTeam(team);
+                              setShowTeamModal(true);
+                            }}
+                            className="inline-flex items-center rounded-md bg-white dark:bg-gray-700 px-2.5 py-1.5 text-sm font-semibold text-gray-900 dark:text-gray-100 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600"
+                          >
+                            Edit
+                          </button>
+                          <button
+                            type="button"
+                            onClick={() => setTeamToDelete(team)}
+                            className="inline-flex items-center rounded-md bg-red-50 dark:bg-red-900/20 px-2.5 py-1.5 text-sm font-semibold text-red-700 dark:text-red-400 shadow-sm ring-1 ring-inset ring-red-600/10 dark:ring-red-500/20 hover:bg-red-100 dark:hover:bg-red-900/30"
+                          >
+                            Delete
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="border-t border-gray-100 dark:border-gray-700">
+                    <dl className="divide-y divide-gray-100 dark:divide-gray-700">
+                      <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                        <dt className="text-sm/6 font-semibold text-gray-900 dark:text-gray-100">
+                          Pages
+                        </dt>
+                        <dd className="mt-2 text-sm text-gray-900 dark:text-gray-100 sm:col-span-2 sm:mt-0">
+                          <div className="text-gray-500 dark:text-gray-400">
+                            {team.pages?.length > 0 ? (
+                              <ul
+                                role="list"
+                                className="divide-y divide-gray-100 dark:divide-gray-700 rounded-md border border-gray-200 dark:border-gray-700"
+                              >
+                                {team.pages?.map(
+                                  (page: Pick<IPage, "title" | "id">) => (
+                                    <li
+                                      key={page.id}
+                                      className="flex items-center justify-between p-2 text-sm/6"
+                                    >
+                                      <div className="flex w-0 flex-1 items-center">
+                                        <CheckCircleIcon
+                                          aria-hidden="true"
+                                          className="size-5 shrink-0 text-green-500 dark:text-green-400"
+                                        />
+                                        <div className="ml-4 flex min-w-0 flex-1 gap-2">
+                                          <span className="truncate font-medium">
+                                            {page.title}
+                                          </span>
+                                        </div>
+                                      </div>
+                                      <div className="ml-4 shrink-0">
+                                        <button
+                                          className="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300"
+                                          onClick={async () => {
+                                            await supabase
+                                              .from("pages")
+                                              .update({
+                                                team_id: null,
+                                              })
+                                              .match({ id: page.id });
+
+                                            fetchTeams();
+                                          }}
+                                        >
+                                          Remove
+                                        </button>
+                                      </div>
+                                    </li>
+                                  )
+                                )}
+                              </ul>
+                            ) : (
+                              <p>
+                                No pages yet, add one to share with your team.
+                                <br />
+                                Once shared, all team members will have complete
+                                access to the page.
+                              </p>
+                            )}
+
+                            <div className="mt-2">
+                              {showAssignPage === team.id ? (
+                                <div className="flex">
+                                  <select
+                                    id="type"
+                                    name="type"
+                                    className="block w-full pl-3 pr-10 py-2 text-base dark:text-gray-100 dark:bg-gray-800 border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md max-w-sm"
+                                    onChange={(e) =>
+                                      setSelectedPage(e.target.value)
+                                    }
+                                  >
+                                    <option value="">Select a page</option>
+                                    {pages
+                                      .filter(
+                                        (page) =>
+                                          !team.pages.some(
+                                            (p: Pick<IPage, "id">) =>
+                                              p.id === page.id
+                                          )
+                                      )
+                                      .map((page) => (
+                                        <option key={page.id} value={page.id}>
+                                          {page.title}
+                                        </option>
+                                      ))}
+                                  </select>
+
+                                  <PrimaryButton
+                                    label={
+                                      assigningPage ? "Assigning..." : "Assign"
+                                    }
+                                    disabled={assigningPage}
+                                    className="ml-2 h-8"
+                                    onClick={async () => {
+                                      if (!selectedPage) {
+                                        return;
+                                      }
+
+                                      setAssigningPage(true);
+
+                                      await supabase
+                                        .from("pages")
+                                        .update({
+                                          team_id: team.id,
+                                        })
+                                        .match({ id: selectedPage });
+
+                                      fetchTeams();
+                                      setAssigningPage(null);
+                                      setShowAssignPage(null);
+                                      setSelectedPage(null);
+                                    }}
+                                  />
+
+                                  <SecondaryButton
+                                    label="Cancel"
+                                    className="ml-2 h-8"
+                                    onClick={() => setShowAssignPage(null)}
+                                  />
+                                </div>
+                              ) : (
+                                <PrimaryButton
+                                  label="Add page to team"
+                                  className="h-8"
+                                  onClick={() => setShowAssignPage(team.id)}
+                                />
+                              )}
+                            </div>
+                          </div>
+                        </dd>
+
+                        <dt className="text-sm/6 font-semibold text-gray-900 dark:text-gray-100 mt-4">
+                          Invites
+                        </dt>
+                        <dd className="mt-2 text-sm text-gray-900 dark:text-gray-100 sm:col-span-2 sm:mt-4">
+                          <PrimaryButton
+                            label="Invite team member"
+                            className="h-8"
+                          />
+                        </dd>
+
+                        <dt className="text-sm/6 font-semibold text-gray-900 dark:text-gray-100 mt-4">
+                          Members
+                        </dt>
+                        {team.team_members?.length > 0 ? (
+                          <dd className="mt-2 text-sm text-gray-900 dark:text-gray-100 sm:col-span-2 sm:mt-4">
+                            <ul
+                              role="list"
+                              className="divide-y divide-gray-100 dark:divide-gray-700 rounded-md border border-gray-200 dark:border-gray-700"
+                            >
+                              {team.team_members?.map(
+                                (member: {
+                                  id: string;
+                                  user_id: string;
+                                  role: string;
+                                }) => (
+                                  <li
+                                    key={member.id}
+                                    className="flex items-center justify-between p-2 text-sm/6"
+                                  >
+                                    <div className="flex w-0 flex-1 items-center">
+                                      <UserIcon
+                                        aria-hidden="true"
+                                        className="size-5 shrink-0 text-gray-400 dark:text-gray-500"
+                                      />
+                                      <div className="ml-4 flex min-w-0 flex-1 gap-2">
+                                        <span className="truncate font-medium">
+                                          {member.user_id}
+                                        </span>
+                                        <span className="shrink-0 text-gray-400 dark:text-gray-500 uppercase font-semibold">
+                                          {member.role}
+                                        </span>
+                                      </div>
+                                    </div>
+                                    <div className="ml-4 shrink-0">
+                                      <a
+                                        href="#"
+                                        className="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300"
+                                      >
+                                        Remove
+                                      </a>
+                                    </div>
+                                  </li>
+                                )
+                              )}
+                            </ul>
+                          </dd>
+                        ) : (
+                          <dd className="mt-2 text-sm text-gray-900 dark:text-gray-100 sm:col-span-2 sm:mt-4">
+                            No members yet
+                          </dd>
+                        )}
+                      </div>
+                    </dl>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </Page>
+
+      <ManageTeamDialog
+        open={showTeamModal}
+        setOpen={setShowTeamModal}
+        team={selectedTeam}
+        onSuccess={() => {
+          fetchTeams();
+          setShowTeamModal(false);
+          setSelectedTeam(null);
+        }}
+        onCancel={() => {
+          setSelectedTeam(null);
+        }}
+      />
+
+      <ConfirmDeleteDialog
+        open={!!teamToDelete}
+        setOpen={() => setTeamToDelete(null)}
+        deleteCallback={() => deleteTeam(teamToDelete?.id)}
+        itemName={teamToDelete?.name}
+        highRiskAction
+        riskVerificationText={teamToDelete?.name}
+        processing={isDeleting}
+      />
+    </>
+  );
+}
+
+Teams.getLayout = (page: JSX.Element) => <AuthLayout>{page}</AuthLayout>;
diff --git a/apps/web/utils/useDatabase.ts b/apps/web/utils/useDatabase.ts
index babb1a2..a775484 100644
--- a/apps/web/utils/useDatabase.ts
+++ b/apps/web/utils/useDatabase.ts
@@ -214,7 +214,7 @@ export const createOrRetrievePageSettings = async (
     .from("page_settings")
     .select("*")
     .eq("page_id", page_id)
-    .eq("user_id", user_id)
+    // .eq("user_id", user_id)
     .single();
 
   if (pageSettings) return pageSettings;
diff --git a/packages/supabase/migrations/16_teams.sql b/packages/supabase/migrations/16_teams.sql
new file mode 100644
index 0000000..23ea0fb
--- /dev/null
+++ b/packages/supabase/migrations/16_teams.sql
@@ -0,0 +1,71 @@
+create table teams (
+  id uuid default uuid_generate_v4() primary key,
+  owner_id uuid references users not null,
+  name text not null,
+  image text,
+  metadata jsonb,
+  created_at timestamp with time zone default timezone('utc'::text, now()) not null,
+  updated_at timestamp with time zone default timezone('utc'::text, now()) not null
+);
+
+alter table teams add constraint name_length check (length(name) >= 3);
+
+alter table teams enable row level security;
+create policy "Can insert teams." on teams for insert with check (auth.uid() = owner_id);
+create policy "Can view own teams." on teams for select using (auth.uid() = owner_id);
+create policy "Can update own teams." on teams for update using (auth.uid() = owner_id);
+create policy "Can delete own teams." on teams for delete using (auth.uid() = owner_id);
+
+CREATE TRIGGER set_timestamp
+BEFORE UPDATE ON teams
+FOR EACH ROW
+EXECUTE PROCEDURE trigger_set_timestamp();
+
+create table team_members (
+  id uuid default uuid_generate_v4() primary key,
+  team_id uuid references teams not null,
+  user_id uuid references users not null,
+  role text not null,
+  created_at timestamp with time zone default timezone('utc'::text, now()) not null,
+  updated_at timestamp with time zone default timezone('utc'::text, now()) not null
+);
+
+alter table team_members enable row level security;
+create policy "Owner can view own team members." on team_members for select using (team_id in (select id from teams where owner_id = auth.uid()));
+create policy "Owner can delete own team members." on team_members for delete using (team_id in (select id from teams where owner_id = auth.uid()));
+create policy "Team members can view their membership." on team_members for select using (user_id = auth.uid());
+
+CREATE TRIGGER set_timestamp
+BEFORE UPDATE ON team_members
+FOR EACH ROW
+EXECUTE PROCEDURE trigger_set_timestamp();
+
+create table team_invitations (
+  id uuid default uuid_generate_v4() primary key,
+  team_id uuid references teams not null,
+  inviter_id uuid references users not null,
+  email text not null,
+  role text not null,
+  status text not null,
+  expires_at timestamp with time zone not null default timezone('utc'::text, now() + interval '1 day'),
+  created_at timestamp with time zone default timezone('utc'::text, now()) not null,
+  updated_at timestamp with time zone default timezone('utc'::text, now()) not null
+);
+
+alter table team_invitations enable row level security;
+create policy "Can insert team invitations." on team_invitations for insert with check (auth.uid() = inviter_id);
+create policy "Can view own team invitations." on team_invitations for select using (auth.uid() = inviter_id);
+create policy "Can delete own team invitations." on team_invitations for delete using (auth.uid() = inviter_id);
+
+CREATE TRIGGER set_timestamp
+BEFORE UPDATE ON team_invitations
+FOR EACH ROW
+EXECUTE PROCEDURE trigger_set_timestamp();
+
+-- Alter pages table to add team_id
+alter table pages add column team_id uuid references teams on delete set null;
+
+-- Teams members can view pages in their team and posts in those pages
+create policy "Can view pages in own team." on pages for select using (team_id in (select team_id from team_members where user_id = auth.uid()));
+create policy "Can view page_settings in own team." on page_settings for select using (page_id in (select id from pages));
+create policy "Can view posts in own team." on posts for select using (page_id in (select id from pages));
diff --git a/packages/supabase/types/index.ts b/packages/supabase/types/index.ts
index 285dd59..1d6f1cd 100644
--- a/packages/supabase/types/index.ts
+++ b/packages/supabase/types/index.ts
@@ -203,6 +203,7 @@ export type Database = {
           created_at: string
           description: string | null
           id: string
+          team_id: string | null
           title: string
           type: Database["public"]["Enums"]["page_type"]
           updated_at: string
@@ -213,6 +214,7 @@ export type Database = {
           created_at?: string
           description?: string | null
           id?: string
+          team_id?: string | null
           title: string
           type: Database["public"]["Enums"]["page_type"]
           updated_at?: string
@@ -223,13 +225,22 @@ export type Database = {
           created_at?: string
           description?: string | null
           id?: string
+          team_id?: string | null
           title?: string
           type?: Database["public"]["Enums"]["page_type"]
           updated_at?: string
           url_slug?: string | null
           user_id?: string
         }
-        Relationships: []
+        Relationships: [
+          {
+            foreignKeyName: "pages_team_id_fkey"
+            columns: ["team_id"]
+            isOneToOne: false
+            referencedRelation: "teams"
+            referencedColumns: ["id"]
+          },
+        ]
       }
       post_reactions: {
         Row: {
@@ -337,6 +348,137 @@ export type Database = {
           },
         ]
       }
+      team_invitations: {
+        Row: {
+          created_at: string
+          email: string
+          expires_at: string
+          id: string
+          inviter_id: string
+          role: string
+          status: string
+          team_id: string
+          updated_at: string
+        }
+        Insert: {
+          created_at?: string
+          email: string
+          expires_at?: string
+          id?: string
+          inviter_id: string
+          role: string
+          status: string
+          team_id: string
+          updated_at?: string
+        }
+        Update: {
+          created_at?: string
+          email?: string
+          expires_at?: string
+          id?: string
+          inviter_id?: string
+          role?: string
+          status?: string
+          team_id?: string
+          updated_at?: string
+        }
+        Relationships: [
+          {
+            foreignKeyName: "team_invitations_inviter_id_fkey"
+            columns: ["inviter_id"]
+            isOneToOne: false
+            referencedRelation: "users"
+            referencedColumns: ["id"]
+          },
+          {
+            foreignKeyName: "team_invitations_team_id_fkey"
+            columns: ["team_id"]
+            isOneToOne: false
+            referencedRelation: "teams"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
+      team_members: {
+        Row: {
+          created_at: string
+          id: string
+          role: string
+          team_id: string
+          updated_at: string
+          user_id: string
+        }
+        Insert: {
+          created_at?: string
+          id?: string
+          role: string
+          team_id: string
+          updated_at?: string
+          user_id: string
+        }
+        Update: {
+          created_at?: string
+          id?: string
+          role?: string
+          team_id?: string
+          updated_at?: string
+          user_id?: string
+        }
+        Relationships: [
+          {
+            foreignKeyName: "team_members_team_id_fkey"
+            columns: ["team_id"]
+            isOneToOne: false
+            referencedRelation: "teams"
+            referencedColumns: ["id"]
+          },
+          {
+            foreignKeyName: "team_members_user_id_fkey"
+            columns: ["user_id"]
+            isOneToOne: false
+            referencedRelation: "users"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
+      teams: {
+        Row: {
+          created_at: string
+          id: string
+          image: string | null
+          metadata: Json | null
+          name: string
+          owner_id: string
+          updated_at: string
+        }
+        Insert: {
+          created_at?: string
+          id?: string
+          image?: string | null
+          metadata?: Json | null
+          name: string
+          owner_id: string
+          updated_at?: string
+        }
+        Update: {
+          created_at?: string
+          id?: string
+          image?: string | null
+          metadata?: Json | null
+          name?: string
+          owner_id?: string
+          updated_at?: string
+        }
+        Relationships: [
+          {
+            foreignKeyName: "teams_owner_id_fkey"
+            columns: ["owner_id"]
+            isOneToOne: false
+            referencedRelation: "users"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
       users: {
         Row: {
           avatar_url: string | null
diff --git a/packages/supabase/types/page.ts b/packages/supabase/types/page.ts
index 1c38b3b..d4db597 100644
--- a/packages/supabase/types/page.ts
+++ b/packages/supabase/types/page.ts
@@ -7,6 +7,10 @@ export type IPost = Database["public"]["Tables"]["posts"]["Row"];
 export type IPageEmailSubscriber =
   Database["public"]["Tables"]["page_email_subscribers"]["Row"];
 export type IPageView = Database["public"]["Tables"]["page_views"]["Row"];
+export type ITeam = Database["public"]["Tables"]["teams"]["Row"];
+export type ITeamMember = Database["public"]["Tables"]["team_members"]["Row"];
+export type ITeamInvitation =
+  Database["public"]["Tables"]["team_invitations"]["Row"];
 
 export enum PageType {
   changelogs = "changelogs",

From 9828f15c4cceda41e6a2b62b08930df00789b78e Mon Sep 17 00:00:00 2001
From: Arjun Komath <arjun@hey.com>
Date: Sun, 9 Feb 2025 10:01:28 +1100
Subject: [PATCH 02/24] Refactor page settings to support team-based access and
 remove user_id dependency

---
 .../integrations/zapier/trigger-new-post.tsx  |  5 +---
 apps/web/pages/api/pages/settings/index.ts    |  4 +--
 apps/web/pages/api/pages/webhook.ts           |  4 +--
 apps/web/pages/api/posts/webhook.ts           |  4 +--
 apps/web/pages/pages/[page_id]/[post_id].tsx  |  4 +--
 apps/web/pages/pages/[page_id]/index.tsx      |  4 +--
 apps/web/pages/pages/[page_id]/new.tsx        |  4 +--
 .../pages/[page_id]/settings/[activeTab].tsx  |  4 +--
 apps/web/pages/pages/index.tsx                | 25 +++++++++++--------
 apps/web/utils/useDatabase.ts                 |  5 ++--
 packages/supabase/migrations/16_teams.sql     | 14 +++++++++--
 packages/supabase/types/index.ts              |  3 ---
 12 files changed, 42 insertions(+), 38 deletions(-)

diff --git a/apps/web/pages/api/integrations/zapier/trigger-new-post.tsx b/apps/web/pages/api/integrations/zapier/trigger-new-post.tsx
index 7a1df67..2d17308 100644
--- a/apps/web/pages/api/integrations/zapier/trigger-new-post.tsx
+++ b/apps/web/pages/api/integrations/zapier/trigger-new-post.tsx
@@ -44,10 +44,7 @@ export default async function handler(
       .order("created_at", { ascending: false })
       .range(offset, limit - 1 + offset);
 
-    const pageSettings = await createOrRetrievePageSettings(
-      pageDetails.user_id,
-      pageDetails.id
-    );
+    const pageSettings = await createOrRetrievePageSettings(pageDetails.id);
 
     const postsWithUrl = (posts ?? []).map((post: IPost) => ({
       ...post,
diff --git a/apps/web/pages/api/pages/settings/index.ts b/apps/web/pages/api/pages/settings/index.ts
index c1fb9a9..72ba978 100644
--- a/apps/web/pages/api/pages/settings/index.ts
+++ b/apps/web/pages/api/pages/settings/index.ts
@@ -1,6 +1,6 @@
-import type { NextApiRequest, NextApiResponse } from "next";
 import { IErrorResponse } from "@changes-page/supabase/types/api";
 import { IPageSettings } from "@changes-page/supabase/types/page";
+import type { NextApiRequest, NextApiResponse } from "next";
 import { getSupabaseServerClient } from "../../../../utils/supabase/supabase-admin";
 import { createOrRetrievePageSettings } from "../../../../utils/useDatabase";
 
@@ -16,7 +16,7 @@ const getPageSettings = async (
 
       console.log("getPageSettings", user?.id);
 
-      const data = await createOrRetrievePageSettings(user.id, String(page_id));
+      const data = await createOrRetrievePageSettings(String(page_id));
 
       return res.status(200).json(data);
     } catch (err) {
diff --git a/apps/web/pages/api/pages/webhook.ts b/apps/web/pages/api/pages/webhook.ts
index 7fd3a44..3ea9aad 100644
--- a/apps/web/pages/api/pages/webhook.ts
+++ b/apps/web/pages/api/pages/webhook.ts
@@ -1,6 +1,6 @@
+import { IPage } from "@changes-page/supabase/types/page";
 import { NextApiRequest, NextApiResponse } from "next";
 import { v4 } from "uuid";
-import { IPage } from "@changes-page/supabase/types/page";
 import { revalidatePage } from "../../../utils/revalidate";
 import {
   createOrRetrievePageSettings,
@@ -30,7 +30,7 @@ const databaseWebhook = async (req: NextApiRequest, res: NextApiResponse) => {
       await revalidatePage(page.url_slug);
 
       try {
-        const settings = await createOrRetrievePageSettings(user_id, page.id);
+        const settings = await createOrRetrievePageSettings(page.id);
         if (settings?.custom_domain) {
           await revalidatePage(settings.custom_domain);
         }
diff --git a/apps/web/pages/api/posts/webhook.ts b/apps/web/pages/api/posts/webhook.ts
index df7e290..7b578a9 100644
--- a/apps/web/pages/api/posts/webhook.ts
+++ b/apps/web/pages/api/posts/webhook.ts
@@ -39,7 +39,7 @@ const databaseWebhook = async (req: NextApiRequest, res: NextApiResponse) => {
 
         try {
           const page = await getPageById(page_id);
-          const settings = await createOrRetrievePageSettings(user_id, page_id);
+          const settings = await createOrRetrievePageSettings(page_id);
           // Revalidate
           await revalidatePage(page.url_slug);
           if (settings?.custom_domain) {
@@ -56,7 +56,7 @@ const databaseWebhook = async (req: NextApiRequest, res: NextApiResponse) => {
       }
 
       const page = await getPageById(page_id);
-      const settings = await createOrRetrievePageSettings(user_id, page_id);
+      const settings = await createOrRetrievePageSettings(page_id);
 
       /**
        * BE VERY CAREFUL, THIS IS A VERY IMPORTANT LOGIC
diff --git a/apps/web/pages/pages/[page_id]/[post_id].tsx b/apps/web/pages/pages/[page_id]/[post_id].tsx
index d03bfac..b65eaf2 100644
--- a/apps/web/pages/pages/[page_id]/[post_id].tsx
+++ b/apps/web/pages/pages/[page_id]/[post_id].tsx
@@ -18,8 +18,8 @@ import { useUserData } from "../../../utils/useUser";
 export async function getServerSideProps({ params, req, res }) {
   const { page_id, post_id } = params;
 
-  const { supabase, user } = await getSupabaseServerClient({ req, res });
-  const settings = await createOrRetrievePageSettings(user.id, String(page_id));
+  const { supabase } = await getSupabaseServerClient({ req, res });
+  const settings = await createOrRetrievePageSettings(String(page_id));
   const { data: post } = await supabase
     .from("posts")
     .select("*")
diff --git a/apps/web/pages/pages/[page_id]/index.tsx b/apps/web/pages/pages/[page_id]/index.tsx
index 6c36068..8d8e36a 100644
--- a/apps/web/pages/pages/[page_id]/index.tsx
+++ b/apps/web/pages/pages/[page_id]/index.tsx
@@ -49,7 +49,7 @@ import { useUserData } from "../../../utils/useUser";
 export async function getServerSideProps({ req, res, params }) {
   const { page_id } = params;
 
-  const { user, supabase } = await getSupabaseServerClient({ req, res });
+  const { supabase } = await getSupabaseServerClient({ req, res });
   const page = await getPage(supabase, page_id).catch((e) => {
     console.error("Failed to get page", e);
     return null;
@@ -61,7 +61,7 @@ export async function getServerSideProps({ req, res, params }) {
     };
   }
 
-  const settings = await createOrRetrievePageSettings(user.id, String(page_id));
+  const settings = await createOrRetrievePageSettings(String(page_id));
 
   return {
     props: {
diff --git a/apps/web/pages/pages/[page_id]/new.tsx b/apps/web/pages/pages/[page_id]/new.tsx
index fecb9c5..719eb97 100644
--- a/apps/web/pages/pages/[page_id]/new.tsx
+++ b/apps/web/pages/pages/[page_id]/new.tsx
@@ -13,14 +13,12 @@ import { ROUTES } from "../../../data/routes.data";
 import { NewPostSchema } from "../../../data/schema";
 import { track } from "../../../utils/analytics";
 import { httpPost } from "../../../utils/http";
-import { getSupabaseServerClient } from "../../../utils/supabase/supabase-admin";
 import { createOrRetrievePageSettings } from "../../../utils/useDatabase";
 
 export async function getServerSideProps({ params, req, res }) {
   const { page_id } = params;
 
-  const { user } = await getSupabaseServerClient({ req, res });
-  const settings = await createOrRetrievePageSettings(user.id, String(page_id));
+  const settings = await createOrRetrievePageSettings(String(page_id));
 
   return {
     props: {
diff --git a/apps/web/pages/pages/[page_id]/settings/[activeTab].tsx b/apps/web/pages/pages/[page_id]/settings/[activeTab].tsx
index abe7c67..0e4cb0a 100644
--- a/apps/web/pages/pages/[page_id]/settings/[activeTab].tsx
+++ b/apps/web/pages/pages/[page_id]/settings/[activeTab].tsx
@@ -24,9 +24,9 @@ const IntegrationsSettings = dynamic(
 export async function getServerSideProps({ req, res, params }) {
   const { page_id } = params;
 
-  const { user, supabase } = await getSupabaseServerClient({ req, res });
+  const { supabase } = await getSupabaseServerClient({ req, res });
   const page = await getPage(supabase, page_id);
-  const settings = await createOrRetrievePageSettings(user.id, String(page_id));
+  const settings = await createOrRetrievePageSettings(String(page_id));
 
   return {
     props: {
diff --git a/apps/web/pages/pages/index.tsx b/apps/web/pages/pages/index.tsx
index c8d3c3b..561b57d 100644
--- a/apps/web/pages/pages/index.tsx
+++ b/apps/web/pages/pages/index.tsx
@@ -1,5 +1,5 @@
 import { PageType, PageTypeToLabel } from "@changes-page/supabase/types/page";
-import { PlusIcon } from "@heroicons/react/solid";
+import { PlusIcon, UserGroupIcon, UserIcon } from "@heroicons/react/solid";
 import classNames from "classnames";
 import { GetServerSidePropsContext, InferGetServerSidePropsType } from "next";
 import { useRouter } from "next/router";
@@ -36,7 +36,7 @@ export default function Pages({
   pages,
   error,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) {
-  const { billingDetails } = useUserData();
+  const { billingDetails, user } = useUserData();
   const router = useRouter();
   useHotkeys("n", () => router.push(ROUTES.NEW_PAGE), [router]);
 
@@ -144,17 +144,20 @@ export default function Pages({
                     </p>
                   </div>
                   <span
-                    className="pointer-events-none absolute top-6 right-6 text-gray-300 dark:text-gray-600 group-hover:text-indigo-400"
+                    className="pointer-events-none absolute top-6 right-6 text-gray-500 dark:text-gray-400 group-hover:text-indigo-400"
                     aria-hidden="true"
                   >
-                    <svg
-                      className="h-6 w-6"
-                      xmlns="http://www.w3.org/2000/svg"
-                      fill="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path d="M20 4h1a1 1 0 00-1-1v1zm-1 12a1 1 0 102 0h-2zM8 3a1 1 0 000 2V3zM3.293 19.293a1 1 0 101.414 1.414l-1.414-1.414zM19 4v12h2V4h-2zm1-1H8v2h12V3zm-.707.293l-16 16 1.414 1.414 16-16-1.414-1.414z" />
-                    </svg>
+                    {page.user_id !== user?.id ? (
+                      <div className="flex items-center gap-1">
+                        <UserGroupIcon className="h-4 w-4" />
+                        <span className="text-sm font-medium">Editor</span>
+                      </div>
+                    ) : (
+                      <div className="flex items-center gap-1">
+                        <UserIcon className="h-4 w-4" />
+                        <span className="text-sm font-medium">Owner</span>
+                      </div>
+                    )}
                   </span>
                 </div>
               ))}
diff --git a/apps/web/utils/useDatabase.ts b/apps/web/utils/useDatabase.ts
index a775484..b1646da 100644
--- a/apps/web/utils/useDatabase.ts
+++ b/apps/web/utils/useDatabase.ts
@@ -207,14 +207,12 @@ export const updateSubscriptionUsage = async (
 };
 
 export const createOrRetrievePageSettings = async (
-  user_id: string,
   page_id: string
 ) => {
   const { data: pageSettings } = await supabaseAdmin
     .from("page_settings")
     .select("*")
     .eq("page_id", page_id)
-    // .eq("user_id", user_id)
     .single();
 
   if (pageSettings) return pageSettings;
@@ -222,7 +220,7 @@ export const createOrRetrievePageSettings = async (
   const { data: newPageSettings, error: createPageSettingsError } =
     await supabaseAdmin
       .from("page_settings")
-      .insert([{ user_id, page_id }])
+      .insert([{ page_id }])
       .select();
 
   if (createPageSettingsError) throw createPageSettingsError;
@@ -376,3 +374,4 @@ export async function getPageAnalytics(
 
   return data as unknown as IAnalyticsData[];
 }
+
diff --git a/packages/supabase/migrations/16_teams.sql b/packages/supabase/migrations/16_teams.sql
index 23ea0fb..25ea774 100644
--- a/packages/supabase/migrations/16_teams.sql
+++ b/packages/supabase/migrations/16_teams.sql
@@ -67,5 +67,15 @@ alter table pages add column team_id uuid references teams on delete set null;
 
 -- Teams members can view pages in their team and posts in those pages
 create policy "Can view pages in own team." on pages for select using (team_id in (select team_id from team_members where user_id = auth.uid()));
-create policy "Can view page_settings in own team." on page_settings for select using (page_id in (select id from pages));
-create policy "Can view posts in own team." on posts for select using (page_id in (select id from pages));
+
+-- Update page_settings
+alter policy "Can view own page_settings." on page_settings using (page_id in (select id from pages));
+alter policy "Can update own page_settings." on page_settings using (page_id in (select id from pages));
+drop policy "Can delete own page_settings." on page_settings;
+
+alter table page_settings drop column user_id;
+
+-- Update posts
+alter policy "Can view own posts." on posts using (page_id in (select id from pages));
+alter policy "Can update own posts." on posts using (page_id in (select id from pages));
+alter policy "Can delete own posts." on posts using (page_id in (select id from pages));
\ No newline at end of file
diff --git a/packages/supabase/types/index.ts b/packages/supabase/types/index.ts
index 1d6f1cd..afeb7d3 100644
--- a/packages/supabase/types/index.ts
+++ b/packages/supabase/types/index.ts
@@ -78,7 +78,6 @@ export type Database = {
           tiktok_url: string | null
           twitter_url: string | null
           updated_at: string
-          user_id: string
           whitelabel: boolean
           youtube_url: string | null
         }
@@ -109,7 +108,6 @@ export type Database = {
           tiktok_url?: string | null
           twitter_url?: string | null
           updated_at?: string
-          user_id: string
           whitelabel?: boolean
           youtube_url?: string | null
         }
@@ -140,7 +138,6 @@ export type Database = {
           tiktok_url?: string | null
           twitter_url?: string | null
           updated_at?: string
-          user_id?: string
           whitelabel?: boolean
           youtube_url?: string | null
         }

From 294fa3337bcaab9401afefc36c972747d72569c2 Mon Sep 17 00:00:00 2001
From: Arjun Komath <arjun@hey.com>
Date: Sun, 9 Feb 2025 10:48:20 +1100
Subject: [PATCH 03/24] Enhance team management with owner and member views,
 page sharing, and team member interactions

---
 apps/web/pages/pages/index.tsx            |  15 +-
 apps/web/pages/teams/index.tsx            | 475 ++++++++++++----------
 packages/supabase/migrations/16_teams.sql |  16 +-
 3 files changed, 294 insertions(+), 212 deletions(-)

diff --git a/apps/web/pages/pages/index.tsx b/apps/web/pages/pages/index.tsx
index 561b57d..9c4d060 100644
--- a/apps/web/pages/pages/index.tsx
+++ b/apps/web/pages/pages/index.tsx
@@ -21,7 +21,14 @@ export async function getServerSideProps(ctx: GetServerSidePropsContext) {
 
   const { data: pages, error } = await supabase
     .from("pages")
-    .select("*")
+    .select(
+      `*,
+      teams (
+        id,
+        name
+      )
+      `
+    )
     .order("updated_at", { ascending: false });
 
   return {
@@ -147,10 +154,12 @@ export default function Pages({
                     className="pointer-events-none absolute top-6 right-6 text-gray-500 dark:text-gray-400 group-hover:text-indigo-400"
                     aria-hidden="true"
                   >
-                    {page.user_id !== user?.id ? (
+                    {page.teams && page.user_id !== user?.id ? (
                       <div className="flex items-center gap-1">
                         <UserGroupIcon className="h-4 w-4" />
-                        <span className="text-sm font-medium">Editor</span>
+                        <span className="text-sm font-medium">
+                          Editor ({page.teams.name})
+                        </span>
                       </div>
                     ) : (
                       <div className="flex items-center gap-1">
diff --git a/apps/web/pages/teams/index.tsx b/apps/web/pages/teams/index.tsx
index 494093b..835e8a5 100644
--- a/apps/web/pages/teams/index.tsx
+++ b/apps/web/pages/teams/index.tsx
@@ -20,7 +20,7 @@ import { useUserData } from "../../utils/useUser";
 export default function Teams() {
   const { billingDetails } = useUserData();
   const router = useRouter();
-  const { supabase } = useUserData();
+  const { user, supabase } = useUserData();
 
   const [teams, setTeams] = useState([]);
   const [showTeamModal, setShowTeamModal] = useState(false);
@@ -143,247 +143,306 @@ export default function Teams() {
             />
           ) : (
             <div>
-              {teams.map((team) => (
-                <div
-                  key={team.id}
-                  className="overflow-hidden bg-white dark:bg-gray-800 shadow sm:rounded-lg mb-8"
-                >
-                  <div className="px-4 py-6 sm:px-6">
-                    <div className="flex items-center gap-4">
-                      {team.image ? (
-                        <img
-                          src={team.image}
-                          alt={team.name}
-                          className="h-12 w-12 rounded-full object-cover"
-                        />
-                      ) : (
-                        <div className="h-12 w-12 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
-                          <UserIcon className="h-6 w-6 text-gray-400 dark:text-gray-500" />
-                        </div>
-                      )}
-                      <div>
-                        <h3 className="text-base/7 font-semibold text-gray-900 dark:text-gray-100">
-                          {team.name}
-                        </h3>
-                        <div className="flex space-x-4 mt-1">
-                          <button
-                            type="button"
-                            onClick={() => {
-                              setSelectedTeam(team);
-                              setShowTeamModal(true);
-                            }}
-                            className="inline-flex items-center rounded-md bg-white dark:bg-gray-700 px-2.5 py-1.5 text-sm font-semibold text-gray-900 dark:text-gray-100 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600"
-                          >
-                            Edit
-                          </button>
-                          <button
-                            type="button"
-                            onClick={() => setTeamToDelete(team)}
-                            className="inline-flex items-center rounded-md bg-red-50 dark:bg-red-900/20 px-2.5 py-1.5 text-sm font-semibold text-red-700 dark:text-red-400 shadow-sm ring-1 ring-inset ring-red-600/10 dark:ring-red-500/20 hover:bg-red-100 dark:hover:bg-red-900/30"
-                          >
-                            Delete
-                          </button>
+              {teams.map((team) =>
+                team.owner_id === user?.id ? (
+                  <div
+                    key={team.id}
+                    className="overflow-hidden bg-white dark:bg-gray-800 shadow sm:rounded-lg mb-8"
+                  >
+                    <div className="px-4 py-6 sm:px-6">
+                      <div className="flex items-center gap-4">
+                        {team.image ? (
+                          <img
+                            src={team.image}
+                            alt={team.name}
+                            className="h-12 w-12 rounded-full object-cover"
+                          />
+                        ) : (
+                          <div className="h-12 w-12 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
+                            <UserIcon className="h-6 w-6 text-gray-400 dark:text-gray-500" />
+                          </div>
+                        )}
+                        <div>
+                          <h3 className="text-base/7 font-semibold text-gray-900 dark:text-gray-100">
+                            {team.name}
+                          </h3>
+                          <div className="flex space-x-4 mt-1">
+                            <button
+                              type="button"
+                              onClick={() => {
+                                setSelectedTeam(team);
+                                setShowTeamModal(true);
+                              }}
+                              className="inline-flex items-center rounded-md bg-white dark:bg-gray-700 px-2.5 py-1.5 text-sm font-semibold text-gray-900 dark:text-gray-100 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600"
+                            >
+                              Edit
+                            </button>
+                            <button
+                              type="button"
+                              onClick={() => setTeamToDelete(team)}
+                              className="inline-flex items-center rounded-md bg-red-50 dark:bg-red-900/20 px-2.5 py-1.5 text-sm font-semibold text-red-700 dark:text-red-400 shadow-sm ring-1 ring-inset ring-red-600/10 dark:ring-red-500/20 hover:bg-red-100 dark:hover:bg-red-900/30"
+                            >
+                              Delete
+                            </button>
+                          </div>
                         </div>
                       </div>
                     </div>
-                  </div>
-                  <div className="border-t border-gray-100 dark:border-gray-700">
-                    <dl className="divide-y divide-gray-100 dark:divide-gray-700">
-                      <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-                        <dt className="text-sm/6 font-semibold text-gray-900 dark:text-gray-100">
-                          Pages
-                        </dt>
-                        <dd className="mt-2 text-sm text-gray-900 dark:text-gray-100 sm:col-span-2 sm:mt-0">
-                          <div className="text-gray-500 dark:text-gray-400">
-                            {team.pages?.length > 0 ? (
+                    <div className="border-t border-gray-100 dark:border-gray-700">
+                      <dl className="divide-y divide-gray-100 dark:divide-gray-700">
+                        <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                          <dt className="text-sm/6 font-semibold text-gray-900 dark:text-gray-100">
+                            Pages
+                          </dt>
+                          <dd className="mt-2 text-sm text-gray-900 dark:text-gray-100 sm:col-span-2 sm:mt-0">
+                            <div className="text-gray-500 dark:text-gray-400">
+                              {team.pages?.length > 0 ? (
+                                <ul
+                                  role="list"
+                                  className="divide-y divide-gray-100 dark:divide-gray-700 rounded-md border border-gray-200 dark:border-gray-700"
+                                >
+                                  {team.pages?.map(
+                                    (page: Pick<IPage, "title" | "id">) => (
+                                      <li
+                                        key={page.id}
+                                        className="flex items-center justify-between p-2 text-sm/6"
+                                      >
+                                        <div className="flex w-0 flex-1 items-center">
+                                          <CheckCircleIcon
+                                            aria-hidden="true"
+                                            className="size-5 shrink-0 text-green-500 dark:text-green-400"
+                                          />
+                                          <div className="ml-4 flex min-w-0 flex-1 gap-2">
+                                            <span className="truncate font-medium">
+                                              {page.title}
+                                            </span>
+                                          </div>
+                                        </div>
+                                        <div className="ml-4 shrink-0">
+                                          <button
+                                            className="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300"
+                                            onClick={async () => {
+                                              await supabase
+                                                .from("pages")
+                                                .update({
+                                                  team_id: null,
+                                                })
+                                                .match({ id: page.id });
+
+                                              fetchTeams();
+                                            }}
+                                          >
+                                            Remove
+                                          </button>
+                                        </div>
+                                      </li>
+                                    )
+                                  )}
+                                </ul>
+                              ) : (
+                                <p>
+                                  No pages yet, add one to share with your team.
+                                  <br />
+                                  Once shared, all team members will have
+                                  complete access to the page.
+                                </p>
+                              )}
+
+                              <div className="mt-2">
+                                {showAssignPage === team.id ? (
+                                  <div className="flex">
+                                    <select
+                                      id="type"
+                                      name="type"
+                                      className="block w-full pl-3 pr-10 py-2 text-base dark:text-gray-100 dark:bg-gray-800 border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md max-w-sm"
+                                      onChange={(e) =>
+                                        setSelectedPage(e.target.value)
+                                      }
+                                    >
+                                      <option value="">Select a page</option>
+                                      {pages
+                                        .filter(
+                                          (page) =>
+                                            !team.pages.some(
+                                              (p: Pick<IPage, "id">) =>
+                                                p.id === page.id
+                                            )
+                                        )
+                                        .filter(
+                                          (page) => page.user_id === user?.id
+                                        )
+                                        .map((page) => (
+                                          <option key={page.id} value={page.id}>
+                                            {page.title}
+                                          </option>
+                                        ))}
+                                    </select>
+
+                                    <PrimaryButton
+                                      label={
+                                        assigningPage
+                                          ? "Assigning..."
+                                          : "Assign"
+                                      }
+                                      disabled={assigningPage}
+                                      className="ml-2 h-8"
+                                      onClick={async () => {
+                                        if (!selectedPage) {
+                                          return;
+                                        }
+
+                                        setAssigningPage(true);
+
+                                        await supabase
+                                          .from("pages")
+                                          .update({
+                                            team_id: team.id,
+                                          })
+                                          .match({ id: selectedPage });
+
+                                        fetchTeams();
+                                        setAssigningPage(null);
+                                        setShowAssignPage(null);
+                                        setSelectedPage(null);
+                                      }}
+                                    />
+
+                                    <SecondaryButton
+                                      label="Cancel"
+                                      className="ml-2 h-8"
+                                      onClick={() => setShowAssignPage(null)}
+                                    />
+                                  </div>
+                                ) : (
+                                  <PrimaryButton
+                                    label="Add page to team"
+                                    className="h-8"
+                                    onClick={() => setShowAssignPage(team.id)}
+                                  />
+                                )}
+                              </div>
+                            </div>
+                          </dd>
+
+                          <dt className="text-sm/6 font-semibold text-gray-900 dark:text-gray-100 mt-4">
+                            Members
+                          </dt>
+                          {team.team_members?.length > 0 ? (
+                            <dd className="mt-2 text-sm text-gray-900 dark:text-gray-100 sm:col-span-2 sm:mt-4">
                               <ul
                                 role="list"
                                 className="divide-y divide-gray-100 dark:divide-gray-700 rounded-md border border-gray-200 dark:border-gray-700"
                               >
-                                {team.pages?.map(
-                                  (page: Pick<IPage, "title" | "id">) => (
+                                {team.team_members?.map(
+                                  (member: {
+                                    id: string;
+                                    user_id: string;
+                                    role: string;
+                                  }) => (
                                     <li
-                                      key={page.id}
+                                      key={member.id}
                                       className="flex items-center justify-between p-2 text-sm/6"
                                     >
                                       <div className="flex w-0 flex-1 items-center">
-                                        <CheckCircleIcon
+                                        <UserIcon
                                           aria-hidden="true"
-                                          className="size-5 shrink-0 text-green-500 dark:text-green-400"
+                                          className="size-5 shrink-0 text-gray-400 dark:text-gray-500"
                                         />
                                         <div className="ml-4 flex min-w-0 flex-1 gap-2">
                                           <span className="truncate font-medium">
-                                            {page.title}
+                                            {member.user_id}
+                                          </span>
+                                          <span className="shrink-0 text-gray-400 dark:text-gray-500 uppercase font-semibold">
+                                            {member.role}
                                           </span>
                                         </div>
                                       </div>
                                       <div className="ml-4 shrink-0">
-                                        <button
+                                        <a
+                                          href="#"
                                           className="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300"
-                                          onClick={async () => {
-                                            await supabase
-                                              .from("pages")
-                                              .update({
-                                                team_id: null,
-                                              })
-                                              .match({ id: page.id });
-
-                                            fetchTeams();
-                                          }}
                                         >
                                           Remove
-                                        </button>
+                                        </a>
                                       </div>
                                     </li>
                                   )
                                 )}
                               </ul>
-                            ) : (
-                              <p>
-                                No pages yet, add one to share with your team.
-                                <br />
-                                Once shared, all team members will have complete
-                                access to the page.
-                              </p>
-                            )}
+                            </dd>
+                          ) : (
+                            <dd className="mt-2 text-sm text-gray-900 dark:text-gray-100 sm:col-span-2 sm:mt-4">
+                              No members yet
+                            </dd>
+                          )}
 
-                            <div className="mt-2">
-                              {showAssignPage === team.id ? (
-                                <div className="flex">
-                                  <select
-                                    id="type"
-                                    name="type"
-                                    className="block w-full pl-3 pr-10 py-2 text-base dark:text-gray-100 dark:bg-gray-800 border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md max-w-sm"
-                                    onChange={(e) =>
-                                      setSelectedPage(e.target.value)
-                                    }
-                                  >
-                                    <option value="">Select a page</option>
-                                    {pages
-                                      .filter(
-                                        (page) =>
-                                          !team.pages.some(
-                                            (p: Pick<IPage, "id">) =>
-                                              p.id === page.id
-                                          )
-                                      )
-                                      .map((page) => (
-                                        <option key={page.id} value={page.id}>
-                                          {page.title}
-                                        </option>
-                                      ))}
-                                  </select>
-
-                                  <PrimaryButton
-                                    label={
-                                      assigningPage ? "Assigning..." : "Assign"
-                                    }
-                                    disabled={assigningPage}
-                                    className="ml-2 h-8"
-                                    onClick={async () => {
-                                      if (!selectedPage) {
-                                        return;
-                                      }
-
-                                      setAssigningPage(true);
-
-                                      await supabase
-                                        .from("pages")
-                                        .update({
-                                          team_id: team.id,
-                                        })
-                                        .match({ id: selectedPage });
-
-                                      fetchTeams();
-                                      setAssigningPage(null);
-                                      setShowAssignPage(null);
-                                      setSelectedPage(null);
-                                    }}
-                                  />
-
-                                  <SecondaryButton
-                                    label="Cancel"
-                                    className="ml-2 h-8"
-                                    onClick={() => setShowAssignPage(null)}
-                                  />
-                                </div>
-                              ) : (
-                                <PrimaryButton
-                                  label="Add page to team"
-                                  className="h-8"
-                                  onClick={() => setShowAssignPage(team.id)}
-                                />
-                              )}
-                            </div>
-                          </div>
-                        </dd>
-
-                        <dt className="text-sm/6 font-semibold text-gray-900 dark:text-gray-100 mt-4">
-                          Invites
-                        </dt>
-                        <dd className="mt-2 text-sm text-gray-900 dark:text-gray-100 sm:col-span-2 sm:mt-4">
-                          <PrimaryButton
-                            label="Invite team member"
-                            className="h-8"
-                          />
-                        </dd>
-
-                        <dt className="text-sm/6 font-semibold text-gray-900 dark:text-gray-100 mt-4">
-                          Members
-                        </dt>
-                        {team.team_members?.length > 0 ? (
+                          <dt className="text-sm/6 font-semibold text-gray-900 dark:text-gray-100 mt-4">
+                            Invites
+                          </dt>
                           <dd className="mt-2 text-sm text-gray-900 dark:text-gray-100 sm:col-span-2 sm:mt-4">
-                            <ul
-                              role="list"
-                              className="divide-y divide-gray-100 dark:divide-gray-700 rounded-md border border-gray-200 dark:border-gray-700"
-                            >
-                              {team.team_members?.map(
-                                (member: {
-                                  id: string;
-                                  user_id: string;
-                                  role: string;
-                                }) => (
-                                  <li
-                                    key={member.id}
-                                    className="flex items-center justify-between p-2 text-sm/6"
-                                  >
-                                    <div className="flex w-0 flex-1 items-center">
-                                      <UserIcon
-                                        aria-hidden="true"
-                                        className="size-5 shrink-0 text-gray-400 dark:text-gray-500"
-                                      />
-                                      <div className="ml-4 flex min-w-0 flex-1 gap-2">
-                                        <span className="truncate font-medium">
-                                          {member.user_id}
-                                        </span>
-                                        <span className="shrink-0 text-gray-400 dark:text-gray-500 uppercase font-semibold">
-                                          {member.role}
-                                        </span>
-                                      </div>
-                                    </div>
-                                    <div className="ml-4 shrink-0">
-                                      <a
-                                        href="#"
-                                        className="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300"
-                                      >
-                                        Remove
-                                      </a>
-                                    </div>
-                                  </li>
-                                )
-                              )}
-                            </ul>
+                            <PrimaryButton
+                              label="Invite team member"
+                              className="h-8"
+                            />
                           </dd>
+                        </div>
+                      </dl>
+                    </div>
+                  </div>
+                ) : (
+                  <div
+                    key={team.id}
+                    className="overflow-hidden bg-white dark:bg-gray-800 shadow sm:rounded-lg mb-8"
+                  >
+                    <div className="px-4 py-6 sm:px-6">
+                      <div className="flex items-center gap-4">
+                        {team.image ? (
+                          <img
+                            src={team.image}
+                            alt={team.name}
+                            className="h-12 w-12 rounded-full object-cover"
+                          />
                         ) : (
-                          <dd className="mt-2 text-sm text-gray-900 dark:text-gray-100 sm:col-span-2 sm:mt-4">
-                            No members yet
-                          </dd>
+                          <div className="h-12 w-12 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
+                            <UserIcon className="h-6 w-6 text-gray-400 dark:text-gray-500" />
+                          </div>
                         )}
+                        <div>
+                          <h3 className="text-base/7 font-semibold text-gray-900 dark:text-gray-100">
+                            {team.name} (
+                            {team.team_members?.[0]?.role?.toUpperCase()})
+                          </h3>
+                          <div className="flex space-x-4 mt-1">
+                            <button
+                              type="button"
+                              className="inline-flex items-center rounded-md bg-red-50 dark:bg-red-900/20 px-2.5 py-1.5 text-sm font-semibold text-red-700 dark:text-red-400 shadow-sm ring-1 ring-inset ring-red-600/10 dark:ring-red-500/20 hover:bg-red-100 dark:hover:bg-red-900/30"
+                              onClick={async () => {
+                                if (
+                                  confirm(
+                                    "Are you sure you want to leave this team?"
+                                  )
+                                ) {
+                                  await supabase
+                                    .from("team_members")
+                                    .delete()
+                                    .match({
+                                      team_id: team.id,
+                                      user_id: user?.id,
+                                    });
+
+                                  fetchTeams();
+                                }
+                              }}
+                            >
+                              Leave
+                            </button>
+                          </div>
+                        </div>
                       </div>
-                    </dl>
+                    </div>
                   </div>
-                </div>
-              ))}
+                )
+              )}
             </div>
           )}
         </div>
diff --git a/packages/supabase/migrations/16_teams.sql b/packages/supabase/migrations/16_teams.sql
index 25ea774..7a5584f 100644
--- a/packages/supabase/migrations/16_teams.sql
+++ b/packages/supabase/migrations/16_teams.sql
@@ -1,3 +1,4 @@
+-- TEAMS table
 create table teams (
   id uuid default uuid_generate_v4() primary key,
   owner_id uuid references users not null,
@@ -21,6 +22,7 @@ BEFORE UPDATE ON teams
 FOR EACH ROW
 EXECUTE PROCEDURE trigger_set_timestamp();
 
+-- TEAM MEMBERS table
 create table team_members (
   id uuid default uuid_generate_v4() primary key,
   team_id uuid references teams not null,
@@ -33,13 +35,14 @@ create table team_members (
 alter table team_members enable row level security;
 create policy "Owner can view own team members." on team_members for select using (team_id in (select id from teams where owner_id = auth.uid()));
 create policy "Owner can delete own team members." on team_members for delete using (team_id in (select id from teams where owner_id = auth.uid()));
-create policy "Team members can view their membership." on team_members for select using (user_id = auth.uid());
+create policy "Team members can leave their team." on team_members for delete using (user_id = auth.uid());
 
 CREATE TRIGGER set_timestamp
 BEFORE UPDATE ON team_members
 FOR EACH ROW
 EXECUTE PROCEDURE trigger_set_timestamp();
 
+-- TEAM INVITATIONS table
 create table team_invitations (
   id uuid default uuid_generate_v4() primary key,
   team_id uuid references teams not null,
@@ -62,6 +65,17 @@ BEFORE UPDATE ON team_invitations
 FOR EACH ROW
 EXECUTE PROCEDURE trigger_set_timestamp();
 
+-- Helper function to check if a user is a member of a team
+create or replace function is_team_member(tid uuid, uid uuid) returns boolean as $$
+begin
+  return exists (select 1 from team_members where team_id = tid and user_id = uid);
+end;
+$$ language plpgsql security definer;
+
+-- Policies using the helper function
+create policy "Team members can view their membership." on team_members for select using (is_team_member(team_id, auth.uid()));
+create policy "Members can view teams." on teams for select using (is_team_member(id, auth.uid()));
+
 -- Alter pages table to add team_id
 alter table pages add column team_id uuid references teams on delete set null;
 

From 1c2e044cb29c7047778a2e72c53a0ddc025285a0 Mon Sep 17 00:00:00 2001
From: Arjun Komath <arjun@hey.com>
Date: Sun, 9 Feb 2025 11:41:06 +1100
Subject: [PATCH 04/24] Implement team invitation with email notifications

---
 .../components/layout/header.component.tsx    | 22 ++---
 apps/web/inngest/email/send-team-invite.ts    | 25 ++++++
 apps/web/pages/api/inngest.ts                 |  2 +
 apps/web/pages/api/teams/invite/index.ts      | 77 ++++++++++++++++++
 apps/web/pages/teams/index.tsx                | 80 +++++++++++++++++++
 packages/supabase/migrations/16_teams.sql     |  3 +-
 6 files changed, 193 insertions(+), 16 deletions(-)
 create mode 100644 apps/web/inngest/email/send-team-invite.ts
 create mode 100644 apps/web/pages/api/teams/invite/index.ts

diff --git a/apps/web/components/layout/header.component.tsx b/apps/web/components/layout/header.component.tsx
index 39b35ba..33c076f 100644
--- a/apps/web/components/layout/header.component.tsx
+++ b/apps/web/components/layout/header.component.tsx
@@ -24,21 +24,13 @@ export default function HeaderComponent() {
 
   const navigation = useMemo(() => {
     if (user) {
-      if (billingDetails?.has_active_subscription) {
-        return [
-          { name: "Pages", href: ROUTES.PAGES },
-          { name: "Teams", href: ROUTES.TEAMS },
-          { name: "Zapier", href: ROUTES.ZAPIER },
-          { name: "Billing", href: ROUTES.BILLING },
-          { name: "Support", href: ROUTES.SUPPORT, external: true },
-        ];
-      } else {
-        return [
-          { name: "Pages", href: ROUTES.PAGES },
-          { name: "Pricing", href: ROUTES.PRICING },
-          { name: "Support", href: ROUTES.SUPPORT, external: true },
-        ];
-      }
+      return [
+        { name: "Pages", href: ROUTES.PAGES },
+        { name: "Teams", href: ROUTES.TEAMS },
+        { name: "Zapier", href: ROUTES.ZAPIER },
+        { name: "Billing", href: ROUTES.BILLING },
+        { name: "Support", href: ROUTES.SUPPORT, external: true },
+      ];
     }
 
     return [
diff --git a/apps/web/inngest/email/send-team-invite.ts b/apps/web/inngest/email/send-team-invite.ts
new file mode 100644
index 0000000..f4f8dce
--- /dev/null
+++ b/apps/web/inngest/email/send-team-invite.ts
@@ -0,0 +1,25 @@
+import inngestClient from "../../utils/inngest";
+import postmarkClient from "../../utils/postmark";
+
+export const sendTeamInviteEmail = inngestClient.createFunction(
+  { name: "Email: Team Invite" },
+  { event: "email/team.invite" },
+  async ({ event }) => {
+    const { email, payload } = event.data;
+
+    console.log("Job started", {
+      email,
+      payload,
+    });
+
+    const result = await postmarkClient.sendEmailWithTemplate({
+      MessageStream: "outbound",
+      From: "hello@changes.page",
+      To: email,
+      TemplateAlias: "team-invite",
+      TemplateModel: payload,
+    });
+
+    return { body: "Job completed", result };
+  }
+);
diff --git a/apps/web/pages/api/inngest.ts b/apps/web/pages/api/inngest.ts
index a7b92e7..70f6dac 100644
--- a/apps/web/pages/api/inngest.ts
+++ b/apps/web/pages/api/inngest.ts
@@ -2,6 +2,7 @@ import { serve } from "inngest/next";
 import { handleSubscriptionChange } from "../../inngest/billing/handle-subscription";
 import { reportUsageForStripeInvoice } from "../../inngest/billing/report-pages-usage-invoice";
 import { sendConfirmEmailNotification } from "../../inngest/email/send-confirm-email-notification";
+import { sendTeamInviteEmail } from "../../inngest/email/send-team-invite";
 import { sendWelcomeEmail } from "../../inngest/email/send-welcome-email";
 import { deleteImagesJob } from "../../inngest/jobs/delete-images";
 import { sendPostNotification } from "./../../inngest/email/send-post-notification";
@@ -15,6 +16,7 @@ export default serve("changes-page", [
   sendConfirmEmailNotification,
   sendPostNotification,
   sendWelcomeEmail,
+  sendTeamInviteEmail,
   // Background Jobs
   deleteImagesJob,
 ]);
diff --git a/apps/web/pages/api/teams/invite/index.ts b/apps/web/pages/api/teams/invite/index.ts
new file mode 100644
index 0000000..a920e29
--- /dev/null
+++ b/apps/web/pages/api/teams/invite/index.ts
@@ -0,0 +1,77 @@
+import { supabaseAdmin } from "@changes-page/supabase/admin";
+import { NextApiRequest, NextApiResponse } from "next";
+import inngestClient from "../../../../utils/inngest";
+import { apiRateLimiter } from "../../../../utils/rate-limit";
+import { getSupabaseServerClient } from "../../../../utils/supabase/supabase-admin";
+import { getUserById } from "../../../../utils/useDatabase";
+
+const inviteUser = async (req: NextApiRequest, res: NextApiResponse) => {
+  if (req.method === "POST") {
+    const { team_id, email } = req.body;
+
+    try {
+      await apiRateLimiter(req, res);
+
+      const { user, supabase } = await getSupabaseServerClient({ req, res });
+
+      const { has_active_subscription } = await getUserById(user.id);
+      if (!has_active_subscription) {
+        return res.status(403).json({
+          error: { statusCode: 403, message: "Missing subscription" },
+        });
+      }
+
+      const { data: team } = await supabase
+        .from("teams")
+        .select("*")
+        .eq("id", team_id)
+        .eq("owner_id", user.id)
+        .single();
+
+      if (!team) {
+        return res.status(403).json({
+          error: { statusCode: 403, message: "Team not found" },
+        });
+      }
+
+      const { data: invitation } = await supabaseAdmin
+        .from("team_invitations")
+        .insert({
+          team_id,
+          inviter_id: user.id,
+          email,
+          role: "editor",
+          status: "pending",
+        })
+        .select()
+        .single();
+
+      if (!invitation) {
+        return res.status(500).json({
+          error: { statusCode: 500, message: "Failed to create invitation" },
+        });
+      }
+
+      await inngestClient.send({
+        name: "email/team.invite",
+        data: {
+          owner_name: user.user_metadata?.name ?? user.email,
+          team_name: team.name,
+          confirm_link: `${process.env.NEXT_PUBLIC_APP_URL}/teams/invite/join/${invitation.id}`,
+        },
+      });
+
+      return res.status(201).json({ ok: true });
+    } catch (err) {
+      console.log("inviteUser", err);
+      res
+        .status(500)
+        .json({ error: { statusCode: 500, message: err.message } });
+    }
+  } else {
+    res.setHeader("Allow", "POST,PUT");
+    res.status(405).end("Method Not Allowed");
+  }
+};
+
+export default inviteUser;
diff --git a/apps/web/pages/teams/index.tsx b/apps/web/pages/teams/index.tsx
index 835e8a5..4bd9e7c 100644
--- a/apps/web/pages/teams/index.tsx
+++ b/apps/web/pages/teams/index.tsx
@@ -3,6 +3,7 @@ import { SpinnerWithSpacing } from "@changes-page/ui";
 import { CheckCircleIcon, UserIcon } from "@heroicons/react/solid";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
+import toast from "react-hot-toast";
 import { useHotkeys } from "react-hotkeys-hook";
 import {
   PrimaryButton,
@@ -15,6 +16,7 @@ import { EntityEmptyState } from "../../components/entity/empty-state";
 import AuthLayout from "../../components/layout/auth-layout.component";
 import Page from "../../components/layout/page.component";
 import Changelog from "../../components/marketing/changelog";
+import { httpPost } from "../../utils/http";
 import { useUserData } from "../../utils/useUser";
 
 export default function Teams() {
@@ -380,9 +382,87 @@ export default function Teams() {
                             Invites
                           </dt>
                           <dd className="mt-2 text-sm text-gray-900 dark:text-gray-100 sm:col-span-2 sm:mt-4">
+                            {team.team_invitations?.length > 0 ? (
+                              <ul
+                                role="list"
+                                className="divide-y divide-gray-100 dark:divide-gray-700 rounded-md border border-gray-200 dark:border-gray-700 mb-4"
+                              >
+                                {team.team_invitations?.map(
+                                  (invite: {
+                                    id: string;
+                                    email: string;
+                                    role: string;
+                                  }) => (
+                                    <li
+                                      key={invite.id}
+                                      className="flex items-center justify-between p-2 text-sm/6"
+                                    >
+                                      <div className="flex w-0 flex-1 items-center">
+                                        <UserIcon
+                                          aria-hidden="true"
+                                          className="size-5 shrink-0 text-gray-400 dark:text-gray-500"
+                                        />
+                                        <div className="ml-4 flex min-w-0 flex-1 gap-2">
+                                          <span className="truncate font-medium">
+                                            {invite.email}
+                                          </span>
+                                          <span className="shrink-0 text-gray-400 dark:text-gray-500 uppercase font-semibold">
+                                            {invite.role}
+                                          </span>
+                                        </div>
+                                      </div>
+                                      <div className="ml-4 shrink-0">
+                                        <button
+                                          className="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300"
+                                          onClick={async () => {
+                                            await supabase
+                                              .from("team_invitations")
+                                              .delete()
+                                              .match({ id: invite.id });
+
+                                            fetchTeams();
+                                          }}
+                                        >
+                                          Revoke
+                                        </button>
+                                      </div>
+                                    </li>
+                                  )
+                                )}
+                              </ul>
+                            ) : null}
+
                             <PrimaryButton
                               label="Invite team member"
                               className="h-8"
+                              onClick={async () => {
+                                const email = prompt("Enter email address");
+                                if (!email) {
+                                  return;
+                                }
+
+                                if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+                                  notifyError("Invalid email address");
+                                  return;
+                                }
+
+                                await toast.promise(
+                                  httpPost({
+                                    url: "/api/teams/invite",
+                                    data: {
+                                      team_id: team.id,
+                                      email,
+                                    },
+                                  }),
+                                  {
+                                    loading: "Sending invitation...",
+                                    success: "Invitation sent",
+                                    error: "Failed to send invitation",
+                                  }
+                                );
+
+                                fetchTeams();
+                              }}
                             />
                           </dd>
                         </div>
diff --git a/packages/supabase/migrations/16_teams.sql b/packages/supabase/migrations/16_teams.sql
index 7a5584f..221b88c 100644
--- a/packages/supabase/migrations/16_teams.sql
+++ b/packages/supabase/migrations/16_teams.sql
@@ -55,8 +55,9 @@ create table team_invitations (
   updated_at timestamp with time zone default timezone('utc'::text, now()) not null
 );
 
+alter table team_invitations add constraint unique_email_team_id unique (email, team_id);
+
 alter table team_invitations enable row level security;
-create policy "Can insert team invitations." on team_invitations for insert with check (auth.uid() = inviter_id);
 create policy "Can view own team invitations." on team_invitations for select using (auth.uid() = inviter_id);
 create policy "Can delete own team invitations." on team_invitations for delete using (auth.uid() = inviter_id);
 

From 92fa63ee3bac74ce160e97062f543f5744dc3dad Mon Sep 17 00:00:00 2001
From: Arjun Komath <arjun@hey.com>
Date: Sun, 9 Feb 2025 12:51:43 +1100
Subject: [PATCH 05/24] Add team invitation acceptance flow and update team
 views

---
 .../pages/api/teams/invite/accept/index.ts    |  62 +++++++++
 apps/web/pages/api/teams/invite/index.ts      |   2 +-
 apps/web/pages/teams/index.tsx                | 128 +++++++++++-------
 packages/supabase/migrations/16_teams.sql     |   4 +
 4 files changed, 146 insertions(+), 50 deletions(-)
 create mode 100644 apps/web/pages/api/teams/invite/accept/index.ts

diff --git a/apps/web/pages/api/teams/invite/accept/index.ts b/apps/web/pages/api/teams/invite/accept/index.ts
new file mode 100644
index 0000000..9a76c22
--- /dev/null
+++ b/apps/web/pages/api/teams/invite/accept/index.ts
@@ -0,0 +1,62 @@
+import { supabaseAdmin } from "@changes-page/supabase/admin";
+import { NextApiRequest, NextApiResponse } from "next";
+import { apiRateLimiter } from "../../../../../utils/rate-limit";
+import { getSupabaseServerClient } from "../../../../../utils/supabase/supabase-admin";
+
+const acceptInvite = async (req: NextApiRequest, res: NextApiResponse) => {
+  if (req.method === "POST") {
+    const { invite_id } = req.body;
+
+    try {
+      await apiRateLimiter(req, res);
+
+      const { user, supabase } = await getSupabaseServerClient({ req, res });
+
+      const { data: invite } = await supabase
+        .from("team_invitations")
+        .select("*")
+        .eq("id", invite_id)
+        .eq("email", user.email)
+        .single();
+
+      if (!invite) {
+        return res.status(403).json({
+          error: { statusCode: 403, message: "Team not found" },
+        });
+      }
+
+      const { data: membership } = await supabaseAdmin
+        .from("team_members")
+        .insert({
+          team_id: invite.team_id,
+          user_id: user.id,
+          role: invite.role,
+        })
+        .select()
+        .single();
+
+      if (!membership) {
+        return res.status(500).json({
+          error: { statusCode: 500, message: "Failed to create invitation" },
+        });
+      }
+
+      await supabaseAdmin
+        .from("team_invitations")
+        .delete()
+        .match({ id: invite_id });
+
+      return res.status(201).json({ ok: true });
+    } catch (err) {
+      console.log("inviteUser", err);
+      res
+        .status(500)
+        .json({ error: { statusCode: 500, message: err.message } });
+    }
+  } else {
+    res.setHeader("Allow", "POST,PUT");
+    res.status(405).end("Method Not Allowed");
+  }
+};
+
+export default acceptInvite;
diff --git a/apps/web/pages/api/teams/invite/index.ts b/apps/web/pages/api/teams/invite/index.ts
index a920e29..c260eb0 100644
--- a/apps/web/pages/api/teams/invite/index.ts
+++ b/apps/web/pages/api/teams/invite/index.ts
@@ -57,7 +57,7 @@ const inviteUser = async (req: NextApiRequest, res: NextApiResponse) => {
         data: {
           owner_name: user.user_metadata?.name ?? user.email,
           team_name: team.name,
-          confirm_link: `${process.env.NEXT_PUBLIC_APP_URL}/teams/invite/join/${invitation.id}`,
+          confirm_link: `${process.env.NEXT_PUBLIC_APP_URL}/teams`,
         },
       });
 
diff --git a/apps/web/pages/teams/index.tsx b/apps/web/pages/teams/index.tsx
index 4bd9e7c..46951a2 100644
--- a/apps/web/pages/teams/index.tsx
+++ b/apps/web/pages/teams/index.tsx
@@ -39,43 +39,44 @@ export default function Teams() {
   const fetchTeams = async () => {
     setIsLoading(true);
 
-    const { data: teams, error: fetchError } = await supabase
-      .from("teams")
-      .select(
+    const [
+      { data: teams, error: fetchError },
+      { data: pages, error: pagesError },
+    ] = await Promise.all([
+      supabase
+        .from("teams")
+        .select(
+          `
+          *,
+          pages (
+            id,
+            title,
+            created_at
+          ),
+          team_members (
+            id,
+            user_id,
+            role
+          ),
+          team_invitations (
+            id,
+            email,
+            role,
+            created_at
+          )
         `
-        *,
-        pages (
-          id,
-          title,
-          created_at
-        ),
-        team_members (
-          id,
-          user_id,
-          role
-        ),
-        team_invitations (
-          id,
-          email,
-          role,
-          created_at
         )
-      `
-      )
-      .order("created_at", { ascending: false });
+        .order("created_at", { ascending: false }),
 
-    const { data: pages, error: pagesError } = await supabase
-      .from("pages")
-      .select("*");
+      supabase.from("pages").select("*"),
+    ]);
 
-    console.log(teams);
     setTeams(teams ?? []);
     setPages(pages ?? []);
 
     if (fetchError) {
       notifyError("Failed to fetch teams");
     }
-
     if (pagesError) {
       notifyError("Failed to fetch pages");
     }
@@ -490,32 +491,61 @@ export default function Teams() {
                         <div>
                           <h3 className="text-base/7 font-semibold text-gray-900 dark:text-gray-100">
                             {team.name} (
-                            {team.team_members?.[0]?.role?.toUpperCase()})
+                            {team.team_members?.[0]?.role
+                              ? team.team_members?.[0]?.role?.toUpperCase()
+                              : "Would you like to join?"}
+                            )
                           </h3>
                           <div className="flex space-x-4 mt-1">
-                            <button
-                              type="button"
-                              className="inline-flex items-center rounded-md bg-red-50 dark:bg-red-900/20 px-2.5 py-1.5 text-sm font-semibold text-red-700 dark:text-red-400 shadow-sm ring-1 ring-inset ring-red-600/10 dark:ring-red-500/20 hover:bg-red-100 dark:hover:bg-red-900/30"
-                              onClick={async () => {
-                                if (
-                                  confirm(
-                                    "Are you sure you want to leave this team?"
-                                  )
-                                ) {
-                                  await supabase
-                                    .from("team_members")
-                                    .delete()
-                                    .match({
-                                      team_id: team.id,
-                                      user_id: user?.id,
-                                    });
+                            {team.team_invitations?.length > 0 ? (
+                              <button
+                                type="button"
+                                className="inline-flex items-center rounded-md bg-green-50 dark:bg-green-900/20 px-2.5 py-1.5 text-sm font-semibold text-green-700 dark:text-green-400 shadow-sm ring-1 ring-inset ring-green-600/10 dark:ring-green-500/20 hover:bg-green-100 dark:hover:bg-green-900/30"
+                                onClick={async () => {
+                                  await toast.promise(
+                                    httpPost({
+                                      url: "/api/teams/invite/accept",
+                                      data: {
+                                        invite_id: team.team_invitations[0].id,
+                                      },
+                                    }),
+                                    {
+                                      loading: "Joining team...",
+                                      success: "Joined team",
+                                      error: "Failed to join team",
+                                    }
+                                  );
 
                                   fetchTeams();
-                                }
-                              }}
-                            >
-                              Leave
-                            </button>
+                                }}
+                              >
+                                Join
+                              </button>
+                            ) : (
+                              <button
+                                type="button"
+                                className="inline-flex items-center rounded-md bg-red-50 dark:bg-red-900/20 px-2.5 py-1.5 text-sm font-semibold text-red-700 dark:text-red-400 shadow-sm ring-1 ring-inset ring-red-600/10 dark:ring-red-500/20 hover:bg-red-100 dark:hover:bg-red-900/30"
+                                onClick={async () => {
+                                  if (
+                                    confirm(
+                                      "Are you sure you want to leave this team?"
+                                    )
+                                  ) {
+                                    await supabase
+                                      .from("team_members")
+                                      .delete()
+                                      .match({
+                                        team_id: team.id,
+                                        user_id: user?.id,
+                                      });
+
+                                    fetchTeams();
+                                  }
+                                }}
+                              >
+                                Leave
+                              </button>
+                            )}
                           </div>
                         </div>
                       </div>
diff --git a/packages/supabase/migrations/16_teams.sql b/packages/supabase/migrations/16_teams.sql
index 221b88c..32ef6f7 100644
--- a/packages/supabase/migrations/16_teams.sql
+++ b/packages/supabase/migrations/16_teams.sql
@@ -16,6 +16,7 @@ create policy "Can insert teams." on teams for insert with check (auth.uid() = o
 create policy "Can view own teams." on teams for select using (auth.uid() = owner_id);
 create policy "Can update own teams." on teams for update using (auth.uid() = owner_id);
 create policy "Can delete own teams." on teams for delete using (auth.uid() = owner_id);
+create policy "Invited users can view teams." on teams for select using (id in (select team_id from team_invitations where email = auth.email()));
 
 CREATE TRIGGER set_timestamp
 BEFORE UPDATE ON teams
@@ -32,6 +33,8 @@ create table team_members (
   updated_at timestamp with time zone default timezone('utc'::text, now()) not null
 );
 
+alter table team_members add constraint unique_team_user unique (team_id, user_id);
+
 alter table team_members enable row level security;
 create policy "Owner can view own team members." on team_members for select using (team_id in (select id from teams where owner_id = auth.uid()));
 create policy "Owner can delete own team members." on team_members for delete using (team_id in (select id from teams where owner_id = auth.uid()));
@@ -60,6 +63,7 @@ alter table team_invitations add constraint unique_email_team_id unique (email,
 alter table team_invitations enable row level security;
 create policy "Can view own team invitations." on team_invitations for select using (auth.uid() = inviter_id);
 create policy "Can delete own team invitations." on team_invitations for delete using (auth.uid() = inviter_id);
+create policy "Can view team invitations." on team_invitations for select using (auth.email() = email);
 
 CREATE TRIGGER set_timestamp
 BEFORE UPDATE ON team_invitations

From a368f30d1d685aaaf3e5296576e5d17ac5ca2196 Mon Sep 17 00:00:00 2001
From: Arjun Komath <arjun@hey.com>
Date: Sun, 9 Feb 2025 13:48:32 +1100
Subject: [PATCH 06/24] Remove subscription check for new posts

---
 apps/web/pages/api/posts/index.ts        | 9 +--------
 apps/web/pages/api/teams/invite/index.ts | 3 ++-
 apps/web/pages/pages/[page_id]/index.tsx | 2 --
 3 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/apps/web/pages/api/posts/index.ts b/apps/web/pages/api/posts/index.ts
index d598a7b..16463d8 100644
--- a/apps/web/pages/api/posts/index.ts
+++ b/apps/web/pages/api/posts/index.ts
@@ -3,7 +3,7 @@ import { NextApiRequest, NextApiResponse } from "next";
 import { NewPostSchema } from "../../../data/schema";
 import { apiRateLimiter } from "../../../utils/rate-limit";
 import { getSupabaseServerClient } from "../../../utils/supabase/supabase-admin";
-import { createPost, getUserById } from "../../../utils/useDatabase";
+import { createPost } from "../../../utils/useDatabase";
 
 const createNewPost = async (req: NextApiRequest, res: NextApiResponse) => {
   if (req.method === "POST") {
@@ -26,13 +26,6 @@ const createNewPost = async (req: NextApiRequest, res: NextApiResponse) => {
 
       const { user } = await getSupabaseServerClient({ req, res });
 
-      const { has_active_subscription } = await getUserById(user.id);
-      if (!has_active_subscription) {
-        return res.status(403).json({
-          error: { statusCode: 403, message: "Missing subscription" },
-        });
-      }
-
       const isValid = await NewPostSchema.isValid({
         page_id,
         title: title.trim(),
diff --git a/apps/web/pages/api/teams/invite/index.ts b/apps/web/pages/api/teams/invite/index.ts
index c260eb0..3d7871c 100644
--- a/apps/web/pages/api/teams/invite/index.ts
+++ b/apps/web/pages/api/teams/invite/index.ts
@@ -1,5 +1,6 @@
 import { supabaseAdmin } from "@changes-page/supabase/admin";
 import { NextApiRequest, NextApiResponse } from "next";
+import { ROUTES } from "../../../../data/routes.data";
 import inngestClient from "../../../../utils/inngest";
 import { apiRateLimiter } from "../../../../utils/rate-limit";
 import { getSupabaseServerClient } from "../../../../utils/supabase/supabase-admin";
@@ -57,7 +58,7 @@ const inviteUser = async (req: NextApiRequest, res: NextApiResponse) => {
         data: {
           owner_name: user.user_metadata?.name ?? user.email,
           team_name: team.name,
-          confirm_link: `${process.env.NEXT_PUBLIC_APP_URL}/teams`,
+          confirm_link: `${process.env.NEXT_PUBLIC_APP_URL}/${ROUTES.TEAMS}`,
         },
       });
 
diff --git a/apps/web/pages/pages/[page_id]/index.tsx b/apps/web/pages/pages/[page_id]/index.tsx
index 8d8e36a..542aa2a 100644
--- a/apps/web/pages/pages/[page_id]/index.tsx
+++ b/apps/web/pages/pages/[page_id]/index.tsx
@@ -78,7 +78,6 @@ export default function PageDetail({
   settings: serverSettings,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) {
   const router = useRouter();
-  const { billingDetails } = useUserData();
   const { supabase } = useUserData();
   const { status } = router.query;
 
@@ -286,7 +285,6 @@ export default function PageDetail({
             }
             route={`/pages/${page_id}/new`}
             keyboardShortcut={"N"}
-            upgradeRequired={!billingDetails?.has_active_subscription}
           />
         }
         menuItems={

From c482668a642820f9b8bdc3303c597e66f9219158 Mon Sep 17 00:00:00 2001
From: Arjun Komath <arjun@hey.com>
Date: Sun, 9 Feb 2025 14:00:36 +1100
Subject: [PATCH 07/24] feat: Improve team invitation API with input validation
 and email payload

---
 apps/web/pages/api/teams/invite/accept/index.ts |  5 +++++
 apps/web/pages/api/teams/invite/index.ts        | 15 ++++++++++++---
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/apps/web/pages/api/teams/invite/accept/index.ts b/apps/web/pages/api/teams/invite/accept/index.ts
index 9a76c22..969b1fc 100644
--- a/apps/web/pages/api/teams/invite/accept/index.ts
+++ b/apps/web/pages/api/teams/invite/accept/index.ts
@@ -6,6 +6,11 @@ import { getSupabaseServerClient } from "../../../../../utils/supabase/supabase-
 const acceptInvite = async (req: NextApiRequest, res: NextApiResponse) => {
   if (req.method === "POST") {
     const { invite_id } = req.body;
+    if (!invite_id) {
+      return res.status(400).json({
+        error: { statusCode: 400, message: "Invalid request" },
+      });
+    }
 
     try {
       await apiRateLimiter(req, res);
diff --git a/apps/web/pages/api/teams/invite/index.ts b/apps/web/pages/api/teams/invite/index.ts
index 3d7871c..3d37edf 100644
--- a/apps/web/pages/api/teams/invite/index.ts
+++ b/apps/web/pages/api/teams/invite/index.ts
@@ -1,6 +1,7 @@
 import { supabaseAdmin } from "@changes-page/supabase/admin";
 import { NextApiRequest, NextApiResponse } from "next";
 import { ROUTES } from "../../../../data/routes.data";
+import { getAppBaseURL } from "../../../../utils/helpers";
 import inngestClient from "../../../../utils/inngest";
 import { apiRateLimiter } from "../../../../utils/rate-limit";
 import { getSupabaseServerClient } from "../../../../utils/supabase/supabase-admin";
@@ -9,6 +10,11 @@ import { getUserById } from "../../../../utils/useDatabase";
 const inviteUser = async (req: NextApiRequest, res: NextApiResponse) => {
   if (req.method === "POST") {
     const { team_id, email } = req.body;
+    if (!team_id || !email) {
+      return res.status(400).json({
+        error: { statusCode: 400, message: "Invalid request" },
+      });
+    }
 
     try {
       await apiRateLimiter(req, res);
@@ -56,9 +62,12 @@ const inviteUser = async (req: NextApiRequest, res: NextApiResponse) => {
       await inngestClient.send({
         name: "email/team.invite",
         data: {
-          owner_name: user.user_metadata?.name ?? user.email,
-          team_name: team.name,
-          confirm_link: `${process.env.NEXT_PUBLIC_APP_URL}/${ROUTES.TEAMS}`,
+          email,
+          payload: {
+            owner_name: user.user_metadata?.name ?? user.email,
+            team_name: team.name,
+            confirm_link: `${getAppBaseURL()}/${ROUTES.TEAMS}`,
+          },
         },
       });
 

From 38c2af0bea0ee7541d36278fe4653f5a47379490 Mon Sep 17 00:00:00 2001
From: Arjun Komath <arjun@hey.com>
Date: Sun, 9 Feb 2025 14:12:16 +1100
Subject: [PATCH 08/24] fix: Update middleware

---
 apps/web/middleware.ts                   | 2 +-
 apps/web/pages/api/teams/invite/index.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/middleware.ts b/apps/web/middleware.ts
index a3bd28f..9424aa5 100644
--- a/apps/web/middleware.ts
+++ b/apps/web/middleware.ts
@@ -22,5 +22,5 @@ export async function middleware(req: NextRequest) {
 }
 
 export const config = {
-  matcher: ["/account", "/pages", "/pages/:path", "/account/billing"],
+  matcher: ["/account", "/pages", "/pages/:path", "/account/billing", "/teams"],
 };
diff --git a/apps/web/pages/api/teams/invite/index.ts b/apps/web/pages/api/teams/invite/index.ts
index 3d37edf..d9a75f6 100644
--- a/apps/web/pages/api/teams/invite/index.ts
+++ b/apps/web/pages/api/teams/invite/index.ts
@@ -66,7 +66,7 @@ const inviteUser = async (req: NextApiRequest, res: NextApiResponse) => {
           payload: {
             owner_name: user.user_metadata?.name ?? user.email,
             team_name: team.name,
-            confirm_link: `${getAppBaseURL()}/${ROUTES.TEAMS}`,
+            confirm_link: `${getAppBaseURL()}${ROUTES.TEAMS}`,
           },
         },
       });

From 28b53b68a257b1a5415e9b5931052796ada5d2fa Mon Sep 17 00:00:00 2001
From: Arjun Komath <arjun@hey.com>
Date: Sun, 9 Feb 2025 14:28:00 +1100
Subject: [PATCH 09/24] Remove unused revalidation logic

---
 apps/page/README.md                          |  3 --
 apps/page/pages/api/revalidate.ts            | 37 --------------------
 apps/web/README.md                           |  4 ---
 apps/web/pages/api/pages/settings/webhook.ts | 18 +---------
 apps/web/pages/api/pages/webhook.ts          |  9 +----
 apps/web/pages/api/posts/webhook.ts          | 22 ------------
 apps/web/utils/revalidate.ts                 | 17 ---------
 7 files changed, 2 insertions(+), 108 deletions(-)
 delete mode 100644 apps/page/pages/api/revalidate.ts
 delete mode 100644 apps/web/utils/revalidate.ts

diff --git a/apps/page/README.md b/apps/page/README.md
index 8fa6d66..bdfa8c6 100644
--- a/apps/page/README.md
+++ b/apps/page/README.md
@@ -5,9 +5,6 @@ This folder contains the pages app which renders user changelog pages.
 ### Environment Variables
 
 ```
-# Revalidation
-REVALIDATE_TOKEN=
-
 # Supabase details from https://app.supabase.io
 NEXT_PUBLIC_SUPABASE_URL=
 NEXT_PUBLIC_SUPABASE_ANON_KEY=
diff --git a/apps/page/pages/api/revalidate.ts b/apps/page/pages/api/revalidate.ts
deleted file mode 100644
index c6c0e7e..0000000
--- a/apps/page/pages/api/revalidate.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { NextApiRequest, NextApiResponse } from "next";
-
-/**
- * @param req
- * @param res
- * @returns
- */
-export default async function handler(
-  req: NextApiRequest,
-  res: NextApiResponse<{ revalidated: boolean } | { message: string } | string>
-) {
-  return res.json({ revalidated: true });
-  const { secret } = req.query;
-  const { path } = req.body;
-
-  // Check for secret to confirm this is a valid request
-  if (secret !== process.env.REVALIDATE_TOKEN) {
-    return res.status(401).json({ message: "Invalid token" });
-  }
-
-  if (!path) {
-    return res.status(401).json({ message: "Invalid path" });
-  }
-
-  console.log("got revalidate request for", path);
-
-  try {
-    await res.revalidate(`/_sites/${path}/`);
-
-    return res.json({ revalidated: true });
-  } catch (err) {
-    // If there was an error, Next.js will continue
-    // to show the last successfully generated page
-    console.log("[page] Error revalidating", err);
-    return res.status(500).send("Error revalidating");
-  }
-}
diff --git a/apps/web/README.md b/apps/web/README.md
index 22d5005..6a9b0d3 100644
--- a/apps/web/README.md
+++ b/apps/web/README.md
@@ -7,10 +7,6 @@ This folder contains the dashboard app for the project and all marketing pages.
 ```
 NEXT_PUBLIC_PAGES_DOMAIN=http://localhost:3000
 
-# Revalidation
-REVALIDATE_ENDPOINT=
-REVALIDATE_TOKEN=
-
 # Supabase details from https://app.supabase.io
 NEXT_PUBLIC_SUPABASE_URL=
 NEXT_PUBLIC_SUPABASE_ANON_KEY=
diff --git a/apps/web/pages/api/pages/settings/webhook.ts b/apps/web/pages/api/pages/settings/webhook.ts
index 3d5af85..9661552 100644
--- a/apps/web/pages/api/pages/settings/webhook.ts
+++ b/apps/web/pages/api/pages/settings/webhook.ts
@@ -1,7 +1,5 @@
-import { NextApiRequest, NextApiResponse } from "next";
 import { IPageSettings } from "@changes-page/supabase/types/page";
-import { revalidatePage } from "../../../../utils/revalidate";
-import { getPageById } from "../../../../utils/useDatabase";
+import { NextApiRequest, NextApiResponse } from "next";
 
 const databaseWebhook = async (req: NextApiRequest, res: NextApiResponse) => {
   if (req.method === "POST") {
@@ -23,20 +21,6 @@ const databaseWebhook = async (req: NextApiRequest, res: NextApiResponse) => {
         page_id
       );
 
-      if (page_settings?.custom_domain) {
-        await revalidatePage(page_settings.custom_domain);
-      }
-
-      try {
-        const page = await getPageById(page_id);
-        await revalidatePage(page.url_slug);
-      } catch (err) {
-        console.log(
-          "Trigger databaseWebhook [Page Settings]: Revalidation failed, most likely the page is deleted:",
-          err
-        );
-      }
-
       return res.status(200).json({ ok: true });
     } catch (err) {
       console.log("Trigger databaseWebhook [Page Settings]: Error:", err);
diff --git a/apps/web/pages/api/pages/webhook.ts b/apps/web/pages/api/pages/webhook.ts
index 3ea9aad..a1783da 100644
--- a/apps/web/pages/api/pages/webhook.ts
+++ b/apps/web/pages/api/pages/webhook.ts
@@ -1,7 +1,6 @@
 import { IPage } from "@changes-page/supabase/types/page";
 import { NextApiRequest, NextApiResponse } from "next";
 import { v4 } from "uuid";
-import { revalidatePage } from "../../../utils/revalidate";
 import {
   createOrRetrievePageSettings,
   updateSubscriptionUsage,
@@ -26,14 +25,8 @@ const databaseWebhook = async (req: NextApiRequest, res: NextApiResponse) => {
       // report usage
       await updateSubscriptionUsage(user_id, `${type}-${id}-${v4()}`);
 
-      // Revalidate
-      await revalidatePage(page.url_slug);
-
       try {
-        const settings = await createOrRetrievePageSettings(page.id);
-        if (settings?.custom_domain) {
-          await revalidatePage(settings.custom_domain);
-        }
+        await createOrRetrievePageSettings(page.id);
       } catch (err) {
         console.log(
           "Trigger databaseWebhook [Page]: Revalidation failed, failed to get page settings, maybe page is deleted?:",
diff --git a/apps/web/pages/api/posts/webhook.ts b/apps/web/pages/api/posts/webhook.ts
index 7b578a9..67a02c1 100644
--- a/apps/web/pages/api/posts/webhook.ts
+++ b/apps/web/pages/api/posts/webhook.ts
@@ -4,7 +4,6 @@ import { NextApiRequest, NextApiResponse } from "next";
 import { DELETE_IMAGES_JOB_EVENT } from "../../../inngest/jobs/delete-images";
 import { sendPostEmailToSubscribers } from "../../../utils/email";
 import inngestClient from "../../../utils/inngest";
-import { revalidatePage } from "../../../utils/revalidate";
 import {
   createOrRetrievePageSettings,
   getPageById,
@@ -37,21 +36,6 @@ const databaseWebhook = async (req: NextApiRequest, res: NextApiResponse) => {
           },
         });
 
-        try {
-          const page = await getPageById(page_id);
-          const settings = await createOrRetrievePageSettings(page_id);
-          // Revalidate
-          await revalidatePage(page.url_slug);
-          if (settings?.custom_domain) {
-            await revalidatePage(settings.custom_domain);
-          }
-        } catch (err) {
-          console.log(
-            "Trigger databaseWebhook [Posts]: Error revalidating page, most likely its deleted:",
-            err
-          );
-        }
-
         return res.status(200).json({ ok: true });
       }
 
@@ -96,12 +80,6 @@ const databaseWebhook = async (req: NextApiRequest, res: NextApiResponse) => {
             .update({ email_notified: true })
             .match({ id: post.id });
         }
-
-        // Revalidate
-        await revalidatePage(page.url_slug);
-        if (settings?.custom_domain) {
-          await revalidatePage(settings.custom_domain);
-        }
       }
 
       return res.status(200).json({ ok: true });
diff --git a/apps/web/utils/revalidate.ts b/apps/web/utils/revalidate.ts
deleted file mode 100644
index 5ad6e80..0000000
--- a/apps/web/utils/revalidate.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { httpPost } from "./http";
-
-export const revalidatePage = async (path: string) => {
-  try {
-    const revalidateEndpoint =
-      process.env.REVALIDATE_ENDPOINT || "https://hey.changes.page";
-
-    const result = await httpPost({
-      url: `${revalidateEndpoint}/api/revalidate?secret=${process.env.REVALIDATE_TOKEN}`,
-      data: { path },
-    });
-
-    console.log("revalidatePage: Result:", path, result);
-  } catch (error) {
-    console.error("revalidatePage failed: Error:", error);
-  }
-};

From 6df4d910ac480e7f93a09e0ba9a4d3a24ec8fb92 Mon Sep 17 00:00:00 2001
From: Arjun Komath <arjun@hey.com>
Date: Sun, 9 Feb 2025 22:05:15 +1100
Subject: [PATCH 10/24] Add audit logs

---
 apps/page/pages/_sites/[site]/index.tsx       |   7 -
 .../components/marketing/pricing-section.tsx  |   2 +-
 apps/web/components/post/post.tsx             |   9 +-
 apps/web/pages/api/posts/index.ts             |  13 +-
 apps/web/pages/pages/[page_id]/[post_id].tsx  |   9 +-
 apps/web/pages/pages/[page_id]/audit-logs.tsx | 123 ++++++++++++++++++
 apps/web/pages/pages/[page_id]/index.tsx      |  86 ++++++------
 apps/web/utils/hooks/usePageSettings.ts       |   9 +-
 apps/web/utils/useSSR.ts                      |   2 +-
 packages/supabase/migrations/16_teams.sql     |  15 ++-
 packages/supabase/types/index.ts              |  49 +++++++
 11 files changed, 272 insertions(+), 52 deletions(-)
 create mode 100644 apps/web/pages/pages/[page_id]/audit-logs.tsx

diff --git a/apps/page/pages/_sites/[site]/index.tsx b/apps/page/pages/_sites/[site]/index.tsx
index 7f2a83e..fa8f1a8 100644
--- a/apps/page/pages/_sites/[site]/index.tsx
+++ b/apps/page/pages/_sites/[site]/index.tsx
@@ -149,13 +149,6 @@ export default function Index({
   );
 }
 
-// export async function getStaticPaths() {
-//   return {
-//     paths: [],
-//     fallback: "blocking",
-//   };
-// }
-
 export async function getServerSideProps({
   params: { site },
 }: {
diff --git a/apps/web/components/marketing/pricing-section.tsx b/apps/web/components/marketing/pricing-section.tsx
index 397b6fd..5dcc558 100644
--- a/apps/web/components/marketing/pricing-section.tsx
+++ b/apps/web/components/marketing/pricing-section.tsx
@@ -15,7 +15,7 @@ export default function PricingSection({ unit_amount = 500, addons = [] }) {
     "Zapier Integration",
     "White labeling",
     "AI Assistant",
-    "Email Support",
+    "Email & Slack Support",
   ];
 
   return (
diff --git a/apps/web/components/post/post.tsx b/apps/web/components/post/post.tsx
index 04be81a..99421b2 100644
--- a/apps/web/components/post/post.tsx
+++ b/apps/web/components/post/post.tsx
@@ -35,7 +35,7 @@ export function Post({
   settings: IPageSettings;
   updatePageSettings: (settings: IPageSettings) => void;
 }) {
-  const { supabase } = useUserData();
+  const { supabase, user } = useUserData();
 
   const [openDeletePost, setOpenDeletePost] = useState(false);
   const [deletePost, setDeletePost] = useState(null);
@@ -54,6 +54,13 @@ export function Post({
       try {
         await supabase.from("posts").delete().eq("id", post.id);
 
+        await supabase.from("page_audit_logs").insert({
+          page_id: page.id,
+          actor_id: user.id,
+          action: "Deleted Post",
+          changes: post,
+        });
+
         fetchPosts();
         setIsDeleting(false);
         setOpenDeletePost(false);
diff --git a/apps/web/pages/api/posts/index.ts b/apps/web/pages/api/posts/index.ts
index 16463d8..77cd50d 100644
--- a/apps/web/pages/api/posts/index.ts
+++ b/apps/web/pages/api/posts/index.ts
@@ -24,7 +24,7 @@ const createNewPost = async (req: NextApiRequest, res: NextApiResponse) => {
     try {
       await apiRateLimiter(req, res);
 
-      const { user } = await getSupabaseServerClient({ req, res });
+      const { user, supabase } = await getSupabaseServerClient({ req, res });
 
       const isValid = await NewPostSchema.isValid({
         page_id,
@@ -48,7 +48,7 @@ const createNewPost = async (req: NextApiRequest, res: NextApiResponse) => {
 
       console.log("createNewPost", user?.id);
 
-      const post = await createPost({
+      const postPayload = {
         user_id: user.id,
         page_id,
         title,
@@ -63,6 +63,15 @@ const createNewPost = async (req: NextApiRequest, res: NextApiResponse) => {
         notes: notes ?? "",
         allow_reactions: allow_reactions ?? false,
         email_notified: email_notified ?? false,
+      };
+
+      const post = await createPost(postPayload);
+
+      await supabase.from("page_audit_logs").insert({
+        page_id,
+        actor_id: user.id,
+        action: `Created Post: ${post.title}`,
+        changes: postPayload,
       });
 
       return res.status(201).json({ post });
diff --git a/apps/web/pages/pages/[page_id]/[post_id].tsx b/apps/web/pages/pages/[page_id]/[post_id].tsx
index b65eaf2..01f83c5 100644
--- a/apps/web/pages/pages/[page_id]/[post_id].tsx
+++ b/apps/web/pages/pages/[page_id]/[post_id].tsx
@@ -42,7 +42,7 @@ export default function EditPost({
   post,
   settings,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) {
-  const { supabase } = useUserData();
+  const { supabase, user } = useUserData();
   const router = useRouter();
   const [saving, setSaving] = useState<boolean>(false);
 
@@ -60,6 +60,13 @@ export default function EditPost({
 
       await supabase.from("posts").update(newPost).match({ id: post_id });
 
+      await supabase.from("page_audit_logs").insert({
+        page_id: page_id,
+        actor_id: user.id,
+        action: `Updated Post: ${newPost.title}`,
+        changes: newPost,
+      });
+
       return await router.push(`${ROUTES.PAGES}/${page_id}`);
     } catch (e) {
       setSaving(false);
diff --git a/apps/web/pages/pages/[page_id]/audit-logs.tsx b/apps/web/pages/pages/[page_id]/audit-logs.tsx
new file mode 100644
index 0000000..22a251d
--- /dev/null
+++ b/apps/web/pages/pages/[page_id]/audit-logs.tsx
@@ -0,0 +1,123 @@
+import { supabaseAdmin } from "@changes-page/supabase/admin";
+import { DateTime } from "@changes-page/utils";
+import { ClockIcon, UserIcon } from "@heroicons/react/solid";
+import { InferGetServerSidePropsType } from "next";
+import AuthLayout from "../../../components/layout/auth-layout.component";
+import Page from "../../../components/layout/page.component";
+import { ROUTES } from "../../../data/routes.data";
+import { getSupabaseServerClient } from "../../../utils/supabase/supabase-admin";
+import { getPage } from "../../../utils/useSSR";
+
+export async function getServerSideProps({ req, res, query }) {
+  const { page_id } = query;
+
+  const { supabase } = await getSupabaseServerClient({ req, res });
+  const page = await getPage(supabase, page_id);
+  const { data: audit_logs } = await supabaseAdmin
+    .from("page_audit_logs")
+    .select("*, actor:actor_id(full_name)")
+    .eq("page_id", page_id)
+    .limit(100)
+    .order("created_at", { ascending: false });
+
+  return {
+    props: {
+      page,
+      page_id,
+      audit_logs: audit_logs ?? [],
+    },
+  };
+}
+
+export default function PageAnalytics({
+  page,
+  page_id,
+  audit_logs,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) {
+  return (
+    <Page
+      title={page?.title}
+      subtitle="Audit Logs"
+      backRoute={`${ROUTES.PAGES}/${page_id}`}
+      showBackButton={true}
+    >
+      <div className="max-w-3xl mx-auto">
+        {audit_logs.length > 0 ? (
+          <ul role="list" className="space-y-6">
+            {audit_logs.map((log) => (
+              <li
+                key={log.id}
+                className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4"
+              >
+                <div className="flex items-start justify-between">
+                  <div className="flex items-center space-x-3">
+                    <div className="flex-shrink-0">
+                      <div className="w-10 h-10 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center">
+                        <UserIcon className="w-5 h-5 text-blue-600 dark:text-blue-300" />
+                      </div>
+                    </div>
+                    <div>
+                      <p className="font-medium text-gray-900 dark:text-gray-100">
+                        {log.actor?.full_name || log.actor_id}
+                      </p>
+                      <p className="text-sm text-blue-600 dark:text-blue-400 font-medium mt-0.5">
+                        {log.action}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="flex items-center text-sm text-gray-500 dark:text-gray-400">
+                    <ClockIcon className="w-4 h-4 mr-1" />
+                    <time dateTime={log.created_at} suppressHydrationWarning>
+                      {DateTime.fromISO(log.created_at).toNiceFormat()}
+                    </time>
+                  </div>
+                </div>
+
+                {log.changes && Object.keys(log.changes).length > 0 && (
+                  <div className="mt-4 bg-gray-50 dark:bg-gray-900 rounded-md p-3">
+                    <p className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-2">
+                      Changes
+                    </p>
+                    <div className="space-y-2">
+                      {Object.entries(log.changes)
+                        .filter(([key]) => key !== "created_at")
+                        .filter(
+                          ([key]) =>
+                            !key.includes("id") &&
+                            !key.includes("image") &&
+                            !key.includes("at")
+                        )
+
+                        .map(([key, value]) => (
+                          <div key={key} className="flex items-start">
+                            <span className="text-xs font-medium text-gray-700 dark:text-gray-300 min-w-[100px]">
+                              {key.replace(/_/g, " ")}:
+                            </span>
+                            <span className="text-xs text-gray-600 dark:text-gray-400 ml-2">
+                              {typeof value === "object"
+                                ? JSON.stringify(value, null, 2).slice(0, 100) +
+                                  (JSON.stringify(value).length > 100
+                                    ? "..."
+                                    : "")
+                                : String(value).slice(0, 100) +
+                                  (String(value).length > 100 ? "..." : "")}
+                            </span>
+                          </div>
+                        ))}
+                    </div>
+                  </div>
+                )}
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <div className="text-center text-gray-500">No audit logs found</div>
+        )}
+      </div>
+    </Page>
+  );
+}
+
+PageAnalytics.getLayout = function getLayout(page: any) {
+  return <AuthLayout>{page}</AuthLayout>;
+};
diff --git a/apps/web/pages/pages/[page_id]/index.tsx b/apps/web/pages/pages/[page_id]/index.tsx
index 542aa2a..d081f4c 100644
--- a/apps/web/pages/pages/[page_id]/index.tsx
+++ b/apps/web/pages/pages/[page_id]/index.tsx
@@ -78,7 +78,7 @@ export default function PageDetail({
   settings: serverSettings,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) {
   const router = useRouter();
-  const { supabase } = useUserData();
+  const { supabase, user } = useUserData();
   const { status } = router.query;
 
   const [search, setSearch] = useState("");
@@ -88,6 +88,8 @@ export default function PageDetail({
     false
   );
 
+  const isPageOwner = useMemo(() => page?.user_id === user?.id, [page, user]);
+
   const settings = useMemo(
     () => clientSettings ?? serverSettings,
     [serverSettings, clientSettings]
@@ -175,29 +177,37 @@ export default function PageDetail({
     [router, page_id]
   );
 
-  const managePageLinks = useMemo(
-    () =>
-      pageUrl
-        ? [
-            {
-              label: "Analytics",
-              href: `${ROUTES.PAGES}/${page_id}/analytics`,
-              icon: (props) => <ChartBarIcon {...props} />,
-            },
-            {
-              label: "Settings",
-              href: `${ROUTES.PAGES}/${page_id}/settings/general`,
-              icon: (props) => <CogIcon {...props} />,
-            },
-            {
-              label: "Edit Page",
-              href: `${ROUTES.PAGES}/${page_id}/edit`,
-              icon: (props) => <PencilAltIcon {...props} />,
-            },
-          ]
-        : [],
-    [pageUrl, page_id]
-  );
+  const managePageLinks = useMemo(() => {
+    const links = pageUrl
+      ? [
+          {
+            label: "Analytics",
+            href: `${ROUTES.PAGES}/${page_id}/analytics`,
+            icon: (props) => <ChartBarIcon {...props} />,
+          },
+          {
+            label: "Settings",
+            href: `${ROUTES.PAGES}/${page_id}/settings/general`,
+            icon: (props) => <CogIcon {...props} />,
+          },
+          {
+            label: "Audit Logs",
+            href: `${ROUTES.PAGES}/${page_id}/audit-logs`,
+            icon: (props) => <DocumentTextIcon {...props} />,
+          },
+        ]
+      : [];
+
+    if (isPageOwner) {
+      links.push({
+        label: "Edit Page",
+        href: `${ROUTES.PAGES}/${page_id}/edit`,
+        icon: (props) => <PencilAltIcon {...props} />,
+      });
+    }
+
+    return links;
+  }, [pageUrl, page_id, isPageOwner]);
 
   const pageLinks = useMemo(
     () =>
@@ -264,7 +274,7 @@ export default function PageDetail({
       <ConfirmDeleteDialog
         highRiskAction
         riskVerificationText="delete page"
-        open={openDeletePage}
+        open={openDeletePage && isPageOwner}
         setOpen={setOpenDeletePage}
         itemName={page?.title}
         processing={isDeleting}
@@ -323,18 +333,20 @@ export default function PageDetail({
                 />
               ))}
             </div>
-            <div className="py-1">
-              <MenuItem
-                label="Delete Page"
-                icon={
-                  <TrashIcon
-                    className="mr-3 h-5 w-5 text-red-400 group-hover:text-red-500"
-                    aria-hidden="true"
-                  />
-                }
-                onClick={() => setOpenDeletePage(true)}
-              />
-            </div>
+            {isPageOwner && (
+              <div className="py-1">
+                <MenuItem
+                  label="Delete Page"
+                  icon={
+                    <TrashIcon
+                      className="mr-3 h-5 w-5 text-red-400 group-hover:text-red-500"
+                      aria-hidden="true"
+                    />
+                  }
+                  onClick={() => setOpenDeletePage(true)}
+                />
+              </div>
+            )}
           </>
         }
       >
diff --git a/apps/web/utils/hooks/usePageSettings.ts b/apps/web/utils/hooks/usePageSettings.ts
index ba9ea54..c759d7e 100644
--- a/apps/web/utils/hooks/usePageSettings.ts
+++ b/apps/web/utils/hooks/usePageSettings.ts
@@ -9,7 +9,7 @@ import { httpGet } from "../http";
 import { useUserData } from "../useUser";
 
 export default function usePageSettings(pageId: string, prefetch = true) {
-  const { supabase } = useUserData();
+  const { supabase, user } = useUserData();
   const [loading, setLoading] = useState(true);
 
   const [settings, setSettings] = useState<IPageSettings>(null);
@@ -22,6 +22,13 @@ export default function usePageSettings(pageId: string, prefetch = true) {
         .match({ page_id: pageId })
         .select();
 
+      await supabase.from("page_audit_logs").insert({
+        page_id: pageId,
+        actor_id: user.id,
+        action: "Updated Page Settings",
+        changes: payload,
+      });
+
       if (settings.length) {
         setSettings(settings[0]);
       }
diff --git a/apps/web/utils/useSSR.ts b/apps/web/utils/useSSR.ts
index f8f4a29..34d723e 100644
--- a/apps/web/utils/useSSR.ts
+++ b/apps/web/utils/useSSR.ts
@@ -3,7 +3,7 @@ import { SupabaseClient } from "@supabase/auth-helpers-nextjs";
 export async function getPage(supabase: SupabaseClient, id: string) {
   const { data: page } = await supabase
     .from("pages")
-    .select("id,title,type,description,url_slug")
+    .select("id,title,type,description,url_slug,user_id")
     .eq("id", id)
     .maybeSingle()
     .throwOnError();
diff --git a/packages/supabase/migrations/16_teams.sql b/packages/supabase/migrations/16_teams.sql
index 32ef6f7..78cd75a 100644
--- a/packages/supabase/migrations/16_teams.sql
+++ b/packages/supabase/migrations/16_teams.sql
@@ -97,4 +97,17 @@ alter table page_settings drop column user_id;
 -- Update posts
 alter policy "Can view own posts." on posts using (page_id in (select id from pages));
 alter policy "Can update own posts." on posts using (page_id in (select id from pages));
-alter policy "Can delete own posts." on posts using (page_id in (select id from pages));
\ No newline at end of file
+alter policy "Can delete own posts." on posts using (page_id in (select id from pages));
+
+-- Audit logs table
+create table page_audit_logs (
+  id uuid default uuid_generate_v4() primary key,
+  page_id uuid references pages not null,
+  actor_id uuid references users not null,
+  action text not null,
+  changes jsonb,
+  created_at timestamp with time zone default timezone('utc'::text, now()) not null
+);
+
+alter table page_audit_logs enable row level security;
+create policy "Can insert page audit logs." on page_audit_logs for insert with check (actor_id = auth.uid());
\ No newline at end of file
diff --git a/packages/supabase/types/index.ts b/packages/supabase/types/index.ts
index afeb7d3..6b653b2 100644
--- a/packages/supabase/types/index.ts
+++ b/packages/supabase/types/index.ts
@@ -9,6 +9,48 @@ export type Json =
 export type Database = {
   public: {
     Tables: {
+      page_audit_logs: {
+        Row: {
+          action: string
+          actor_id: string
+          changes: Json | null
+          created_at: string
+          id: string
+          page_id: string
+        }
+        Insert: {
+          action: string
+          actor_id: string
+          changes?: Json | null
+          created_at?: string
+          id?: string
+          page_id: string
+        }
+        Update: {
+          action?: string
+          actor_id?: string
+          changes?: Json | null
+          created_at?: string
+          id?: string
+          page_id?: string
+        }
+        Relationships: [
+          {
+            foreignKeyName: "page_audit_logs_actor_id_fkey"
+            columns: ["actor_id"]
+            isOneToOne: false
+            referencedRelation: "users"
+            referencedColumns: ["id"]
+          },
+          {
+            foreignKeyName: "page_audit_logs_page_id_fkey"
+            columns: ["page_id"]
+            isOneToOne: false
+            referencedRelation: "pages"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
       page_email_subscribers: {
         Row: {
           created_at: string
@@ -517,6 +559,13 @@ export type Database = {
         }
         Returns: boolean
       }
+      is_team_member: {
+        Args: {
+          tid: string
+          uid: string
+        }
+        Returns: boolean
+      }
       page_view_browsers: {
         Args: {
           pageid: string

From 98171f4403646cd101a12ac0d29a4f431dfb96f8 Mon Sep 17 00:00:00 2001
From: Arjun Komath <arjun@hey.com>
Date: Sun, 9 Feb 2025 22:31:05 +1100
Subject: [PATCH 11/24] Make UI nicer

---
 apps/web/pages/pages/[page_id]/audit-logs.tsx | 35 +++++++++++++------
 apps/web/pages/pages/index.tsx                |  9 ++---
 2 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/apps/web/pages/pages/[page_id]/audit-logs.tsx b/apps/web/pages/pages/[page_id]/audit-logs.tsx
index 22a251d..a0356fe 100644
--- a/apps/web/pages/pages/[page_id]/audit-logs.tsx
+++ b/apps/web/pages/pages/[page_id]/audit-logs.tsx
@@ -1,6 +1,13 @@
 import { supabaseAdmin } from "@changes-page/supabase/admin";
+import { Timeline } from "@changes-page/ui";
 import { DateTime } from "@changes-page/utils";
-import { ClockIcon, UserIcon } from "@heroicons/react/solid";
+import {
+  ClockIcon,
+  PencilIcon,
+  PlusIcon,
+  TrashIcon,
+  UserIcon,
+} from "@heroicons/react/solid";
 import { InferGetServerSidePropsType } from "next";
 import AuthLayout from "../../../components/layout/auth-layout.component";
 import Page from "../../../components/layout/page.component";
@@ -41,19 +48,25 @@ export default function PageAnalytics({
       backRoute={`${ROUTES.PAGES}/${page_id}`}
       showBackButton={true}
     >
-      <div className="max-w-3xl mx-auto">
+      <div className="relative -mt-4 max-w-3xl mx-auto">
+        <Timeline />
         {audit_logs.length > 0 ? (
           <ul role="list" className="space-y-6">
             {audit_logs.map((log) => (
-              <li
-                key={log.id}
-                className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4"
-              >
+              <li key={log.id} className="p-4">
                 <div className="flex items-start justify-between">
-                  <div className="flex items-center space-x-3">
+                  <div className="flex items-center space-x-3 sm:-ml-8 sm:z-[2]">
                     <div className="flex-shrink-0">
-                      <div className="w-10 h-10 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center">
-                        <UserIcon className="w-5 h-5 text-blue-600 dark:text-blue-300" />
+                      <div className="w-10 h-10 bg-gray-100 dark:bg-gray-900 rounded-full flex items-center justify-center border border-gray-200 dark:border-gray-800">
+                        {log.action.toLowerCase().includes("delete") ? (
+                          <TrashIcon className="w-5 h-5 text-red-600 dark:text-red-300" />
+                        ) : log.action.toLowerCase().includes("create") ? (
+                          <PlusIcon className="w-5 h-5 text-green-600 dark:text-green-300" />
+                        ) : log.action.toLowerCase().includes("update") ? (
+                          <PencilIcon className="w-5 h-5 text-yellow-600 dark:text-yellow-300" />
+                        ) : (
+                          <UserIcon className="w-5 h-5 text-blue-600 dark:text-blue-300" />
+                        )}
                       </div>
                     </div>
                     <div>
@@ -74,7 +87,7 @@ export default function PageAnalytics({
                 </div>
 
                 {log.changes && Object.keys(log.changes).length > 0 && (
-                  <div className="mt-4 bg-gray-50 dark:bg-gray-900 rounded-md p-3">
+                  <div className="mt-4 bg-gray-50 dark:bg-gray-950 rounded-md p-3">
                     <p className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-2">
                       Changes
                     </p>
@@ -87,7 +100,7 @@ export default function PageAnalytics({
                             !key.includes("image") &&
                             !key.includes("at")
                         )
-
+                        .filter(([_, value]) => value !== null && value !== "")
                         .map(([key, value]) => (
                           <div key={key} className="flex items-start">
                             <span className="text-xs font-medium text-gray-700 dark:text-gray-300 min-w-[100px]">
diff --git a/apps/web/pages/pages/index.tsx b/apps/web/pages/pages/index.tsx
index 9c4d060..3c2b957 100644
--- a/apps/web/pages/pages/index.tsx
+++ b/apps/web/pages/pages/index.tsx
@@ -1,5 +1,5 @@
 import { PageType, PageTypeToLabel } from "@changes-page/supabase/types/page";
-import { PlusIcon, UserGroupIcon, UserIcon } from "@heroicons/react/solid";
+import { PlusIcon, UserGroupIcon } from "@heroicons/react/solid";
 import classNames from "classnames";
 import { GetServerSidePropsContext, InferGetServerSidePropsType } from "next";
 import { useRouter } from "next/router";
@@ -161,12 +161,7 @@ export default function Pages({
                           Editor ({page.teams.name})
                         </span>
                       </div>
-                    ) : (
-                      <div className="flex items-center gap-1">
-                        <UserIcon className="h-4 w-4" />
-                        <span className="text-sm font-medium">Owner</span>
-                      </div>
-                    )}
+                    ) : null}
                   </span>
                 </div>
               ))}

From 3fdbe7ffebf7a95078d1e4cb212d6ce843c6b2a5 Mon Sep 17 00:00:00 2001
From: Arjun Komath <arjun@hey.com>
Date: Sun, 9 Feb 2025 22:35:43 +1100
Subject: [PATCH 12/24] Show empty values in audit logs

---
 apps/web/pages/pages/[page_id]/audit-logs.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/web/pages/pages/[page_id]/audit-logs.tsx b/apps/web/pages/pages/[page_id]/audit-logs.tsx
index a0356fe..41b716e 100644
--- a/apps/web/pages/pages/[page_id]/audit-logs.tsx
+++ b/apps/web/pages/pages/[page_id]/audit-logs.tsx
@@ -100,7 +100,6 @@ export default function PageAnalytics({
                             !key.includes("image") &&
                             !key.includes("at")
                         )
-                        .filter(([_, value]) => value !== null && value !== "")
                         .map(([key, value]) => (
                           <div key={key} className="flex items-start">
                             <span className="text-xs font-medium text-gray-700 dark:text-gray-300 min-w-[100px]">

From 58c8a18bcc4ab9fd0a201d3d99bb4612294bde0a Mon Sep 17 00:00:00 2001
From: Arjun Komath <arjun@hey.com>
Date: Mon, 10 Feb 2025 20:41:54 +1100
Subject: [PATCH 13/24] Minor UI fixes, tracking teams feature

---
 .../dialogs/manage-team-dialog.component.tsx  |   3 +
 .../layout/auth-layout.component.tsx          |   6 +
 apps/web/components/layout/page.component.tsx |   4 +-
 apps/web/next.config.js                       |   2 +-
 apps/web/pages/pages/[page_id]/index.tsx      |   2 +-
 apps/web/pages/pages/[page_id]/new.tsx        |   2 +-
 apps/web/pages/pages/index.tsx                |   8 +-
 apps/web/pages/teams/index.tsx                | 178 +++++++++++-------
 8 files changed, 123 insertions(+), 82 deletions(-)

diff --git a/apps/web/components/dialogs/manage-team-dialog.component.tsx b/apps/web/components/dialogs/manage-team-dialog.component.tsx
index 05b75df..8133d3a 100644
--- a/apps/web/components/dialogs/manage-team-dialog.component.tsx
+++ b/apps/web/components/dialogs/manage-team-dialog.component.tsx
@@ -7,6 +7,7 @@ import { Fragment, useEffect, useRef } from "react";
 import { InferType } from "yup";
 import { ROUTES } from "../../data/routes.data";
 import { NewTeamSchema } from "../../data/schema";
+import { track } from "../../utils/analytics";
 import { useUserData } from "../../utils/useUser";
 import { InlineErrorMessage } from "../forms/notification.component";
 
@@ -65,6 +66,7 @@ export default function ManageTeamDialog({
             image: values.image,
           })
           .match({ id: team.id });
+        track("EditTeam");
         onSuccess();
       } else {
         await supabase
@@ -77,6 +79,7 @@ export default function ManageTeamDialog({
             },
           ])
           .select();
+        track("CreateTeam");
         onSuccess();
       }
 
diff --git a/apps/web/components/layout/auth-layout.component.tsx b/apps/web/components/layout/auth-layout.component.tsx
index 5a527fc..5b19e2a 100644
--- a/apps/web/components/layout/auth-layout.component.tsx
+++ b/apps/web/components/layout/auth-layout.component.tsx
@@ -5,6 +5,12 @@ export default function AuthLayout({ children }) {
     <div className="block h-full min-h-full">
       <HeaderComponent />
       {children}
+      <script
+        data-jsd-embedded
+        data-key="0b2ca96c-0f7b-4bb3-b51c-e58d76d8e37d"
+        data-base-url="https://jsd-widget.atlassian.com"
+        src="https://jsd-widget.atlassian.com/assets/embed.js"
+      />
     </div>
   );
 }
diff --git a/apps/web/components/layout/page.component.tsx b/apps/web/components/layout/page.component.tsx
index 6980c04..b693668 100644
--- a/apps/web/components/layout/page.component.tsx
+++ b/apps/web/components/layout/page.component.tsx
@@ -81,7 +81,7 @@ export default function Page({
             !!title && tabs.length > 0 && "relative sm:pb-0 lg:pb-2"
           )}
         >
-          <div className="flex flex-row justify-between items-center">
+          <div className="flex flex-row justify-between items-center h-[100px]">
             <div className="flex items-start min-w-0">
               {showBackButton && (
                 <button
@@ -164,7 +164,7 @@ export default function Page({
           </div>
 
           {!!title && tabs?.length > 0 && (
-            <div className="mt-2 lg:absolute lg:right-8 lg:top-8 lg:pt-2">
+            <div className="mt-2 lg:absolute lg:right-8 lg:bottom-0 lg:pt-2">
               <div className="sm:hidden">
                 <label htmlFor="current-tab" className="sr-only">
                   Select a tab
diff --git a/apps/web/next.config.js b/apps/web/next.config.js
index adbb4bc..7b53dc7 100644
--- a/apps/web/next.config.js
+++ b/apps/web/next.config.js
@@ -5,7 +5,7 @@ const ContentSecurityPolicy = `
   style-src 'self' data: 'unsafe-inline' maxcdn.bootstrapcdn.com cdn.jsdelivr.net cdn.zapier.com fonts.googleapis.com;
   img-src 'self' * data: blob:;
   font-src 'self' data: maxcdn.bootstrapcdn.com cdn.jsdelivr.net fonts.gstatic.com;
-  connect-src 'self' wss: *.supabase.co *.changes.page manageprompt.com zapier.com *.zapier.com www.google.com;
+  connect-src 'self' wss: *.supabase.co *.changes.page manageprompt.com zapier.com *.zapier.com www.google.com *.atlassian.com;
   worker-src 'self' blob:;
   report-to default
 `;
diff --git a/apps/web/pages/pages/[page_id]/index.tsx b/apps/web/pages/pages/[page_id]/index.tsx
index d081f4c..e08df47 100644
--- a/apps/web/pages/pages/[page_id]/index.tsx
+++ b/apps/web/pages/pages/[page_id]/index.tsx
@@ -289,7 +289,7 @@ export default function PageDetail({
         containerClassName="lg:pb-0"
         buttons={
           <PrimaryRouterButton
-            label="New"
+            label="Post"
             icon={
               <PlusIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
             }
diff --git a/apps/web/pages/pages/[page_id]/new.tsx b/apps/web/pages/pages/[page_id]/new.tsx
index 719eb97..89e9dc1 100644
--- a/apps/web/pages/pages/[page_id]/new.tsx
+++ b/apps/web/pages/pages/[page_id]/new.tsx
@@ -15,7 +15,7 @@ import { track } from "../../../utils/analytics";
 import { httpPost } from "../../../utils/http";
 import { createOrRetrievePageSettings } from "../../../utils/useDatabase";
 
-export async function getServerSideProps({ params, req, res }) {
+export async function getServerSideProps({ params }) {
   const { page_id } = params;
 
   const settings = await createOrRetrievePageSettings(String(page_id));
diff --git a/apps/web/pages/pages/index.tsx b/apps/web/pages/pages/index.tsx
index 3c2b957..7984852 100644
--- a/apps/web/pages/pages/index.tsx
+++ b/apps/web/pages/pages/index.tsx
@@ -59,7 +59,7 @@ export default function Pages({
         title={"My Pages"}
         buttons={
           <PrimaryRouterButton
-            label="New"
+            label="Page"
             icon={
               <PlusIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
             }
@@ -71,7 +71,7 @@ export default function Pages({
       >
         {billingDetails?.has_active_subscription ? <Changelog /> : null}
 
-        <div className="overflow-hidden sm:rounded-md">
+        <div className="overflow-hidden">
           {!pages.length && (
             <EntityEmptyState
               title="No pages yet!"
@@ -103,7 +103,7 @@ export default function Pages({
           )}
 
           {pages.length ? (
-            <div className="divide-y divide-gray-200 dark:divide-gray-800 overflow-hidden rounded-lg shadow sm:grid sm:grid-cols-2 sm:gap-px sm:divide-y-0">
+            <div className="divide-y divide-gray-200 dark:divide-gray-800 overflow-hidden shadow sm:grid sm:grid-cols-2 sm:gap-px sm:divide-y-0">
               {pages.map((page) => (
                 <div
                   key={page.id}
@@ -130,7 +130,7 @@ export default function Pages({
                           "text-rose-500 dark:text-rose-100",
                         page.type === PageType.updates &&
                           "text-amber-500 dark:text-amber-100",
-                        "rounded-lg inline-flex px-2 py-1 font-bold"
+                        "inline-flex px-2 py-1 font-bold"
                       )}
                     >
                       {PageTypeToLabel[page.type]}
diff --git a/apps/web/pages/teams/index.tsx b/apps/web/pages/teams/index.tsx
index 46951a2..5bc506c 100644
--- a/apps/web/pages/teams/index.tsx
+++ b/apps/web/pages/teams/index.tsx
@@ -1,6 +1,6 @@
 import { IPage } from "@changes-page/supabase/types/page";
 import { SpinnerWithSpacing } from "@changes-page/ui";
-import { CheckCircleIcon, UserIcon } from "@heroicons/react/solid";
+import { CheckCircleIcon, PlusIcon, UserIcon } from "@heroicons/react/solid";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
@@ -16,6 +16,7 @@ import { EntityEmptyState } from "../../components/entity/empty-state";
 import AuthLayout from "../../components/layout/auth-layout.component";
 import Page from "../../components/layout/page.component";
 import Changelog from "../../components/marketing/changelog";
+import { track } from "../../utils/analytics";
 import { httpPost } from "../../utils/http";
 import { useUserData } from "../../utils/useUser";
 
@@ -109,11 +110,89 @@ export default function Teams() {
       return;
     }
 
+    track("DeleteTeam");
     fetchTeams();
     setTeamToDelete(null);
     setIsDeleting(false);
   };
 
+  const handleAssignPage = async (teamId: string, pageId: string) => {
+    setAssigningPage(true);
+
+    await supabase
+      .from("pages")
+      .update({
+        team_id: teamId,
+      })
+      .match({ id: pageId });
+
+    track("AssignPageToTeam");
+    fetchTeams();
+    setAssigningPage(false);
+    setShowAssignPage(null);
+    setSelectedPage(null);
+  };
+
+  const handleRemovePage = async (pageId: string) => {
+    await supabase
+      .from("pages")
+      .update({
+        team_id: null,
+      })
+      .match({ id: pageId });
+
+    track("RemovePageFromTeam");
+    fetchTeams();
+  };
+
+  const handleRemoveMember = async (teamId: string, userId: string) => {
+    await supabase.from("team_members").delete().match({
+      team_id: teamId,
+      user_id: userId,
+    });
+
+    track("RemoveTeamMember");
+    fetchTeams();
+  };
+
+  const handleRevokeInvite = async (inviteId: string) => {
+    await supabase.from("team_invitations").delete().match({ id: inviteId });
+
+    track("RevokeTeamInvitation");
+    fetchTeams();
+  };
+
+  const handleAcceptInvite = async (inviteId: string) => {
+    await toast.promise(
+      httpPost({
+        url: "/api/teams/invite/accept",
+        data: {
+          invite_id: inviteId,
+        },
+      }),
+      {
+        loading: "Joining team...",
+        success: "Joined team",
+        error: "Failed to join team",
+      }
+    );
+
+    track("AcceptTeamInvitation");
+    fetchTeams();
+  };
+
+  const handleLeaveTeam = async (teamId: string) => {
+    if (confirm("Are you sure you want to leave this team?")) {
+      await supabase.from("team_members").delete().match({
+        team_id: teamId,
+        user_id: user?.id,
+      });
+
+      track("LeaveTeam");
+      fetchTeams();
+    }
+  };
+
   return (
     <>
       <Page
@@ -121,9 +200,12 @@ export default function Teams() {
         buttons={
           <PrimaryButton
             keyboardShortcut="N"
-            label="New"
+            label="Team"
             onClick={() => setShowTeamModal(true)}
             disabled={!billingDetails?.has_active_subscription}
+            icon={
+              <PlusIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
+            }
           />
         }
       >
@@ -224,16 +306,9 @@ export default function Teams() {
                                         <div className="ml-4 shrink-0">
                                           <button
                                             className="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300"
-                                            onClick={async () => {
-                                              await supabase
-                                                .from("pages")
-                                                .update({
-                                                  team_id: null,
-                                                })
-                                                .match({ id: page.id });
-
-                                              fetchTeams();
-                                            }}
+                                            onClick={() =>
+                                              handleRemovePage(page.id)
+                                            }
                                           >
                                             Remove
                                           </button>
@@ -289,25 +364,9 @@ export default function Teams() {
                                       }
                                       disabled={assigningPage}
                                       className="ml-2 h-8"
-                                      onClick={async () => {
-                                        if (!selectedPage) {
-                                          return;
-                                        }
-
-                                        setAssigningPage(true);
-
-                                        await supabase
-                                          .from("pages")
-                                          .update({
-                                            team_id: team.id,
-                                          })
-                                          .match({ id: selectedPage });
-
-                                        fetchTeams();
-                                        setAssigningPage(null);
-                                        setShowAssignPage(null);
-                                        setSelectedPage(null);
-                                      }}
+                                      onClick={() =>
+                                        handleAssignPage(team.id, selectedPage)
+                                      }
                                     />
 
                                     <SecondaryButton
@@ -364,6 +423,12 @@ export default function Teams() {
                                         <a
                                           href="#"
                                           className="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300"
+                                          onClick={() =>
+                                            handleRemoveMember(
+                                              team.id,
+                                              member.user_id
+                                            )
+                                          }
                                         >
                                           Remove
                                         </a>
@@ -415,14 +480,9 @@ export default function Teams() {
                                       <div className="ml-4 shrink-0">
                                         <button
                                           className="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300"
-                                          onClick={async () => {
-                                            await supabase
-                                              .from("team_invitations")
-                                              .delete()
-                                              .match({ id: invite.id });
-
-                                            fetchTeams();
-                                          }}
+                                          onClick={() =>
+                                            handleRevokeInvite(invite.id)
+                                          }
                                         >
                                           Revoke
                                         </button>
@@ -501,23 +561,11 @@ export default function Teams() {
                               <button
                                 type="button"
                                 className="inline-flex items-center rounded-md bg-green-50 dark:bg-green-900/20 px-2.5 py-1.5 text-sm font-semibold text-green-700 dark:text-green-400 shadow-sm ring-1 ring-inset ring-green-600/10 dark:ring-green-500/20 hover:bg-green-100 dark:hover:bg-green-900/30"
-                                onClick={async () => {
-                                  await toast.promise(
-                                    httpPost({
-                                      url: "/api/teams/invite/accept",
-                                      data: {
-                                        invite_id: team.team_invitations[0].id,
-                                      },
-                                    }),
-                                    {
-                                      loading: "Joining team...",
-                                      success: "Joined team",
-                                      error: "Failed to join team",
-                                    }
-                                  );
-
-                                  fetchTeams();
-                                }}
+                                onClick={() =>
+                                  handleAcceptInvite(
+                                    team.team_invitations[0].id
+                                  )
+                                }
                               >
                                 Join
                               </button>
@@ -525,23 +573,7 @@ export default function Teams() {
                               <button
                                 type="button"
                                 className="inline-flex items-center rounded-md bg-red-50 dark:bg-red-900/20 px-2.5 py-1.5 text-sm font-semibold text-red-700 dark:text-red-400 shadow-sm ring-1 ring-inset ring-red-600/10 dark:ring-red-500/20 hover:bg-red-100 dark:hover:bg-red-900/30"
-                                onClick={async () => {
-                                  if (
-                                    confirm(
-                                      "Are you sure you want to leave this team?"
-                                    )
-                                  ) {
-                                    await supabase
-                                      .from("team_members")
-                                      .delete()
-                                      .match({
-                                        team_id: team.id,
-                                        user_id: user?.id,
-                                      });
-
-                                    fetchTeams();
-                                  }
-                                }}
+                                onClick={() => handleLeaveTeam(team.id)}
                               >
                                 Leave
                               </button>

From 89dec9337f74bd693e0c3a52f09f0eb3544491fe Mon Sep 17 00:00:00 2001
From: Arjun Komath <arjun@hey.com>
Date: Mon, 10 Feb 2025 22:03:30 +1100
Subject: [PATCH 14/24] Fix team button for non-pro users

---
 apps/web/components/core/buttons.component.tsx | 18 ++++++++++++++++++
 apps/web/pages/pages/[page_id]/audit-logs.tsx  |  4 +++-
 apps/web/pages/teams/index.tsx                 |  2 +-
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/apps/web/components/core/buttons.component.tsx b/apps/web/components/core/buttons.component.tsx
index 7573542..9b00840 100644
--- a/apps/web/components/core/buttons.component.tsx
+++ b/apps/web/components/core/buttons.component.tsx
@@ -100,6 +100,7 @@ export function PrimaryButton({
   className,
   disabled,
   keyboardShortcut,
+  upgradeRequired,
 }: {
   label: string | JSX.Element;
   type?: "button" | "submit" | "reset";
@@ -108,7 +109,24 @@ export function PrimaryButton({
   disabled?: boolean;
   className?: string;
   keyboardShortcut?: string;
+  upgradeRequired?: boolean;
 }) {
+  if (upgradeRequired) {
+    return (
+      <button
+        className={classNames(
+          "inline-flex items-center justify-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-gray-400 cursor-not-allowed",
+          className
+        )}
+        title="Please upgrade to a paid plan"
+        disabled
+      >
+        <LockClosedIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
+        {label}
+      </button>
+    );
+  }
+
   return (
     <button
       className={classNames(
diff --git a/apps/web/pages/pages/[page_id]/audit-logs.tsx b/apps/web/pages/pages/[page_id]/audit-logs.tsx
index 41b716e..ea3c69f 100644
--- a/apps/web/pages/pages/[page_id]/audit-logs.tsx
+++ b/apps/web/pages/pages/[page_id]/audit-logs.tsx
@@ -123,7 +123,9 @@ export default function PageAnalytics({
             ))}
           </ul>
         ) : (
-          <div className="text-center text-gray-500">No audit logs found</div>
+          <div className="text-center text-gray-500 p-12">
+            No audit logs found
+          </div>
         )}
       </div>
     </Page>
diff --git a/apps/web/pages/teams/index.tsx b/apps/web/pages/teams/index.tsx
index 5bc506c..4c836c5 100644
--- a/apps/web/pages/teams/index.tsx
+++ b/apps/web/pages/teams/index.tsx
@@ -202,10 +202,10 @@ export default function Teams() {
             keyboardShortcut="N"
             label="Team"
             onClick={() => setShowTeamModal(true)}
-            disabled={!billingDetails?.has_active_subscription}
             icon={
               <PlusIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
             }
+            upgradeRequired={!billingDetails?.has_active_subscription}
           />
         }
       >

From 038944e6be3eaa2b9997cc71496c7ccbbaada44e Mon Sep 17 00:00:00 2001
From: Arjun Komath <arjun@hey.com>
Date: Mon, 10 Feb 2025 22:07:03 +1100
Subject: [PATCH 15/24] Fix page title height on mobile

---
 apps/web/components/layout/page.component.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/components/layout/page.component.tsx b/apps/web/components/layout/page.component.tsx
index b693668..b032b10 100644
--- a/apps/web/components/layout/page.component.tsx
+++ b/apps/web/components/layout/page.component.tsx
@@ -81,7 +81,7 @@ export default function Page({
             !!title && tabs.length > 0 && "relative sm:pb-0 lg:pb-2"
           )}
         >
-          <div className="flex flex-row justify-between items-center h-[100px]">
+          <div className="flex flex-row justify-between items-center sm:h-[100px]">
             <div className="flex items-start min-w-0">
               {showBackButton && (
                 <button

From 499467806dfe845a9b588a020000e2f251e0fbc0 Mon Sep 17 00:00:00 2001
From: Arjun Komath <arjun@hey.com>
Date: Mon, 10 Feb 2025 23:06:14 +1100
Subject: [PATCH 16/24] Fix start free trial button on teams page

---
 apps/web/pages/teams/index.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/apps/web/pages/teams/index.tsx b/apps/web/pages/teams/index.tsx
index 4c836c5..606f63a 100644
--- a/apps/web/pages/teams/index.tsx
+++ b/apps/web/pages/teams/index.tsx
@@ -17,6 +17,7 @@ import AuthLayout from "../../components/layout/auth-layout.component";
 import Page from "../../components/layout/page.component";
 import Changelog from "../../components/marketing/changelog";
 import { track } from "../../utils/analytics";
+import { getAppBaseURL } from "../../utils/helpers";
 import { httpPost } from "../../utils/http";
 import { useUserData } from "../../utils/useUser";
 
@@ -218,13 +219,21 @@ export default function Teams() {
             <EntityEmptyState
               title="No teams yet!"
               message="Get started by creating your first team."
-              disabled={!billingDetails?.has_active_subscription}
               buttonLabel={
                 billingDetails?.has_active_subscription
                   ? "Create New Team"
                   : "Start Free Trial"
               }
-              onButtonClick={() => setShowTeamModal(true)}
+              onButtonClick={() => {
+                if (!billingDetails?.has_active_subscription) {
+                  router.push(
+                    `/api/billing/redirect-to-checkout?return_url=${getAppBaseURL()}/teams`
+                  );
+                  return;
+                }
+
+                setShowTeamModal(true);
+              }}
             />
           ) : (
             <div>

From 9577554f5b2be603bc6916dc2479fbcbde22946d Mon Sep 17 00:00:00 2001
From: Arjun Komath <arjun@hey.com>
Date: Tue, 11 Feb 2025 00:30:57 +1100
Subject: [PATCH 17/24] Move team data fetch call to server

---
 .../dialogs/manage-team-dialog.component.tsx  |  17 --
 apps/web/pages/pages/[page_id]/audit-logs.tsx |   4 +-
 apps/web/pages/teams/index.tsx                | 257 ++++++++++--------
 3 files changed, 140 insertions(+), 138 deletions(-)

diff --git a/apps/web/components/dialogs/manage-team-dialog.component.tsx b/apps/web/components/dialogs/manage-team-dialog.component.tsx
index 8133d3a..a63c937 100644
--- a/apps/web/components/dialogs/manage-team-dialog.component.tsx
+++ b/apps/web/components/dialogs/manage-team-dialog.component.tsx
@@ -203,23 +203,6 @@ export default function ManageTeamDialog({
                                   />
                                 </div>
                               )}
-
-                              {formik.values.image && !formik.errors.image && (
-                                <div className="mt-2">
-                                  <img
-                                    src={formik.values.image}
-                                    alt="Team Avatar Preview"
-                                    className="h-20 w-20 rounded-full object-cover"
-                                    onError={(e) => {
-                                      e.currentTarget.onerror = null;
-                                      formik.setFieldError(
-                                        "image",
-                                        "Failed to load image"
-                                      );
-                                    }}
-                                  />
-                                </div>
-                              )}
                             </div>
                           </div>
                         </div>
diff --git a/apps/web/pages/pages/[page_id]/audit-logs.tsx b/apps/web/pages/pages/[page_id]/audit-logs.tsx
index ea3c69f..4473332 100644
--- a/apps/web/pages/pages/[page_id]/audit-logs.tsx
+++ b/apps/web/pages/pages/[page_id]/audit-logs.tsx
@@ -96,9 +96,7 @@ export default function PageAnalytics({
                         .filter(([key]) => key !== "created_at")
                         .filter(
                           ([key]) =>
-                            !key.includes("id") &&
-                            !key.includes("image") &&
-                            !key.includes("at")
+                            !key.includes("id") && !key.includes("image")
                         )
                         .map(([key, value]) => (
                           <div key={key} className="flex items-start">
diff --git a/apps/web/pages/teams/index.tsx b/apps/web/pages/teams/index.tsx
index 606f63a..2b63315 100644
--- a/apps/web/pages/teams/index.tsx
+++ b/apps/web/pages/teams/index.tsx
@@ -1,6 +1,13 @@
+import { supabaseAdmin } from "@changes-page/supabase/admin";
 import { IPage } from "@changes-page/supabase/types/page";
 import { SpinnerWithSpacing } from "@changes-page/ui";
-import { CheckCircleIcon, PlusIcon, UserIcon } from "@heroicons/react/solid";
+import {
+  CheckCircleIcon,
+  OfficeBuildingIcon,
+  PlusIcon,
+  UserIcon,
+} from "@heroicons/react/solid";
+import { GetServerSidePropsContext, InferGetServerSidePropsType } from "next";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
@@ -19,14 +26,57 @@ import Changelog from "../../components/marketing/changelog";
 import { track } from "../../utils/analytics";
 import { getAppBaseURL } from "../../utils/helpers";
 import { httpPost } from "../../utils/http";
+import { getSupabaseServerClient } from "../../utils/supabase/supabase-admin";
 import { useUserData } from "../../utils/useUser";
 
-export default function Teams() {
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+  const { user } = await getSupabaseServerClient(ctx);
+
+  const { data: teams, error } = await supabaseAdmin
+    .from("teams")
+    .select(
+      `
+      *,
+      pages (
+        id,
+        title,
+        created_at
+      ),
+      team_members (
+        id,
+        user:user_id(
+          id,
+          full_name
+        ),
+        role
+      ),
+      team_invitations (
+        id,
+        email,
+        role,
+        created_at
+      )
+    `
+    )
+    .eq("owner_id", user?.id);
+
+  return {
+    props: { teams, error },
+  };
+}
+
+export default function Teams({
+  teams,
+  error,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) {
   const { billingDetails } = useUserData();
   const router = useRouter();
   const { user, supabase } = useUserData();
 
-  const [teams, setTeams] = useState([]);
+  const revalidate = () => {
+    router.replace(router.asPath);
+  };
+
   const [showTeamModal, setShowTeamModal] = useState(false);
   const [selectedTeam, setSelectedTeam] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
@@ -38,47 +88,20 @@ export default function Teams() {
   const [selectedPage, setSelectedPage] = useState(null);
   const [assigningPage, setAssigningPage] = useState(false);
 
-  const fetchTeams = async () => {
+  const fetchData = async () => {
+    if (error) {
+      notifyError("Failed to fetch teams");
+      return;
+    }
+
     setIsLoading(true);
 
-    const [
-      { data: teams, error: fetchError },
-      { data: pages, error: pagesError },
-    ] = await Promise.all([
-      supabase
-        .from("teams")
-        .select(
-          `
-          *,
-          pages (
-            id,
-            title,
-            created_at
-          ),
-          team_members (
-            id,
-            user_id,
-            role
-          ),
-          team_invitations (
-            id,
-            email,
-            role,
-            created_at
-          )
-        `
-        )
-        .order("created_at", { ascending: false }),
-
-      supabase.from("pages").select("*"),
-    ]);
-
-    setTeams(teams ?? []);
+    const { data: pages, error: pagesError } = await supabase
+      .from("pages")
+      .select("*");
+
     setPages(pages ?? []);
 
-    if (fetchError) {
-      notifyError("Failed to fetch teams");
-    }
     if (pagesError) {
       notifyError("Failed to fetch pages");
     }
@@ -87,7 +110,7 @@ export default function Teams() {
   };
 
   useEffect(() => {
-    fetchTeams();
+    fetchData();
   }, []);
 
   useHotkeys(
@@ -112,7 +135,7 @@ export default function Teams() {
     }
 
     track("DeleteTeam");
-    fetchTeams();
+    revalidate();
     setTeamToDelete(null);
     setIsDeleting(false);
   };
@@ -128,7 +151,7 @@ export default function Teams() {
       .match({ id: pageId });
 
     track("AssignPageToTeam");
-    fetchTeams();
+    revalidate();
     setAssigningPage(false);
     setShowAssignPage(null);
     setSelectedPage(null);
@@ -143,7 +166,7 @@ export default function Teams() {
       .match({ id: pageId });
 
     track("RemovePageFromTeam");
-    fetchTeams();
+    revalidate();
   };
 
   const handleRemoveMember = async (teamId: string, userId: string) => {
@@ -153,14 +176,14 @@ export default function Teams() {
     });
 
     track("RemoveTeamMember");
-    fetchTeams();
+    revalidate();
   };
 
   const handleRevokeInvite = async (inviteId: string) => {
     await supabase.from("team_invitations").delete().match({ id: inviteId });
 
     track("RevokeTeamInvitation");
-    fetchTeams();
+    revalidate();
   };
 
   const handleAcceptInvite = async (inviteId: string) => {
@@ -179,7 +202,7 @@ export default function Teams() {
     );
 
     track("AcceptTeamInvitation");
-    fetchTeams();
+    revalidate();
   };
 
   const handleLeaveTeam = async (teamId: string) => {
@@ -190,10 +213,39 @@ export default function Teams() {
       });
 
       track("LeaveTeam");
-      fetchTeams();
+      revalidate();
     }
   };
 
+  const handleInviteTeamMember = async (teamId: string) => {
+    const email = prompt("Enter email address");
+    if (!email) {
+      return;
+    }
+
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+      notifyError("Invalid email address");
+      return;
+    }
+
+    await toast.promise(
+      httpPost({
+        url: "/api/teams/invite",
+        data: {
+          team_id: teamId,
+          email,
+        },
+      }),
+      {
+        loading: "Sending invitation...",
+        success: "Invitation sent",
+        error: "Failed to send invitation",
+      }
+    );
+
+    revalidate();
+  };
+
   return (
     <>
       <Page
@@ -253,7 +305,7 @@ export default function Teams() {
                           />
                         ) : (
                           <div className="h-12 w-12 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
-                            <UserIcon className="h-6 w-6 text-gray-400 dark:text-gray-500" />
+                            <OfficeBuildingIcon className="h-6 w-6 text-indigo-400 dark:text-indigo-500" />
                           </div>
                         )}
                         <div>
@@ -404,47 +456,43 @@ export default function Teams() {
                                 role="list"
                                 className="divide-y divide-gray-100 dark:divide-gray-700 rounded-md border border-gray-200 dark:border-gray-700"
                               >
-                                {team.team_members?.map(
-                                  (member: {
-                                    id: string;
-                                    user_id: string;
-                                    role: string;
-                                  }) => (
-                                    <li
-                                      key={member.id}
-                                      className="flex items-center justify-between p-2 text-sm/6"
-                                    >
-                                      <div className="flex w-0 flex-1 items-center">
-                                        <UserIcon
-                                          aria-hidden="true"
-                                          className="size-5 shrink-0 text-gray-400 dark:text-gray-500"
-                                        />
-                                        <div className="ml-4 flex min-w-0 flex-1 gap-2">
-                                          <span className="truncate font-medium">
-                                            {member.user_id}
-                                          </span>
-                                          <span className="shrink-0 text-gray-400 dark:text-gray-500 uppercase font-semibold">
-                                            {member.role}
-                                          </span>
-                                        </div>
+                                {team.team_members?.map((member) => (
+                                  <li
+                                    key={member.id}
+                                    className="flex items-center justify-between p-2 text-sm/6"
+                                  >
+                                    <div className="flex w-0 flex-1 items-center">
+                                      <UserIcon
+                                        aria-hidden="true"
+                                        className="size-5 shrink-0 text-gray-400 dark:text-gray-500"
+                                      />
+                                      <div className="ml-4 flex min-w-0 flex-1 gap-2">
+                                        <span className="truncate font-medium">
+                                          {/* @ts-ignore */}
+                                          {member.user.full_name}
+                                        </span>
+                                        <span className="shrink-0 text-gray-400 dark:text-gray-500 uppercase font-semibold">
+                                          {member.role}
+                                        </span>
                                       </div>
-                                      <div className="ml-4 shrink-0">
-                                        <a
-                                          href="#"
-                                          className="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300"
-                                          onClick={() =>
-                                            handleRemoveMember(
-                                              team.id,
-                                              member.user_id
-                                            )
-                                          }
-                                        >
-                                          Remove
-                                        </a>
-                                      </div>
-                                    </li>
-                                  )
-                                )}
+                                    </div>
+                                    <div className="ml-4 shrink-0">
+                                      <a
+                                        href="#"
+                                        className="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300"
+                                        onClick={() =>
+                                          handleRemoveMember(
+                                            team.id,
+                                            /* @ts-ignore */
+                                            member.user.id
+                                          )
+                                        }
+                                      >
+                                        Remove
+                                      </a>
+                                    </div>
+                                  </li>
+                                ))}
                               </ul>
                             </dd>
                           ) : (
@@ -505,34 +553,7 @@ export default function Teams() {
                             <PrimaryButton
                               label="Invite team member"
                               className="h-8"
-                              onClick={async () => {
-                                const email = prompt("Enter email address");
-                                if (!email) {
-                                  return;
-                                }
-
-                                if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
-                                  notifyError("Invalid email address");
-                                  return;
-                                }
-
-                                await toast.promise(
-                                  httpPost({
-                                    url: "/api/teams/invite",
-                                    data: {
-                                      team_id: team.id,
-                                      email,
-                                    },
-                                  }),
-                                  {
-                                    loading: "Sending invitation...",
-                                    success: "Invitation sent",
-                                    error: "Failed to send invitation",
-                                  }
-                                );
-
-                                fetchTeams();
-                              }}
+                              onClick={() => handleInviteTeamMember(team.id)}
                             />
                           </dd>
                         </div>
@@ -604,7 +625,7 @@ export default function Teams() {
         setOpen={setShowTeamModal}
         team={selectedTeam}
         onSuccess={() => {
-          fetchTeams();
+          revalidate();
           setShowTeamModal(false);
           setSelectedTeam(null);
         }}

From a4e8cc2b08b6a3cb1f44aefd86c607d5e3780243 Mon Sep 17 00:00:00 2001
From: Arjun Komath <arjun@hey.com>
Date: Tue, 11 Feb 2025 07:36:34 +1100
Subject: [PATCH 18/24] Add progress bar

---
 .../components/core/progress-bar.component.tsx | 18 ++++++++++++++++++
 apps/web/package.json                          |  1 +
 apps/web/pages/_app.tsx                        |  9 +++++++++
 apps/web/pages/teams/index.tsx                 |  4 +++-
 apps/web/styles/global.css                     | 13 +++++++++++++
 pnpm-lock.yaml                                 | 18 +++++++++++++-----
 6 files changed, 57 insertions(+), 6 deletions(-)
 create mode 100644 apps/web/components/core/progress-bar.component.tsx

diff --git a/apps/web/components/core/progress-bar.component.tsx b/apps/web/components/core/progress-bar.component.tsx
new file mode 100644
index 0000000..06fe9e9
--- /dev/null
+++ b/apps/web/components/core/progress-bar.component.tsx
@@ -0,0 +1,18 @@
+import Router from "next/router";
+import NProgress from "nprogress";
+import "nprogress/nprogress.css";
+
+NProgress.configure({
+  minimum: 0.3,
+  easing: "ease",
+  speed: 500,
+  showSpinner: true,
+});
+
+Router.events.on("routeChangeStart", () => NProgress.start());
+Router.events.on("routeChangeComplete", () => NProgress.done());
+Router.events.on("routeChangeError", () => NProgress.done());
+
+export default function () {
+  return null;
+}
diff --git a/apps/web/package.json b/apps/web/package.json
index e443a84..8fe4445 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -44,6 +44,7 @@
     "next": "^14.0.4",
     "next-seo": "^6.4.0",
     "next-sitemap": "^4.2.3",
+    "nprogress": "^0.2.0",
     "openai": "^3.2.1",
     "postmark": "^3.0.15",
     "react": "^18.2.0",
diff --git a/apps/web/pages/_app.tsx b/apps/web/pages/_app.tsx
index 2efebb2..e3265e3 100644
--- a/apps/web/pages/_app.tsx
+++ b/apps/web/pages/_app.tsx
@@ -1,12 +1,20 @@
 import { createPagesBrowserClient } from "@supabase/auth-helpers-nextjs";
 import { SessionContextProvider } from "@supabase/auth-helpers-react";
 import { Analytics } from "@vercel/analytics/react";
+import dynamic from "next/dynamic";
 import localFont from "next/font/local";
 import Head from "next/head";
 import { useState } from "react";
 import "../styles/global.css";
 import { UserContextProvider } from "../utils/useUser";
 
+const ProgressBar = dynamic(
+  () => import("../components/core/progress-bar.component"),
+  {
+    ssr: false,
+  }
+);
+
 const geist = localFont({
   src: [
     { path: "../public/fonts/Geist/Geist-Regular.otf", weight: "500" },
@@ -44,6 +52,7 @@ export default function App({ Component, pageProps }) {
         <UserContextProvider>
           {getLayout(<Component {...pageProps} />)}
           <Analytics />
+          <ProgressBar />
         </UserContextProvider>
       </SessionContextProvider>
     </>
diff --git a/apps/web/pages/teams/index.tsx b/apps/web/pages/teams/index.tsx
index 2b63315..57c6b54 100644
--- a/apps/web/pages/teams/index.tsx
+++ b/apps/web/pages/teams/index.tsx
@@ -469,7 +469,9 @@ export default function Teams({
                                       <div className="ml-4 flex min-w-0 flex-1 gap-2">
                                         <span className="truncate font-medium">
                                           {/* @ts-ignore */}
-                                          {member.user.full_name}
+                                          {member.user.full_name ??
+                                            /* @ts-ignore */
+                                            member.user.id}
                                         </span>
                                         <span className="shrink-0 text-gray-400 dark:text-gray-500 uppercase font-semibold">
                                           {member.role}
diff --git a/apps/web/styles/global.css b/apps/web/styles/global.css
index 590aa89..61d7092 100644
--- a/apps/web/styles/global.css
+++ b/apps/web/styles/global.css
@@ -89,3 +89,16 @@ body {
     border-color: rgba(245, 245, 245, 0.1) !important;
   }
 }
+
+#nprogress .bar {
+  background: #4f46e5 !important;
+}
+
+#nprogress .peg {
+  box-shadow: 0 0 10px #4f46e5, 0 0 5px #4f46e5;
+}
+
+#nprogress .spinner-icon {
+  border-top-color: #4f46e5;
+  border-left-color: #4f46e5;
+}
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 151d915..16b661a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -263,6 +263,9 @@ importers:
       next-sitemap:
         specifier: ^4.2.3
         version: 4.2.3(next@14.1.0)
+      nprogress:
+        specifier: ^0.2.0
+        version: 0.2.0
       openai:
         specifier: ^3.2.1
         version: 3.3.0
@@ -1592,7 +1595,6 @@ packages:
       typescript: 4.9.5
     transitivePeerDependencies:
       - supports-color
-    dev: false
 
   /@typescript-eslint/parser@6.19.1(eslint@7.32.0)(typescript@5.5.4):
     resolution: {integrity: sha512-WEfX22ziAh6pRE9jnbkkLGp/4RhTpffr2ZK5bJ18M8mIfA8A+k97U9ZyaXCEJRlmMHh7R9MJZWXp/r73DzINVQ==}
@@ -1613,6 +1615,7 @@ packages:
       typescript: 5.5.4
     transitivePeerDependencies:
       - supports-color
+    dev: true
 
   /@typescript-eslint/scope-manager@6.19.1:
     resolution: {integrity: sha512-4CdXYjKf6/6aKNMSly/BP4iCSOpvMmqtDzRtqFyyAae3z5kkqEjKndR5vDHL8rSuMIIWP8u4Mw4VxLyxZW6D5w==}
@@ -1645,7 +1648,6 @@ packages:
       typescript: 4.9.5
     transitivePeerDependencies:
       - supports-color
-    dev: false
 
   /@typescript-eslint/typescript-estree@6.19.1(typescript@5.5.4):
     resolution: {integrity: sha512-aFdAxuhzBFRWhy+H20nYu19+Km+gFfwNO4TEqyszkMcgBDYQjmPJ61erHxuT2ESJXhlhrO7I5EFIlZ+qGR8oVA==}
@@ -1667,6 +1669,7 @@ packages:
       typescript: 5.5.4
     transitivePeerDependencies:
       - supports-color
+    dev: true
 
   /@typescript-eslint/visitor-keys@6.19.1:
     resolution: {integrity: sha512-gkdtIO+xSO/SmI0W68DBg4u1KElmIUo3vXzgHyGPs6cxgB0sa3TlptRAAE0hUY1hM6FcDKEv7aIwiTGm76cXfQ==}
@@ -2657,7 +2660,7 @@ packages:
       eslint-import-resolver-webpack:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 6.19.1(eslint@7.32.0)(typescript@5.5.4)
+      '@typescript-eslint/parser': 6.19.1(eslint@7.32.0)(typescript@4.9.5)
       debug: 3.2.7
       eslint: 7.32.0
       eslint-import-resolver-node: 0.3.9
@@ -2675,7 +2678,7 @@ packages:
       '@typescript-eslint/parser':
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 6.19.1(eslint@7.32.0)(typescript@5.5.4)
+      '@typescript-eslint/parser': 6.19.1(eslint@7.32.0)(typescript@4.9.5)
       array-includes: 3.1.7
       array.prototype.findlastindex: 1.2.3
       array.prototype.flat: 1.3.2
@@ -4903,6 +4906,10 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /nprogress@0.2.0:
+    resolution: {integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==}
+    dev: false
+
   /object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
@@ -6139,7 +6146,6 @@ packages:
       typescript: '>=4.2.0'
     dependencies:
       typescript: 4.9.5
-    dev: false
 
   /ts-api-utils@1.0.3(typescript@5.5.4):
     resolution: {integrity: sha512-wNMeqtMz5NtwpT/UZGY5alT+VoKdSsOOP/kqHFcUW1P/VRhH2wJ48+DN2WwUliNbQ976ETwDL0Ifd2VVvgonvg==}
@@ -6148,6 +6154,7 @@ packages:
       typescript: '>=4.2.0'
     dependencies:
       typescript: 5.5.4
+    dev: true
 
   /ts-interface-checker@0.1.13:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
@@ -6243,6 +6250,7 @@ packages:
     resolution: {integrity: sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==}
     engines: {node: '>=14.17'}
     hasBin: true
+    dev: true
 
   /typo-js@1.2.3:
     resolution: {integrity: sha512-67Hyl94beZX8gmTap7IDPrG5hy2cHftgsCAcGvE1tzuxGT+kRB+zSBin0wIMwysYw8RUCBCvv9UfQl8TNM75dA==}

From afc76417ebabd6757f3163fa4bcf81a057e2bfc2 Mon Sep 17 00:00:00 2001
From: Arjun Komath <arjun@hey.com>
Date: Tue, 11 Feb 2025 07:40:47 +1100
Subject: [PATCH 19/24] Add named function to progress bar component

---
 apps/web/components/core/progress-bar.component.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/components/core/progress-bar.component.tsx b/apps/web/components/core/progress-bar.component.tsx
index 06fe9e9..f8bd250 100644
--- a/apps/web/components/core/progress-bar.component.tsx
+++ b/apps/web/components/core/progress-bar.component.tsx
@@ -13,6 +13,6 @@ Router.events.on("routeChangeStart", () => NProgress.start());
 Router.events.on("routeChangeComplete", () => NProgress.done());
 Router.events.on("routeChangeError", () => NProgress.done());
 
-export default function () {
+export default function ProgressBar() {
   return null;
 }

From 3b2b1ee169d80851d4933ad41785ea1dd12ad733 Mon Sep 17 00:00:00 2001
From: Arjun Komath <arjun@hey.com>
Date: Tue, 11 Feb 2025 22:29:46 +1100
Subject: [PATCH 20/24] Handle edge cases

---
 apps/web/components/core/progress-bar.component.tsx | 2 +-
 apps/web/pages/api/teams/invite/index.ts            | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/apps/web/components/core/progress-bar.component.tsx b/apps/web/components/core/progress-bar.component.tsx
index f8bd250..b5027c2 100644
--- a/apps/web/components/core/progress-bar.component.tsx
+++ b/apps/web/components/core/progress-bar.component.tsx
@@ -6,7 +6,7 @@ NProgress.configure({
   minimum: 0.3,
   easing: "ease",
   speed: 500,
-  showSpinner: true,
+  showSpinner: false,
 });
 
 Router.events.on("routeChangeStart", () => NProgress.start());
diff --git a/apps/web/pages/api/teams/invite/index.ts b/apps/web/pages/api/teams/invite/index.ts
index d9a75f6..3d4f0e8 100644
--- a/apps/web/pages/api/teams/invite/index.ts
+++ b/apps/web/pages/api/teams/invite/index.ts
@@ -28,6 +28,12 @@ const inviteUser = async (req: NextApiRequest, res: NextApiResponse) => {
         });
       }
 
+      if (user.email === email) {
+        return res.status(400).json({
+          error: { statusCode: 400, message: "You cannot invite yourself" },
+        });
+      }
+
       const { data: team } = await supabase
         .from("teams")
         .select("*")

From a2f41bf68029009f3ca7318e07764b7ce49a5c21 Mon Sep 17 00:00:00 2001
From: Arjun Komath <arjun@hey.com>
Date: Wed, 12 Feb 2025 07:55:51 +1100
Subject: [PATCH 21/24] Fix showing team member details

---
 apps/web/components/teams/memeber-details.tsx |  23 ++++
 .../pages/api/teams/invite/accept/index.ts    |   4 +-
 apps/web/pages/api/teams/member/[id]/index.ts |  67 +++++++++
 apps/web/pages/teams/index.tsx                | 128 +++++++-----------
 packages/supabase/cron.sql                    |   5 +-
 5 files changed, 148 insertions(+), 79 deletions(-)
 create mode 100644 apps/web/components/teams/memeber-details.tsx
 create mode 100644 apps/web/pages/api/teams/member/[id]/index.ts

diff --git a/apps/web/components/teams/memeber-details.tsx b/apps/web/components/teams/memeber-details.tsx
new file mode 100644
index 0000000..65074a6
--- /dev/null
+++ b/apps/web/components/teams/memeber-details.tsx
@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+import { httpGet } from "../../utils/http";
+
+export default function MemeberDetails({ id }: { id: string }) {
+  const [memberDetails, setMemberDetails] = useState<{
+    email: string;
+    name: string;
+  } | null>(null);
+
+  useEffect(() => {
+    httpGet({ url: `/api/teams/member/${id}` }).then((data) => {
+      setMemberDetails(data);
+    });
+  }, []);
+
+  if (!memberDetails) {
+    return (
+      <div className="animate-pulse h-4 bg-gray-200 dark:bg-gray-600 col-span-2 rounded"></div>
+    );
+  }
+
+  return <span>{memberDetails.name ?? memberDetails.email}</span>;
+}
diff --git a/apps/web/pages/api/teams/invite/accept/index.ts b/apps/web/pages/api/teams/invite/accept/index.ts
index 969b1fc..f482b15 100644
--- a/apps/web/pages/api/teams/invite/accept/index.ts
+++ b/apps/web/pages/api/teams/invite/accept/index.ts
@@ -48,8 +48,8 @@ const acceptInvite = async (req: NextApiRequest, res: NextApiResponse) => {
 
       await supabaseAdmin
         .from("team_invitations")
-        .delete()
-        .match({ id: invite_id });
+        .update({ status: "accepted" })
+        .eq("id", invite_id);
 
       return res.status(201).json({ ok: true });
     } catch (err) {
diff --git a/apps/web/pages/api/teams/member/[id]/index.ts b/apps/web/pages/api/teams/member/[id]/index.ts
new file mode 100644
index 0000000..47091ac
--- /dev/null
+++ b/apps/web/pages/api/teams/member/[id]/index.ts
@@ -0,0 +1,67 @@
+import { supabaseAdmin } from "@changes-page/supabase/admin";
+import { NextApiRequest, NextApiResponse } from "next";
+import { apiRateLimiter } from "../../../../../utils/rate-limit";
+import { getSupabaseServerClient } from "../../../../../utils/supabase/supabase-admin";
+import { getUserById } from "../../../../../utils/useDatabase";
+
+const getTeamMemberDetails = async (
+  req: NextApiRequest,
+  res: NextApiResponse
+) => {
+  if (req.method === "GET") {
+    const { id } = req.query;
+    if (!id) {
+      return res.status(400).json({
+        error: { statusCode: 400, message: "Invalid request" },
+      });
+    }
+
+    try {
+      await apiRateLimiter(req, res);
+
+      const { user } = await getSupabaseServerClient({ req, res });
+
+      const { has_active_subscription } = await getUserById(user.id);
+      if (!has_active_subscription) {
+        return res.status(403).json({
+          error: { statusCode: 403, message: "Missing subscription" },
+        });
+      }
+
+      const { data: teamMember, error: teamMemberError } = await supabaseAdmin
+        .from("team_members")
+        .select("*")
+        .eq("id", id)
+        .single();
+
+      if (teamMemberError) {
+        return res.status(500).json({
+          error: { statusCode: 500, message: "Internal server error" },
+        });
+      }
+
+      const { data: memeberDetails, error: memeberDetailsError } =
+        await supabaseAdmin.auth.admin.getUserById(teamMember.user_id);
+      if (memeberDetailsError) {
+        return res.status(500).json({
+          error: { statusCode: 500, message: "Internal server error" },
+        });
+      }
+
+      return res.status(200).json({
+        email: memeberDetails.user.email,
+        name: memeberDetails.user.user_metadata.name,
+      });
+    } catch (error) {
+      console.error(error);
+      return res.status(500).json({
+        error: { statusCode: 500, message: "Internal server error" },
+      });
+    }
+  } else {
+    res.setHeader("Allow", "GET");
+    res.status(405).end("Method Not Allowed");
+  }
+};
+
+export default getTeamMemberDetails;
diff --git a/apps/web/pages/teams/index.tsx b/apps/web/pages/teams/index.tsx
index 57c6b54..0052f8f 100644
--- a/apps/web/pages/teams/index.tsx
+++ b/apps/web/pages/teams/index.tsx
@@ -1,4 +1,3 @@
-import { supabaseAdmin } from "@changes-page/supabase/admin";
 import { IPage } from "@changes-page/supabase/types/page";
 import { SpinnerWithSpacing } from "@changes-page/ui";
 import {
@@ -7,9 +6,8 @@ import {
   PlusIcon,
   UserIcon,
 } from "@heroicons/react/solid";
-import { GetServerSidePropsContext, InferGetServerSidePropsType } from "next";
 import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import toast from "react-hot-toast";
 import { useHotkeys } from "react-hotkeys-hook";
 import {
@@ -23,60 +21,18 @@ import { EntityEmptyState } from "../../components/entity/empty-state";
 import AuthLayout from "../../components/layout/auth-layout.component";
 import Page from "../../components/layout/page.component";
 import Changelog from "../../components/marketing/changelog";
+import MemeberDetails from "../../components/teams/memeber-details";
 import { track } from "../../utils/analytics";
 import { getAppBaseURL } from "../../utils/helpers";
 import { httpPost } from "../../utils/http";
-import { getSupabaseServerClient } from "../../utils/supabase/supabase-admin";
 import { useUserData } from "../../utils/useUser";
 
-export async function getServerSideProps(ctx: GetServerSidePropsContext) {
-  const { user } = await getSupabaseServerClient(ctx);
-
-  const { data: teams, error } = await supabaseAdmin
-    .from("teams")
-    .select(
-      `
-      *,
-      pages (
-        id,
-        title,
-        created_at
-      ),
-      team_members (
-        id,
-        user:user_id(
-          id,
-          full_name
-        ),
-        role
-      ),
-      team_invitations (
-        id,
-        email,
-        role,
-        created_at
-      )
-    `
-    )
-    .eq("owner_id", user?.id);
-
-  return {
-    props: { teams, error },
-  };
-}
-
-export default function Teams({
-  teams,
-  error,
-}: InferGetServerSidePropsType<typeof getServerSideProps>) {
+export default function Teams() {
   const { billingDetails } = useUserData();
   const router = useRouter();
   const { user, supabase } = useUserData();
 
-  const revalidate = () => {
-    router.replace(router.asPath);
-  };
-
+  const [teams, setTeams] = useState([]);
   const [showTeamModal, setShowTeamModal] = useState(false);
   const [selectedTeam, setSelectedTeam] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
@@ -88,30 +44,56 @@ export default function Teams({
   const [selectedPage, setSelectedPage] = useState(null);
   const [assigningPage, setAssigningPage] = useState(false);
 
-  const fetchData = async () => {
-    if (error) {
-      notifyError("Failed to fetch teams");
-      return;
-    }
-
+  const fetchData = useCallback(async () => {
     setIsLoading(true);
 
-    const { data: pages, error: pagesError } = await supabase
-      .from("pages")
-      .select("*");
+    const [
+      { data: pages, error: pagesError },
+      { data: teams, error: teamsError },
+    ] = await Promise.all([
+      supabase.from("pages").select("*"),
+      supabase
+        .from("teams")
+        .select(
+          `
+      *,
+      pages (
+        id,
+        title,
+        created_at
+      ),
+      team_members (
+        id,
+        role
+      ),
+      team_invitations(
+        id,
+        email,
+        role,
+        created_at
+      )
+    `
+        )
+        .eq("team_invitations.status", "pending"),
+    ]);
 
     setPages(pages ?? []);
+    setTeams(teams ?? []);
 
     if (pagesError) {
       notifyError("Failed to fetch pages");
     }
 
+    if (teamsError) {
+      notifyError("Failed to fetch teams");
+    }
+
     setIsLoading(false);
-  };
+  }, [supabase]);
 
   useEffect(() => {
     fetchData();
-  }, []);
+  }, [fetchData]);
 
   useHotkeys(
     "n",
@@ -135,7 +117,7 @@ export default function Teams({
     }
 
     track("DeleteTeam");
-    revalidate();
+    fetchData();
     setTeamToDelete(null);
     setIsDeleting(false);
   };
@@ -151,7 +133,7 @@ export default function Teams({
       .match({ id: pageId });
 
     track("AssignPageToTeam");
-    revalidate();
+    fetchData();
     setAssigningPage(false);
     setShowAssignPage(null);
     setSelectedPage(null);
@@ -166,7 +148,7 @@ export default function Teams({
       .match({ id: pageId });
 
     track("RemovePageFromTeam");
-    revalidate();
+    fetchData();
   };
 
   const handleRemoveMember = async (teamId: string, userId: string) => {
@@ -176,14 +158,14 @@ export default function Teams({
     });
 
     track("RemoveTeamMember");
-    revalidate();
+    fetchData();
   };
 
   const handleRevokeInvite = async (inviteId: string) => {
     await supabase.from("team_invitations").delete().match({ id: inviteId });
 
     track("RevokeTeamInvitation");
-    revalidate();
+    fetchData();
   };
 
   const handleAcceptInvite = async (inviteId: string) => {
@@ -202,7 +184,7 @@ export default function Teams({
     );
 
     track("AcceptTeamInvitation");
-    revalidate();
+    fetchData();
   };
 
   const handleLeaveTeam = async (teamId: string) => {
@@ -213,7 +195,7 @@ export default function Teams({
       });
 
       track("LeaveTeam");
-      revalidate();
+      fetchData();
     }
   };
 
@@ -243,7 +225,7 @@ export default function Teams({
       }
     );
 
-    revalidate();
+    fetchData();
   };
 
   return (
@@ -467,12 +449,7 @@ export default function Teams({
                                         className="size-5 shrink-0 text-gray-400 dark:text-gray-500"
                                       />
                                       <div className="ml-4 flex min-w-0 flex-1 gap-2">
-                                        <span className="truncate font-medium">
-                                          {/* @ts-ignore */}
-                                          {member.user.full_name ??
-                                            /* @ts-ignore */
-                                            member.user.id}
-                                        </span>
+                                        <MemeberDetails id={member.id} />
                                         <span className="shrink-0 text-gray-400 dark:text-gray-500 uppercase font-semibold">
                                           {member.role}
                                         </span>
@@ -485,8 +462,7 @@ export default function Teams({
                                         onClick={() =>
                                           handleRemoveMember(
                                             team.id,
-                                            /* @ts-ignore */
-                                            member.user.id
+                                            member.user?.id
                                           )
                                         }
                                       >
@@ -627,7 +603,7 @@ export default function Teams({
         setOpen={setShowTeamModal}
         team={selectedTeam}
         onSuccess={() => {
-          revalidate();
+          fetchData();
           setShowTeamModal(false);
           setSelectedTeam(null);
         }}
diff --git a/packages/supabase/cron.sql b/packages/supabase/cron.sql
index c07facf..b29f472 100644
--- a/packages/supabase/cron.sql
+++ b/packages/supabase/cron.sql
@@ -8,4 +8,7 @@ SELECT cron.schedule('*/15 * * * *', $$delete from page_email_subscribers where
 SELECT cron.schedule('0 0 * * *', $$delete from page_views where created_at < now() - interval '1 month'$$);
 
 -- Remove all cron job logs older than 1 month
-select cron.schedule('0 0 * * *', $$delete from cron.job_run_details where end_time < now() - interval '7 days'$$);
\ No newline at end of file
+select cron.schedule('0 0 * * *', $$delete from cron.job_run_details where end_time < now() - interval '7 days'$$);
+
+-- Remove all expired team invitations
+select cron.schedule('*/15 * * * *', $$delete from team_invitations where expires_at < now() and status = 'pending'$$);

From 291d16a66ed3df76c48afa68275ca6d2272a4367 Mon Sep 17 00:00:00 2001
From: Arjun Komath <arjun@hey.com>
Date: Wed, 12 Feb 2025 22:32:20 +1100
Subject: [PATCH 22/24] Bug fixes

---
 apps/web/components/layout/page.component.tsx | 17 ---------------
 apps/web/components/teams/memeber-details.tsx |  2 +-
 .../pages/api/teams/invite/accept/index.ts    |  5 +----
 apps/web/pages/api/teams/invite/index.ts      |  2 +-
 apps/web/pages/teams/index.tsx                | 21 ++++++++++---------
 5 files changed, 14 insertions(+), 33 deletions(-)

diff --git a/apps/web/components/layout/page.component.tsx b/apps/web/components/layout/page.component.tsx
index b032b10..19a312e 100644
--- a/apps/web/components/layout/page.component.tsx
+++ b/apps/web/components/layout/page.component.tsx
@@ -5,7 +5,6 @@ import classNames from "classnames";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import React, { Fragment, useEffect } from "react";
-import { useHotkeys } from "react-hotkeys-hook";
 import { useUserData } from "../../utils/useUser";
 import BillingBanner from "../billing/billing-banner";
 
@@ -41,22 +40,6 @@ export default function Page({
   const router = useRouter();
   const { user } = useUserData();
 
-  useHotkeys(
-    "esc",
-    () => {
-      if (router.pathname === "/") return;
-      if (router.pathname === "/pages") return;
-
-      if (backRoute) {
-        void router.replace(backRoute);
-        return;
-      }
-
-      router.back();
-    },
-    [router, backRoute]
-  );
-
   useEffect(() => {
     if (router.query?.yay && confetti) {
       try {
diff --git a/apps/web/components/teams/memeber-details.tsx b/apps/web/components/teams/memeber-details.tsx
index 65074a6..d5094ec 100644
--- a/apps/web/components/teams/memeber-details.tsx
+++ b/apps/web/components/teams/memeber-details.tsx
@@ -15,7 +15,7 @@ export default function MemeberDetails({ id }: { id: string }) {
 
   if (!memberDetails) {
     return (
-      <div className="animate-pulse h-4 bg-gray-200 dark:bg-gray-600 col-span-2 rounded"></div>
+      <div className="animate-pulse w-24 h-6 bg-gray-200 dark:bg-gray-600 rounded"></div>
     );
   }
 
diff --git a/apps/web/pages/api/teams/invite/accept/index.ts b/apps/web/pages/api/teams/invite/accept/index.ts
index f482b15..bab4117 100644
--- a/apps/web/pages/api/teams/invite/accept/index.ts
+++ b/apps/web/pages/api/teams/invite/accept/index.ts
@@ -46,10 +46,7 @@ const acceptInvite = async (req: NextApiRequest, res: NextApiResponse) => {
         });
       }
 
-      await supabaseAdmin
-        .from("team_invitations")
-        .update({ status: "accepted" })
-        .eq("id", invite_id);
+      await supabaseAdmin.from("team_invitations").delete().eq("id", invite_id);
 
       return res.status(201).json({ ok: true });
     } catch (err) {
diff --git a/apps/web/pages/api/teams/invite/index.ts b/apps/web/pages/api/teams/invite/index.ts
index 3d4f0e8..0375687 100644
--- a/apps/web/pages/api/teams/invite/index.ts
+++ b/apps/web/pages/api/teams/invite/index.ts
@@ -47,7 +47,7 @@ const inviteUser = async (req: NextApiRequest, res: NextApiResponse) => {
         });
       }
 
-      const { data: invitation } = await supabaseAdmin
+      const { data: invitation, error: invitationError } = await supabaseAdmin
         .from("team_invitations")
         .insert({
           team_id,
diff --git a/apps/web/pages/teams/index.tsx b/apps/web/pages/teams/index.tsx
index 0052f8f..8bb95e2 100644
--- a/apps/web/pages/teams/index.tsx
+++ b/apps/web/pages/teams/index.tsx
@@ -64,6 +64,7 @@ export default function Teams() {
       ),
       team_members (
         id,
+        user_id,
         role
       ),
       team_invitations(
@@ -319,7 +320,7 @@ export default function Teams() {
                     <div className="border-t border-gray-100 dark:border-gray-700">
                       <dl className="divide-y divide-gray-100 dark:divide-gray-700">
                         <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-                          <dt className="text-sm/6 font-semibold text-gray-900 dark:text-gray-100">
+                          <dt className="text-md/6 font-semibold text-gray-900 dark:text-gray-100">
                             Pages
                           </dt>
                           <dd className="mt-2 text-sm text-gray-900 dark:text-gray-100 sm:col-span-2 sm:mt-0">
@@ -375,7 +376,7 @@ export default function Teams() {
                                     <select
                                       id="type"
                                       name="type"
-                                      className="block w-full pl-3 pr-10 py-2 text-base dark:text-gray-100 dark:bg-gray-800 border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md max-w-sm"
+                                      className="block w-full pl-3 pr-10 py-2 text-base dark:text-gray-100 dark:bg-gray-800 border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md max-w-xs"
                                       onChange={(e) =>
                                         setSelectedPage(e.target.value)
                                       }
@@ -420,7 +421,7 @@ export default function Teams() {
                                   </div>
                                 ) : (
                                   <PrimaryButton
-                                    label="Add page to team"
+                                    label="Assign page"
                                     className="h-8"
                                     onClick={() => setShowAssignPage(team.id)}
                                   />
@@ -429,7 +430,7 @@ export default function Teams() {
                             </div>
                           </dd>
 
-                          <dt className="text-sm/6 font-semibold text-gray-900 dark:text-gray-100 mt-4">
+                          <dt className="text-md/6 font-semibold text-gray-900 dark:text-gray-100 mt-4">
                             Members
                           </dt>
                           {team.team_members?.length > 0 ? (
@@ -462,7 +463,7 @@ export default function Teams() {
                                         onClick={() =>
                                           handleRemoveMember(
                                             team.id,
-                                            member.user?.id
+                                            member.user_id
                                           )
                                         }
                                       >
@@ -479,7 +480,7 @@ export default function Teams() {
                             </dd>
                           )}
 
-                          <dt className="text-sm/6 font-semibold text-gray-900 dark:text-gray-100 mt-4">
+                          <dt className="text-md/6 font-semibold text-gray-900 dark:text-gray-100 mt-4">
                             Invites
                           </dt>
                           <dd className="mt-2 text-sm text-gray-900 dark:text-gray-100 sm:col-span-2 sm:mt-4">
@@ -558,11 +559,11 @@ export default function Teams() {
                         )}
                         <div>
                           <h3 className="text-base/7 font-semibold text-gray-900 dark:text-gray-100">
-                            {team.name} (
                             {team.team_members?.[0]?.role
-                              ? team.team_members?.[0]?.role?.toUpperCase()
-                              : "Would you like to join?"}
-                            )
+                              ? `${
+                                  team.name
+                                } (${team.team_members[0].role.toUpperCase()})`
+                              : `You've been invited to join ${team.name} team, would you like to join?`}
                           </h3>
                           <div className="flex space-x-4 mt-1">
                             {team.team_invitations?.length > 0 ? (

From 0d38e1dafeaaf8529271a85731e4e76eae4ad4e4 Mon Sep 17 00:00:00 2001
From: Arjun Komath <arjun@hey.com>
Date: Thu, 13 Feb 2025 22:01:03 +1100
Subject: [PATCH 23/24] Fix page check

---
 apps/web/pages/api/posts/index.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/apps/web/pages/api/posts/index.ts b/apps/web/pages/api/posts/index.ts
index 77cd50d..1c31ed0 100644
--- a/apps/web/pages/api/posts/index.ts
+++ b/apps/web/pages/api/posts/index.ts
@@ -46,6 +46,15 @@ const createNewPost = async (req: NextApiRequest, res: NextApiResponse) => {
         });
       }
 
+      const { data: page, error: pageError } = await supabase
+        .from("pages")
+        .select("*")
+        .eq("id", page_id)
+        .single();
+
+      if (pageError) throw pageError;
+      if (!page) throw new Error("User does not have access to this page");
+
       console.log("createNewPost", user?.id);
 
       const postPayload = {

From 5883b44b8850d45164eb533be9e56288a00a699a Mon Sep 17 00:00:00 2001
From: Arjun Komath <arjun@hey.com>
Date: Fri, 14 Feb 2025 18:48:20 +1100
Subject: [PATCH 24/24] Show reactions in page details view

---
 apps/page/components/reactions.tsx            |   9 +-
 .../components/layout/header.component.tsx    |   1 +
 .../marketing/marketing-header.component.tsx  |   3 +
 apps/web/components/post/post.tsx             | 133 +++++++++++++++++-
 apps/web/pages/api/pages/reactions.ts         |  58 ++++++++
 .../pages/api/teams/invite/accept/index.ts    |   5 +
 apps/web/pages/api/teams/invite/index.ts      |   5 +
 apps/web/pages/pages/index.tsx                |   8 +-
 packages/supabase/migrations/16_teams.sql     |   2 +-
 packages/supabase/types/page.ts               |   8 ++
 10 files changed, 217 insertions(+), 15 deletions(-)
 create mode 100644 apps/web/pages/api/pages/reactions.ts

diff --git a/apps/page/components/reactions.tsx b/apps/page/components/reactions.tsx
index dd2502d..40c1bf9 100644
--- a/apps/page/components/reactions.tsx
+++ b/apps/page/components/reactions.tsx
@@ -1,16 +1,9 @@
+import { IReactions } from "@changes-page/supabase/types/page";
 import { Transition } from "@headlessui/react";
 import classNames from "classnames";
 import { useCallback, useEffect, useState } from "react";
 import { httpGet, httpPost } from "../utils/http";
 
-export type IReactions = {
-  thumbs_up?: number;
-  thumbs_down?: number;
-  rocket?: number;
-  sad?: number;
-  heart?: number;
-};
-
 const ReactionsCounter = ({
   postId,
   aggregate,
diff --git a/apps/web/components/layout/header.component.tsx b/apps/web/components/layout/header.component.tsx
index 33c076f..bfcca07 100644
--- a/apps/web/components/layout/header.component.tsx
+++ b/apps/web/components/layout/header.component.tsx
@@ -70,6 +70,7 @@ export default function HeaderComponent() {
           ],
           siteName: "changes.page",
         }}
+        canonical={`https://changes.page${router.asPath}`}
         twitter={{
           handle: "@arjunz",
           site: "@techulus",
diff --git a/apps/web/components/marketing/marketing-header.component.tsx b/apps/web/components/marketing/marketing-header.component.tsx
index 2004902..fd69c77 100644
--- a/apps/web/components/marketing/marketing-header.component.tsx
+++ b/apps/web/components/marketing/marketing-header.component.tsx
@@ -5,6 +5,7 @@ import { NextSeo } from "next-seo";
 import Head from "next/head";
 import Image from "next/image";
 import Link from "next/link";
+import { useRouter } from "next/router";
 import { MARKETING_TITLE } from "../../data/marketing.data";
 import { ROUTES } from "../../data/routes.data";
 import logoImage from "../../public/images/logo.png";
@@ -16,6 +17,7 @@ const navigation = [
 ];
 
 export default function MarketingHeaderComponent({ title, description }) {
+  const router = useRouter();
   return (
     <>
       <Head>
@@ -40,6 +42,7 @@ export default function MarketingHeaderComponent({ title, description }) {
           ],
           siteName: "changes.page",
         }}
+        canonical={`https://changes.page${router.asPath}`}
         twitter={{
           handle: "@arjunz",
           site: "@techulus",
diff --git a/apps/web/components/post/post.tsx b/apps/web/components/post/post.tsx
index 99421b2..f13bad0 100644
--- a/apps/web/components/post/post.tsx
+++ b/apps/web/components/post/post.tsx
@@ -2,6 +2,7 @@ import {
   IPage,
   IPageSettings,
   IPost,
+  IReactions,
   PostStatus,
   PostStatusToLabel,
   PostType,
@@ -10,18 +11,133 @@ import { PostDateTime, PostTypeBadge } from "@changes-page/ui";
 import { Menu } from "@headlessui/react";
 import { DotsVerticalIcon } from "@heroicons/react/solid";
 import classNames from "classnames";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 import rehypeSanitize from "rehype-sanitize";
 import remarkGfm from "remark-gfm";
 import usePageUrl from "../../utils/hooks/usePageUrl";
+import { httpGet } from "../../utils/http";
 import { useUserData } from "../../utils/useUser";
 import { notifyError } from "../core/toast.component";
 import ConfirmDeleteDialog from "../dialogs/confirm-delete-dialog.component";
 import PostOptions from "./post-options";
 import { PostStatusIcon } from "./post-status";
 
+const ReactionsCounter = ({ aggregate }: { aggregate: IReactions }) => {
+  return (
+    <div className={"flex items-center space-x-1 p-1"}>
+      {aggregate?.thumbs_up ? (
+        <div className="flex items-center space-x-1 text-sm text-blue-500 hover:text-blue-700 dark:text-blue-300 dark:hover:text-blue-200 hover:bg-gray-100 dark:hover:bg-gray-900 p-2 rounded-md">
+          <svg
+            className=" w-4 h-4"
+            fill="none"
+            height="24"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path d="M7 10v12" />
+            <path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z" />
+          </svg>
+          <span>{aggregate?.thumbs_up}</span>
+        </div>
+      ) : null}
+
+      {aggregate?.thumbs_down ? (
+        <div className="flex items-center space-x-1 text-sm text-red-500 hover:text-red-700 dark:text-red-300 dark:hover:text-red-200 hover:bg-gray-100 dark:hover:bg-gray-900 p-2 rounded-md">
+          <svg
+            className=" w-4 h-4"
+            fill="none"
+            height="24"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path d="M17 14V2" />
+            <path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22h0a3.13 3.13 0 0 1-3-3.88Z" />
+          </svg>
+          <span>{aggregate?.thumbs_down}</span>
+        </div>
+      ) : null}
+
+      {aggregate?.rocket ? (
+        <div className="flex items-center space-x-1 text-sm text-green-500 hover:text-green-700 dark:text-green-300 dark:hover:text-green-200 hover:bg-gray-100 dark:hover:bg-gray-900 p-2 rounded-md">
+          <svg
+            className=" w-4 h-4"
+            fill="none"
+            height="24"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" />
+            <path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" />
+            <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" />
+            <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" />
+          </svg>
+          <span>{aggregate?.rocket}</span>
+        </div>
+      ) : null}
+
+      {aggregate?.sad ? (
+        <div className="flex items-center space-x-1 text-sm text-purple-500 hover:text-purple-700 dark:text-purple-300 dark:hover:text-purple-200 hover:bg-gray-100 dark:hover:bg-gray-900 p-2 rounded-md">
+          <svg
+            className=" w-4 h-4"
+            fill="none"
+            height="24"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <circle cx="12" cy="12" r="10" />
+            <path d="M16 16s-1.5-2-4-2-4 2-4 2" />
+            <line x1="9" x2="9.01" y1="9" y2="9" />
+            <line x1="15" x2="15.01" y1="9" y2="9" />
+          </svg>
+          <span>{aggregate?.sad}</span>
+        </div>
+      ) : null}
+
+      {aggregate?.heart ? (
+        <div className="flex items-center space-x-1 text-sm text-pink-500 hover:text-pink-700 dark:text-pink-300 dark:hover:text-pink-200 hover:bg-gray-100 dark:hover:bg-gray-900 p-2 rounded-md">
+          <svg
+            className=" w-4 h-4"
+            fill="none"
+            height="24"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" />
+          </svg>
+          <span>{aggregate?.heart}</span>
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
 export function Post({
   page,
   post,
@@ -40,6 +156,7 @@ export function Post({
   const [openDeletePost, setOpenDeletePost] = useState(false);
   const [deletePost, setDeletePost] = useState(null);
   const [isDeleting, setIsDeleting] = useState(false);
+  const [reactions, setReactions] = useState<IReactions | null>(null);
 
   const { getPostUrl } = usePageUrl(page, settings);
 
@@ -72,6 +189,16 @@ export function Post({
     [supabase, fetchPosts]
   );
 
+  useEffect(() => {
+    if (post.status !== PostStatus.published || !post.allow_reactions) {
+      return;
+    }
+
+    httpGet({ url: `/api/pages/reactions?post_id=${post.id}` }).then((data) => {
+      setReactions(data.aggregate);
+    });
+  }, []);
+
   return (
     <>
       <ConfirmDeleteDialog
@@ -194,6 +321,10 @@ export function Post({
                 {post.content}
               </ReactMarkdown>
             </div>
+
+            {post.allow_reactions ? (
+              <ReactionsCounter aggregate={reactions} />
+            ) : null}
           </div>
         </div>
       </li>
diff --git a/apps/web/pages/api/pages/reactions.ts b/apps/web/pages/api/pages/reactions.ts
new file mode 100644
index 0000000..6ec582d
--- /dev/null
+++ b/apps/web/pages/api/pages/reactions.ts
@@ -0,0 +1,58 @@
+import { supabaseAdmin } from "@changes-page/supabase/admin";
+import type { NextApiRequest, NextApiResponse } from "next";
+import { getSupabaseServerClient } from "../../../utils/supabase/supabase-admin";
+
+export default async function getPostReactions(
+  req: NextApiRequest,
+  res: NextApiResponse<{ ok: boolean; aggregate: any }>
+) {
+  let { post_id } = req.query;
+
+  try {
+    const { user } = await getSupabaseServerClient({ req, res });
+    if (!user) {
+      return res.status(401).json({
+        ok: false,
+        aggregate: null,
+      });
+    }
+
+    const { data: aggregate, error: aggregateError } = await supabaseAdmin.rpc(
+      "post_reactions_aggregate",
+      {
+        postid: String(post_id),
+      }
+    );
+
+    if (aggregateError) {
+      console.error("getPostReactions [Error]", aggregateError);
+    }
+
+    if (!aggregate?.length) {
+      res.status(200).json({
+        ok: true,
+        aggregate: {
+          thumbs_up: 0,
+          thumbs_down: 0,
+          heart: 0,
+          sad: 0,
+          rocket: 0,
+        },
+      });
+    }
+
+    res.status(200).json({
+      ok: true,
+      aggregate: {
+        thumbs_up: aggregate[0].thumbs_up_count,
+        thumbs_down: aggregate[0].thumbs_down_count,
+        heart: aggregate[0].heart_count,
+        sad: aggregate[0].sad_count,
+        rocket: aggregate[0].rocket_count,
+      },
+    });
+  } catch (e: Error | any) {
+    console.log("getPostReactions [Error]", e);
+    res.status(500).json({ ok: false, aggregate: null });
+  }
+}
diff --git a/apps/web/pages/api/teams/invite/accept/index.ts b/apps/web/pages/api/teams/invite/accept/index.ts
index bab4117..400d365 100644
--- a/apps/web/pages/api/teams/invite/accept/index.ts
+++ b/apps/web/pages/api/teams/invite/accept/index.ts
@@ -16,6 +16,11 @@ const acceptInvite = async (req: NextApiRequest, res: NextApiResponse) => {
       await apiRateLimiter(req, res);
 
       const { user, supabase } = await getSupabaseServerClient({ req, res });
+      if (!user) {
+        return res.status(401).json({
+          error: { statusCode: 401, message: "Unauthorized" },
+        });
+      }
 
       const { data: invite } = await supabase
         .from("team_invitations")
diff --git a/apps/web/pages/api/teams/invite/index.ts b/apps/web/pages/api/teams/invite/index.ts
index 0375687..1e4c52b 100644
--- a/apps/web/pages/api/teams/invite/index.ts
+++ b/apps/web/pages/api/teams/invite/index.ts
@@ -20,6 +20,11 @@ const inviteUser = async (req: NextApiRequest, res: NextApiResponse) => {
       await apiRateLimiter(req, res);
 
       const { user, supabase } = await getSupabaseServerClient({ req, res });
+      if (!user) {
+        return res.status(401).json({
+          error: { statusCode: 401, message: "Unauthorized" },
+        });
+      }
 
       const { has_active_subscription } = await getUserById(user.id);
       if (!has_active_subscription) {
diff --git a/apps/web/pages/pages/index.tsx b/apps/web/pages/pages/index.tsx
index 7984852..56677d4 100644
--- a/apps/web/pages/pages/index.tsx
+++ b/apps/web/pages/pages/index.tsx
@@ -103,13 +103,11 @@ export default function Pages({
           )}
 
           {pages.length ? (
-            <div className="divide-y divide-gray-200 dark:divide-gray-800 overflow-hidden shadow sm:grid sm:grid-cols-2 sm:gap-px sm:divide-y-0">
+            <div className="overflow-hidden shadow sm:grid sm:grid-cols-2 sm:gap-px sm:divide-y-0 rounded-md bg-white dark:bg-black">
               {pages.map((page) => (
                 <div
                   key={page.id}
-                  className={classNames(
-                    "relative group bg-white dark:bg-black p-6"
-                  )}
+                  className="relative group p-6 hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer"
                 >
                   <div>
                     <span
@@ -130,7 +128,7 @@ export default function Pages({
                           "text-rose-500 dark:text-rose-100",
                         page.type === PageType.updates &&
                           "text-amber-500 dark:text-amber-100",
-                        "inline-flex px-2 py-1 font-bold"
+                        "inline-flex px-2 py-1 font-bold rounded-md"
                       )}
                     >
                       {PageTypeToLabel[page.type]}
diff --git a/packages/supabase/migrations/16_teams.sql b/packages/supabase/migrations/16_teams.sql
index 78cd75a..6fa815d 100644
--- a/packages/supabase/migrations/16_teams.sql
+++ b/packages/supabase/migrations/16_teams.sql
@@ -16,7 +16,6 @@ create policy "Can insert teams." on teams for insert with check (auth.uid() = o
 create policy "Can view own teams." on teams for select using (auth.uid() = owner_id);
 create policy "Can update own teams." on teams for update using (auth.uid() = owner_id);
 create policy "Can delete own teams." on teams for delete using (auth.uid() = owner_id);
-create policy "Invited users can view teams." on teams for select using (id in (select team_id from team_invitations where email = auth.email()));
 
 CREATE TRIGGER set_timestamp
 BEFORE UPDATE ON teams
@@ -64,6 +63,7 @@ alter table team_invitations enable row level security;
 create policy "Can view own team invitations." on team_invitations for select using (auth.uid() = inviter_id);
 create policy "Can delete own team invitations." on team_invitations for delete using (auth.uid() = inviter_id);
 create policy "Can view team invitations." on team_invitations for select using (auth.email() = email);
+create policy "Invited users can view teams." on teams for select using (id in (select team_id from team_invitations where email = auth.email()));
 
 CREATE TRIGGER set_timestamp
 BEFORE UPDATE ON team_invitations
diff --git a/packages/supabase/types/page.ts b/packages/supabase/types/page.ts
index d4db597..6b68040 100644
--- a/packages/supabase/types/page.ts
+++ b/packages/supabase/types/page.ts
@@ -65,3 +65,11 @@ export const PostStatusToLabel: {
 export const tagColors = ["red", "amber", "teal", "sky", "pink"];
 
 export const URL_SLUG_REGEX = new RegExp("^[a-zA-Z0-9]([w-]*[a-zA-Z0-9])*$");
+
+export type IReactions = {
+  thumbs_up?: number;
+  thumbs_down?: number;
+  rocket?: number;
+  sad?: number;
+  heart?: number;
+};