wip

apps/dashboard/src/actions/change-team-action.ts

@@ -7,11 +7,14 @@ import { redirect } from "next/navigation";
 import { action } from "./safe-action";
 import { changeTeamSchema } from "./schema";
 
-export const changeTeamAction = action(changeTeamSchema, async ({ teamId }) => {
-  const supabase = createClient();
-  const user = await updateUser(supabase, { team_id: teamId });
+export const changeTeamAction = action(
+  changeTeamSchema,
+  async ({ teamId, redirectTo }) => {
+    const supabase = createClient();
+    const user = await updateUser(supabase, { team_id: teamId });
 
-  revalidateTag(`user_${user.data.id}`);
+    revalidateTag(`user_${user.data.id}`);
 
-  redirect("/");
-});
+    redirect(redirectTo);
+  }
+);

apps/dashboard/src/actions/create-team-action.ts

@@ -3,16 +3,24 @@
 import { createTeam, updateUser } from "@midday/supabase/mutations";
 import { createClient } from "@midday/supabase/server";
 import { revalidateTag } from "next/cache";
+import { redirect } from "next/navigation";
 import { action } from "./safe-action";
 import { createTeamSchema } from "./schema";
 
-export const createTeamAction = action(createTeamSchema, async ({ name }) => {
-  const supabase = createClient();
-  const { team_id } = await createTeam(supabase, { name });
-  const user = await updateUser(supabase, { team_id });
+export const createTeamAction = action(
+  createTeamSchema,
+  async ({ name, redirectTo }) => {
+    const supabase = createClient();
+    const { team_id } = await createTeam(supabase, { name });
+    const user = await updateUser(supabase, { team_id });
 
-  revalidateTag(`user_${user.data.id}`);
-  revalidateTag(`teams_${user.data.id}`);
+    revalidateTag(`user_${user.data.id}`);
+    revalidateTag(`teams_${user.data.id}`);
 
-  return team_id;
-});
+    if (redirectTo) {
+      redirect(redirectTo);
+    }
+
+    return team_id;
+  }
+);

apps/dashboard/src/actions/invite-team-members-action.ts

@@ -6,9 +6,9 @@ import { getI18n } from "@midday/email/locales";
 import { getUser } from "@midday/supabase/cached-queries";
 import { createClient } from "@midday/supabase/server";
 import { renderAsync } from "@react-email/components";
-import { revalidatePath } from "next/cache";
 import { revalidateTag } from "next/cache";
 import { headers } from "next/headers";
+import { redirect } from "next/navigation";
 import { Resend } from "resend";
 import { action } from "./safe-action";
 import { inviteTeamMembersSchema } from "./schema";
@@ -17,7 +17,7 @@ const resend = new Resend(env.RESEND_API_KEY);
 
 export const inviteTeamMembersAction = action(
   inviteTeamMembersSchema,
-  async ({ invites }) => {
+  async ({ invites, redirectTo }) => {
     const supabase = createClient();
     const user = await getUser();
 
@@ -69,5 +69,9 @@ export const inviteTeamMembersAction = action(
     const htmlEmails = await Promise.all(emails);
 
     await resend.batch.send(htmlEmails);
+
+    if (redirectTo) {
+      redirect(redirectTo);
+    }
   }
 );

apps/dashboard/src/actions/leave-team-action.ts

@@ -4,12 +4,13 @@ import { getTeamMembers, getUser } from "@midday/supabase/cached-queries";
 import { leaveTeam } from "@midday/supabase/mutations";
 import { createClient } from "@midday/supabase/server";
 import { revalidateTag } from "next/cache";
+import { redirect } from "next/navigation";
 import { action } from "./safe-action";
 import { leaveTeamSchema } from "./schema";
 
 export const leaveTeamAction = action(
   leaveTeamSchema,
-  async ({ teamId, role }) => {
+  async ({ teamId, role, redirectTo }) => {
     const supabase = createClient();
     const user = await getUser();
     const { data: teamMembersData } = await getTeamMembers();
@@ -31,6 +32,10 @@ export const leaveTeamAction = action(
     revalidateTag(`user_${user.data.id}`);
     revalidateTag(`teams_${user.data.id}`);
 
+    if (redirectTo) {
+      redirect(redirectTo);
+    }
+
     return data;
   }
 );

apps/dashboard/src/actions/schema.ts

@@ -141,10 +141,12 @@ export const updaterMenuSchema = z.array(
 
 export const changeTeamSchema = z.object({
   teamId: z.string(),
+  redirectTo: z.string(),
 });
 
 export const createTeamSchema = z.object({
   name: z.string(),
+  redirectTo: z.string().optional(),
 });
 
 export const changeUserRoleSchema = z.object({
@@ -160,6 +162,7 @@ export const deleteTeamMemberSchema = z.object({
 
 export const leaveTeamSchema = z.object({
   teamId: z.string(),
+  redirectTo: z.string().optional(),
   role: z.enum(["owner", "member"]),
 });
 
@@ -174,6 +177,7 @@ export const inviteTeamMembersSchema = z.object({
       role: z.enum(["owner", "member"]),
     })
   ),
+  redirectTo: z.string().optional(),
 });
 
 export type InviteTeamMembersFormValues = z.infer<

apps/dashboard/src/app/[locale]/@dashboard/(root)/layout.tsx

@@ -4,10 +4,21 @@ import { ConnectBankModal } from "@/components/modals/connect-bank-modal";
 import { SelectAccountModal } from "@/components/modals/select-account-modal";
 import { Sidebar } from "@/components/sidebar";
 import { getCountryCode } from "@midday/location";
+import { getUser } from "@midday/supabase/cached-queries";
+import { redirect } from "next/navigation";
 
-export default function Layout({ children }: { children: React.ReactNode }) {
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const user = await getUser();
   const countryCode = getCountryCode();
 
+  if (!user?.data?.team) {
+    redirect("/teams");
+  }
+
   return (
     <div className="flex">
       <Sidebar />

apps/dashboard/src/app/[locale]/@teams/create/page.tsx → apps/dashboard/src/app/[locale]/@dashboard/teams/create/page.tsx

@@ -1,7 +1,5 @@
-import { getTeams } from "@midday/supabase/cached-queries";
-import { Button } from "@midday/ui/button";
+import { CreateTeamForm } from "@/components/create-team-form";
 import { Icons } from "@midday/ui/icons";
-import { Input } from "@midday/ui/input";
 import Link from "next/link";
 
 export default async function CreateTeam() {
@@ -30,14 +28,7 @@ export default async function CreateTeam() {
             </p>
           </div>
 
-          <Input
-            className="mt-3"
-            placeholder="Ex: Acme Marketing or Acme Co"
-            required
-            autocomplete="off"
-          />
-
-          <Button className="mt-6">Next</Button>
+          <CreateTeamForm />
         </div>
       </div>
     </div>

apps/dashboard/src/app/[locale]/@teams/invite/page.tsx → apps/dashboard/src/app/[locale]/@dashboard/teams/invite/page.tsx

@@ -1,7 +1,5 @@
-import { getTeams } from "@midday/supabase/cached-queries";
-import { Button } from "@midday/ui/button";
+import { InviteForm } from "@/components/invite-form";
 import { Icons } from "@midday/ui/icons";
-import { Input } from "@midday/ui/input";
 import Link from "next/link";
 
 export default async function InviteMembers() {
@@ -25,26 +23,7 @@ export default async function InviteMembers() {
             <p className="text-sm">Invite new members by email address</p>
           </div>
 
-          <div className="flex items-center justify-between mt-3 space-x-2">
-            <Input
-              placeholder="jane@example.com"
-              required
-              type="email"
-              autocomplete="off"
-              autocapitalize="none"
-              autocorrect="off"
-              spellcheck="false"
-            />
-
-            <Button variant="outline" className="font-normal">
-              Member
-            </Button>
-          </div>
-
-          <div className="flex items-center justify-between mt-8">
-            <Button variant="ghost">Skip this step</Button>
-            <Button>Next</Button>
-          </div>
+          <InviteForm />
         </div>
       </div>
     </div>

apps/dashboard/src/app/[locale]/@teams/(select)/page.tsx → apps/dashboard/src/app/[locale]/@dashboard/teams/page.tsx

@@ -8,7 +8,7 @@ export default async function Teams() {
   const { data } = await getTeams();
 
   if (!data.length > 0) {
-    redirect("/create");
+    redirect("/teams/create");
   }
 
   return (
@@ -32,7 +32,7 @@ export default async function Teams() {
           <SelectTeamTable data={data} />
 
           <div className="text-center mt-6">
-            <Link href="/create" className="text-sm">
+            <Link href="/teams/create" className="text-sm">
               Create team
             </Link>
           </div>

apps/dashboard/src/app/[locale]/layout.tsx

@@ -1,24 +1,20 @@
-import { getUser } from "@midday/supabase/cached-queries";
+import { createClient } from "@midday/supabase/server";
 import { Providers } from "./providers";
 
 export default async function Layout({
   dashboard,
   login,
-  teams,
   params: { locale },
 }: {
   dashboard: React.ReactNode;
   login: React.ReactNode;
-  teams: React.ReactNode;
   params: { locale: string };
 }) {
-  let content = login;
+  const supabase = createClient();
 
-  const user = await getUser();
+  const {
+    data: { session },
+  } = await supabase.auth.getSession();
 
-  if (user?.data) {
-    content = user?.data.team ? dashboard : teams;
-  }
-
-  return <Providers locale={locale}>{content}</Providers>;
+  return <Providers locale={locale}>{session ? dashboard : login}</Providers>;
 }

apps/dashboard/src/components/create-team-form.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { createTeamAction } from "@/actions/create-team-action";
+import { Button } from "@midday/ui/button";
+import { Input } from "@midday/ui/input";
+import { Loader2 } from "lucide-react";
+import { useAction } from "next-safe-action/hook";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export function CreateTeamForm() {
+  const [name, setName] = useState("");
+  const router = useRouter();
+  const createTeam = useAction(createTeamAction);
+
+  return (
+    <>
+      <Input
+        autoFocus
+        className="mt-3"
+        placeholder="Ex: Acme Marketing or Acme Co"
+        required
+        autoComplete="off"
+        onChange={(evt) => setName(evt.target.value)}
+      />
+
+      <Button
+        className="mt-6"
+        disabled={createTeam.status === "executing"}
+        onClick={() =>
+          createTeam.execute({ name, redirectTo: "/teams/invite" })
+        }
+      >
+        {createTeam.status === "executing" ? (
+          <Loader2 className="h-4 w-4 animate-spin" />
+        ) : (
+          "Next"
+        )}
+      </Button>
+    </>
+  );
+}

apps/dashboard/src/components/delete-team.tsx

@@ -27,7 +27,7 @@ import { useRouter } from "next/navigation";
 export function DeleteTeam({ teamId }) {
   const router = useRouter();
   const deleteTeam = useAction(deleteTeamAction, {
-    onSuccess: () => router.push("/"),
+    onSuccess: () => router.push("/teams"),
   });
 
   return (