├── .env.example
├── .env.local.example
├── .gitignore
├── README.md
├── app
    ├── _examples
    │   ├── client-component
    │   │   └── page.tsx
    │   ├── protected-route
    │   │   └── page.tsx
    │   ├── route-handler
    │   │   └── route.ts
    │   ├── server-action
    │   │   └── page.tsx
    │   └── server-component
    │   │   └── page.tsx
    ├── account
    │   └── page.tsx
    ├── auth-button.tsx
    ├── auth
    │   └── callback
    │   │   └── route.ts
    ├── favicon.ico
    ├── globals.css
    ├── layout.tsx
    ├── login
    │   └── page.tsx
    ├── mailbox
    │   └── page.tsx
    ├── members
    │   └── page.tsx
    ├── opengraph-image.tsx
    ├── page.tsx
    └── send-email
    │   └── route.ts
├── components.json
├── components
    ├── account.tsx
    ├── add-member.tsx
    ├── edit-member.tsx
    ├── email-composer.tsx
    ├── icons.tsx
    ├── main-nav.tsx
    ├── members-table.tsx
    ├── new-message.tsx
    ├── secondary-nav.tsx
    ├── site-header.tsx
    ├── styles.css
    ├── tailwind-indicator.tsx
    ├── theme-provider.tsx
    ├── theme-toggle.tsx
    ├── tiptap.js
    ├── ui
    │   ├── avatar.tsx
    │   ├── button.tsx
    │   ├── dialog.tsx
    │   ├── dropdown-menu.tsx
    │   ├── form.tsx
    │   ├── input.tsx
    │   ├── label.tsx
    │   ├── table.tsx
    │   ├── toast.tsx
    │   ├── toaster.tsx
    │   ├── tooltip.tsx
    │   └── use-toast.ts
    └── user-nav.tsx
├── config
    └── site.ts
├── lib
    └── utils.ts
├── middleware.ts
├── next.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── rebase.code-workspace
├── supabase
    ├── .gitignore
    ├── config.toml
    ├── migrations
    │   ├── 20230716202819_remote_commit.sql
    │   ├── 20230716203001_remote_commit.sql
    │   ├── 20230819040448_create_emails_table.sql
    │   ├── 20230820053817_create_member_groupings_table.sql
    │   ├── 20230820054446_add_group_id_to_members_table.sql
    │   ├── 20230820060355_create_member_group_join.sql
    │   ├── 20230906225600_created_by_group.sql
    │   ├── 20230907000406_alter_member_groups.sql
    │   ├── 20230907015108_edit-group-table.sql
    │   └── 20230907020105_group-references-profiles.sql
    └── seed.sql
├── tailwind.config.js
├── tsconfig.json
└── types
    ├── nav.ts
    └── supabase.ts


/.env.example:
--------------------------------------------------------------------------------
1 | SITE_URL="<your-site-url>"
2 | SUPABASE_AUTH_EXTERNAL_GOOGLE_CLIENT_ID="<your-google-client-id>"
3 | SUPABASE_AUTH_EXTERNAL_GOOGLE_SECRET="<your-google-secret>"
4 | NEXT_PUBLIC_RESEND_API_KEY="<your-resend-api-key>"


--------------------------------------------------------------------------------
/.env.local.example:
--------------------------------------------------------------------------------
1 | NEXT_PUBLIC_SUPABASE_URL="<your-supabase-url>"
2 | NEXT_PUBLIC_SUPABASE_ANON_KEY="your-supabase-anon-key"


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env*.local
29 | .env
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | .env.example
38 | .env.local.example
39 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Rebase is an open-source email platform purpose-built for sending investor updates. As a founder, I send monthly update emails to my investors to share what I've been up to using a product called [Cabal](https://getcabal.com). I’m a huge fan of their product, so I wanted to try to build my own from scratch.
 2 | 
 3 | Please note that the product is only designed for verified domains. If you want to use it, you'll need to register a domain and verify it with [Resend](https://resend.com) (see below).
 4 | 
 5 | ## Getting Started
 6 | 
 7 | 1. Clone the repository `git clone https://github.com/alanagoyal/rebase`
 8 | 2. Use `cd` to change into the app's directory
 9 | 3. Run `npm install` to install dependencies
10 | 4. Rename `.env.example` to `.env` and update the API keys. Rename `.env.local.example` to `.env.local` and do the same.
11 | 
12 | ## Supabase
13 | 
14 | This project uses [Supabase](https://supabase.com) to store users, members, and groups. Follow [these instructions](https://supabase.com/docs/guides/getting-started/local-development) to apply the migration and get started with your own project.
15 | 
16 | ## Resend
17 | 
18 | This project uses [Resend](https://resend.com) to send the emails. You can sign up for a free account, register a domain, and paste the API key into `.env` to start sending emails.
19 | 
20 | ## Deploy
21 | 
22 | Deploy using [Vercel](https://vercel.com).
23 | 


--------------------------------------------------------------------------------
/app/_examples/client-component/page.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | // TODO: Duplicate or move this file outside the `_examples` folder to make it a route
 4 | 
 5 | import { createClientComponentClient } from '@supabase/auth-helpers-nextjs'
 6 | import { useEffect, useState } from 'react'
 7 | 
 8 | export default function ClientComponent() {
 9 |   const [todos, setTodos] = useState<any[]>([])
10 | 
11 |   // Create a Supabase client configured to use cookies
12 |   const supabase = createClientComponentClient()
13 | 
14 |   useEffect(() => {
15 |     const getTodos = async () => {
16 |       // This assumes you have a `todos` table in Supabase. Check out
17 |       // the `Create Table and seed with data` section of the README 👇
18 |       // https://github.com/vercel/next.js/blob/canary/examples/with-supabase/README.md
19 |       const { data } = await supabase.from('todos').select()
20 |       if (data) {
21 |         setTodos(data)
22 |       }
23 |     }
24 | 
25 |     getTodos()
26 |   }, [supabase, setTodos])
27 | 
28 |   return <pre>{JSON.stringify(todos, null, 2)}</pre>
29 | }
30 | 


--------------------------------------------------------------------------------
/app/_examples/protected-route/page.tsx:
--------------------------------------------------------------------------------
 1 | // TODO: Duplicate or move this file outside the `_examples` folder to make it a route
 2 | 
 3 | import {
 4 |   createServerActionClient,
 5 |   createServerComponentClient,
 6 | } from "@supabase/auth-helpers-nextjs";
 7 | import { cookies } from "next/headers";
 8 | import Image from "next/image";
 9 | import { redirect } from "next/navigation";
10 | 
11 | export default async function ProtectedRoute() {
12 |   const supabase = createServerComponentClient({ cookies });
13 | 
14 |   const {
15 |     data: { user },
16 |   } = await supabase.auth.getUser();
17 | 
18 |   if (!user) {
19 |     // This route can only be accessed by authenticated users.
20 |     // Unauthenticated users will be redirected to the `/login` route.
21 |     redirect("/login");
22 |   }
23 | 
24 |   const signOut = async () => {
25 |     "use server";
26 |     const supabase = createServerActionClient({ cookies });
27 |     await supabase.auth.signOut();
28 |     redirect("/login");
29 |   };
30 | 
31 |   return (
32 |     <div className="flex-1 flex flex-col max-w-3xl mt-24">
33 |       <h1 className="text-2xl mb-2 flex justify-between">
34 |         <span className="sr-only">Supabase and Next.js Starter Template</span>
35 |       </h1>
36 | 
37 |       <div className="flex border-b py-3 text-sm text-neutral-100">
38 |         <div className="flex items-center justify-between w-full">
39 |           <code className="bg-neutral-700 px-3 py-1 rounded-lg text-sm">
40 |             Protected page
41 |           </code>
42 |           <span className="flex gap-4">
43 |             Hey, {user.email}! <span className="border-r"></span>{" "}
44 |             <form action={signOut}>
45 |               <button className="text-neutral-100">Logout</button>
46 |             </form>
47 |           </span>
48 |         </div>
49 |       </div>
50 | 
51 |       <div className="flex gap-8 justify-center mt-12">
52 |         <Image
53 |           src="/supabase.svg"
54 |           alt="Supabase Logo"
55 |           width={225}
56 |           height={45}
57 |           priority
58 |         />
59 |         <div className="border-l rotate-45 h-10"></div>
60 |         <Image
61 |           src="/next.svg"
62 |           alt="Vercel Logo"
63 |           width={150}
64 |           height={36}
65 |           priority
66 |         />
67 |       </div>
68 | 
69 |       <p className="text-3xl mx-auto max-w-2xl text-center mt-8 text-white">
70 |         The fastest way to get started building apps with{" "}
71 |         <strong>Supabase</strong> and <strong>Next.js</strong>
72 |       </p>
73 | 
74 |       <div className="flex justify-center mt-12">
75 |         <span className="bg-neutral-100 py-3 px-6 rounded-lg font-mono text-sm text-neutral-900">
76 |           Get started by editing <strong>app/page.tsx</strong>
77 |         </span>
78 |       </div>
79 |     </div>
80 |   );
81 | }
82 | 


--------------------------------------------------------------------------------
/app/_examples/route-handler/route.ts:
--------------------------------------------------------------------------------
 1 | // TODO: Duplicate or move this file outside the `_examples` folder to make it a route
 2 | 
 3 | import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
 4 | import { cookies } from 'next/headers'
 5 | import { NextResponse } from 'next/server'
 6 | 
 7 | export async function GET() {
 8 |   // Create a Supabase client configured to use cookies
 9 |   const supabase = createRouteHandlerClient({ cookies })
10 | 
11 |   // This assumes you have a `todos` table in Supabase. Check out
12 |   // the `Create Table and seed with data` section of the README 👇
13 |   // https://github.com/vercel/next.js/blob/canary/examples/with-supabase/README.md
14 |   const { data: todos } = await supabase.from('todos').select()
15 | 
16 |   return NextResponse.json(todos)
17 | }
18 | 


--------------------------------------------------------------------------------
/app/_examples/server-action/page.tsx:
--------------------------------------------------------------------------------
 1 | // TODO: Duplicate or move this file outside the `_examples` folder to make it a route
 2 | 
 3 | import { createServerActionClient } from '@supabase/auth-helpers-nextjs'
 4 | import { revalidatePath } from 'next/cache'
 5 | import { cookies } from 'next/headers'
 6 | 
 7 | export default async function ServerAction() {
 8 |   const addTodo = async (formData: FormData) => {
 9 |     'use server'
10 |     const title = formData.get('title')
11 | 
12 |     if (title) {
13 |       // Create a Supabase client configured to use cookies
14 |       const supabase = createServerActionClient({ cookies })
15 | 
16 |       // This assumes you have a `todos` table in Supabase. Check out
17 |       // the `Create Table and seed with data` section of the README 👇
18 |       // https://github.com/vercel/next.js/blob/canary/examples/with-supabase/README.md
19 |       await supabase.from('todos').insert({ title })
20 |       revalidatePath('/server-action-example')
21 |     }
22 |   }
23 | 
24 |   return (
25 |     <form action={addTodo}>
26 |       <input name="title" />
27 |     </form>
28 |   )
29 | }
30 | 


--------------------------------------------------------------------------------
/app/_examples/server-component/page.tsx:
--------------------------------------------------------------------------------
 1 | // TODO: Duplicate or move this file outside the `_examples` folder to make it a route
 2 | 
 3 | import { createServerComponentClient } from '@supabase/auth-helpers-nextjs'
 4 | import { cookies } from 'next/headers'
 5 | 
 6 | export default async function ServerComponent() {
 7 |   // Create a Supabase client configured to use cookies
 8 |   const supabase = createServerComponentClient({ cookies })
 9 | 
10 |   // This assumes you have a `todos` table in Supabase. Check out
11 |   // the `Create Table and seed with data` section of the README 👇
12 |   // https://github.com/vercel/next.js/blob/canary/examples/with-supabase/README.md
13 |   const { data: todos } = await supabase.from('todos').select()
14 | 
15 |   return <pre>{JSON.stringify(todos, null, 2)}</pre>
16 | }
17 | 


--------------------------------------------------------------------------------
/app/account/page.tsx:
--------------------------------------------------------------------------------
 1 | import AccountForm from "@/components/account";
 2 | import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
 3 | import { cookies } from "next/headers";
 4 | 
 5 | export default async function Account() {
 6 |   const supabase = createServerComponentClient({ cookies });
 7 | 
 8 |   const {
 9 |     data: { user },
10 |   } = await supabase.auth.getUser();
11 |   const {
12 |     data: userData,
13 |     error,
14 |     status,
15 |   } = await supabase.from("profiles").select("*").eq("id", user?.id).single();
16 |   const name = userData?.full_name;
17 |   const email = userData?.email;
18 | 
19 |   return (
20 |     <div className="flex flex-col items-center min-h-screen pt-20 py-2">
21 |       <h1 className="text-4xl font-bold mb-4">Your Account</h1>
22 |       <AccountForm user={user!} name={name!} email={email!} />
23 |     </div>
24 |   );
25 | }
26 | 


--------------------------------------------------------------------------------
/app/auth-button.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { Button, buttonVariants } from "@/components/ui/button";
 4 | import { siteConfig } from "@/config/site";
 5 | import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";
 6 | import Link from "next/link";
 7 | 
 8 | export default function AuthButton() {
 9 |   const supabase = createClientComponentClient();
10 | 
11 |   async function signInWithGoogle() {
12 |     const { data, error } = await supabase.auth.signInWithOAuth({
13 |       provider: "google",
14 |       options: {
15 |         redirectTo: `${location.origin}/auth/callback`,
16 |       },
17 |     });
18 |   }
19 | 
20 |   return (
21 |     <div className="flex gap-4">
22 |       <Button
23 |         onClick={signInWithGoogle}
24 |         className=" text-white px-8 py-4 rounded-md text-base"
25 |         style={{
26 |           background: "linear-gradient(19deg, #FAACA8 0%, #DDD6F3 100%)",
27 |         }}
28 |       >
29 |         Get Started
30 |       </Button>
31 |       <Link
32 |         href={siteConfig.links.github}
33 |         className={buttonVariants({ variant: "ghost" })}
34 |       >
35 |         View on Github
36 |       </Link>
37 |     </div>
38 |   );
39 | }
40 | 


--------------------------------------------------------------------------------
/app/auth/callback/route.ts:
--------------------------------------------------------------------------------
 1 | import { createRouteHandlerClient } from "@supabase/auth-helpers-nextjs";
 2 | import { cookies } from "next/headers";
 3 | import { NextResponse } from "next/server";
 4 | 
 5 | export async function GET(request: Request) {
 6 |   // The `/auth/callback` route is required for the server-side auth flow implemented
 7 |   // by the Auth Helpers package. It exchanges an auth code for the user's session.
 8 |   // https://supabase.com/docs/guides/auth/auth-helpers/nextjs#managing-sign-in-with-code-exchange
 9 |   const requestUrl = new URL(request.url);
10 |   const code = requestUrl.searchParams.get("code");
11 | 
12 |   if (code) {
13 |     const supabase = createRouteHandlerClient({ cookies });
14 |     await supabase.auth.exchangeCodeForSession(code);
15 |   }
16 | 
17 |   // URL to redirect to after sign in process completes
18 |   return NextResponse.redirect(`${requestUrl.origin}/account`);
19 | }
20 | 


--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alanagoyal/rebase/67c0677c028fca7ba6a7f72612bff904f5cad36a/app/favicon.ico


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
  1 | @tailwind base;
  2 | @tailwind components;
  3 | @tailwind utilities;
  4 | 
  5 | @layer base {
  6 |   :root {
  7 |     --background: 0 0% 100%;
  8 |     --foreground: 222.2 84% 4.9%;
  9 | 
 10 |     --muted: 210 40% 96.1%;
 11 |     --muted-foreground: 215.4 16.3% 46.9%;
 12 | 
 13 |     --popover: 0 0% 100%;
 14 |     --popover-foreground: 222.2 84% 4.9%;
 15 | 
 16 |     --card: 0 0% 100%;
 17 |     --card-foreground: 222.2 84% 4.9%;
 18 | 
 19 |     --border: 214.3 31.8% 91.4%;
 20 |     --input: 214.3 31.8% 91.4%;
 21 | 
 22 |     --primary: 222.2 47.4% 11.2%;
 23 |     --primary-foreground: 210 40% 98%;
 24 | 
 25 |     --secondary: 210 40% 96.1%;
 26 |     --secondary-foreground: 222.2 47.4% 11.2%;
 27 | 
 28 |     --accent: 210 40% 96.1%;
 29 |     --accent-foreground: 222.2 47.4% 11.2%;
 30 | 
 31 |     --destructive: 0 84.2% 60.2%;
 32 |     --destructive-foreground: 210 40% 98%;
 33 | 
 34 |     --ring: 215 20.2% 65.1%;
 35 | 
 36 |     --radius: 0.5rem;
 37 |   }
 38 | 
 39 |   .dark {
 40 |     --background: 222.2 84% 4.9%;
 41 |     --foreground: 210 40% 98%;
 42 | 
 43 |     --muted: 217.2 32.6% 17.5%;
 44 |     --muted-foreground: 215 20.2% 65.1%;
 45 | 
 46 |     --popover: 222.2 84% 4.9%;
 47 |     --popover-foreground: 210 40% 98%;
 48 | 
 49 |     --card: 222.2 84% 4.9%;
 50 |     --card-foreground: 210 40% 98%;
 51 | 
 52 |     --border: 217.2 32.6% 17.5%;
 53 |     --input: 217.2 32.6% 17.5%;
 54 | 
 55 |     --primary: 210 40% 98%;
 56 |     --primary-foreground: 222.2 47.4% 11.2%;
 57 | 
 58 |     --secondary: 217.2 32.6% 17.5%;
 59 |     --secondary-foreground: 210 40% 98%;
 60 | 
 61 |     --accent: 217.2 32.6% 17.5%;
 62 |     --accent-foreground: 210 40% 98%;
 63 | 
 64 |     --destructive: 0 62.8% 30.6%;
 65 |     --destructive-foreground: 0 85.7% 97.3%;
 66 | 
 67 |     --ring: 217.2 32.6% 17.5%;
 68 |   }
 69 | }
 70 | 
 71 | @layer base {
 72 |   * {
 73 |     @apply border-border;
 74 |   }
 75 |   body {
 76 |     @apply bg-background text-foreground;
 77 |   }
 78 | }
 79 | 
 80 | h1 {
 81 |   font-size: 24px;
 82 | }
 83 | 
 84 | h2 {
 85 |   font-size: 20px;
 86 | }
 87 | 
 88 | h3 {
 89 |   font-size: 18px;
 90 | }
 91 | 
 92 | h4 {
 93 |   font-size: 16px;
 94 | }
 95 | 
 96 | .banner {
 97 |   background-color: #9face6;
 98 |   color: white;
 99 |   padding: 10px;
100 |   text-align: center;
101 | }
102 | 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import { ThemeProvider } from "@/components/theme-provider";
 2 | import "./globals.css";
 3 | import { SiteHeader } from "@/components/site-header";
 4 | import { Toaster } from "@/components/ui/toaster";
 5 | import { TailwindIndicator } from "@/components/tailwind-indicator";
 6 | import { Metadata } from "next";
 7 | import { siteConfig } from "@/config/site";
 8 | 
 9 | export const dynamic = "force-dynamic";
10 | 
11 | export const metadata: Metadata = {
12 |   title: {
13 |     default: siteConfig.name,
14 |     template: `%s | ${siteConfig.name}`,
15 |   },
16 |   description: siteConfig.description,
17 |   themeColor: [
18 |     { media: "(prefers-color-scheme: light)", color: "white" },
19 |     { media: "(prefers-color-scheme: dark)", color: "black" },
20 |   ],
21 |   icons: {
22 |     icon: "/favicon.ico",
23 |     apple: "/apple-touch-icon.png",
24 |   },
25 |   openGraph: {
26 |     type: "website",
27 |     locale: "en_US",
28 |     url: siteConfig.url,
29 |     title: siteConfig.name,
30 |     description: siteConfig.description,
31 |     siteName: siteConfig.name,
32 |   },
33 |   twitter: {
34 |     card: "summary_large_image",
35 |     site: "@alanaagoyal",
36 |     creator: "@alanaagoyal",
37 |     title: siteConfig.name,
38 |     description: siteConfig.description,
39 |     images: siteConfig.ogImage,
40 |   },
41 | };
42 | 
43 | export default function RootLayout({
44 |   children,
45 | }: {
46 |   children: React.ReactNode;
47 | }) {
48 |   return (
49 |     <html lang="en">
50 |       <body>
51 |         <ThemeProvider attribute="class" defaultTheme="light" enableSystem>
52 |           <div className="relative flex min-h-screen flex-col">
53 |             <div className="banner">
54 |               <a href="https://basecase.vc/blog/building-with-the-batch-s23">
55 |                 Read about how we built Rebase 👉🏼
56 |               </a>
57 |             </div>
58 |             <SiteHeader />
59 |             <Toaster />
60 |             {children}
61 |             <div className="flex-1"></div>
62 |           </div>
63 |           <TailwindIndicator />
64 |         </ThemeProvider>
65 |       </body>
66 |     </html>
67 |   );
68 | }
69 | 


--------------------------------------------------------------------------------
/app/login/page.tsx:
--------------------------------------------------------------------------------
  1 | 'use client'
  2 | 
  3 | import { useState } from 'react'
  4 | import { useRouter } from 'next/navigation'
  5 | import { createClientComponentClient } from '@supabase/auth-helpers-nextjs'
  6 | import Link from 'next/link'
  7 | 
  8 | export default function Login() {
  9 |   const [email, setEmail] = useState('')
 10 |   const [password, setPassword] = useState('')
 11 |   const [view, setView] = useState('sign-in')
 12 |   const router = useRouter()
 13 |   const supabase = createClientComponentClient()
 14 | 
 15 |   const handleSignUp = async (e: React.FormEvent<HTMLFormElement>) => {
 16 |     e.preventDefault()
 17 |     await supabase.auth.signUp({
 18 |       email,
 19 |       password,
 20 |       options: {
 21 |         emailRedirectTo: `${location.origin}/auth/callback`,
 22 |       },
 23 |     })
 24 |     setView('check-email')
 25 |   }
 26 | 
 27 |   const handleSignIn = async (e: React.FormEvent<HTMLFormElement>) => {
 28 |     e.preventDefault()
 29 |     await supabase.auth.signInWithPassword({
 30 |       email,
 31 |       password,
 32 |     })
 33 |     router.push('/')
 34 |     router.refresh()
 35 |   }
 36 | 
 37 |   return (
 38 |     <div className="flex-1 flex flex-col w-full px-8 sm:max-w-md justify-center gap-2">
 39 |       <Link
 40 |         href="/"
 41 |         className="absolute left-8 top-8 py-2 px-4 rounded-md no-underline text-foreground bg-btn-background hover:bg-btn-background-hover flex items-center group text-sm"
 42 |       >
 43 |         <svg
 44 |           xmlns="http://www.w3.org/2000/svg"
 45 |           width="24"
 46 |           height="24"
 47 |           viewBox="0 0 24 24"
 48 |           fill="none"
 49 |           stroke="currentColor"
 50 |           strokeWidth="2"
 51 |           strokeLinecap="round"
 52 |           strokeLinejoin="round"
 53 |           className="mr-2 h-4 w-4 transition-transform group-hover:-translate-x-1"
 54 |         >
 55 |           <polyline points="15 18 9 12 15 6" />
 56 |         </svg>{' '}
 57 |         Back
 58 |       </Link>
 59 |       {view === 'check-email' ? (
 60 |         <p className="text-center text-foreground">
 61 |           Check <span className="font-bold">{email}</span> to continue signing
 62 |           up
 63 |         </p>
 64 |       ) : (
 65 |         <form
 66 |           className="flex-1 flex flex-col w-full justify-center gap-2 text-foreground"
 67 |           onSubmit={view === 'sign-in' ? handleSignIn : handleSignUp}
 68 |         >
 69 |           <label className="text-md" htmlFor="email">
 70 |             Email
 71 |           </label>
 72 |           <input
 73 |             className="rounded-md px-4 py-2 bg-inherit border mb-6"
 74 |             name="email"
 75 |             onChange={(e) => setEmail(e.target.value)}
 76 |             value={email}
 77 |             placeholder="you@example.com"
 78 |           />
 79 |           <label className="text-md" htmlFor="password">
 80 |             Password
 81 |           </label>
 82 |           <input
 83 |             className="rounded-md px-4 py-2 bg-inherit border mb-6"
 84 |             type="password"
 85 |             name="password"
 86 |             onChange={(e) => setPassword(e.target.value)}
 87 |             value={password}
 88 |             placeholder="••••••••"
 89 |           />
 90 |           {view === 'sign-in' && (
 91 |             <>
 92 |               <button className="bg-green-700 rounded px-4 py-2 text-white mb-6">
 93 |                 Sign In
 94 |               </button>
 95 |               <p className="text-sm text-center">
 96 |                 Don't have an account?
 97 |                 <button
 98 |                   className="ml-1 underline"
 99 |                   onClick={() => setView('sign-up')}
100 |                 >
101 |                   Sign Up Now
102 |                 </button>
103 |               </p>
104 |             </>
105 |           )}
106 |           {view === 'sign-up' && (
107 |             <>
108 |               <button className="bg-green-700 rounded px-4 py-2 text-white mb-6">
109 |                 Sign Up
110 |               </button>
111 |               <p className="text-sm text-center">
112 |                 Already have an account?
113 |                 <button
114 |                   className="ml-1 underline"
115 |                   onClick={() => setView('sign-in')}
116 |                 >
117 |                   Sign In Now
118 |                 </button>
119 |               </p>
120 |             </>
121 |           )}
122 |         </form>
123 |       )}
124 |     </div>
125 |   )
126 | }
127 | 


--------------------------------------------------------------------------------
/app/mailbox/page.tsx:
--------------------------------------------------------------------------------
 1 | "use client"; // This is a client component 👈🏽
 2 | 
 3 | import { Button } from "@/components/ui/button";
 4 | import Tiptap from "@/components/tiptap";
 5 | import {
 6 |   Dialog,
 7 |   DialogContent,
 8 |   DialogDescription,
 9 |   DialogFooter,
10 |   DialogHeader,
11 |   DialogTitle,
12 |   DialogTrigger,
13 | } from "@/components/ui/dialog";
14 | import {
15 |   Form,
16 |   FormControl,
17 |   FormField,
18 |   FormItem,
19 |   FormLabel,
20 | } from "@/components/ui/form";
21 | import { cookies } from "next/headers";
22 | import { zodResolver } from "@hookform/resolvers/zod";
23 | import { Input } from "@/components/ui/input";
24 | import {
25 |   createClientComponentClient,
26 |   createServerActionClient,
27 |   createServerComponentClient,
28 | } from "@supabase/auth-helpers-nextjs";
29 | import React, { useEffect, useState } from "react";
30 | 
31 | import { Controller, useForm } from "react-hook-form";
32 | 
33 | import * as z from "zod";
34 | import EmailComposer from "@/components/email-composer";
35 | 
36 | export default async function Mailbox() {
37 |   const supabase = createClientComponentClient();
38 | 
39 |   const [name, setName] = useState<any>(null);
40 |   const [email, setEmail] = useState<any>(null);
41 | 
42 |   const {
43 |     data: { user },
44 |   } = await supabase.auth.getUser();
45 | 
46 |   const [isTiptapOpen, setIsTiptapOpen] = React.useState(false);
47 | 
48 |   const handleNewMessageClick = () => {
49 |     setIsTiptapOpen(true);
50 |   };
51 | 
52 |   const handleSend = () => {
53 |     setIsTiptapOpen(false);
54 |   };
55 | 
56 |   if (!user) {
57 |     return <div>Loading...</div>;
58 |   }
59 | 
60 |   return (
61 |     <div className="flex-1 space-y-4 p-8 pt-6">
62 |       <div className="flex items-center justify-between space-y-2">
63 |         <h2 className="text-3xl font-bold tracking-tight">Mailbox</h2>
64 |         <div className="flex items-center space-x-2"></div>
65 |       </div>
66 |       <Dialog open={isTiptapOpen} onOpenChange={setIsTiptapOpen}>
67 |         <DialogTrigger asChild>
68 |           <Button onClick={handleNewMessageClick}>New Message</Button>
69 |         </DialogTrigger>
70 | 
71 |         <EmailComposer
72 |           user={user}
73 |           userEmail={email}
74 |           supabase={supabase}
75 |           onSend={handleSend}
76 |         />
77 |       </Dialog>
78 |     </div>
79 |   );
80 | }
81 | 


--------------------------------------------------------------------------------
/app/members/page.tsx:
--------------------------------------------------------------------------------
 1 | import AddMemberForm from "@/components/add-member";
 2 | import { MembersTable } from "@/components/members-table";
 3 | import NewMessage from "@/components/new-message";
 4 | import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
 5 | import { cookies } from "next/headers";
 6 | import { redirect } from "next/navigation";
 7 | 
 8 | export default async function Members() {
 9 |   const supabase = createServerComponentClient({ cookies });
10 |   const {
11 |     data: { user },
12 |   } = await supabase.auth.getUser();
13 | 
14 |   if (!user) {
15 |     redirect("/");
16 |   }
17 | 
18 |   const {
19 |     data: members,
20 |     error,
21 |     status,
22 |   } = await supabase.from("members").select("*").eq("created_by", user.id);
23 | 
24 |   // Fetch group information
25 |   const { data: groupMappings, error: groupError } = await supabase
26 |     .from("member_group_joins")
27 |     .select("member_id, group_id");
28 | 
29 |   if (error || groupError) {
30 |     console.error("Error fetching data:", error || groupError);
31 |   }
32 | 
33 |   // Create a mapping of member IDs to an array of group IDs
34 |   const memberGroupInfo: Record<string, string[]> = {};
35 |   groupMappings?.forEach((groupJoin) => {
36 |     const memberId = groupJoin.member_id;
37 |     const groupId = groupJoin.group_id;
38 |     if (!memberGroupInfo[memberId]) {
39 |       memberGroupInfo[memberId] = [];
40 |     }
41 |     memberGroupInfo[memberId].push(groupId);
42 |   });
43 | 
44 |   type GroupName = {
45 |     id: string;
46 |     name: string;
47 |   };
48 |   let groupNamesData: any = [];
49 | 
50 |   if (groupMappings) {
51 |     const groupIds: string[] = groupMappings.map((mapping) => mapping.group_id);
52 |     const { data: groupNamesResponse, error: groupNamesError } = await supabase
53 |       .from("member_groups")
54 |       .select("id, name")
55 |       .in("id", groupIds);
56 | 
57 |     if (groupNamesResponse) {
58 |       groupNamesData = groupNamesResponse;
59 |     } else {
60 |       groupNamesData = [];
61 |     }
62 |   }
63 | 
64 |   return (
65 |     <div className="flex-1 space-y-4 p-8 pt-6">
66 |       <div className="flex items-center justify-between space-y-2">
67 |         <h2 className="text-3xl font-bold tracking-tight">Members</h2>
68 |         <div className="flex items-center space-x-2">
69 |           <AddMemberForm user={user} />
70 |           <NewMessage user={user} />
71 |         </div>
72 |       </div>
73 |       <div className="flex">
74 |         <MembersTable
75 |           user={user}
76 |           members={members!}
77 |           groupMappings={memberGroupInfo}
78 |           groupNamesData={groupNamesData}
79 |         />
80 |       </div>
81 |     </div>
82 |   );
83 | }
84 | 


--------------------------------------------------------------------------------
/app/opengraph-image.tsx:
--------------------------------------------------------------------------------
 1 | import { ImageResponse } from "@vercel/og";
 2 | 
 3 | export default async function handler() {
 4 |   return new ImageResponse(
 5 |     (
 6 |       <div
 7 |         style={{
 8 |           fontSize: 80,
 9 |           color: "white",
10 |           background: "black",
11 |           width: "100%",
12 |           height: "100%",
13 |           padding: "50px 200px",
14 |           textAlign: "center",
15 |           justifyContent: "center",
16 |           alignItems: "center",
17 |         }}
18 |       >
19 |         Re:base 📧
20 |       </div>
21 |     ),
22 |     {
23 |       width: 1200,
24 |       height: 630,
25 |       // Supported options: 'twemoji', 'blobmoji', 'noto', 'openmoji', 'fluent' and 'fluentFlat'
26 |       // Default to 'twemoji'
27 |       emoji: "twemoji",
28 |     }
29 |   );
30 | }
31 | 


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
 1 | import { siteConfig } from "@/config/site";
 2 | import AuthButton from "./auth-button";
 3 | 
 4 | export default function Index() {
 5 |   return (
 6 |     <div className="flex flex-col min-h-screen">
 7 |       <main className="container mx-auto my-48 flex-grow">
 8 |         <section className="container grid items-center gap-6 pb-8 pt-6 md:py-10">
 9 |           <div className="flex max-w-[980px] flex-col items-start gap-2">
10 |             <h1 className="text-3xl font-extrabold leading-tight tracking-tighter sm:text-3xl md:text-5xl lg:text-6xl">
11 |               {siteConfig.name}
12 |             </h1>
13 |             <p className="max-w-[700px] text-lg text-muted-foreground sm:text-xl">
14 |               {siteConfig.description}
15 |             </p>
16 |           </div>
17 |           <AuthButton />
18 |         </section>
19 |       </main>
20 | 
21 |       <footer className="text-center py-8">
22 |         {" "}
23 |         <div className="text-center mb-2">
24 |           <p>
25 |             Built with <span className="text-red-500">❤️</span> by{" "}
26 |             <a
27 |               href="https://twitter.com/alanaagoyal"
28 |               target="_blank"
29 |               rel="noopener noreferrer"
30 |             >
31 |               {siteConfig.authorName}
32 |             </a>{" "}
33 |             and{" "}
34 |             <a
35 |               href="https://twitter.com/mathurahravi"
36 |               target="_blank"
37 |               rel="noopener noreferrer"
38 |             >
39 |               Mathu
40 |             </a>
41 |           </p>
42 |         </div>
43 |       </footer>
44 |     </div>
45 |   );
46 | }
47 | 


--------------------------------------------------------------------------------
/app/send-email/route.ts:
--------------------------------------------------------------------------------
 1 | import { createRouteHandlerClient } from "@supabase/auth-helpers-nextjs";
 2 | import { cookies } from "next/headers";
 3 | import { NextResponse } from "next/server";
 4 | import { Resend } from "resend";
 5 | 
 6 | interface CreateEmailResponse {
 7 |   statusCode: number;
 8 |   message: string;
 9 | }
10 | const resend = new Resend(process.env.NEXT_PUBLIC_RESEND_API_KEY);
11 | 
12 | export async function POST(req: Request, res: NextResponse) {
13 |   try {
14 |     const body = await req.json();
15 |     const payload = {
16 |       from: body.from_email,
17 |       to: body.to_emails,
18 |       subject: body.subject,
19 |       html: body.body,
20 |     };
21 | 
22 |     const emailData = await resend.emails.send(payload);
23 | 
24 |     return NextResponse.json(emailData);
25 |   } catch (error) {
26 |     return NextResponse.json({ error });
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "default",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.js",
 8 |     "css": "app/globals.css",
 9 |     "baseColor": "slate",
10 |     "cssVariables": true
11 |   },
12 |   "aliases": {
13 |     "components": "@/components",
14 |     "utils": "@/lib/utils"
15 |   }
16 | }


--------------------------------------------------------------------------------
/components/account.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { zodResolver } from "@hookform/resolvers/zod";
  4 | import { useForm } from "react-hook-form";
  5 | import * as z from "zod";
  6 | 
  7 | import { Button } from "@/components/ui/button";
  8 | import {
  9 |   Form,
 10 |   FormControl,
 11 |   FormField,
 12 |   FormItem,
 13 |   FormLabel,
 14 | } from "@/components/ui/form";
 15 | import { Input } from "@/components/ui/input";
 16 | import { toast } from "@/components/ui/use-toast";
 17 | import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";
 18 | 
 19 | const accountFormSchema = z.object({
 20 |   email: z.string().optional(),
 21 |   name: z.string().optional(),
 22 | });
 23 | 
 24 | type AccountFormValues = z.infer<typeof accountFormSchema>;
 25 | 
 26 | export default function AccountForm({
 27 |   user,
 28 |   name,
 29 |   email,
 30 | }: {
 31 |   user: { id: string };
 32 |   name: string;
 33 |   email: string;
 34 | }) {
 35 |   const supabase = createClientComponentClient();
 36 |   const form = useForm<AccountFormValues>({
 37 |     resolver: zodResolver(accountFormSchema),
 38 |     defaultValues: {
 39 |       email: email || "",
 40 |       name: name || "",
 41 |     },
 42 |   });
 43 | 
 44 |   async function onSubmit(data: AccountFormValues) {
 45 |       try {
 46 |         const updates = {
 47 |           email: data.email,
 48 |           full_name: data.name,
 49 |         };
 50 | 
 51 |       let { error } = await supabase
 52 |         .from("profiles")
 53 |         .update(updates)
 54 |         .eq("id", user.id);
 55 |       if (error) {
 56 |               toast({
 57 |                 description: "An error occurred while updating your profile",
 58 |               });
 59 |             } else {
 60 |               toast({
 61 |                 description: "Your profile has been updated",
 62 |               });
 63 |             }
 64 |           } catch (error) {
 65 |             toast({
 66 |               description: "An error occurred while updating your profile",
 67 |             });
 68 |           }
 69 |   }
 70 | 
 71 |   return (
 72 |     <div>
 73 |       <Form {...form}>
 74 |         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
 75 |           {" "}
 76 |           <FormField
 77 |             control={form.control}
 78 |             name="email"
 79 |             render={({ field }) => (
 80 |               <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
 81 |                 <div className="space-y-0.5">
 82 |                   <FormLabel className="text-base mx-2">Email</FormLabel>
 83 |                 </div>
 84 |                 <FormControl>
 85 |                   <Input {...field} disabled />
 86 |                 </FormControl>
 87 |               </FormItem>
 88 |             )}
 89 |           />
 90 |           <FormField
 91 |             control={form.control}
 92 |             name="name"
 93 |             render={({ field }) => (
 94 |               <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
 95 |                 <div className="space-y-0.5">
 96 |                   <FormLabel className="text-base mx-2">Name</FormLabel>
 97 |                 </div>
 98 |                 <FormControl>
 99 |                   <Input {...field} />
100 |                 </FormControl>
101 |               </FormItem>
102 |             )}
103 |           />
104 |           <div className="py-1 flex justify-center">
105 |             <Button
106 |               type="submit"
107 |               className="bg-[#9FACE6] text-white font-bold py-2 px-4 rounded w-full"
108 |             >
109 |               Update
110 |             </Button>
111 |           </div>
112 |         </form>
113 |       </Form>
114 |     </div>
115 |   );
116 | }
117 | 


--------------------------------------------------------------------------------
/components/add-member.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { zodResolver } from "@hookform/resolvers/zod";
  4 | import { useForm } from "react-hook-form";
  5 | import * as z from "zod";
  6 | import {
  7 |   Dialog,
  8 |   DialogContent,
  9 |   DialogDescription,
 10 |   DialogFooter,
 11 |   DialogHeader,
 12 |   DialogTitle,
 13 |   DialogTrigger,
 14 | } from "@/components/ui/dialog";
 15 | import { Button } from "@/components/ui/button";
 16 | import {
 17 |   Form,
 18 |   FormControl,
 19 |   FormField,
 20 |   FormItem,
 21 |   FormLabel,
 22 | } from "@/components/ui/form";
 23 | import { Input } from "@/components/ui/input";
 24 | import { toast } from "@/components/ui/use-toast";
 25 | import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";
 26 | import React from "react";
 27 | import { useRouter } from "next/navigation";
 28 | import CreatableSelect from "react-select/creatable";
 29 | import { MultiValue } from "react-select";
 30 | import { User } from "lucide-react";
 31 | 
 32 | const memberFormSchema = z.object({
 33 |   email: z
 34 |     .string({
 35 |       required_error: "Please select an email to display.",
 36 |     })
 37 |     .email(),
 38 |   first_name: z.string().optional(),
 39 |   last_name: z.string().optional(),
 40 | });
 41 | 
 42 | type MemberFormValues = z.infer<typeof memberFormSchema>;
 43 | 
 44 | export default function AddMemberForm({ user, setUser }: { user: any }) {
 45 |   const supabase = createClientComponentClient();
 46 |   const [memberGroups, setMemberGroups] = React.useState<MemberGroup[]>([]); // State to store member groups
 47 |   const [selectedGroups, setSelectedGroups] =
 48 |     React.useState<MultiValue<number> | null>(null); // State to track selected group
 49 |   const [open, setOpen] = React.useState(false);
 50 |   const [submitted, setSubmitted] = React.useState(false);
 51 |   const router = useRouter();
 52 |   const form = useForm<MemberFormValues>({
 53 |     resolver: zodResolver(memberFormSchema),
 54 |     defaultValues: {
 55 |       email: "",
 56 |       first_name: "",
 57 |       last_name: "",
 58 |     },
 59 |   });
 60 | 
 61 |   React.useEffect(() => {
 62 |     async function fetchMemberGroups() {
 63 |       const { data, error } = await supabase
 64 |         .from("member_groups")
 65 |         .select()
 66 |         .eq("created_by", user.id);
 67 |       if (error) {
 68 |         console.error("Error fetching member groups:", error);
 69 |       } else {
 70 |         setSelectedGroups(null);
 71 |         setMemberGroups(data);
 72 |       }
 73 |     }
 74 |     fetchMemberGroups();
 75 |   }, [supabase, submitted]);
 76 | 
 77 |   interface MemberGroup {
 78 |     id: number;
 79 |     name: string;
 80 |   }
 81 | 
 82 |   async function onSubmit(data: MemberFormValues) {
 83 |     try {
 84 |       // Get the IDs of the selected groups that already exist in memberGroups
 85 |       const existingGroupIds = selectedGroups
 86 |         ?.filter((group) =>
 87 |           memberGroups?.map(({ name }) => name).includes(group.value)
 88 |         )
 89 |         .map(
 90 |           (group) => memberGroups.find(({ name }) => name === group.value)?.id
 91 |         );
 92 | 
 93 |       // let groupIds = [];
 94 |       // groupIds = groupIds.concat(existingGroupIds);
 95 | 
 96 |       // Add the IDs of the existing groups to groupIds
 97 |       // Check if the selectedGroups exists in memberGroups
 98 |       const newGroups =
 99 |         selectedGroups
100 |           ?.filter(
101 |             (group) =>
102 |               !memberGroups?.map(({ name }) => name).includes(group.value)
103 |           )
104 |           .map(({ value }) => value) || [];
105 | 
106 |       // groupIds = selectedGroups?.map((group) => group.value);
107 | 
108 |       // If selectedGroups doesn't exist, create a new group
109 |       let groupIds = [];
110 |       if (!!newGroups.length) {
111 |         const groupResponse = await supabase
112 |           .from("member_groups")
113 |           .insert(newGroups.map((name) => ({ name, created_by: user.id })))
114 |           .select();
115 |         const { data: createdGroups, error: createGroupError } = groupResponse;
116 |         if (createGroupError) {
117 |           console.error("Error creating new group:", createGroupError);
118 |         } else {
119 |           if (Array.isArray(createdGroups) && createdGroups.length > 0) {
120 |             groupIds = createdGroups.map(({ id }) => id);
121 |           }
122 |         }
123 |       }
124 | 
125 |       // Create the new member
126 |       const memberUpdates = {
127 |         email: data.email,
128 |         first_name: data.first_name,
129 |         last_name: data.last_name,
130 |         created_by: user?.id,
131 |       };
132 | 
133 |       // Insert the new member and get the member_id
134 |       const { data: newMember, error: memberError } = await supabase
135 |         .from("members")
136 |         .insert([memberUpdates])
137 |         .select();
138 |       if (memberError) {
139 |         throw memberError;
140 |       }
141 |       const memberID = newMember[0].id;
142 | 
143 |       // Update the joins table to associate the member with the group
144 |       if (!!selectedGroups?.length && memberID) {
145 |         const joinUpdates = memberGroups
146 |           ?.filter((memberGroup) =>
147 |             selectedGroups
148 |               .map((selectedGroup) => selectedGroup.value)
149 |               .includes(memberGroup.name)
150 |           )
151 |           .map(({ id }) => id)
152 |           .concat(groupIds)
153 |           .map((memberGroupId) => ({
154 |             member_id: memberID,
155 |             group_id: memberGroupId,
156 |           }));
157 | 
158 |         const { error: joinError } = await supabase
159 |           .from("member_group_joins")
160 |           .insert(joinUpdates);
161 |         if (joinError) {
162 |           console.error("Error updating member_group_joins:", joinError);
163 |         }
164 |       }
165 |       form.reset();
166 |       setSelectedGroups(null);
167 | 
168 |       toast({
169 |         description: "Your member has been added",
170 |       });
171 |       setSubmitted(true);
172 |       router.refresh();
173 |     } catch (error) {}
174 |   }
175 | 
176 |   return (
177 |     <div>
178 |       <Dialog open={open} onOpenChange={setOpen}>
179 |         <DialogTrigger asChild>
180 |           <Button>
181 |             {" "}
182 |             <User className="w-6 h-6 p-1" />
183 |             New Member
184 |           </Button>
185 |         </DialogTrigger>
186 |         <DialogContent className="sm:max-w-[425px]">
187 |           <DialogHeader>
188 |             <DialogTitle>New Member</DialogTitle>
189 |             <DialogDescription>
190 |               Please enter the first name, last name, and email
191 |             </DialogDescription>
192 |           </DialogHeader>
193 |           <div className="grid gap-4 py-4">
194 |             <Form {...form}>
195 |               <form
196 |                 onSubmit={form.handleSubmit(onSubmit)}
197 |                 className="space-y-8"
198 |               >
199 |                 {" "}
200 |                 <FormField
201 |                   control={form.control}
202 |                   name="email"
203 |                   render={({ field }) => (
204 |                     <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
205 |                       <div className="space-y-0.5">
206 |                         <FormLabel className="text-base mx-2">Email</FormLabel>
207 |                       </div>
208 |                       <FormControl>
209 |                         <Input {...field} />
210 |                       </FormControl>
211 |                     </FormItem>
212 |                   )}
213 |                 />
214 |                 <FormField
215 |                   control={form.control}
216 |                   name="first_name"
217 |                   render={({ field }) => (
218 |                     <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
219 |                       <div className="space-y-0.5">
220 |                         <FormLabel className="text-base mx-2">
221 |                           First Name
222 |                         </FormLabel>
223 |                       </div>
224 |                       <FormControl>
225 |                         <Input {...field} />
226 |                       </FormControl>
227 |                     </FormItem>
228 |                   )}
229 |                 />
230 |                 <FormField
231 |                   control={form.control}
232 |                   name="last_name"
233 |                   render={({ field }) => (
234 |                     <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
235 |                       <div className="space-y-0.5">
236 |                         <FormLabel className="text-base mx-2">
237 |                           Last Name
238 |                         </FormLabel>
239 |                       </div>
240 |                       <FormControl>
241 |                         <Input {...field} />
242 |                       </FormControl>
243 |                     </FormItem>
244 |                   )}
245 |                 />
246 |                 <FormField
247 |                   control={form.control}
248 |                   name="group_id"
249 |                   render={({ field }) => (
250 |                     <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
251 |                       <div className="space-y-0.5">
252 |                         <FormLabel className="text-base mx-2">Group</FormLabel>
253 |                       </div>
254 |                       <FormControl>
255 |                         <CreatableSelect
256 |                           {...field}
257 |                           isMulti
258 |                           options={memberGroups.map((group) => ({
259 |                             //badly typed pkg, ignore squiggly
260 |                             label: group.name,
261 |                             value: group.name,
262 |                           }))} // Convert memberGroups to options
263 |                           value={selectedGroups}
264 |                           onChange={(value) => {
265 |                             setSelectedGroups(value);
266 |                           }}
267 |                         />
268 |                       </FormControl>
269 |                     </FormItem>
270 |                   )}
271 |                 />
272 |                 <div className="py-1 flex justify-center">
273 |                   <Button
274 |                     type="submit"
275 |                     onClick={() => {
276 |                       setOpen(false);
277 |                     }}
278 |                     className="bg-[#9FACE6] text-white font-bold py-2 px-4 rounded w-full"
279 |                   >
280 |                     Add
281 |                   </Button>
282 |                 </div>
283 |               </form>
284 |             </Form>
285 |           </div>
286 |         </DialogContent>
287 |       </Dialog>
288 |     </div>
289 |   );
290 | }
291 | 


--------------------------------------------------------------------------------
/components/edit-member.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { zodResolver } from "@hookform/resolvers/zod";
  4 | import { useForm } from "react-hook-form";
  5 | import * as z from "zod";
  6 | import {
  7 |   Dialog,
  8 |   DialogContent,
  9 |   DialogDescription,
 10 |   DialogFooter,
 11 |   DialogHeader,
 12 |   DialogTitle,
 13 |   DialogTrigger,
 14 | } from "@/components/ui/dialog";
 15 | import { Button } from "@/components/ui/button";
 16 | import {
 17 |   Form,
 18 |   FormControl,
 19 |   FormField,
 20 |   FormItem,
 21 |   FormLabel,
 22 | } from "@/components/ui/form";
 23 | import { Input } from "@/components/ui/input";
 24 | import { toast } from "@/components/ui/use-toast";
 25 | import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";
 26 | import React from "react";
 27 | import { useRouter } from "next/navigation";
 28 | import { Edit } from "lucide-react";
 29 | import CreatableSelect from "react-select/creatable";
 30 | import { useEffect } from "react";
 31 | import { MultiValue } from "react-select";
 32 | 
 33 | const memberFormSchema = z.object({
 34 |   email: z
 35 |     .string({
 36 |       required_error: "Please select an email to display.",
 37 |     })
 38 |     .email(),
 39 |   first_name: z.string().optional(),
 40 |   last_name: z.string().optional(),
 41 | });
 42 | 
 43 | type MemberFormValues = z.infer<typeof memberFormSchema>;
 44 | 
 45 | interface MemberGroup {
 46 |   id: number;
 47 |   name: string;
 48 | }
 49 | 
 50 | export default function EditMemberForm({
 51 |   user,
 52 |   member,
 53 |   existingGroups,
 54 | }: {
 55 |   member: { id: string; email: string; first_name: string; last_name: string };
 56 |   existingGroups: string[];
 57 |   user: any;
 58 | }) {
 59 |   //track all the groups
 60 |   const [memberGroups, setMemberGroups] = React.useState<MemberGroup[]>([]);
 61 | 
 62 |   const [open, setOpen] = React.useState(false);
 63 |   const supabase = createClientComponentClient();
 64 |   const router = useRouter();
 65 |   const form = useForm<MemberFormValues>({
 66 |     resolver: zodResolver(memberFormSchema),
 67 |     defaultValues: {
 68 |       email: member.email || "",
 69 |       first_name: member.first_name || "",
 70 |       last_name: member.last_name || "",
 71 |     },
 72 |   });
 73 | 
 74 |   // TODO: Can probably remove this later and do the fetching once
 75 |   React.useEffect(() => {
 76 |     async function fetchMemberGroups() {
 77 |       const { data, error } = await supabase
 78 |         .from("member_groups")
 79 |         .select()
 80 |         .eq("created_by", user.id);
 81 |       if (error) {
 82 |         console.error("Error fetching member groups:", error);
 83 |       } else {
 84 |         setMemberGroups(data);
 85 |       }
 86 |     }
 87 |     fetchMemberGroups();
 88 |   }, [supabase]);
 89 | 
 90 |   const [selectedGroups, setSelectedGroups] =
 91 |     React.useState<MultiValue<number> | null>(null); // State to track selected group
 92 | 
 93 |   React.useEffect(() => {
 94 |     // Format existingGroups into an array of objects with label and value properties
 95 |     const formattedGroups = existingGroups
 96 |       ? existingGroups.split(",").map((groupName) => ({
 97 |           label: groupName,
 98 |           value: groupName,
 99 |         }))
100 |       : null;
101 | 
102 |     // Check if any of the group names is "none"
103 |     if (
104 |       formattedGroups &&
105 |       formattedGroups.some((group) => group.value === "None")
106 |     ) {
107 |       setSelectedGroups(null); // Set selectedGroups to null
108 |     } else {
109 |       setSelectedGroups(formattedGroups);
110 |     }
111 |   }, [existingGroups]);
112 | 
113 |   async function onSubmit(data: MemberFormValues) {
114 |     const {
115 |       data: { user },
116 |     } = await supabase.auth.getUser();
117 | 
118 |     let groupIds = [];
119 | 
120 |     // Delete all existing associations for the member
121 |     const { error: deleteError } = await supabase
122 |       .from("member_group_joins")
123 |       .delete()
124 |       .eq("member_id", member.id);
125 |     if (deleteError) {
126 |       console.error("Error deleting existing associations:", deleteError);
127 |     }
128 | 
129 |     // Get the IDs of the selected groups that already exist in memberGroups
130 |     // Get the IDs of the selected groups that already exist in memberGroups
131 |     const existingGroupIds = selectedGroups
132 |       ?.filter((group) =>
133 |         memberGroups?.map(({ name }) => name).includes(group.value)
134 |       )
135 |       .map(
136 |         (group) => memberGroups.find(({ name }) => name === group.value)?.id
137 |       );
138 | 
139 |     // Add the IDs of the existing groups to groupIds
140 | 
141 |     // Save new groups - if the member group doesn't hold any of the selected groups
142 |     const newGroups =
143 |       selectedGroups
144 |         ?.filter(
145 |           (group) =>
146 |             !memberGroups?.map(({ name }) => name).includes(group.value)
147 |         )
148 |         .map(({ value }) => value) || [];
149 | 
150 |     //Creating a new group if there are elements in the newgroup array
151 |     if (!!newGroups.length) {
152 |       const groupResponse = await supabase
153 |         .from("member_groups")
154 |         .insert(newGroups.map((name) => ({ name, created_by: user?.id })))
155 |         .select();
156 |       const { data: createdGroups, error: createGroupError } = groupResponse;
157 |       if (createGroupError) {
158 |         console.error("Error creating new group:", createGroupError);
159 |       } else {
160 |         if (Array.isArray(createdGroups) && createdGroups.length > 0) {
161 |           groupIds = createdGroups.map(({ id }) => id);
162 |         }
163 |       }
164 |     }
165 | 
166 |     try {
167 |       const updates = {
168 |         email: data.email,
169 |         first_name: data.first_name,
170 |         last_name: data.last_name,
171 |         created_by: user?.id,
172 |       };
173 | 
174 |       const selectedGroupIds = selectedGroups
175 |         ? selectedGroups.map((group) => group.value)
176 |         : [];
177 | 
178 |       if (!!selectedGroups?.length && member.id) {
179 |         // Insert new associations
180 |         const joinUpdates = selectedGroups
181 |           ?.map((group) => memberGroups.find((g) => g.name === group.value)?.id)
182 |           .concat(groupIds)
183 |           .filter((id) => id !== undefined)
184 |           .map((memberGroupId) => ({
185 |             member_id: member.id,
186 |             group_id: memberGroupId,
187 |           }));
188 | 
189 |         const { error: joinError } = await supabase
190 |           .from("member_group_joins")
191 |           .insert(joinUpdates);
192 |         if (joinError) {
193 |           console.error("Error updating member_group_joins:", joinError);
194 |         }
195 |       }
196 |       let { error } = await supabase
197 |         .from("members")
198 |         .update(updates)
199 |         .eq("id", member.id);
200 |       if (error) {
201 |         toast({
202 |           description: "An error occurred while updating the member",
203 |         });
204 |       } else {
205 |         toast({
206 |           description: "Your member has been updated",
207 |         });
208 |         router.refresh();
209 |       }
210 |     } catch (error) {
211 |       toast({
212 |         description: "An error occurred while updating the member",
213 |       });
214 |     }
215 |   }
216 | 
217 |   return (
218 |     <div>
219 |       <Dialog open={open} onOpenChange={setOpen}>
220 |         <DialogTrigger asChild>
221 |           <Edit className="h-4 w-4 ml-4 text-muted-foreground" />
222 |         </DialogTrigger>
223 |         <DialogContent className="sm:max-w-[425px]">
224 |           <DialogHeader>
225 |             <DialogTitle>Edit Member</DialogTitle>
226 |             <DialogDescription>
227 |               Please enter the first name, last name, and email
228 |             </DialogDescription>
229 |           </DialogHeader>
230 |           <div className="grid gap-4 py-4">
231 |             <Form {...form}>
232 |               <form
233 |                 onSubmit={form.handleSubmit(onSubmit)}
234 |                 className="space-y-8"
235 |               >
236 |                 {" "}
237 |                 <FormField
238 |                   control={form.control}
239 |                   name="email"
240 |                   render={({ field }) => (
241 |                     <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
242 |                       <div className="space-y-0.5">
243 |                         <FormLabel className="text-base mx-2">Email</FormLabel>
244 |                       </div>
245 |                       <FormControl>
246 |                         <Input {...field} />
247 |                       </FormControl>
248 |                     </FormItem>
249 |                   )}
250 |                 />
251 |                 <FormField
252 |                   control={form.control}
253 |                   name="first_name"
254 |                   render={({ field }) => (
255 |                     <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
256 |                       <div className="space-y-0.5">
257 |                         <FormLabel className="text-base mx-2">
258 |                           First Name
259 |                         </FormLabel>
260 |                       </div>
261 |                       <FormControl>
262 |                         <Input {...field} />
263 |                       </FormControl>
264 |                     </FormItem>
265 |                   )}
266 |                 />
267 |                 <FormField
268 |                   control={form.control}
269 |                   name="last_name"
270 |                   render={({ field }) => (
271 |                     <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
272 |                       <div className="space-y-0.5">
273 |                         <FormLabel className="text-base mx-2">
274 |                           Last Name
275 |                         </FormLabel>
276 |                       </div>
277 |                       <FormControl>
278 |                         <Input {...field} />
279 |                       </FormControl>
280 |                     </FormItem>
281 |                   )}
282 |                 />
283 |                 <FormField
284 |                   control={form.control}
285 |                   name="group_id"
286 |                   render={({ field }) => (
287 |                     <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
288 |                       <div className="space-y-0.5">
289 |                         <FormLabel className="text-base mx-2">Group</FormLabel>
290 |                       </div>
291 |                       <FormControl>
292 |                         <CreatableSelect
293 |                           {...field}
294 |                           isMulti
295 |                           options={memberGroups.map((group) => ({
296 |                             label: group.name,
297 |                             value: group.name,
298 |                           }))}
299 |                           value={selectedGroups}
300 |                           onChange={(value) => {
301 |                             setSelectedGroups(value);
302 |                           }}
303 |                         />
304 |                       </FormControl>
305 |                     </FormItem>
306 |                   )}
307 |                 />
308 |                 <div className="py-1 flex justify-center">
309 |                   <Button
310 |                     type="submit"
311 |                     onClick={() => {
312 |                       setOpen(false);
313 |                     }}
314 |                     className="bg-[#9FACE6] text-white font-bold py-2 px-4 rounded w-full"
315 |                   >
316 |                     Save
317 |                   </Button>
318 |                 </div>
319 |               </form>
320 |             </Form>
321 |           </div>
322 |         </DialogContent>
323 |       </Dialog>
324 |     </div>
325 |   );
326 | }
327 | 


--------------------------------------------------------------------------------
/components/email-composer.tsx:
--------------------------------------------------------------------------------
  1 | import { useState, useEffect } from "react";
  2 | import { Button } from "@/components/ui/button";
  3 | import Tiptap from "@/components/tiptap";
  4 | import {
  5 |   Dialog,
  6 |   DialogContent,
  7 |   DialogDescription,
  8 |   DialogFooter,
  9 |   DialogHeader,
 10 |   DialogTitle,
 11 |   DialogTrigger,
 12 | } from "@/components/ui/dialog";
 13 | import {
 14 |   Form,
 15 |   FormControl,
 16 |   FormField,
 17 |   FormItem,
 18 |   FormLabel,
 19 | } from "@/components/ui/form";
 20 | import { cookies } from "next/headers";
 21 | import { zodResolver } from "@hookform/resolvers/zod";
 22 | import { Input } from "@/components/ui/input";
 23 | import {
 24 |   SupabaseClient,
 25 |   createClientComponentClient,
 26 |   createServerActionClient,
 27 |   createServerComponentClient,
 28 | } from "@supabase/auth-helpers-nextjs";
 29 | import Select from "react-select";
 30 | import CreatableSelect from "react-select/creatable";
 31 | import { toast } from "@/components/ui/use-toast";
 32 | 
 33 | import { Controller, useForm } from "react-hook-form";
 34 | import * as z from "zod";
 35 | 
 36 | export default function EmailComposer({
 37 |   user,
 38 |   supabase,
 39 |   userEmail,
 40 |   onSend,
 41 | }: {
 42 |   user: any;
 43 |   supabase: SupabaseClient;
 44 |   userEmail: string;
 45 |   onSend: () => void;
 46 | }) {
 47 |   useEffect(() => {
 48 |     // Fetch members from your Supabase database
 49 |     async function fetchMembers() {
 50 |       try {
 51 |         const { data: members, error } = await supabase
 52 |           .from("members")
 53 |           .select("id, first_name, last_name, email")
 54 |           .eq("created_by", user.id);
 55 |         if (error) {
 56 |           console.error("Error fetching members:", error);
 57 |           return;
 58 |         }
 59 | 
 60 |         // Transform the member data into options for Select component
 61 |         const options = members.map((member) => ({
 62 |           value: member.email,
 63 |           label: `${member.first_name} ${member.last_name} - ${member.email}`,
 64 |         }));
 65 | 
 66 |         setSelectedMembers(options);
 67 |       } catch (error) {
 68 |         console.error("Error fetching members:", error);
 69 |       }
 70 |     }
 71 | 
 72 |     fetchMembers();
 73 |   }, []); // Run this effect only once on component mount
 74 | 
 75 |   const [selectedMembers, setSelectedMembers] = useState<OptionType[]>([]);
 76 |   const [allMemberGroups, setAllMemberGroups] = useState<OptionType[]>([]);
 77 | 
 78 |   const [memberEmailsArray, setMemberEmailsArray] = useState([]);
 79 | 
 80 |   useEffect(() => {
 81 |     async function fetchMemberGroups() {
 82 |       const { data: member_groups, error } = await supabase
 83 |         .from("member_groups")
 84 |         .select()
 85 |         .eq("created_by", user.id);
 86 | 
 87 |       // Transform the memebrGroup data for the selected component
 88 |       const options = member_groups.map((member_group) => ({
 89 |         value: member_group.id,
 90 |         label: member_group.name,
 91 |       }));
 92 | 
 93 |       if (error) {
 94 |         console.error("Error fetching member groups:", error);
 95 |       } else {
 96 |         setAllMemberGroups(options);
 97 |       }
 98 |     }
 99 |     if (user) {
100 |       fetchMemberGroups();
101 |     }
102 |   }, [supabase, user]);
103 | 
104 |   async function fetchMemberGroupEmails(group_ids) {
105 |     // Extract group_ids from the fetched member_groups
106 |     const groupIds = allMemberGroups
107 |       .map((allMemberGroup) => allMemberGroup.value)
108 |       .filter((id) => group_ids.includes(id));
109 | 
110 |     // Fetch member_group_joins records with these group_ids
111 |     const { data: memberGroupJoins, error: joinError } = await supabase
112 |       .from("member_group_joins")
113 |       .select("member_id")
114 |       .in("group_id", groupIds);
115 | 
116 |     const memberGroupArray = Object.values(memberGroupJoins);
117 |     const memberIds = memberGroupArray.map((join) => join.member_id);
118 | 
119 |     // Fetch member emails from the members table based on the extracted member_ids
120 |     const { data: memberEmails, error: memberEmailError } = await supabase
121 |       .from("members")
122 |       .select("email")
123 |       .in("id", memberIds);
124 |     const array = memberEmails.map((join) => join.email);
125 |     setMemberEmailsArray(array);
126 |     // const memberEmailsArray = Object.values(memberEmails);
127 |     return array;
128 |   }
129 | 
130 |   interface OptionType {
131 |     value: any;
132 |     label: string;
133 |   }
134 | 
135 |   const { register, handleSubmit, reset } = useForm();
136 |   const [isSending, setIsSending] = useState(false);
137 |   const emailFormSchema = z.object({
138 |     to_emails: z
139 |       .array(
140 |         z.object({
141 |           value: z.union([z.string(), z.number()]),
142 |           label: z.string(),
143 |         })
144 |       )
145 |       .refine(
146 |         (value) => {
147 |           const emails = value.map((item) => item.value.toString().trim());
148 |           const areAllEmailsValid = emails.every((email) => {
149 |             ``;
150 |             const isValid =
151 |               !isNaN(parseInt(email)) ||
152 |               z.string().email().safeParse(email).success;
153 |             return isValid;
154 |           });
155 |           return areAllEmailsValid;
156 |         },
157 |         {
158 |           message: "Please enter valid email addresses.",
159 |         }
160 |       ),
161 |     subject: z.string(),
162 |     body: z.string(),
163 |     cc: z
164 |       .array(
165 |         z.string().email({ message: "Please enter a valid email address." })
166 |       )
167 |       .optional(),
168 |     bcc: z
169 |       .array(
170 |         z.string().email({ message: "Please enter a valid email address." })
171 |       )
172 |       .optional(),
173 |     attachments: z.array(z.string()).optional(),
174 |     group_emails: z
175 |       .array(
176 |         z.object({
177 |           value: z.number(),
178 |           label: z.string(),
179 |         })
180 |       )
181 |       .optional(),
182 |   });
183 | 
184 |   type EmailFormValues = z.infer<typeof emailFormSchema>;
185 | 
186 |   const form = useForm<EmailFormValues>({
187 |     resolver: zodResolver(emailFormSchema),
188 |     defaultValues: {
189 |       to_emails: [],
190 |       subject: "",
191 |       body: "",
192 |       cc: [],
193 |       bcc: [],
194 |       attachments: [],
195 |     },
196 |   });
197 | 
198 |   const onSubmit = async (data: EmailFormValues) => {
199 |     // check that domain is verified
200 |     console.log(userEmail);
201 |     // check that userEmail contains @basecase.vc
202 |     if (!userEmail.includes("@basecase.vc")) {
203 |       toast({
204 |         description: (
205 |           <span>
206 |             To start sending, please head over to{" "}
207 |             <a href="https://www.resend.com">Resend</a> to verify your domain.
208 |           </span>
209 |         ),
210 |       });
211 |       setIsSending(false);
212 |       return;
213 |     }
214 | 
215 |     try {
216 |       setIsSending(true);
217 | 
218 |       const toEmails = data.to_emails.map((email) => email.value);
219 |       let mergedEmails = toEmails;
220 |       const memberEmails = await fetchMemberGroupEmails(
221 |         toEmails.filter((em) => !isNaN(em))
222 |       );
223 |       // if (memberEmails.length > 0) {
224 |       mergedEmails = [...new Set([...toEmails, ...memberEmails])].filter((v) =>
225 |         isNaN(v)
226 |       );
227 |       // }
228 |       const newEmailData = {
229 |         to_emails: mergedEmails,
230 |         subject: data.subject ? data.subject : "empty subject",
231 |         body: data.body ? data.body : "<p></p>",
232 |         cc_emails: [],
233 |         bcc_emails: [],
234 |         attachments: [],
235 |         from_email: userEmail,
236 |       };
237 | 
238 |       const response = await fetch("/send-email", {
239 |         method: "POST",
240 |         headers: {
241 |           "Content-Type": "application/json",
242 |         },
243 |         body: JSON.stringify(newEmailData),
244 |       });
245 | 
246 |       const { data: newEmail, error: insertError } = await supabase
247 |         .from("emails")
248 |         .insert([newEmailData]);
249 | 
250 |       if (response.ok) {
251 |         onSend();
252 |         form.reset();
253 |         toast({
254 |           description: "Your email has been sent successfully",
255 |         });
256 |       } else {
257 |         console.error("Failed to send email", response.statusText);
258 |         toast({
259 |           description: response.statusText,
260 |         });
261 |       }
262 |     } catch (error) {
263 |       toast({
264 |         description: "An error occurred while sending the email",
265 |       });
266 |     } finally {
267 |       setIsSending(false);
268 |     }
269 |   };
270 | 
271 |   return (
272 |     <DialogContent className="sm:max-w-xl">
273 |       <DialogHeader>
274 |         <DialogTitle>Compose Email</DialogTitle>
275 |         <div className="grid gap-4 py-4">
276 |           <Form {...form}>
277 |             <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
278 |               <FormField
279 |                 control={form.control}
280 |                 name="to_emails"
281 |                 render={({ field }) => (
282 |                   <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
283 |                     <div className="space-y-0.5">
284 |                       <FormLabel className="text-base mx-2">To</FormLabel>
285 |                     </div>
286 |                     <FormControl className="w-full">
287 |                       <Select
288 |                         {...field}
289 |                         isMulti
290 |                         options={[...selectedMembers, ...allMemberGroups]}
291 |                       />
292 |                     </FormControl>
293 |                   </FormItem>
294 |                 )}
295 |               />
296 |               {/* TODO: putting in separate field for now, will combine later */}
297 |               <FormField
298 |                 control={form.control}
299 |                 name="subject"
300 |                 render={({ field }) => (
301 |                   <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
302 |                     <div className="space-y-0.5">
303 |                       <FormLabel className="text-base mx-2">Subject</FormLabel>
304 |                     </div>
305 |                     <FormControl>
306 |                       <Input {...field} />
307 |                     </FormControl>
308 |                   </FormItem>
309 |                 )}
310 |               />
311 |               <Controller
312 |                 name="body"
313 |                 control={form.control}
314 |                 render={({ field }) => (
315 |                   <>
316 |                     <Tiptap field={field} setValue={form.setValue} />
317 |                   </>
318 |                 )}
319 |               />
320 |               <div className="py-1 flex justify-center">
321 |                 <Button
322 |                   type="submit"
323 |                   className="bg-[#9FACE6] text-white font-bold py-2 px-4 rounded w-full"
324 |                 >
325 |                   Send
326 |                 </Button>
327 |               </div>
328 |             </form>
329 |           </Form>
330 |         </div>
331 |       </DialogHeader>
332 |     </DialogContent>
333 |   );
334 | }
335 | 


--------------------------------------------------------------------------------
/components/icons.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   LucideProps,
 3 |   Moon,
 4 |   SunMedium,
 5 |   Twitter,
 6 |   type Icon as LucideIcon,
 7 | } from "lucide-react";
 8 | 
 9 | export type Icon = LucideIcon;
10 | 
11 | export const Icons = {
12 |   sun: SunMedium,
13 |   moon: Moon,
14 |   twitter: Twitter,
15 |   logo: (props: LucideProps) => (
16 |     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
17 |       <path
18 |         fill="currentColor"
19 |         d="M11.572 0c-.176 0-.31.001-.358.007a19.76 19.76 0 0 1-.364.033C7.443.346 4.25 2.185 2.228 5.012a11.875 11.875 0 0 0-2.119 5.243c-.096.659-.108.854-.108 1.747s.012 1.089.108 1.748c.652 4.506 3.86 8.292 8.209 9.695.779.25 1.6.422 2.534.525.363.04 1.935.04 2.299 0 1.611-.178 2.977-.577 4.323-1.264.207-.106.247-.134.219-.158-.02-.013-.9-1.193-1.955-2.62l-1.919-2.592-2.404-3.558a338.739 338.739 0 0 0-2.422-3.556c-.009-.002-.018 1.579-.023 3.51-.007 3.38-.01 3.515-.052 3.595a.426.426 0 0 1-.206.214c-.075.037-.14.044-.495.044H7.81l-.108-.068a.438.438 0 0 1-.157-.171l-.05-.106.006-4.703.007-4.705.072-.092a.645.645 0 0 1 .174-.143c.096-.047.134-.051.54-.051.478 0 .558.018.682.154.035.038 1.337 1.999 2.895 4.361a10760.433 10760.433 0 0 0 4.735 7.17l1.9 2.879.096-.063a12.317 12.317 0 0 0 2.466-2.163 11.944 11.944 0 0 0 2.824-6.134c.096-.66.108-.854.108-1.748 0-.893-.012-1.088-.108-1.747-.652-4.506-3.859-8.292-8.208-9.695a12.597 12.597 0 0 0-2.499-.523A33.119 33.119 0 0 0 11.573 0zm4.069 7.217c.347 0 .408.005.486.047a.473.473 0 0 1 .237.277c.018.06.023 1.365.018 4.304l-.006 4.218-.744-1.14-.746-1.14v-3.066c0-1.982.01-3.097.023-3.15a.478.478 0 0 1 .233-.296c.096-.05.13-.054.5-.054z"
20 |       />
21 |     </svg>
22 |   ),
23 |   gitHub: (props: LucideProps) => (
24 |     <svg viewBox="0 0 438.549 438.549" {...props}>
25 |       <path
26 |         fill="currentColor"
27 |         d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
28 |       ></path>
29 |     </svg>
30 |   ),
31 | };
32 | 


--------------------------------------------------------------------------------
/components/main-nav.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import Link from "next/link";
 3 | import { User, Mail } from "lucide-react";
 4 | import { NavItem } from "@/types/nav";
 5 | import { cn } from "@/lib/utils";
 6 | 
 7 | interface MainNavProps {
 8 |   items?: NavItem[];
 9 | }
10 | 
11 | export function MainNav({ items }: MainNavProps) {
12 |   return (
13 |     <div className="flex gap-6 md:gap-10">
14 |       {items?.length ? (
15 |         <nav className="hidden gap-6 md:flex">
16 |           {items.map(
17 |             (item, index) =>
18 |               item.href && (
19 |                 <Link
20 |                   key={index}
21 |                   href={item.href}
22 |                   className={cn(
23 |                     "flex items-center text-lg font-semibold text-muted-foreground sm:text-sm",
24 |                     item.disabled && "cursor-not-allowed opacity-80"
25 |                   )}
26 |                 >
27 |                   {item.title}
28 |                 </Link>
29 |               )
30 |           )}
31 |         </nav>
32 |       ) : null}
33 |     </div>
34 |   );
35 | }
36 | 


--------------------------------------------------------------------------------
/components/members-table.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | import {
  3 |   Table,
  4 |   TableBody,
  5 |   TableCaption,
  6 |   TableCell,
  7 |   TableHead,
  8 |   TableHeader,
  9 |   TableRow,
 10 | } from "@/components/ui/table";
 11 | import { Database } from "@/types/supabase";
 12 | import { Trash } from "lucide-react";
 13 | import {
 14 |   Tooltip,
 15 |   TooltipContent,
 16 |   TooltipProvider,
 17 |   TooltipTrigger,
 18 | } from "./ui/tooltip";
 19 | import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";
 20 | import { toast } from "./ui/use-toast";
 21 | import { useRouter } from "next/navigation";
 22 | import EditMemberForm from "./edit-member";
 23 | import { useEffect, useState } from "react";
 24 | 
 25 | type Member = Database["public"]["Tables"]["members"]["Row"];
 26 | type GroupMappings = Record<string, string[]>;
 27 | type GroupName = {
 28 |   id: number;
 29 |   name: string;
 30 | };
 31 | 
 32 | export function MembersTable({
 33 |   members,
 34 |   groupMappings,
 35 |   groupNamesData,
 36 |   user,
 37 | }: {
 38 |   members: Member[];
 39 |   groupMappings: GroupMappings;
 40 |   groupNamesData: GroupName;
 41 |   user: any;
 42 | }) {
 43 |   const supabase = createClientComponentClient();
 44 |   const [groupMemberships, setGroupMemberships] = useState<
 45 |     Record<string, string>
 46 |   >({});
 47 | 
 48 |   const router = useRouter();
 49 | 
 50 |   async function onDelete(id: string) {
 51 |     try {
 52 |       let { error } = await supabase.from("members").delete().eq("id", id);
 53 |       if (error) throw error;
 54 |       toast({
 55 |         description: "Your member has been deleted",
 56 |       });
 57 |       router.refresh();
 58 |     } catch (error) {}
 59 |   }
 60 | 
 61 |   useEffect(() => {
 62 |     const groupMemberships: Record<string, string> = {};
 63 |     members.forEach((member) => {
 64 |       if (groupMappings[member.id]) {
 65 |         const formattedMembership = groupMappings[member.id]
 66 |           .map((groupId) => {
 67 |             const matchingGroup = groupNamesData.find(
 68 |               (group) => group.id === groupId
 69 |             ) as GroupName;
 70 |             return matchingGroup ? matchingGroup.name : null;
 71 |           })
 72 |           .filter(Boolean)
 73 |           .join(", ");
 74 |         groupMemberships[member.id] = formattedMembership || "None";
 75 |       } else {
 76 |         groupMemberships[member.id] = "None";
 77 |       }
 78 |     });
 79 | 
 80 |     setGroupMemberships(groupMemberships);
 81 |   }, [members, groupMappings, groupNamesData]);
 82 | 
 83 |   return (
 84 |     <Table>
 85 |       <TableHeader>
 86 |         <TableRow>
 87 |           <TableHead className="w-[100px]">Name</TableHead>
 88 |           <TableHead>Email</TableHead>
 89 |           <TableHead>Created Time</TableHead>
 90 |           <TableHead>Group</TableHead>
 91 |         </TableRow>
 92 |       </TableHeader>
 93 |       <TableBody>
 94 |         {members.map((member: any) => (
 95 |           <TableRow key={member.id}>
 96 |             <TableCell>
 97 |               {member.first_name} {member.last_name}
 98 |             </TableCell>
 99 |             <TableCell>{member.email}</TableCell>
100 |             <TableCell>
101 |               {new Date(member.created_at).toLocaleString("en-US")}
102 |             </TableCell>
103 |             <TableCell>{groupMemberships[member.id]}</TableCell>
104 |             <TableCell>
105 |               <TooltipProvider>
106 |                 <Tooltip>
107 |                   <TooltipTrigger>
108 |                     <EditMemberForm
109 |                       user={user}
110 |                       existingGroups={groupMemberships[member.id]}
111 |                       member={member}
112 |                     />
113 |                   </TooltipTrigger>
114 |                   <TooltipContent>Edit Member</TooltipContent>
115 |                 </Tooltip>
116 |               </TooltipProvider>
117 |             </TableCell>
118 |             <TableCell>
119 |               <TooltipProvider>
120 |                 <Tooltip>
121 |                   <TooltipTrigger>
122 |                     <Trash
123 |                       className="h-4 w-4 ml-4 text-muted-foreground"
124 |                       onClick={() => onDelete(member.id)}
125 |                       style={{ cursor: "pointer" }}
126 |                     />
127 |                   </TooltipTrigger>
128 |                   <TooltipContent>Delete Member</TooltipContent>
129 |                 </Tooltip>
130 |               </TooltipProvider>
131 |             </TableCell>
132 |           </TableRow>
133 |         ))}
134 |       </TableBody>
135 |     </Table>
136 |   );
137 | }
138 | 


--------------------------------------------------------------------------------
/components/new-message.tsx:
--------------------------------------------------------------------------------
 1 | "use client"; // This is a client component 👈🏽
 2 | 
 3 | import { Button } from "@/components/ui/button";
 4 | import Tiptap from "@/components/tiptap";
 5 | import {
 6 |   Dialog,
 7 |   DialogContent,
 8 |   DialogDescription,
 9 |   DialogFooter,
10 |   DialogHeader,
11 |   DialogTitle,
12 |   DialogTrigger,
13 | } from "@/components/ui/dialog";
14 | import {
15 |   Form,
16 |   FormControl,
17 |   FormField,
18 |   FormItem,
19 |   FormLabel,
20 | } from "@/components/ui/form";
21 | import { cookies } from "next/headers";
22 | import { zodResolver } from "@hookform/resolvers/zod";
23 | import { Input } from "@/components/ui/input";
24 | import {
25 |   createClientComponentClient,
26 |   createServerActionClient,
27 |   createServerComponentClient,
28 | } from "@supabase/auth-helpers-nextjs";
29 | import React, { useEffect, useState } from "react";
30 | 
31 | import { Controller, useForm } from "react-hook-form";
32 | 
33 | import * as z from "zod";
34 | import EmailComposer from "@/components/email-composer";
35 | import { Mail } from "lucide-react";
36 | 
37 | export default function NewMessage({ user }: { user: any }) {
38 |   const supabase = createClientComponentClient();
39 |   const [isTiptapOpen, setIsTiptapOpen] = React.useState(false);
40 | 
41 |   const handleNewMessageClick = () => {
42 |     setIsTiptapOpen(true);
43 |   };
44 | 
45 |   const handleSend = () => {
46 |     setIsTiptapOpen(false);
47 |   };
48 | 
49 |   return (
50 |     <div>
51 |       <Dialog open={isTiptapOpen} onOpenChange={setIsTiptapOpen}>
52 |         <DialogTrigger asChild>
53 |           <Button onClick={handleNewMessageClick}>
54 |             {" "}
55 |             <Mail className="w-6 h-6 p-1" />
56 |             New Message
57 |           </Button>
58 |         </DialogTrigger>
59 | 
60 |         <EmailComposer
61 |           user={user}
62 |           userEmail={user.email}
63 |           supabase={supabase}
64 |           onSend={handleSend}
65 |         />
66 |       </Dialog>
67 |     </div>
68 |   );
69 | }
70 | 


--------------------------------------------------------------------------------
/components/secondary-nav.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import Link from "next/link";
 3 | import { User, Mail } from "lucide-react";
 4 | import { NavItem } from "@/types/nav";
 5 | import { cn } from "@/lib/utils";
 6 | import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
 7 | import { cookies } from "next/headers";
 8 | import { redirect } from "next/navigation";
 9 | 
10 | interface SecondaryNavProps {
11 |   items?: NavItem[];
12 | }
13 | 
14 | export function SecondaryNav({ items }: SecondaryNavProps) {
15 |   return (
16 |     <div className="flex gap-6 md:gap-10">
17 |       {items?.length ? (
18 |         <nav className="hidden gap-6 md:flex">
19 |           {items.map(
20 |             (item, index) =>
21 |               item.href && (
22 |                 <Link
23 |                   key={index}
24 |                   href={item.href}
25 |                   className={cn(
26 |                     "flex items-center text-lg font-semibold text-muted-foreground sm:text-sm",
27 |                     item.disabled && "cursor-not-allowed opacity-80"
28 |                   )}
29 |                 >
30 |                   {item.title === "Members" && <User className="w-6 h-6 p-1" />}
31 |                   {item.title === "Mailbox" && <Mail className="w-6 h-6 p-1" />}
32 |                   {item.title}
33 |                 </Link>
34 |               )
35 |           )}
36 |         </nav>
37 |       ) : null}
38 |     </div>
39 |   );
40 | }
41 | 


--------------------------------------------------------------------------------
/components/site-header.tsx:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | 
 3 | import { siteConfig } from "@/config/site";
 4 | import { buttonVariants } from "@/components/ui/button";
 5 | import { Icons } from "@/components/icons";
 6 | import { MainNav } from "@/components/main-nav";
 7 | import { ThemeToggle } from "@/components/theme-toggle";
 8 | import UserNav from "./user-nav";
 9 | import { SecondaryNav } from "./secondary-nav";
10 | import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
11 | import { cookies } from "next/headers";
12 | import { redirect } from "next/navigation";
13 | 
14 | export async function SiteHeader() {
15 |   const supabase = createServerComponentClient({ cookies });
16 | 
17 |   const {
18 |     data: { user },
19 |   } = await supabase.auth.getUser();
20 | 
21 |   return (
22 |     <div>
23 |       <header className="sticky top-0 z-40 w-full border-b bg-background">
24 |         <div className="container flex h-16 items-center space-x-4 sm:justify-between sm:space-x-0">
25 |           {user && <MainNav items={siteConfig.mainNav} />}
26 |           <div className="flex flex-1 items-center justify-end space-x-4">
27 |             <nav className="flex items-center space-x-1">
28 |               <Link
29 |                 href={siteConfig.links.github}
30 |                 target="_blank"
31 |                 rel="noreferrer"
32 |               >
33 |                 <div
34 |                   className={buttonVariants({
35 |                     size: "sm",
36 |                     variant: "ghost",
37 |                   })}
38 |                 >
39 |                   <Icons.gitHub className="h-5 w-5" />
40 |                   <span className="sr-only">GitHub</span>
41 |                 </div>
42 |               </Link>
43 |               <ThemeToggle />
44 |               {user && <UserNav user={user} />}
45 |             </nav>
46 |           </div>
47 |         </div>
48 |       </header>
49 |     </div>
50 |   );
51 | }
52 | 


--------------------------------------------------------------------------------
/components/styles.css:
--------------------------------------------------------------------------------
 1 | /* Basic editor styles */
 2 | .tiptap {
 3 |     margin-top: 1rem;
 4 |   }
 5 |   
 6 |   .tiptap > * + * {
 7 |     margin-top: 0.75em;
 8 |   }
 9 |   
10 |   .tiptap ul,
11 |   .tiptap ol {
12 |     padding: 0 1rem;
13 |   }
14 |   
15 |   .tiptap h1,
16 |   .tiptap h2,
17 |   .tiptap h3,
18 |   .tiptap h4,
19 |   .tiptap h5,
20 |   .tiptap h6 {
21 |     line-height: 1.1;
22 |   }
23 |   
24 |   .tiptap code {
25 |     background-color: rgba(97, 97, 97, 0.1);
26 |     color: #616161;
27 |   }
28 |   
29 |   .tiptap pre {
30 |     background: #0D0D0D;
31 |     color: #FFF;
32 |     font-family: 'JetBrainsMono', monospace;
33 |     padding: 0.75rem 1rem;
34 |     border-radius: 0.5rem;
35 |   }
36 |   
37 |   .tiptap pre code {
38 |     color: inherit;
39 |     padding: 0;
40 |     background: none;
41 |     font-size: 0.8rem;
42 |   }
43 |   
44 |   .tiptap mark {
45 |     background-color: #FAF594;
46 |   }
47 |   
48 |   .tiptap img {
49 |     max-width: 100%;
50 |     height: auto;
51 |   }
52 |   
53 |   .tiptap blockquote {
54 |     padding-left: 1rem;
55 |     border-left: 2px solid rgba(13, 13, 13, 0.1);
56 |   }
57 |   
58 |   .tiptap hr {
59 |     border: none;
60 |     border-top: 2px solid rgba(13, 13, 13, 0.1);
61 |     margin: 2rem 0;
62 |   }
63 |   


--------------------------------------------------------------------------------
/components/tailwind-indicator.tsx:
--------------------------------------------------------------------------------
 1 | export function TailwindIndicator() {
 2 |   if (process.env.NODE_ENV === "production") return null;
 3 | 
 4 |   return (
 5 |     <div className="fixed bottom-1 left-1 z-50 flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white">
 6 |       <div className="block sm:hidden">xs</div>
 7 |       <div className="hidden sm:block md:hidden lg:hidden xl:hidden 2xl:hidden">
 8 |         sm
 9 |       </div>
10 |       <div className="hidden md:block lg:hidden xl:hidden 2xl:hidden">md</div>
11 |       <div className="hidden lg:block xl:hidden 2xl:hidden">lg</div>
12 |       <div className="hidden xl:block 2xl:hidden">xl</div>
13 |       <div className="hidden 2xl:block">2xl</div>
14 |     </div>
15 |   );
16 | }
17 | 


--------------------------------------------------------------------------------
/components/theme-provider.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | import { ThemeProvider as NextThemesProvider } from "next-themes";
 5 | import { ThemeProviderProps } from "next-themes/dist/types";
 6 | 
 7 | export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
 8 |   return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
 9 | }
10 | 


--------------------------------------------------------------------------------
/components/theme-toggle.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | import { useTheme } from "next-themes";
 5 | 
 6 | import { Button } from "@/components/ui/button";
 7 | import { Icons } from "@/components/icons";
 8 | 
 9 | export function ThemeToggle() {
10 |   const { setTheme, theme } = useTheme();
11 | 
12 |   return (
13 |     <Button
14 |       variant="ghost"
15 |       size="sm"
16 |       onClick={() => setTheme(theme === "light" ? "dark" : "light")}
17 |     >
18 |       <Icons.sun className="rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
19 |       <Icons.moon className="absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
20 |       <span className="sr-only">Toggle theme</span>
21 |     </Button>
22 |   );
23 | }
24 | 


--------------------------------------------------------------------------------
/components/tiptap.js:
--------------------------------------------------------------------------------
  1 | import "./styles.css";
  2 | 
  3 | import Highlight from "@tiptap/extension-highlight";
  4 | import TextAlign from "@tiptap/extension-text-align";
  5 | import { EditorContent, useEditor } from "@tiptap/react";
  6 | import StarterKit from "@tiptap/starter-kit";
  7 | import React from "react";
  8 | import Image from "@tiptap/extension-image";
  9 | 
 10 | import { Controller, useForm } from "react-hook-form";
 11 | 
 12 | const MenuBar = ({ editor }) => {
 13 |   if (!editor) {
 14 |     return null;
 15 |   }
 16 | 
 17 |   const buttonBaseStyles = "px-2 py-1 rounded border border-gray-300";
 18 |   const activeButtonStyles = "bg-primary text-white";
 19 |   const inactiveButtonStyles = "bg-secondary text-gray-700";
 20 |   const addImage = () => {
 21 |     const url = window.prompt("URL");
 22 | 
 23 |     if (url) {
 24 |       editor.chain().focus().setImage({ src: url }).run();
 25 |     }
 26 |   };
 27 | 
 28 |   return (
 29 |     <>
 30 |       <button
 31 |         onClick={(e) => {
 32 |           editor.chain().focus().toggleHeading({ level: 1 }).run();
 33 |           e.preventDefault();
 34 |         }}
 35 |         className={`${buttonBaseStyles} ${
 36 |           editor.isActive("heading", { level: 1 })
 37 |             ? activeButtonStyles
 38 |             : inactiveButtonStyles
 39 |         }`}
 40 |       >
 41 |         h1
 42 |       </button>
 43 | 
 44 |       <button
 45 |         onClick={(e) => {
 46 |           editor.chain().focus().toggleHeading({ level: 2 }).run();
 47 |           e.preventDefault();
 48 |         }}
 49 |         className={`${buttonBaseStyles} ${
 50 |           editor.isActive("heading", { level: 2 })
 51 |             ? activeButtonStyles
 52 |             : inactiveButtonStyles
 53 |         }`}
 54 |       >
 55 |         h2
 56 |       </button>
 57 |       <button
 58 |         onClick={(e) => {
 59 |           editor.chain().focus().toggleHeading({ level: 3 }).run();
 60 |           e.preventDefault();
 61 |         }}
 62 |         className={`${buttonBaseStyles} ${
 63 |           editor.isActive("heading", { level: 3 })
 64 |             ? activeButtonStyles
 65 |             : inactiveButtonStyles
 66 |         }`}
 67 |       >
 68 |         h3
 69 |       </button>
 70 |       <button
 71 |         onClick={(e) => {
 72 |           editor.chain().focus().setParagraph().run();
 73 |           e.preventDefault();
 74 |         }}
 75 |         className={`${buttonBaseStyles} ${
 76 |           editor.isActive("paragraph")
 77 |             ? activeButtonStyles
 78 |             : inactiveButtonStyles
 79 |         }`}
 80 |       >
 81 |         paragraph
 82 |       </button>
 83 |       <button
 84 |         onClick={(e) => {
 85 |           editor.chain().focus().toggleBold().run();
 86 |           e.preventDefault();
 87 |         }}
 88 |         className={`${buttonBaseStyles} ${
 89 |           editor.isActive("bold") ? activeButtonStyles : inactiveButtonStyles
 90 |         }`}
 91 |       >
 92 |         bold
 93 |       </button>
 94 |       <button
 95 |         onClick={(e) => {
 96 |           editor.chain().focus().toggleItalic().run();
 97 |           e.preventDefault();
 98 |         }}
 99 |         className={`${buttonBaseStyles} ${
100 |           editor.isActive("italic") ? activeButtonStyles : inactiveButtonStyles
101 |         }`}
102 |       >
103 |         italic
104 |       </button>
105 |       <button
106 |         onClick={(e) => {
107 |           editor.chain().focus().toggleStrike().run();
108 |           e.preventDefault();
109 |         }}
110 |         className={`${buttonBaseStyles} ${
111 |           editor.isActive("strike") ? activeButtonStyles : inactiveButtonStyles
112 |         }`}
113 |       >
114 |         strike
115 |       </button>
116 |       <button
117 |         onClick={(e) => {
118 |           editor.chain().focus().toggleHighlight().run();
119 |           e.preventDefault();
120 |         }}
121 |         className={`${buttonBaseStyles} ${
122 |           editor.isActive("highlight")
123 |             ? activeButtonStyles
124 |             : inactiveButtonStyles
125 |         }`}
126 |       >
127 |         highlight
128 |       </button>
129 |       <button
130 |         onClick={(e) => {
131 |           editor.chain().focus().setTextAlign("left").run();
132 |           e.preventDefault();
133 |         }}
134 |         className={`${buttonBaseStyles} ${
135 |           editor.isActive({ textAlign: "left" })
136 |             ? activeButtonStyles
137 |             : inactiveButtonStyles
138 |         }`}
139 |       >
140 |         left
141 |       </button>
142 |       <button
143 |         onClick={(e) => {
144 |           editor.chain().focus().setTextAlign("center").run();
145 |           e.preventDefault();
146 |         }}
147 |         className={`${buttonBaseStyles} ${
148 |           editor.isActive({ textAlign: "center" })
149 |             ? activeButtonStyles
150 |             : inactiveButtonStyles
151 |         }`}
152 |       >
153 |         center
154 |       </button>
155 |       <button
156 |         onClick={(e) => {
157 |           editor.chain().focus().setTextAlign("right").run();
158 |           e.preventDefault();
159 |         }}
160 |         className={`${buttonBaseStyles} ${
161 |           editor.isActive({ textAlign: "right" })
162 |             ? activeButtonStyles
163 |             : inactiveButtonStyles
164 |         }`}
165 |       >
166 |         right
167 |       </button>
168 |       <button
169 |         onClick={(e) => {
170 |           editor.chain().focus().setTextAlign("justify").run();
171 |           e.preventDefault();
172 |         }}
173 |         className={`${buttonBaseStyles} ${
174 |           editor.isActive({ textAlign: "justify" })
175 |             ? activeButtonStyles
176 |             : inactiveButtonStyles
177 |         }`}
178 |       >
179 |         justify
180 |       </button>
181 |       <button
182 |         className={`${(buttonBaseStyles, inactiveButtonStyles)} `}
183 |         onClick={addImage}
184 |       >
185 |         add image from URL
186 |       </button>
187 |     </>
188 |   );
189 | };
190 | 
191 | export default ({ setValue, field }) => {
192 |   const editor = useEditor({
193 |     onUpdate: ({ editor }) => {
194 |       // Update the form field value when the editor's content changes
195 |       field.onChange(editor.getHTML());
196 |     },
197 |     onMounted: () => {
198 |       // Set the initial value when the editor is mounted
199 |       setValue(fieldName, editor.getHTML());
200 |     },
201 |     extensions: [
202 |       StarterKit,
203 |       Image,
204 |       TextAlign.configure({
205 |         types: ["heading", "paragraph"],
206 |       }),
207 |       Highlight,
208 |     ],
209 |     content: ``,
210 |   });
211 | 
212 |   return (
213 |     <div>
214 |       <MenuBar editor={editor} />
215 |       <EditorContent editor={editor} />
216 |     </div>
217 |   );
218 | };
219 | 


--------------------------------------------------------------------------------
/components/ui/avatar.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as AvatarPrimitive from "@radix-ui/react-avatar"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Avatar = React.forwardRef<
 9 |   React.ElementRef<typeof AvatarPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
11 | >(({ className, ...props }, ref) => (
12 |   <AvatarPrimitive.Root
13 |     ref={ref}
14 |     className={cn(
15 |       "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
16 |       className
17 |     )}
18 |     {...props}
19 |   />
20 | ))
21 | Avatar.displayName = AvatarPrimitive.Root.displayName
22 | 
23 | const AvatarImage = React.forwardRef<
24 |   React.ElementRef<typeof AvatarPrimitive.Image>,
25 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
26 | >(({ className, ...props }, ref) => (
27 |   <AvatarPrimitive.Image
28 |     ref={ref}
29 |     className={cn("aspect-square h-full w-full", className)}
30 |     {...props}
31 |   />
32 | ))
33 | AvatarImage.displayName = AvatarPrimitive.Image.displayName
34 | 
35 | const AvatarFallback = React.forwardRef<
36 |   React.ElementRef<typeof AvatarPrimitive.Fallback>,
37 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
38 | >(({ className, ...props }, ref) => (
39 |   <AvatarPrimitive.Fallback
40 |     ref={ref}
41 |     className={cn(
42 |       "flex h-full w-full items-center justify-center rounded-full bg-muted",
43 |       className
44 |     )}
45 |     {...props}
46 |   />
47 | ))
48 | AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
49 | 
50 | export { Avatar, AvatarImage, AvatarFallback }
51 | 


--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: "bg-primary text-primary-foreground hover:bg-primary/90",
13 |         destructive:
14 |           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
15 |         outline:
16 |           "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
17 |         secondary:
18 |           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
19 |         ghost: "hover:bg-accent hover:text-accent-foreground",
20 |         link: "text-primary underline-offset-4 hover:underline",
21 |       },
22 |       size: {
23 |         default: "h-10 px-4 py-2",
24 |         sm: "h-9 rounded-md px-3",
25 |         lg: "h-11 rounded-md px-8",
26 |         icon: "h-10 w-10",
27 |       },
28 |     },
29 |     defaultVariants: {
30 |       variant: "default",
31 |       size: "default",
32 |     },
33 |   }
34 | )
35 | 
36 | export interface ButtonProps
37 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
38 |     VariantProps<typeof buttonVariants> {
39 |   asChild?: boolean
40 | }
41 | 
42 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
43 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
44 |     const Comp = asChild ? Slot : "button"
45 |     return (
46 |       <Comp
47 |         className={cn(buttonVariants({ variant, size, className }))}
48 |         ref={ref}
49 |         {...props}
50 |       />
51 |     )
52 |   }
53 | )
54 | Button.displayName = "Button"
55 | 
56 | export { Button, buttonVariants }
57 | 


--------------------------------------------------------------------------------
/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as DialogPrimitive from "@radix-ui/react-dialog"
  5 | import { X } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | const Dialog = DialogPrimitive.Root
 10 | 
 11 | const DialogTrigger = DialogPrimitive.Trigger
 12 | 
 13 | const DialogPortal = ({
 14 |   className,
 15 |   ...props
 16 | }: DialogPrimitive.DialogPortalProps) => (
 17 |   <DialogPrimitive.Portal className={cn(className)} {...props} />
 18 | )
 19 | DialogPortal.displayName = DialogPrimitive.Portal.displayName
 20 | 
 21 | const DialogOverlay = React.forwardRef<
 22 |   React.ElementRef<typeof DialogPrimitive.Overlay>,
 23 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 24 | >(({ className, ...props }, ref) => (
 25 |   <DialogPrimitive.Overlay
 26 |     ref={ref}
 27 |     className={cn(
 28 |       "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 29 |       className
 30 |     )}
 31 |     {...props}
 32 |   />
 33 | ))
 34 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 35 | 
 36 | const DialogContent = React.forwardRef<
 37 |   React.ElementRef<typeof DialogPrimitive.Content>,
 38 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
 39 | >(({ className, children, ...props }, ref) => (
 40 |   <DialogPortal>
 41 |     <DialogOverlay />
 42 |     <DialogPrimitive.Content
 43 |       ref={ref}
 44 |       className={cn(
 45 |         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
 46 |         className
 47 |       )}
 48 |       {...props}
 49 |     >
 50 |       {children}
 51 |       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
 52 |         <X className="h-4 w-4" />
 53 |         <span className="sr-only">Close</span>
 54 |       </DialogPrimitive.Close>
 55 |     </DialogPrimitive.Content>
 56 |   </DialogPortal>
 57 | ))
 58 | DialogContent.displayName = DialogPrimitive.Content.displayName
 59 | 
 60 | const DialogHeader = ({
 61 |   className,
 62 |   ...props
 63 | }: React.HTMLAttributes<HTMLDivElement>) => (
 64 |   <div
 65 |     className={cn(
 66 |       "flex flex-col space-y-1.5 text-center sm:text-left",
 67 |       className
 68 |     )}
 69 |     {...props}
 70 |   />
 71 | )
 72 | DialogHeader.displayName = "DialogHeader"
 73 | 
 74 | const DialogFooter = ({
 75 |   className,
 76 |   ...props
 77 | }: React.HTMLAttributes<HTMLDivElement>) => (
 78 |   <div
 79 |     className={cn(
 80 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 81 |       className
 82 |     )}
 83 |     {...props}
 84 |   />
 85 | )
 86 | DialogFooter.displayName = "DialogFooter"
 87 | 
 88 | const DialogTitle = React.forwardRef<
 89 |   React.ElementRef<typeof DialogPrimitive.Title>,
 90 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 91 | >(({ className, ...props }, ref) => (
 92 |   <DialogPrimitive.Title
 93 |     ref={ref}
 94 |     className={cn(
 95 |       "text-lg font-semibold leading-none tracking-tight",
 96 |       className
 97 |     )}
 98 |     {...props}
 99 |   />
100 | ))
101 | DialogTitle.displayName = DialogPrimitive.Title.displayName
102 | 
103 | const DialogDescription = React.forwardRef<
104 |   React.ElementRef<typeof DialogPrimitive.Description>,
105 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
106 | >(({ className, ...props }, ref) => (
107 |   <DialogPrimitive.Description
108 |     ref={ref}
109 |     className={cn("text-sm text-muted-foreground", className)}
110 |     {...props}
111 |   />
112 | ))
113 | DialogDescription.displayName = DialogPrimitive.Description.displayName
114 | 
115 | export {
116 |   Dialog,
117 |   DialogTrigger,
118 |   DialogContent,
119 |   DialogHeader,
120 |   DialogFooter,
121 |   DialogTitle,
122 |   DialogDescription,
123 | }
124 | 


--------------------------------------------------------------------------------
/components/ui/dropdown-menu.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
  5 | import { Check, ChevronRight, Circle } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | const DropdownMenu = DropdownMenuPrimitive.Root
 10 | 
 11 | const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
 12 | 
 13 | const DropdownMenuGroup = DropdownMenuPrimitive.Group
 14 | 
 15 | const DropdownMenuPortal = DropdownMenuPrimitive.Portal
 16 | 
 17 | const DropdownMenuSub = DropdownMenuPrimitive.Sub
 18 | 
 19 | const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
 20 | 
 21 | const DropdownMenuSubTrigger = React.forwardRef<
 22 |   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
 23 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
 24 |     inset?: boolean
 25 |   }
 26 | >(({ className, inset, children, ...props }, ref) => (
 27 |   <DropdownMenuPrimitive.SubTrigger
 28 |     ref={ref}
 29 |     className={cn(
 30 |       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
 31 |       inset && "pl-8",
 32 |       className
 33 |     )}
 34 |     {...props}
 35 |   >
 36 |     {children}
 37 |     <ChevronRight className="ml-auto h-4 w-4" />
 38 |   </DropdownMenuPrimitive.SubTrigger>
 39 | ))
 40 | DropdownMenuSubTrigger.displayName =
 41 |   DropdownMenuPrimitive.SubTrigger.displayName
 42 | 
 43 | const DropdownMenuSubContent = React.forwardRef<
 44 |   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
 45 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
 46 | >(({ className, ...props }, ref) => (
 47 |   <DropdownMenuPrimitive.SubContent
 48 |     ref={ref}
 49 |     className={cn(
 50 |       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 51 |       className
 52 |     )}
 53 |     {...props}
 54 |   />
 55 | ))
 56 | DropdownMenuSubContent.displayName =
 57 |   DropdownMenuPrimitive.SubContent.displayName
 58 | 
 59 | const DropdownMenuContent = React.forwardRef<
 60 |   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
 61 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
 62 | >(({ className, sideOffset = 4, ...props }, ref) => (
 63 |   <DropdownMenuPrimitive.Portal>
 64 |     <DropdownMenuPrimitive.Content
 65 |       ref={ref}
 66 |       sideOffset={sideOffset}
 67 |       className={cn(
 68 |         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 69 |         className
 70 |       )}
 71 |       {...props}
 72 |     />
 73 |   </DropdownMenuPrimitive.Portal>
 74 | ))
 75 | DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
 76 | 
 77 | const DropdownMenuItem = React.forwardRef<
 78 |   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
 79 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
 80 |     inset?: boolean
 81 |   }
 82 | >(({ className, inset, ...props }, ref) => (
 83 |   <DropdownMenuPrimitive.Item
 84 |     ref={ref}
 85 |     className={cn(
 86 |       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 87 |       inset && "pl-8",
 88 |       className
 89 |     )}
 90 |     {...props}
 91 |   />
 92 | ))
 93 | DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
 94 | 
 95 | const DropdownMenuCheckboxItem = React.forwardRef<
 96 |   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
 97 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
 98 | >(({ className, children, checked, ...props }, ref) => (
 99 |   <DropdownMenuPrimitive.CheckboxItem
100 |     ref={ref}
101 |     className={cn(
102 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
103 |       className
104 |     )}
105 |     checked={checked}
106 |     {...props}
107 |   >
108 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
109 |       <DropdownMenuPrimitive.ItemIndicator>
110 |         <Check className="h-4 w-4" />
111 |       </DropdownMenuPrimitive.ItemIndicator>
112 |     </span>
113 |     {children}
114 |   </DropdownMenuPrimitive.CheckboxItem>
115 | ))
116 | DropdownMenuCheckboxItem.displayName =
117 |   DropdownMenuPrimitive.CheckboxItem.displayName
118 | 
119 | const DropdownMenuRadioItem = React.forwardRef<
120 |   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
121 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
122 | >(({ className, children, ...props }, ref) => (
123 |   <DropdownMenuPrimitive.RadioItem
124 |     ref={ref}
125 |     className={cn(
126 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
127 |       className
128 |     )}
129 |     {...props}
130 |   >
131 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
132 |       <DropdownMenuPrimitive.ItemIndicator>
133 |         <Circle className="h-2 w-2 fill-current" />
134 |       </DropdownMenuPrimitive.ItemIndicator>
135 |     </span>
136 |     {children}
137 |   </DropdownMenuPrimitive.RadioItem>
138 | ))
139 | DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
140 | 
141 | const DropdownMenuLabel = React.forwardRef<
142 |   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
143 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
144 |     inset?: boolean
145 |   }
146 | >(({ className, inset, ...props }, ref) => (
147 |   <DropdownMenuPrimitive.Label
148 |     ref={ref}
149 |     className={cn(
150 |       "px-2 py-1.5 text-sm font-semibold",
151 |       inset && "pl-8",
152 |       className
153 |     )}
154 |     {...props}
155 |   />
156 | ))
157 | DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
158 | 
159 | const DropdownMenuSeparator = React.forwardRef<
160 |   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
161 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
162 | >(({ className, ...props }, ref) => (
163 |   <DropdownMenuPrimitive.Separator
164 |     ref={ref}
165 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
166 |     {...props}
167 |   />
168 | ))
169 | DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
170 | 
171 | const DropdownMenuShortcut = ({
172 |   className,
173 |   ...props
174 | }: React.HTMLAttributes<HTMLSpanElement>) => {
175 |   return (
176 |     <span
177 |       className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
178 |       {...props}
179 |     />
180 |   )
181 | }
182 | DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
183 | 
184 | export {
185 |   DropdownMenu,
186 |   DropdownMenuTrigger,
187 |   DropdownMenuContent,
188 |   DropdownMenuItem,
189 |   DropdownMenuCheckboxItem,
190 |   DropdownMenuRadioItem,
191 |   DropdownMenuLabel,
192 |   DropdownMenuSeparator,
193 |   DropdownMenuShortcut,
194 |   DropdownMenuGroup,
195 |   DropdownMenuPortal,
196 |   DropdownMenuSub,
197 |   DropdownMenuSubContent,
198 |   DropdownMenuSubTrigger,
199 |   DropdownMenuRadioGroup,
200 | }
201 | 


--------------------------------------------------------------------------------
/components/ui/form.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as LabelPrimitive from "@radix-ui/react-label"
  3 | import { Slot } from "@radix-ui/react-slot"
  4 | import {
  5 |   Controller,
  6 |   ControllerProps,
  7 |   FieldPath,
  8 |   FieldValues,
  9 |   FormProvider,
 10 |   useFormContext,
 11 | } from "react-hook-form"
 12 | 
 13 | import { cn } from "@/lib/utils"
 14 | import { Label } from "@/components/ui/label"
 15 | 
 16 | const Form = FormProvider
 17 | 
 18 | type FormFieldContextValue<
 19 |   TFieldValues extends FieldValues = FieldValues,
 20 |   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 21 | > = {
 22 |   name: TName
 23 | }
 24 | 
 25 | const FormFieldContext = React.createContext<FormFieldContextValue>(
 26 |   {} as FormFieldContextValue
 27 | )
 28 | 
 29 | const FormField = <
 30 |   TFieldValues extends FieldValues = FieldValues,
 31 |   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 32 | >({
 33 |   ...props
 34 | }: ControllerProps<TFieldValues, TName>) => {
 35 |   return (
 36 |     <FormFieldContext.Provider value={{ name: props.name }}>
 37 |       <Controller {...props} />
 38 |     </FormFieldContext.Provider>
 39 |   )
 40 | }
 41 | 
 42 | const useFormField = () => {
 43 |   const fieldContext = React.useContext(FormFieldContext)
 44 |   const itemContext = React.useContext(FormItemContext)
 45 |   const { getFieldState, formState } = useFormContext()
 46 | 
 47 |   const fieldState = getFieldState(fieldContext.name, formState)
 48 | 
 49 |   if (!fieldContext) {
 50 |     throw new Error("useFormField should be used within <FormField>")
 51 |   }
 52 | 
 53 |   const { id } = itemContext
 54 | 
 55 |   return {
 56 |     id,
 57 |     name: fieldContext.name,
 58 |     formItemId: `${id}-form-item`,
 59 |     formDescriptionId: `${id}-form-item-description`,
 60 |     formMessageId: `${id}-form-item-message`,
 61 |     ...fieldState,
 62 |   }
 63 | }
 64 | 
 65 | type FormItemContextValue = {
 66 |   id: string
 67 | }
 68 | 
 69 | const FormItemContext = React.createContext<FormItemContextValue>(
 70 |   {} as FormItemContextValue
 71 | )
 72 | 
 73 | const FormItem = React.forwardRef<
 74 |   HTMLDivElement,
 75 |   React.HTMLAttributes<HTMLDivElement>
 76 | >(({ className, ...props }, ref) => {
 77 |   const id = React.useId()
 78 | 
 79 |   return (
 80 |     <FormItemContext.Provider value={{ id }}>
 81 |       <div ref={ref} className={cn("space-y-2", className)} {...props} />
 82 |     </FormItemContext.Provider>
 83 |   )
 84 | })
 85 | FormItem.displayName = "FormItem"
 86 | 
 87 | const FormLabel = React.forwardRef<
 88 |   React.ElementRef<typeof LabelPrimitive.Root>,
 89 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
 90 | >(({ className, ...props }, ref) => {
 91 |   const { error, formItemId } = useFormField()
 92 | 
 93 |   return (
 94 |     <Label
 95 |       ref={ref}
 96 |       className={cn(error && "text-destructive", className)}
 97 |       htmlFor={formItemId}
 98 |       {...props}
 99 |     />
100 |   )
101 | })
102 | FormLabel.displayName = "FormLabel"
103 | 
104 | const FormControl = React.forwardRef<
105 |   React.ElementRef<typeof Slot>,
106 |   React.ComponentPropsWithoutRef<typeof Slot>
107 | >(({ ...props }, ref) => {
108 |   const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
109 | 
110 |   return (
111 |     <Slot
112 |       ref={ref}
113 |       id={formItemId}
114 |       aria-describedby={
115 |         !error
116 |           ? `${formDescriptionId}`
117 |           : `${formDescriptionId} ${formMessageId}`
118 |       }
119 |       aria-invalid={!!error}
120 |       {...props}
121 |     />
122 |   )
123 | })
124 | FormControl.displayName = "FormControl"
125 | 
126 | const FormDescription = React.forwardRef<
127 |   HTMLParagraphElement,
128 |   React.HTMLAttributes<HTMLParagraphElement>
129 | >(({ className, ...props }, ref) => {
130 |   const { formDescriptionId } = useFormField()
131 | 
132 |   return (
133 |     <p
134 |       ref={ref}
135 |       id={formDescriptionId}
136 |       className={cn("text-sm text-muted-foreground", className)}
137 |       {...props}
138 |     />
139 |   )
140 | })
141 | FormDescription.displayName = "FormDescription"
142 | 
143 | const FormMessage = React.forwardRef<
144 |   HTMLParagraphElement,
145 |   React.HTMLAttributes<HTMLParagraphElement>
146 | >(({ className, children, ...props }, ref) => {
147 |   const { error, formMessageId } = useFormField()
148 |   const body = error ? String(error?.message) : children
149 | 
150 |   if (!body) {
151 |     return null
152 |   }
153 | 
154 |   return (
155 |     <p
156 |       ref={ref}
157 |       id={formMessageId}
158 |       className={cn("text-sm font-medium text-destructive", className)}
159 |       {...props}
160 |     >
161 |       {body}
162 |     </p>
163 |   )
164 | })
165 | FormMessage.displayName = "FormMessage"
166 | 
167 | export {
168 |   useFormField,
169 |   Form,
170 |   FormItem,
171 |   FormLabel,
172 |   FormControl,
173 |   FormDescription,
174 |   FormMessage,
175 |   FormField,
176 | }
177 | 


--------------------------------------------------------------------------------
/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | 
 3 | import { cn } from "@/lib/utils";
 4 | 
 5 | export interface InputProps
 6 |   extends React.InputHTMLAttributes<HTMLInputElement> {}
 7 | 
 8 | const Input = React.forwardRef<HTMLInputElement, InputProps>(
 9 |   ({ className, type, ...props }, ref) => {
10 |     return (
11 |       <input
12 |         autoComplete="off"
13 |         type={type}
14 |         className={cn(
15 |           "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
16 |           className
17 |         )}
18 |         ref={ref}
19 |         {...props}
20 |       />
21 |     );
22 |   }
23 | );
24 | Input.displayName = "Input";
25 | 
26 | export { Input };
27 | 


--------------------------------------------------------------------------------
/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as LabelPrimitive from "@radix-ui/react-label"
 5 | import { cva, type VariantProps } from "class-variance-authority"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | 
 9 | const labelVariants = cva(
10 |   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
11 | )
12 | 
13 | const Label = React.forwardRef<
14 |   React.ElementRef<typeof LabelPrimitive.Root>,
15 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
16 |     VariantProps<typeof labelVariants>
17 | >(({ className, ...props }, ref) => (
18 |   <LabelPrimitive.Root
19 |     ref={ref}
20 |     className={cn(labelVariants(), className)}
21 |     {...props}
22 |   />
23 | ))
24 | Label.displayName = LabelPrimitive.Root.displayName
25 | 
26 | export { Label }
27 | 


--------------------------------------------------------------------------------
/components/ui/table.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | 
  3 | import { cn } from "@/lib/utils"
  4 | 
  5 | const Table = React.forwardRef<
  6 |   HTMLTableElement,
  7 |   React.HTMLAttributes<HTMLTableElement>
  8 | >(({ className, ...props }, ref) => (
  9 |   <div className="w-full overflow-auto">
 10 |     <table
 11 |       ref={ref}
 12 |       className={cn("w-full caption-bottom text-sm", className)}
 13 |       {...props}
 14 |     />
 15 |   </div>
 16 | ))
 17 | Table.displayName = "Table"
 18 | 
 19 | const TableHeader = React.forwardRef<
 20 |   HTMLTableSectionElement,
 21 |   React.HTMLAttributes<HTMLTableSectionElement>
 22 | >(({ className, ...props }, ref) => (
 23 |   <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
 24 | ))
 25 | TableHeader.displayName = "TableHeader"
 26 | 
 27 | const TableBody = React.forwardRef<
 28 |   HTMLTableSectionElement,
 29 |   React.HTMLAttributes<HTMLTableSectionElement>
 30 | >(({ className, ...props }, ref) => (
 31 |   <tbody
 32 |     ref={ref}
 33 |     className={cn("[&_tr:last-child]:border-0", className)}
 34 |     {...props}
 35 |   />
 36 | ))
 37 | TableBody.displayName = "TableBody"
 38 | 
 39 | const TableFooter = React.forwardRef<
 40 |   HTMLTableSectionElement,
 41 |   React.HTMLAttributes<HTMLTableSectionElement>
 42 | >(({ className, ...props }, ref) => (
 43 |   <tfoot
 44 |     ref={ref}
 45 |     className={cn("bg-primary font-medium text-primary-foreground", className)}
 46 |     {...props}
 47 |   />
 48 | ))
 49 | TableFooter.displayName = "TableFooter"
 50 | 
 51 | const TableRow = React.forwardRef<
 52 |   HTMLTableRowElement,
 53 |   React.HTMLAttributes<HTMLTableRowElement>
 54 | >(({ className, ...props }, ref) => (
 55 |   <tr
 56 |     ref={ref}
 57 |     className={cn(
 58 |       "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
 59 |       className
 60 |     )}
 61 |     {...props}
 62 |   />
 63 | ))
 64 | TableRow.displayName = "TableRow"
 65 | 
 66 | const TableHead = React.forwardRef<
 67 |   HTMLTableCellElement,
 68 |   React.ThHTMLAttributes<HTMLTableCellElement>
 69 | >(({ className, ...props }, ref) => (
 70 |   <th
 71 |     ref={ref}
 72 |     className={cn(
 73 |       "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
 74 |       className
 75 |     )}
 76 |     {...props}
 77 |   />
 78 | ))
 79 | TableHead.displayName = "TableHead"
 80 | 
 81 | const TableCell = React.forwardRef<
 82 |   HTMLTableCellElement,
 83 |   React.TdHTMLAttributes<HTMLTableCellElement>
 84 | >(({ className, ...props }, ref) => (
 85 |   <td
 86 |     ref={ref}
 87 |     className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
 88 |     {...props}
 89 |   />
 90 | ))
 91 | TableCell.displayName = "TableCell"
 92 | 
 93 | const TableCaption = React.forwardRef<
 94 |   HTMLTableCaptionElement,
 95 |   React.HTMLAttributes<HTMLTableCaptionElement>
 96 | >(({ className, ...props }, ref) => (
 97 |   <caption
 98 |     ref={ref}
 99 |     className={cn("mt-4 text-sm text-muted-foreground", className)}
100 |     {...props}
101 |   />
102 | ))
103 | TableCaption.displayName = "TableCaption"
104 | 
105 | export {
106 |   Table,
107 |   TableHeader,
108 |   TableBody,
109 |   TableFooter,
110 |   TableHead,
111 |   TableRow,
112 |   TableCell,
113 |   TableCaption,
114 | }
115 | 


--------------------------------------------------------------------------------
/components/ui/toast.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as ToastPrimitives from "@radix-ui/react-toast"
  3 | import { cva, type VariantProps } from "class-variance-authority"
  4 | import { X } from "lucide-react"
  5 | 
  6 | import { cn } from "@/lib/utils"
  7 | 
  8 | const ToastProvider = ToastPrimitives.Provider
  9 | 
 10 | const ToastViewport = React.forwardRef<
 11 |   React.ElementRef<typeof ToastPrimitives.Viewport>,
 12 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
 13 | >(({ className, ...props }, ref) => (
 14 |   <ToastPrimitives.Viewport
 15 |     ref={ref}
 16 |     className={cn(
 17 |       "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
 18 |       className
 19 |     )}
 20 |     {...props}
 21 |   />
 22 | ))
 23 | ToastViewport.displayName = ToastPrimitives.Viewport.displayName
 24 | 
 25 | const toastVariants = cva(
 26 |   "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
 27 |   {
 28 |     variants: {
 29 |       variant: {
 30 |         default: "border bg-background",
 31 |         destructive:
 32 |           "destructive group border-destructive bg-destructive text-destructive-foreground",
 33 |       },
 34 |     },
 35 |     defaultVariants: {
 36 |       variant: "default",
 37 |     },
 38 |   }
 39 | )
 40 | 
 41 | const Toast = React.forwardRef<
 42 |   React.ElementRef<typeof ToastPrimitives.Root>,
 43 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
 44 |     VariantProps<typeof toastVariants>
 45 | >(({ className, variant, ...props }, ref) => {
 46 |   return (
 47 |     <ToastPrimitives.Root
 48 |       ref={ref}
 49 |       className={cn(toastVariants({ variant }), className)}
 50 |       {...props}
 51 |     />
 52 |   )
 53 | })
 54 | Toast.displayName = ToastPrimitives.Root.displayName
 55 | 
 56 | const ToastAction = React.forwardRef<
 57 |   React.ElementRef<typeof ToastPrimitives.Action>,
 58 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
 59 | >(({ className, ...props }, ref) => (
 60 |   <ToastPrimitives.Action
 61 |     ref={ref}
 62 |     className={cn(
 63 |       "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
 64 |       className
 65 |     )}
 66 |     {...props}
 67 |   />
 68 | ))
 69 | ToastAction.displayName = ToastPrimitives.Action.displayName
 70 | 
 71 | const ToastClose = React.forwardRef<
 72 |   React.ElementRef<typeof ToastPrimitives.Close>,
 73 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
 74 | >(({ className, ...props }, ref) => (
 75 |   <ToastPrimitives.Close
 76 |     ref={ref}
 77 |     className={cn(
 78 |       "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
 79 |       className
 80 |     )}
 81 |     toast-close=""
 82 |     {...props}
 83 |   >
 84 |     <X className="h-4 w-4" />
 85 |   </ToastPrimitives.Close>
 86 | ))
 87 | ToastClose.displayName = ToastPrimitives.Close.displayName
 88 | 
 89 | const ToastTitle = React.forwardRef<
 90 |   React.ElementRef<typeof ToastPrimitives.Title>,
 91 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
 92 | >(({ className, ...props }, ref) => (
 93 |   <ToastPrimitives.Title
 94 |     ref={ref}
 95 |     className={cn("text-sm font-semibold", className)}
 96 |     {...props}
 97 |   />
 98 | ))
 99 | ToastTitle.displayName = ToastPrimitives.Title.displayName
100 | 
101 | const ToastDescription = React.forwardRef<
102 |   React.ElementRef<typeof ToastPrimitives.Description>,
103 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
104 | >(({ className, ...props }, ref) => (
105 |   <ToastPrimitives.Description
106 |     ref={ref}
107 |     className={cn("text-sm opacity-90", className)}
108 |     {...props}
109 |   />
110 | ))
111 | ToastDescription.displayName = ToastPrimitives.Description.displayName
112 | 
113 | type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
114 | 
115 | type ToastActionElement = React.ReactElement<typeof ToastAction>
116 | 
117 | export {
118 |   type ToastProps,
119 |   type ToastActionElement,
120 |   ToastProvider,
121 |   ToastViewport,
122 |   Toast,
123 |   ToastTitle,
124 |   ToastDescription,
125 |   ToastClose,
126 |   ToastAction,
127 | }
128 | 


--------------------------------------------------------------------------------
/components/ui/toaster.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import {
 4 |   Toast,
 5 |   ToastClose,
 6 |   ToastDescription,
 7 |   ToastProvider,
 8 |   ToastTitle,
 9 |   ToastViewport,
10 | } from "@/components/ui/toast"
11 | import { useToast } from "@/components/ui/use-toast"
12 | 
13 | export function Toaster() {
14 |   const { toasts } = useToast()
15 | 
16 |   return (
17 |     <ToastProvider>
18 |       {toasts.map(function ({ id, title, description, action, ...props }) {
19 |         return (
20 |           <Toast key={id} {...props}>
21 |             <div className="grid gap-1">
22 |               {title && <ToastTitle>{title}</ToastTitle>}
23 |               {description && (
24 |                 <ToastDescription>{description}</ToastDescription>
25 |               )}
26 |             </div>
27 |             {action}
28 |             <ToastClose />
29 |           </Toast>
30 |         )
31 |       })}
32 |       <ToastViewport />
33 |     </ToastProvider>
34 |   )
35 | }
36 | 


--------------------------------------------------------------------------------
/components/ui/tooltip.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const TooltipProvider = TooltipPrimitive.Provider
 9 | 
10 | const Tooltip = TooltipPrimitive.Root
11 | 
12 | const TooltipTrigger = TooltipPrimitive.Trigger
13 | 
14 | const TooltipContent = React.forwardRef<
15 |   React.ElementRef<typeof TooltipPrimitive.Content>,
16 |   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
17 | >(({ className, sideOffset = 4, ...props }, ref) => (
18 |   <TooltipPrimitive.Content
19 |     ref={ref}
20 |     sideOffset={sideOffset}
21 |     className={cn(
22 |       "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
23 |       className
24 |     )}
25 |     {...props}
26 |   />
27 | ))
28 | TooltipContent.displayName = TooltipPrimitive.Content.displayName
29 | 
30 | export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
31 | 


--------------------------------------------------------------------------------
/components/ui/use-toast.ts:
--------------------------------------------------------------------------------
  1 | // Inspired by react-hot-toast library
  2 | import * as React from "react"
  3 | 
  4 | import type {
  5 |   ToastActionElement,
  6 |   ToastProps,
  7 | } from "@/components/ui/toast"
  8 | 
  9 | const TOAST_LIMIT = 1
 10 | const TOAST_REMOVE_DELAY = 1000000
 11 | 
 12 | type ToasterToast = ToastProps & {
 13 |   id: string
 14 |   title?: React.ReactNode
 15 |   description?: React.ReactNode
 16 |   action?: ToastActionElement
 17 | }
 18 | 
 19 | const actionTypes = {
 20 |   ADD_TOAST: "ADD_TOAST",
 21 |   UPDATE_TOAST: "UPDATE_TOAST",
 22 |   DISMISS_TOAST: "DISMISS_TOAST",
 23 |   REMOVE_TOAST: "REMOVE_TOAST",
 24 | } as const
 25 | 
 26 | let count = 0
 27 | 
 28 | function genId() {
 29 |   count = (count + 1) % Number.MAX_VALUE
 30 |   return count.toString()
 31 | }
 32 | 
 33 | type ActionType = typeof actionTypes
 34 | 
 35 | type Action =
 36 |   | {
 37 |       type: ActionType["ADD_TOAST"]
 38 |       toast: ToasterToast
 39 |     }
 40 |   | {
 41 |       type: ActionType["UPDATE_TOAST"]
 42 |       toast: Partial<ToasterToast>
 43 |     }
 44 |   | {
 45 |       type: ActionType["DISMISS_TOAST"]
 46 |       toastId?: ToasterToast["id"]
 47 |     }
 48 |   | {
 49 |       type: ActionType["REMOVE_TOAST"]
 50 |       toastId?: ToasterToast["id"]
 51 |     }
 52 | 
 53 | interface State {
 54 |   toasts: ToasterToast[]
 55 | }
 56 | 
 57 | const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
 58 | 
 59 | const addToRemoveQueue = (toastId: string) => {
 60 |   if (toastTimeouts.has(toastId)) {
 61 |     return
 62 |   }
 63 | 
 64 |   const timeout = setTimeout(() => {
 65 |     toastTimeouts.delete(toastId)
 66 |     dispatch({
 67 |       type: "REMOVE_TOAST",
 68 |       toastId: toastId,
 69 |     })
 70 |   }, TOAST_REMOVE_DELAY)
 71 | 
 72 |   toastTimeouts.set(toastId, timeout)
 73 | }
 74 | 
 75 | export const reducer = (state: State, action: Action): State => {
 76 |   switch (action.type) {
 77 |     case "ADD_TOAST":
 78 |       return {
 79 |         ...state,
 80 |         toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
 81 |       }
 82 | 
 83 |     case "UPDATE_TOAST":
 84 |       return {
 85 |         ...state,
 86 |         toasts: state.toasts.map((t) =>
 87 |           t.id === action.toast.id ? { ...t, ...action.toast } : t
 88 |         ),
 89 |       }
 90 | 
 91 |     case "DISMISS_TOAST": {
 92 |       const { toastId } = action
 93 | 
 94 |       // ! Side effects ! - This could be extracted into a dismissToast() action,
 95 |       // but I'll keep it here for simplicity
 96 |       if (toastId) {
 97 |         addToRemoveQueue(toastId)
 98 |       } else {
 99 |         state.toasts.forEach((toast) => {
100 |           addToRemoveQueue(toast.id)
101 |         })
102 |       }
103 | 
104 |       return {
105 |         ...state,
106 |         toasts: state.toasts.map((t) =>
107 |           t.id === toastId || toastId === undefined
108 |             ? {
109 |                 ...t,
110 |                 open: false,
111 |               }
112 |             : t
113 |         ),
114 |       }
115 |     }
116 |     case "REMOVE_TOAST":
117 |       if (action.toastId === undefined) {
118 |         return {
119 |           ...state,
120 |           toasts: [],
121 |         }
122 |       }
123 |       return {
124 |         ...state,
125 |         toasts: state.toasts.filter((t) => t.id !== action.toastId),
126 |       }
127 |   }
128 | }
129 | 
130 | const listeners: Array<(state: State) => void> = []
131 | 
132 | let memoryState: State = { toasts: [] }
133 | 
134 | function dispatch(action: Action) {
135 |   memoryState = reducer(memoryState, action)
136 |   listeners.forEach((listener) => {
137 |     listener(memoryState)
138 |   })
139 | }
140 | 
141 | type Toast = Omit<ToasterToast, "id">
142 | 
143 | function toast({ ...props }: Toast) {
144 |   const id = genId()
145 | 
146 |   const update = (props: ToasterToast) =>
147 |     dispatch({
148 |       type: "UPDATE_TOAST",
149 |       toast: { ...props, id },
150 |     })
151 |   const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
152 | 
153 |   dispatch({
154 |     type: "ADD_TOAST",
155 |     toast: {
156 |       ...props,
157 |       id,
158 |       open: true,
159 |       onOpenChange: (open) => {
160 |         if (!open) dismiss()
161 |       },
162 |     },
163 |   })
164 | 
165 |   return {
166 |     id: id,
167 |     dismiss,
168 |     update,
169 |   }
170 | }
171 | 
172 | function useToast() {
173 |   const [state, setState] = React.useState<State>(memoryState)
174 | 
175 |   React.useEffect(() => {
176 |     listeners.push(setState)
177 |     return () => {
178 |       const index = listeners.indexOf(setState)
179 |       if (index > -1) {
180 |         listeners.splice(index, 1)
181 |       }
182 |     }
183 |   }, [state])
184 | 
185 |   return {
186 |     ...state,
187 |     toast,
188 |     dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
189 |   }
190 | }
191 | 
192 | export { useToast, toast }
193 | 


--------------------------------------------------------------------------------
/components/user-nav.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 4 | import { Button } from "@/components/ui/button";
 5 | import {
 6 |   DropdownMenu,
 7 |   DropdownMenuContent,
 8 |   DropdownMenuGroup,
 9 |   DropdownMenuItem,
10 |   DropdownMenuLabel,
11 |   DropdownMenuSeparator,
12 |   DropdownMenuTrigger,
13 | } from "@/components/ui/dropdown-menu";
14 | 
15 | import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";
16 | import { LogOut, User } from "lucide-react";
17 | import Link from "next/link";
18 | import { useRouter } from "next/navigation";
19 | 
20 | export default function UserNav({ user }: any) {
21 |   const supabase = createClientComponentClient();
22 |   const router = useRouter();
23 |   const handleSignOut = async () => {
24 |     await supabase.auth.signOut();
25 |     router.refresh();
26 |     router.push("/");
27 |   };
28 | 
29 |   return (
30 |     <DropdownMenu>
31 |       {user ? (
32 |         <>
33 |           <DropdownMenuTrigger asChild>
34 |             <Button variant="ghost" className="relative h-8 w-8 rounded-full">
35 |               <Avatar className="h-8 w-8">
36 |                 <AvatarFallback>
37 |                   {user.email?.charAt(0).toUpperCase()}
38 |                 </AvatarFallback>
39 |               </Avatar>
40 |             </Button>
41 |           </DropdownMenuTrigger>
42 |           <DropdownMenuContent className="w-56" align="end" forceMount>
43 |             <DropdownMenuLabel className="font-normal">
44 |               <div className="flex flex-col space-y-1">
45 |                 <p className="text-sm font-medium leading-none">{user.email}</p>
46 |                 <p className="text-xs leading-none text-muted-foreground">
47 |                   {user.email}
48 |                 </p>
49 |               </div>
50 |             </DropdownMenuLabel>
51 |             <DropdownMenuSeparator />
52 |             <DropdownMenuGroup>
53 |               <Link href="/account">
54 |                 <DropdownMenuItem>
55 |                   <User className="mr-2 h-4 w-4" />
56 |                   <span>Account</span>
57 |                 </DropdownMenuItem>
58 |               </Link>
59 |             </DropdownMenuGroup>
60 |             <DropdownMenuSeparator />
61 |             <DropdownMenuItem onClick={handleSignOut}>
62 |               <LogOut className="mr-2 h-4 w-4" />
63 |               <span>Log out</span>
64 |             </DropdownMenuItem>
65 |           </DropdownMenuContent>
66 |         </>
67 |       ) : (
68 |         <></>
69 |       )}
70 |     </DropdownMenu>
71 |   );
72 | }
73 | 


--------------------------------------------------------------------------------
/config/site.ts:
--------------------------------------------------------------------------------
 1 | export type SiteConfig = typeof siteConfig;
 2 | 
 3 | require("dotenv").config();
 4 | 
 5 | export const siteConfig = {
 6 |   name: "Re:base",
 7 |   description:
 8 |     "The open-source email platform purpose-built for investor updates",
 9 |   authorName: "Alana",
10 |   url: process.env.SITE_URL!,
11 |   ogImage: `${process.env.SITE_URL}/opengraph-image`,
12 |   mainNav: [
13 |     {
14 |       title: "Home",
15 |       href: "/",
16 |     },
17 |     {
18 |       title: "Mail",
19 |       href: "/members",
20 |     },
21 |   ],
22 |   secondaryNav: [
23 |     {
24 |       title: "Members",
25 |       href: "/members",
26 |     },
27 |     {
28 |       title: "Mailbox",
29 |       href: "/mailbox",
30 |     },
31 |   ],
32 |   links: {
33 |     twitter: "https://twitter.com/alanaagoyal",
34 |     github: "https://github.com/alanagoyal/rebase",
35 |   },
36 | };
37 | 


--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 |  
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs))
6 | }
7 | 


--------------------------------------------------------------------------------
/middleware.ts:
--------------------------------------------------------------------------------
 1 | import { createMiddlewareClient } from '@supabase/auth-helpers-nextjs'
 2 | import { NextResponse } from 'next/server'
 3 | 
 4 | import type { NextRequest } from 'next/server'
 5 | 
 6 | export async function middleware(req: NextRequest) {
 7 |   const res = NextResponse.next()
 8 | 
 9 |   // Create a Supabase client configured to use cookies
10 |   const supabase = createMiddlewareClient({ req, res })
11 | 
12 |   // Refresh session if expired - required for Server Components
13 |   // https://supabase.com/docs/guides/auth/auth-helpers/nextjs#managing-session-with-middleware
14 |   await supabase.auth.getSession()
15 | 
16 |   return res
17 | }
18 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | const nextConfig = {
 3 |   experimental: {
 4 |     serverActions: true,
 5 |   },
 6 |   typescript: {
 7 |     // !! WARN !!
 8 |     // Dangerously allow production builds to successfully complete even if
 9 |     // your project has type errors.
10 |     // !! WARN !!
11 |     ignoreBuildErrors: true,
12 |   },
13 | };
14 | 
15 | module.exports = nextConfig;
16 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "scripts": {
 4 |     "dev": "next dev",
 5 |     "build": "next build",
 6 |     "start": "next start",
 7 |     "update-types": "npx supabase gen types typescript --project-id \"speyjhvypscrtjmkmusx\" > types/supabase.ts"
 8 |   },
 9 |   "dependencies": {
10 |     "@hookform/resolvers": "^3.1.1",
11 |     "@radix-ui/react-avatar": "^1.0.3",
12 |     "@radix-ui/react-dialog": "^1.0.4",
13 |     "@radix-ui/react-dropdown-menu": "^2.0.5",
14 |     "@radix-ui/react-icons": "^1.3.0",
15 |     "@radix-ui/react-label": "^2.0.2",
16 |     "@radix-ui/react-slot": "^1.0.2",
17 |     "@radix-ui/react-toast": "^1.1.4",
18 |     "@radix-ui/react-tooltip": "^1.0.6",
19 |     "@supabase/auth-helpers-nextjs": "latest",
20 |     "@supabase/supabase-js": "latest",
21 |     "@tanstack/react-table": "^8.9.3",
22 |     "@tiptap/extension-highlight": "^2.1.6",
23 |     "@tiptap/extension-image": "^2.1.6",
24 |     "@tiptap/extension-text-align": "^2.1.6",
25 |     "@tiptap/pm": "^2.1.6",
26 |     "@tiptap/react": "^2.1.6",
27 |     "@tiptap/starter-kit": "^2.1.6",
28 |     "@vercel/og": "^0.5.8",
29 |     "autoprefixer": "10.4.14",
30 |     "class-variance-authority": "^0.6.1",
31 |     "clsx": "^1.2.1",
32 |     "dotenv": "^16.3.1",
33 |     "lucide-react": "^0.263.1",
34 |     "next": "latest",
35 |     "next-themes": "^0.2.1",
36 |     "postcss": "8.4.24",
37 |     "react": "18.2.0",
38 |     "react-dom": "18.2.0",
39 |     "react-hook-form": "^7.45.1",
40 |     "react-select": "^5.7.4",
41 |     "resend": "^1.0.0",
42 |     "sass": "^1.66.1",
43 |     "tailwind-merge": "^1.13.2",
44 |     "tailwindcss": "3.3.2",
45 |     "tailwindcss-animate": "^1.0.6",
46 |     "typescript": "5.1.3",
47 |     "zod": "^3.21.4"
48 |   },
49 |   "devDependencies": {
50 |     "@types/node": "20.3.1",
51 |     "@types/react": "18.2.12",
52 |     "@types/react-dom": "18.2.5",
53 |     "encoding": "^0.1.13",
54 |     "supabase": "^1.77.9"
55 |   }
56 | }
57 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/rebase.code-workspace:
--------------------------------------------------------------------------------
 1 | {
 2 |   "folders": [
 3 |     {
 4 |       "name": "project-root",
 5 |       "path": "./"
 6 |     },
 7 |     {
 8 |       "name": "supabase-functions",
 9 |       "path": "supabase/functions"
10 |     }
11 |   ],
12 |   "settings": {
13 |     "files.exclude": {
14 |       "supabase/functions/": true
15 |     }
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/supabase/.gitignore:
--------------------------------------------------------------------------------
1 | # Supabase
2 | .branches
3 | .temp
4 | 


--------------------------------------------------------------------------------
/supabase/config.toml:
--------------------------------------------------------------------------------
  1 | # A string used to distinguish different Supabase projects on the same host. Defaults to the
  2 | # working directory name when running `supabase init`.
  3 | project_id = "rebase"
  4 | 
  5 | [api]
  6 | # Port to use for the API URL.
  7 | port = 54321
  8 | # Schemas to expose in your API. Tables, views and stored procedures in this schema will get API
  9 | # endpoints. public and storage are always included.
 10 | schemas = ["public", "storage", "graphql_public"]
 11 | # Extra schemas to add to the search_path of every request. public is always included.
 12 | extra_search_path = ["public", "extensions"]
 13 | # The maximum number of rows returns from a view, table, or stored procedure. Limits payload size
 14 | # for accidental or malicious requests.
 15 | max_rows = 1000
 16 | 
 17 | [db]
 18 | # Port to use for the local database URL.
 19 | port = 54322
 20 | # Port used by db diff command to initialise the shadow database.
 21 | shadow_port = 54320
 22 | # The database major version to use. This has to be the same as your remote database's. Run `SHOW
 23 | # server_version;` on the remote database to check.
 24 | major_version = 15
 25 | 
 26 | [studio]
 27 | enabled = true
 28 | # Port to use for Supabase Studio.
 29 | port = 54323
 30 | # External URL of the API server that frontend connects to.
 31 | api_url = "http://localhost"
 32 | 
 33 | # Email testing server. Emails sent with the local dev setup are not actually sent - rather, they
 34 | # are monitored, and you can view the emails that would have been sent from the web interface.
 35 | [inbucket]
 36 | enabled = true
 37 | # Port to use for the email testing server web interface.
 38 | port = 54324
 39 | # Uncomment to expose additional ports for testing user applications that send emails.
 40 | # smtp_port = 54325
 41 | # pop3_port = 54326
 42 | 
 43 | [storage]
 44 | # The maximum file size allowed (e.g. "5MB", "500KB").
 45 | file_size_limit = "50MiB"
 46 | 
 47 | [auth]
 48 | # The base URL of your website. Used as an allow-list for redirects and for constructing URLs used
 49 | # in emails.
 50 | site_url = "http://localhost:3000"
 51 | # A list of *exact* URLs that auth providers are permitted to redirect to post authentication.
 52 | additional_redirect_urls = ["https://localhost:3000"]
 53 | # How long tokens are valid for, in seconds. Defaults to 3600 (1 hour), maximum 604,800 (1 week).
 54 | jwt_expiry = 3600
 55 | # If disabled, the refresh token will never expire.
 56 | enable_refresh_token_rotation = true
 57 | # Allows refresh tokens to be reused after expiry, up to the specified interval in seconds.
 58 | # Requires enable_refresh_token_rotation = true.
 59 | refresh_token_reuse_interval = 10
 60 | # Allow/disallow new user signups to your project.
 61 | enable_signup = true
 62 | 
 63 | [auth.email]
 64 | # Allow/disallow new user signups via email to your project.
 65 | enable_signup = true
 66 | # If enabled, a user will be required to confirm any email change on both the old, and new email
 67 | # addresses. If disabled, only the new email is required to confirm.
 68 | double_confirm_changes = true
 69 | # If enabled, users need to confirm their email address before signing in.
 70 | enable_confirmations = false
 71 | 
 72 | [auth.sms]
 73 | # Allow/disallow new user signups via SMS to your project.
 74 | enable_signup = true
 75 | # If enabled, users need to confirm their phone number before signing in.
 76 | enable_confirmations = false
 77 | 
 78 | # Configure one of the supported SMS providers: `twilio`, `messagebird`, `textlocal`, `vonage`.
 79 | [auth.sms.twilio]
 80 | enabled = false
 81 | account_sid = ""
 82 | message_service_sid = ""
 83 | # DO NOT commit your Twilio auth token to git. Use environment variable substitution instead:
 84 | auth_token = "env(SUPABASE_AUTH_SMS_TWILIO_AUTH_TOKEN)"
 85 | 
 86 | # Use an external OAuth provider. The full list of providers are: `apple`, `azure`, `bitbucket`,
 87 | # `discord`, `facebook`, `github`, `gitlab`, `google`, `keycloak`, `linkedin`, `notion`, `twitch`,
 88 | # `twitter`, `slack`, `spotify`, `workos`, `zoom`.
 89 | [auth.external.google]
 90 | enabled = true
 91 | client_id = "env(SUPABASE_AUTH_EXTERNAL_GOOGLE_CLIENT_ID)"
 92 | # DO NOT commit your OAuth provider secret to git. Use environment variable substitution instead:
 93 | secret = "env(SUPABASE_AUTH_EXTERNAL_GOOGLE_SECRET)"
 94 | # Overrides the default auth redirectUrl.
 95 | redirect_uri = ""
 96 | # Overrides the default auth provider URL. Used to support self-hosted gitlab, single-tenant Azure,
 97 | # or any other third-party OIDC providers.
 98 | url = ""
 99 | 
100 | [analytics]
101 | enabled = false
102 | port = 54327
103 | vector_port = 54328
104 | # Setup BigQuery project to enable log viewer on local development stack.
105 | # See: https://supabase.com/docs/guides/getting-started/local-development#enabling-local-logging
106 | gcp_project_id = ""
107 | gcp_project_number = ""
108 | gcp_jwt_path = "supabase/gcloud.json"
109 | 


--------------------------------------------------------------------------------
/supabase/migrations/20230716202819_remote_commit.sql:
--------------------------------------------------------------------------------
  1 | 
  2 | SET statement_timeout = 0;
  3 | SET lock_timeout = 0;
  4 | SET idle_in_transaction_session_timeout = 0;
  5 | SET client_encoding = 'UTF8';
  6 | SET standard_conforming_strings = on;
  7 | SELECT pg_catalog.set_config('search_path', '', false);
  8 | SET check_function_bodies = false;
  9 | SET xmloption = content;
 10 | SET client_min_messages = warning;
 11 | SET row_security = off;
 12 | 
 13 | CREATE EXTENSION IF NOT EXISTS "pgsodium" WITH SCHEMA "pgsodium";
 14 | 
 15 | CREATE EXTENSION IF NOT EXISTS "pg_graphql" WITH SCHEMA "graphql";
 16 | 
 17 | CREATE EXTENSION IF NOT EXISTS "pg_stat_statements" WITH SCHEMA "extensions";
 18 | 
 19 | CREATE EXTENSION IF NOT EXISTS "pgcrypto" WITH SCHEMA "extensions";
 20 | 
 21 | CREATE EXTENSION IF NOT EXISTS "pgjwt" WITH SCHEMA "extensions";
 22 | 
 23 | CREATE EXTENSION IF NOT EXISTS "supabase_vault" WITH SCHEMA "vault";
 24 | 
 25 | CREATE EXTENSION IF NOT EXISTS "uuid-ossp" WITH SCHEMA "extensions";
 26 | 
 27 | CREATE FUNCTION "public"."handle_new_user"() RETURNS "trigger"
 28 |     LANGUAGE "plpgsql" SECURITY DEFINER
 29 |     AS $$
 30 | begin
 31 |   insert into public.profiles (id, email)
 32 |   values (new.id, new.email);
 33 |   return new;
 34 | end;
 35 | $$;
 36 | 
 37 | ALTER FUNCTION "public"."handle_new_user"() OWNER TO "postgres";
 38 | 
 39 | SET default_tablespace = '';
 40 | 
 41 | SET default_table_access_method = "heap";
 42 | 
 43 | CREATE TABLE "public"."members" (
 44 |     "id" "uuid" DEFAULT "gen_random_uuid"() NOT NULL,
 45 |     "created_at" timestamp with time zone DEFAULT "now"(),
 46 |     "created_by" "uuid",
 47 |     "first_name" "text",
 48 |     "last_name" "text",
 49 |     "email" "text"
 50 | );
 51 | 
 52 | ALTER TABLE "public"."members" OWNER TO "postgres";
 53 | 
 54 | CREATE TABLE "public"."profiles" (
 55 |     "id" "uuid" NOT NULL,
 56 |     "created_at" timestamp with time zone DEFAULT "now"(),
 57 |     "email" "text",
 58 |     "full_name" "text"
 59 | );
 60 | 
 61 | ALTER TABLE "public"."profiles" OWNER TO "postgres";
 62 | 
 63 | ALTER TABLE ONLY "public"."members"
 64 |     ADD CONSTRAINT "members_pkey" PRIMARY KEY ("id");
 65 | 
 66 | ALTER TABLE ONLY "public"."profiles"
 67 |     ADD CONSTRAINT "profiles_email_key" UNIQUE ("email");
 68 | 
 69 | ALTER TABLE ONLY "public"."profiles"
 70 |     ADD CONSTRAINT "profiles_pkey" PRIMARY KEY ("id");
 71 | 
 72 | ALTER TABLE ONLY "public"."members"
 73 |     ADD CONSTRAINT "members_created_by_fkey" FOREIGN KEY ("created_by") REFERENCES "public"."profiles"("id") ON DELETE CASCADE;
 74 | 
 75 | ALTER TABLE ONLY "public"."profiles"
 76 |     ADD CONSTRAINT "profiles_id_fkey" FOREIGN KEY ("id") REFERENCES "auth"."users"("id") ON DELETE CASCADE;
 77 | 
 78 | CREATE POLICY "Enable insert for authenticated users only" ON "public"."members" FOR INSERT TO "authenticated" WITH CHECK (true);
 79 | 
 80 | CREATE POLICY "Enable read access for all authenticated users" ON "public"."members" FOR SELECT TO "authenticated" USING (true);
 81 | 
 82 | GRANT USAGE ON SCHEMA "public" TO "postgres";
 83 | GRANT USAGE ON SCHEMA "public" TO "anon";
 84 | GRANT USAGE ON SCHEMA "public" TO "authenticated";
 85 | GRANT USAGE ON SCHEMA "public" TO "service_role";
 86 | 
 87 | GRANT ALL ON FUNCTION "public"."handle_new_user"() TO "anon";
 88 | GRANT ALL ON FUNCTION "public"."handle_new_user"() TO "authenticated";
 89 | GRANT ALL ON FUNCTION "public"."handle_new_user"() TO "service_role";
 90 | 
 91 | GRANT ALL ON TABLE "public"."members" TO "anon";
 92 | GRANT ALL ON TABLE "public"."members" TO "authenticated";
 93 | GRANT ALL ON TABLE "public"."members" TO "service_role";
 94 | 
 95 | GRANT ALL ON TABLE "public"."profiles" TO "anon";
 96 | GRANT ALL ON TABLE "public"."profiles" TO "authenticated";
 97 | GRANT ALL ON TABLE "public"."profiles" TO "service_role";
 98 | 
 99 | ALTER DEFAULT PRIVILEGES FOR ROLE "postgres" IN SCHEMA "public" GRANT ALL ON SEQUENCES  TO "postgres";
100 | ALTER DEFAULT PRIVILEGES FOR ROLE "postgres" IN SCHEMA "public" GRANT ALL ON SEQUENCES  TO "anon";
101 | ALTER DEFAULT PRIVILEGES FOR ROLE "postgres" IN SCHEMA "public" GRANT ALL ON SEQUENCES  TO "authenticated";
102 | ALTER DEFAULT PRIVILEGES FOR ROLE "postgres" IN SCHEMA "public" GRANT ALL ON SEQUENCES  TO "service_role";
103 | 
104 | ALTER DEFAULT PRIVILEGES FOR ROLE "postgres" IN SCHEMA "public" GRANT ALL ON FUNCTIONS  TO "postgres";
105 | ALTER DEFAULT PRIVILEGES FOR ROLE "postgres" IN SCHEMA "public" GRANT ALL ON FUNCTIONS  TO "anon";
106 | ALTER DEFAULT PRIVILEGES FOR ROLE "postgres" IN SCHEMA "public" GRANT ALL ON FUNCTIONS  TO "authenticated";
107 | ALTER DEFAULT PRIVILEGES FOR ROLE "postgres" IN SCHEMA "public" GRANT ALL ON FUNCTIONS  TO "service_role";
108 | 
109 | ALTER DEFAULT PRIVILEGES FOR ROLE "postgres" IN SCHEMA "public" GRANT ALL ON TABLES  TO "postgres";
110 | ALTER DEFAULT PRIVILEGES FOR ROLE "postgres" IN SCHEMA "public" GRANT ALL ON TABLES  TO "anon";
111 | ALTER DEFAULT PRIVILEGES FOR ROLE "postgres" IN SCHEMA "public" GRANT ALL ON TABLES  TO "authenticated";
112 | ALTER DEFAULT PRIVILEGES FOR ROLE "postgres" IN SCHEMA "public" GRANT ALL ON TABLES  TO "service_role";
113 | 
114 | RESET ALL;
115 | 


--------------------------------------------------------------------------------
/supabase/migrations/20230716203001_remote_commit.sql:
--------------------------------------------------------------------------------
1 | CREATE TRIGGER on_auth_user_created AFTER INSERT ON auth.users FOR EACH ROW EXECUTE FUNCTION handle_new_user();
2 | 
3 | 
4 | 


--------------------------------------------------------------------------------
/supabase/migrations/20230819040448_create_emails_table.sql:
--------------------------------------------------------------------------------
 1 | create table emails (
 2 |   id bigint primary key generated always as identity,
 3 |   to_emails text[], -- An array of text
 4 |   from_email text,
 5 |   subject text,
 6 |   created_at timestamptz default now(),
 7 |   body text,
 8 |   attachments text[], -- An array of text
 9 |   cc_emails text[], -- An array of text
10 |   bcc_emails text[] -- An array of text
11 | );


--------------------------------------------------------------------------------
/supabase/migrations/20230820053817_create_member_groupings_table.sql:
--------------------------------------------------------------------------------
1 | CREATE TABLE member_groups (
2 |   id SERIAL PRIMARY KEY,
3 |   name TEXT
4 | );


--------------------------------------------------------------------------------
/supabase/migrations/20230820054446_add_group_id_to_members_table.sql:
--------------------------------------------------------------------------------
1 | ALTER TABLE members
2 | ADD COLUMN group_id bigint REFERENCES member_groups(id);


--------------------------------------------------------------------------------
/supabase/migrations/20230820060355_create_member_group_join.sql:
--------------------------------------------------------------------------------
1 | CREATE TABLE member_group_joins (
2 |     id serial PRIMARY KEY,
3 |     member_id uuid REFERENCES members(id),
4 |     group_id bigint REFERENCES member_groups(id)
5 | );


--------------------------------------------------------------------------------
/supabase/migrations/20230906225600_created_by_group.sql:
--------------------------------------------------------------------------------
1 | ALTER TABLE member_groups
2 | ADD COLUMN created_by uuid REFERENCES members(id);


--------------------------------------------------------------------------------
/supabase/migrations/20230907000406_alter_member_groups.sql:
--------------------------------------------------------------------------------
1 | ALTER TABLE member_groups
2 | ALTER COLUMN created_by TYPE uuid;


--------------------------------------------------------------------------------
/supabase/migrations/20230907015108_edit-group-table.sql:
--------------------------------------------------------------------------------
1 | ALTER TABLE member_groups
2 | DROP COLUMN created_by;


--------------------------------------------------------------------------------
/supabase/migrations/20230907020105_group-references-profiles.sql:
--------------------------------------------------------------------------------
1 | ALTER TABLE member_groups
2 | ADD COLUMN created_by uuid REFERENCES profiles(id);


--------------------------------------------------------------------------------
/supabase/seed.sql:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alanagoyal/rebase/67c0677c028fca7ba6a7f72612bff904f5cad36a/supabase/seed.sql


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   darkMode: ["class"],
 4 |   content: [
 5 |     './pages/**/*.{ts,tsx}',
 6 |     './components/**/*.{ts,tsx}',
 7 |     './app/**/*.{ts,tsx}',
 8 |     './src/**/*.{ts,tsx}',
 9 | 	],
10 |   theme: {
11 |     container: {
12 |       center: true,
13 |       padding: "2rem",
14 |       screens: {
15 |         "2xl": "1400px",
16 |       },
17 |     },
18 |     extend: {
19 |       colors: {
20 |         border: "hsl(var(--border))",
21 |         input: "hsl(var(--input))",
22 |         ring: "hsl(var(--ring))",
23 |         background: "hsl(var(--background))",
24 |         foreground: "hsl(var(--foreground))",
25 |         primary: {
26 |           DEFAULT: "hsl(var(--primary))",
27 |           foreground: "hsl(var(--primary-foreground))",
28 |         },
29 |         secondary: {
30 |           DEFAULT: "hsl(var(--secondary))",
31 |           foreground: "hsl(var(--secondary-foreground))",
32 |         },
33 |         destructive: {
34 |           DEFAULT: "hsl(var(--destructive))",
35 |           foreground: "hsl(var(--destructive-foreground))",
36 |         },
37 |         muted: {
38 |           DEFAULT: "hsl(var(--muted))",
39 |           foreground: "hsl(var(--muted-foreground))",
40 |         },
41 |         accent: {
42 |           DEFAULT: "hsl(var(--accent))",
43 |           foreground: "hsl(var(--accent-foreground))",
44 |         },
45 |         popover: {
46 |           DEFAULT: "hsl(var(--popover))",
47 |           foreground: "hsl(var(--popover-foreground))",
48 |         },
49 |         card: {
50 |           DEFAULT: "hsl(var(--card))",
51 |           foreground: "hsl(var(--card-foreground))",
52 |         },
53 |       },
54 |       borderRadius: {
55 |         lg: "var(--radius)",
56 |         md: "calc(var(--radius) - 2px)",
57 |         sm: "calc(var(--radius) - 4px)",
58 |       },
59 |       keyframes: {
60 |         "accordion-down": {
61 |           from: { height: 0 },
62 |           to: { height: "var(--radix-accordion-content-height)" },
63 |         },
64 |         "accordion-up": {
65 |           from: { height: "var(--radix-accordion-content-height)" },
66 |           to: { height: 0 },
67 |         },
68 |       },
69 |       animation: {
70 |         "accordion-down": "accordion-down 0.2s ease-out",
71 |         "accordion-up": "accordion-up 0.2s ease-out",
72 |       },
73 |     },
74 |   },
75 |   plugins: [require("tailwindcss-animate")],
76 | }


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "forceConsistentCasingInFileNames": true,
 9 |     "noEmit": true,
10 |     "esModuleInterop": true,
11 |     "module": "esnext",
12 |     "moduleResolution": "node",
13 |     "resolveJsonModule": true,
14 |     "isolatedModules": true,
15 |     "jsx": "preserve",
16 |     "incremental": true,
17 |     "plugins": [
18 |       {
19 |         "name": "next"
20 |       }
21 |     ],
22 |     "paths": {
23 |       "@/*": ["./*"]
24 |     }
25 |   },
26 |   "include": [
27 |     "next-env.d.ts",
28 |     "**/*.ts",
29 |     "**/*.tsx",
30 |     ".next/types/**/*.ts",
31 |     "components/tiptap.js"
32 |   ],
33 |   "exclude": ["node_modules"]
34 | }
35 | 


--------------------------------------------------------------------------------
/types/nav.ts:
--------------------------------------------------------------------------------
1 | export interface NavItem {
2 |   title: string;
3 |   href?: string;
4 |   disabled?: boolean;
5 |   external?: boolean;
6 | }
7 | 


--------------------------------------------------------------------------------
/types/supabase.ts:
--------------------------------------------------------------------------------
 1 | export type Json =
 2 |   | string
 3 |   | number
 4 |   | boolean
 5 |   | null
 6 |   | { [key: string]: Json | undefined }
 7 |   | Json[]
 8 | 
 9 | export interface Database {
10 |   public: {
11 |     Tables: {
12 |       members: {
13 |         Row: {
14 |           created_at: string | null
15 |           created_by: string | null
16 |           email: string | null
17 |           first_name: string | null
18 |           id: string
19 |           last_name: string | null
20 |         }
21 |         Insert: {
22 |           created_at?: string | null
23 |           created_by?: string | null
24 |           email?: string | null
25 |           first_name?: string | null
26 |           id?: string
27 |           last_name?: string | null
28 |         }
29 |         Update: {
30 |           created_at?: string | null
31 |           created_by?: string | null
32 |           email?: string | null
33 |           first_name?: string | null
34 |           id?: string
35 |           last_name?: string | null
36 |         }
37 |         Relationships: [
38 |           {
39 |             foreignKeyName: "members_created_by_fkey"
40 |             columns: ["created_by"]
41 |             referencedRelation: "profiles"
42 |             referencedColumns: ["id"]
43 |           }
44 |         ]
45 |       }
46 |       profiles: {
47 |         Row: {
48 |           created_at: string | null
49 |           email: string | null
50 |           full_name: string | null
51 |           id: string
52 |         }
53 |         Insert: {
54 |           created_at?: string | null
55 |           email?: string | null
56 |           full_name?: string | null
57 |           id: string
58 |         }
59 |         Update: {
60 |           created_at?: string | null
61 |           email?: string | null
62 |           full_name?: string | null
63 |           id?: string
64 |         }
65 |         Relationships: [
66 |           {
67 |             foreignKeyName: "profiles_id_fkey"
68 |             columns: ["id"]
69 |             referencedRelation: "users"
70 |             referencedColumns: ["id"]
71 |           }
72 |         ]
73 |       }
74 |     }
75 |     Views: {
76 |       [_ in never]: never
77 |     }
78 |     Functions: {
79 |       [_ in never]: never
80 |     }
81 |     Enums: {
82 |       [_ in never]: never
83 |     }
84 |     CompositeTypes: {
85 |       [_ in never]: never
86 |     }
87 |   }
88 | }
89 | 


--------------------------------------------------------------------------------