From 6a8ed06c012e3c3e1c498e3ed061e80ec6cb8850 Mon Sep 17 00:00:00 2001
From: psiddharthdesign <107192927+psiddharthdesign@users.noreply.github.com>
Date: Fri, 19 Jul 2024 15:50:44 +0530
Subject: [PATCH] feat/create project under organization

---
 .../@sidebar/OrganizationSidebar.tsx          | 100 +++--
 .../@sidebar/default.tsx                      | 101 +++--
 .../(specific-organization-pages)/page.tsx    |   2 +-
 .../projects/OrganizationProjectsTable.tsx    | 131 +++---
 .../create}/page.tsx                          |   0
 .../projects/page.tsx                         |  13 +-
 .../@sidebar/ProjectSidebar.tsx               | 100 +++--
 .../(specific-project-pages)/layout.tsx       |   1 +
 .../(specific-project-pages)/page.tsx         |  73 ++--
 .../users/GetLoginLinkDialog.tsx              |   1 +
 .../onboarding/OnboardingFlow.tsx             |   3 +
 .../onboarding/OrganizationCreation.tsx       |  11 +-
 .../(authenticated-pages)/onboarding/page.tsx |   3 +
 src/components/CreateProjectDialog.tsx        | 153 -------
 src/components/CreateProjectForm.tsx          | 387 +++++++++++-------
 src/components/InputTags.tsx                  |  72 ++++
 .../OrganizationSwitcher.tsx                  |   2 +-
 src/components/SidebarLink.tsx                |  15 +-
 src/data/user/organizations.ts                |  25 +-
 src/data/user/projects.tsx                    |  24 +-
 src/data/user/repos.ts                        |  18 +
 src/lib/database.types.ts                     |  87 +++-
 .../20240718105020_add_new_tables.sql         |  35 ++
 .../20240718184709_add_user_projects.sql      |   4 +
 24 files changed, 778 insertions(+), 583 deletions(-)
 rename src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/org/[organizationId]/(specific-organization-pages)/{create-project => projects/create}/page.tsx (100%)
 delete mode 100644 src/components/CreateProjectDialog.tsx
 create mode 100644 src/components/InputTags.tsx
 create mode 100644 src/data/user/repos.ts
 create mode 100644 supabase/migrations/20240718105020_add_new_tables.sql
 create mode 100644 supabase/migrations/20240718184709_add_user_projects.sql

diff --git a/src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/org/[organizationId]/(specific-organization-pages)/@sidebar/OrganizationSidebar.tsx b/src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/org/[organizationId]/(specific-organization-pages)/@sidebar/OrganizationSidebar.tsx
index 20af076c..baca2915 100644
--- a/src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/org/[organizationId]/(specific-organization-pages)/@sidebar/OrganizationSidebar.tsx
+++ b/src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/org/[organizationId]/(specific-organization-pages)/@sidebar/OrganizationSidebar.tsx
@@ -1,4 +1,3 @@
-import { ProFeatureGateDialog } from '@/components/ProFeatureGateDialog';
 import { SidebarLink } from '@/components/SidebarLink';
 import { fetchSlimOrganizations, getOrganizationSlugByOrganizationId } from '@/data/user/organizations';
 import { cn } from '@/utils/cn';
@@ -8,9 +7,7 @@ import { Suspense } from 'react';
 
 import { DesktopSidebarFallback } from '@/components/SidebarComponents/SidebarFallback';
 import { SwitcherAndToggle } from '@/components/SidebarComponents/SidebarLogo';
-import { SubscriptionCardSmall } from '@/components/SubscriptionCardSmall';
-import { T } from '@/components/ui/Typography';
-import { DollarSign, FileBox, Home, Layers, Settings, UserRound } from 'lucide-react';
+import { Activity, FileText, GitCompare, Home, Layers, MessageCircle, Settings, Shield } from 'lucide-react';
 
 async function OrganizationSidebarInternal({
   organizationId,
@@ -20,63 +17,60 @@ async function OrganizationSidebarInternal({
   organizationSlug: string;
 }) {
   const slimOrganizations = await fetchSlimOrganizations();
+
   return (
     <div
       className={cn(
-        'flex flex-col justify-between h-full',
-        'lg:px-3 lg:py-4 lg:pt-2.5 ',
+        'flex flex-col h-full',
+        'lg:px-3 lg:py-4',
       )}
     >
-      <div>
 
-        <div className="flex justify-between items-center">
-          <SwitcherAndToggle organizationId={organizationId} slimOrganizations={slimOrganizations} />
-        </div>
-        <div className="flex flex-col gap-6 h-full overflow-y-auto mt-4">
-          <div>
-            <SidebarLink
-              label="Home"
-              href={`/org/${organizationId}`}
-              icon={<Home className="h-5 w-5" />}
-            />
-            <SidebarLink
-              label="Settings"
-              href={`/org/${organizationId}/settings`}
-              icon={<Settings className="h-5 w-5" />}
-            />
-            <SidebarLink
-              label="Projects"
-              href={` /org/${organizationId}/projects`}
-              icon={<Layers className="h-5 w-5" />}
-            />
-            <SidebarLink
-              label="Members"
-              href={`/org/${organizationId}/settings/members`}
-              icon={<UserRound className="h-5 w-5" />}
-            />
-            <SidebarLink
-              label="Billing"
-              href={`/org/${organizationId}/settings/billing`}
-              icon={<DollarSign className="h-5 w-5" />}
-            />
-            <Suspense>
-              <ProFeatureGateDialog
-                organizationId={organizationId}
-                label="Feature Pro"
-                icon={<FileBox className="h-5 w-5" />}
-              />
-            </Suspense>
-          </div>
-        </div>
+      <div className="flex justify-between items-center mb-4">
+        <SwitcherAndToggle organizationId={organizationId} slimOrganizations={slimOrganizations} />
       </div>
-      <div className="flex flex-col gap-4">
-        <Suspense fallback={<T.P>Loading subscription details...</T.P>}>
-          <div>
-            <SubscriptionCardSmall organizationSlug={organizationSlug} organizationId={organizationId} />
-          </div>
-        </Suspense>
-
 
+      <div className="flex flex-col gap-0">
+        <SidebarLink
+          label="Home"
+          href={`/org/${organizationId}`}
+          icon={<Home className="size-4 text-foreground" />}
+        />
+        <SidebarLink
+          label="Projects"
+          href={`/org/${organizationId}/projects`}
+          icon={<Layers className="size-4 text-foreground" />}
+        />
+        <SidebarLink
+          label="Activity"
+          href={`/org/${organizationId}/activity`}
+          icon={<Activity className="size-4 text-foreground" />}
+        />
+        <SidebarLink
+          label="Policies"
+          href={`/org/${organizationId}/policies`}
+          icon={<Shield className="size-4 text-foreground" />}
+        />
+        <SidebarLink
+          label="Drift"
+          href={`/org/${organizationId}/drift`}
+          icon={<GitCompare className="size-4 text-foreground" />}
+        />
+        <SidebarLink
+          label="Docs"
+          href={`/org/${organizationId}/docs`}
+          icon={<FileText className="size-4 text-foreground" />}
+        />
+        <SidebarLink
+          label="Admin"
+          href={`/org/${organizationId}/admin`}
+          icon={<Settings className="size-4 text-foreground" />}
+        />
+        <SidebarLink
+          label="Ask in Slack"
+          href="#"
+          icon={<MessageCircle className="size-4 text-foreground" />}
+        />
       </div>
     </div>
   );
diff --git a/src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/org/[organizationId]/(specific-organization-pages)/@sidebar/default.tsx b/src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/org/[organizationId]/(specific-organization-pages)/@sidebar/default.tsx
index 136465de..246cea91 100644
--- a/src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/org/[organizationId]/(specific-organization-pages)/@sidebar/default.tsx
+++ b/src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/org/[organizationId]/(specific-organization-pages)/@sidebar/default.tsx
@@ -1,16 +1,13 @@
-import { ProFeatureGateDialog } from '@/components/ProFeatureGateDialog';
 import { SidebarLink } from '@/components/SidebarLink';
-import { SubscriptionCardSmall } from '@/components/SubscriptionCardSmall';
-import { T } from '@/components/ui/Typography';
-import { fetchSlimOrganizations, getOrganizationSlugByOrganizationId } from '@/data/user/organizations';
 import { cn } from '@/utils/cn';
 import { notFound } from 'next/navigation';
 import { Suspense } from 'react';
 
 import { DesktopSidebarFallback } from '@/components/SidebarComponents/SidebarFallback';
 import { SwitcherAndToggle } from '@/components/SidebarComponents/SidebarLogo';
+import { fetchSlimOrganizations, getOrganizationSlugByOrganizationId } from '@/data/user/organizations';
 import { organizationParamSchema } from '@/utils/zod-schemas/params';
-import { DollarSign, FileBox, Home, Layers, Settings, UserRound } from 'lucide-react';
+import { Activity, FileText, GitCompare, Home, Layers, MessageCircle, Settings, Shield } from 'lucide-react';
 
 async function OrganizationSidebarInternal({
   organizationId,
@@ -24,58 +21,56 @@ async function OrganizationSidebarInternal({
   return (
     <div
       className={cn(
-        'flex flex-col justify-between h-full',
-        'lg:px-3 lg:py-4 lg:pt-2.5 ',
+        'flex flex-col h-full',
+        'lg:px-3 lg:py-4',
       )}
     >
-      <div>
-        <div className="flex justify-between items-center">
-          <SwitcherAndToggle organizationId={organizationId} slimOrganizations={slimOrganizations} />
-        </div>
-        <div className="flex flex-col gap-6 h-full overflow-y-auto mt-4">
-          <div>
-            <SidebarLink
-              label="Home"
-              href={`/org/${organizationId}`}
-              icon={<Home className="h-5 w-5" />}
-            />
-            <SidebarLink
-              label="Projects"
-              href={`/org/${organizationId}/projects`}
-              icon={<Layers className="h-5 w-5" />}
-            />
-            <SidebarLink
-              label="Settings"
-              href={`/org/${organizationId}/settings`}
-              icon={<Settings className="h-5 w-5" />}
-            />
-            <SidebarLink
-              label="Members"
-              href={`/org/${organizationId}/settings/members`}
-              icon={<UserRound className="h-5 w-5" />}
-            />
-            <SidebarLink
-              label="Billing"
-              href={`/org/${organizationId}/settings/billing`}
-              icon={<DollarSign className="h-5 w-5" />}
-            />
-            <Suspense>
-              <ProFeatureGateDialog
-                organizationId={organizationId}
-                label="Feature Pro"
-                icon={<FileBox className="h-5 w-5" />}
-              />
-            </Suspense>
-          </div>
-          {/* <TeamsList organizationId={organizationId} /> */}
-        </div>
-      </div>
-      <div className="flex flex-col gap-4">
-        <Suspense fallback={<T.P>Loading subscription details...</T.P>}>
-          <SubscriptionCardSmall organizationSlug={organizationSlug} organizationId={organizationId} />
-        </Suspense>
 
+      <div className="flex justify-between items-center mb-4">
+        <SwitcherAndToggle organizationId={organizationId} slimOrganizations={slimOrganizations} />
+      </div>
 
+      <div className="flex flex-col gap-0">
+        <SidebarLink
+          label="Home"
+          href={`/org/${organizationId}`}
+          icon={<Home className="size-4 text-foreground" />}
+        />
+        <SidebarLink
+          label="Projects"
+          href={`/org/${organizationId}/projects`}
+          icon={<Layers className="size-4 text-foreground" />}
+        />
+        <SidebarLink
+          label="Activity"
+          href={`/org/${organizationId}/activity`}
+          icon={<Activity className="size-4 text-foreground" />}
+        />
+        <SidebarLink
+          label="Policies"
+          href={`/org/${organizationId}/policies`}
+          icon={<Shield className="size-4 text-foreground" />}
+        />
+        <SidebarLink
+          label="Drift"
+          href={`/org/${organizationId}/drift`}
+          icon={<GitCompare className="size-4 text-foreground" />}
+        />
+        <SidebarLink
+          label="Docs"
+          href={`/org/${organizationId}/docs`}
+          icon={<FileText className="size-4 text-foreground" />}
+        />
+        <SidebarLink
+          label="Admin"
+          href={`/org/${organizationId}/admin`}
+          icon={<Settings className="size-4 text-foreground" />}
+        />
+        <SidebarLink
+          label="Ask in Slack"
+          href="#"
+          icon={<MessageCircle className="size-4 text-foreground" />}
+        />
       </div>
     </div>
   );
diff --git a/src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/org/[organizationId]/(specific-organization-pages)/page.tsx b/src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/org/[organizationId]/(specific-organization-pages)/page.tsx
index 1b6800a9..334fe73d 100644
--- a/src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/org/[organizationId]/(specific-organization-pages)/page.tsx
+++ b/src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/org/[organizationId]/(specific-organization-pages)/page.tsx
@@ -51,7 +51,7 @@ async function Dashboard({ params, searchParams }: DashboardProps) {
               <FileText className="mr-2 h-4 w-4" />
               Export PDF
             </Button>
-            <Link href={`/org/${organizationId}/create-project`}>
+            <Link href={`/org/${organizationId}/projects/create`}>
               <Button variant="default" size="sm">
                 <Plus className="mr-2 h-4 w-4" />
                 Create Project
diff --git a/src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/org/[organizationId]/(specific-organization-pages)/projects/OrganizationProjectsTable.tsx b/src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/org/[organizationId]/(specific-organization-pages)/projects/OrganizationProjectsTable.tsx
index f1c58186..f81c30b3 100644
--- a/src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/org/[organizationId]/(specific-organization-pages)/projects/OrganizationProjectsTable.tsx
+++ b/src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/org/[organizationId]/(specific-organization-pages)/projects/OrganizationProjectsTable.tsx
@@ -1,8 +1,5 @@
 "use client";
-import { ProjectStatus } from '@/components/Projects/ProjectsCardList';
 import { T } from '@/components/ui/Typography';
-import { ProjectBadge } from '@/components/ui/badge-project';
-import { Button } from '@/components/ui/button';
 import { Card } from '@/components/ui/card';
 import {
   Table,
@@ -12,6 +9,7 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
+import { getRepoDetails } from '@/data/user/repos';
 import type { Tables } from '@/lib/database.types';
 import {
   flexRender,
@@ -23,77 +21,76 @@ import {
   type ColumnDef,
   type SortingState,
 } from '@tanstack/react-table';
-import { format } from 'date-fns';
-import { ChevronsUpDown } from 'lucide-react';
+import { GitBranch } from 'lucide-react';
+import moment from 'moment';
 import Link from 'next/link';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+
+type ProjectWithRepo = Tables<'projects'> & { repoName: string | null };
 
 type Props = {
   projects: Tables<'projects'>[];
 };
 
 export function OrganizationProjectsTable({ projects }: Props) {
+  const [projectsWithRepos, setProjectsWithRepos] = useState<ProjectWithRepo[]>([]);
+
+  useEffect(() => {
+    const fetchRepoDetails = async () => {
+      const updatedProjects = await Promise.all(
+        projects.map(async (project) => {
+          const repoDetails = await getRepoDetails(project.repo_id);
+          return { ...project, repoName: repoDetails?.name ?? null };
+        })
+      );
+      setProjectsWithRepos(updatedProjects);
+    };
+
+    fetchRepoDetails();
+  }, [projects]);
 
-  const columns: ColumnDef<Tables<'projects'>>[] = [
+  const columns: ColumnDef<ProjectWithRepo>[] = [
     {
       accessorKey: 'name',
-      cell: ({ row }) => {
-        return <Link href={`/project/${row.original.slug}`} className='hover:underline'>
+      header: 'Name',
+      cell: ({ row }) => (
+        <Link href={`/project/${row.original.slug}`} className='hover:underline'>
           {row.getValue('name')}
         </Link>
-      },
-      header: ({ column }) => (
-        <Button
-          className="p-0 bg-transparent hover:bg-transparent"
-          variant="ghost"
-          onClick={() => {
-            column.toggleSorting(column.getIsSorted() === 'asc');
-          }}
-        >
-          <div className="capitalize items-center flex gap-2">
-            Project Name
-            <ChevronsUpDown className="size-4" />
-          </div>
-        </Button>
       ),
     },
     {
-      accessorKey: 'project_status',
-      header: 'Status',
+      accessorKey: 'latest_action_on',
+      header: 'Latest Action On',
       cell: ({ row }) => {
-        const status = row.getValue('project_status') as ProjectStatus
-        return (
-          <ProjectBadge variant={row.getValue('project_status')} className='items-center justify-center'>
-            {ProjectStatus[status]}
-          </ProjectBadge>
-        )
+        const date = moment(row.getValue('latest_action_on') as string);
+        return date.format('MMM DD YYYY, HH:mm [hrs]');
       },
     },
     {
-      accessorKey: 'created_at',
-      cell: info => format(new Date(String(info.getValue())), 'dd MMMM yyyy')
-      ,
-      header: ({ column }) => (
-        <Button
-          className="p-0 bg-transparent hover:bg-transparent flex items-center"
-          variant="ghost"
-          onClick={() => {
-            column.toggleSorting(column.getIsSorted() === 'asc');
-          }}
-        >
-          <div className="capitalize flex gap-2 items-center">
-            Created On
-            <ChevronsUpDown className="size-4" />
-          </div>
-        </Button>
+      accessorKey: 'by',
+      header: 'By',
+      cell: ({ row }) => row.getValue('by') || 'unknown',
+    },
+    {
+      accessorKey: 'terraform_working_dir',
+      header: 'Configuration Source / Working Directory',
+      cell: ({ row }) => (
+        <div className="flex items-center bg-muted/50 p-1 rounded-md border w-fit px-2">
+          <GitBranch className="mr-1 h-4 w-4" />
+          <span>
+            {row.original.repoName ? `${row.original.repoName.toLowerCase().replace(/\s+/g, '-').replace(/[A-Z]/g, (letter) => letter.toLowerCase())}` : ''}
+            {row.original.repoName && ((row.getValue('terraform_working_dir') as string) || '') ? '/' : ''}
+            {((row.getValue('terraform_working_dir') as string) || '').replace(/\s+/g, '-').replace(/[A-Z]/g, (letter) => letter.toLowerCase())}
+          </span>
+        </div>
       ),
-      enableSorting: true,
     },
   ];
 
   const [sorting, setSorting] = useState<SortingState>([]);
   const table = useReactTable({
-    data: projects,
+    data: projectsWithRepos,
     columns,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
@@ -106,26 +103,30 @@ export function OrganizationProjectsTable({ projects }: Props) {
   });
 
   if (projects.length === 0) {
-
-    return <Card>
-      <div className='flex justify-center w-full  items-center h-[180px]'>
-        <T.Subtle>No projects found</T.Subtle>
-      </div>
-    </Card>
-
+    return (
+      <Card>
+        <div className='flex justify-center w-full items-center h-[180px]'>
+          <T.Subtle>No projects found</T.Subtle>
+        </div>
+      </Card>
+    );
   }
 
   return (
     <div className="w-full">
-
-      <div className="rounded-md border p-4 bg-background">
+      <Card className="p-4">
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map(headerGroup => (
               <TableRow key={headerGroup.id}>
                 {headerGroup.headers.map(header => (
-                  <TableHead key={header.id}>
-                    {flexRender(header.column.columnDef.header, header.getContext())}
+                  <TableHead key={header.id} className="text-left font-normal text-sm text-muted-foreground">
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
                   </TableHead>
                 ))}
               </TableRow>
@@ -133,9 +134,9 @@ export function OrganizationProjectsTable({ projects }: Props) {
           </TableHeader>
           <TableBody>
             {table.getRowModel().rows.map(row => (
-              <TableRow key={row.id}>
+              <TableRow key={row.id} className="hover:bg-muted/50">
                 {row.getVisibleCells().map(cell => (
-                  <TableCell key={cell.id}>
+                  <TableCell key={cell.id} className="py-2">
                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
                   </TableCell>
                 ))}
@@ -143,7 +144,7 @@ export function OrganizationProjectsTable({ projects }: Props) {
             ))}
           </TableBody>
         </Table>
-      </div>
-    </div >
+      </Card>
+    </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/org/[organizationId]/(specific-organization-pages)/create-project/page.tsx b/src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/org/[organizationId]/(specific-organization-pages)/projects/create/page.tsx
similarity index 100%
rename from src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/org/[organizationId]/(specific-organization-pages)/create-project/page.tsx
rename to src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/org/[organizationId]/(specific-organization-pages)/projects/create/page.tsx
diff --git a/src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/org/[organizationId]/(specific-organization-pages)/projects/page.tsx b/src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/org/[organizationId]/(specific-organization-pages)/projects/page.tsx
index 43e1d557..891ad52c 100644
--- a/src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/org/[organizationId]/(specific-organization-pages)/projects/page.tsx
+++ b/src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/org/[organizationId]/(specific-organization-pages)/projects/page.tsx
@@ -1,14 +1,16 @@
-import { CreateProjectDialog } from "@/components/CreateProjectDialog";
 import { PageHeading } from "@/components/PageHeading";
 import { Pagination } from "@/components/Pagination";
 import { Search } from "@/components/Search";
 import { T } from "@/components/ui/Typography";
+import { Button } from "@/components/ui/button";
 import { getProjects, getProjectsTotalCount } from "@/data/user/projects";
 import {
   organizationParamSchema,
   projectsfilterSchema
 } from "@/utils/zod-schemas/params";
+import { Plus } from "lucide-react";
 import type { Metadata } from "next";
+import Link from "next/link";
 import { Suspense } from "react";
 import type { DashboardProps } from "../page";
 import { OrganizationProjectsTable } from "./OrganizationProjectsTable";
@@ -44,7 +46,7 @@ export default async function Page({
   const filters = projectsfilterSchema.parse(searchParams);
 
   return (
-    <div className="flex flex-col space-y-4 w-full mt-8">
+    <div className="flex flex-col space-y-4 max-w-5xl mt-8">
       <PageHeading
         title="Projects"
         subTitle="You can create projects within teams, or within your organization."
@@ -59,7 +61,12 @@ export default async function Page({
           )}
         </div>
 
-        <CreateProjectDialog organizationId={organizationId} />
+        <Link href={`/org/${organizationId}/projects/create`}>
+          <Button variant="default" size="sm">
+            <Plus className="mr-2 h-4 w-4" />
+            Create Project
+          </Button>
+        </Link>
       </div>
       {
         <Suspense
diff --git a/src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/project/[projectSlug]/(specific-project-pages)/@sidebar/ProjectSidebar.tsx b/src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/project/[projectSlug]/(specific-project-pages)/@sidebar/ProjectSidebar.tsx
index ea335e97..d4c7fb6f 100644
--- a/src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/project/[projectSlug]/(specific-project-pages)/@sidebar/ProjectSidebar.tsx
+++ b/src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/project/[projectSlug]/(specific-project-pages)/@sidebar/ProjectSidebar.tsx
@@ -1,12 +1,11 @@
-import { OrganizationSwitcher } from '@/components/SidebarComponents/OrganizationSwitcher';
 import { DesktopSidebarFallback } from '@/components/SidebarComponents/SidebarFallback';
 import { SwitcherAndToggle } from '@/components/SidebarComponents/SidebarLogo';
 import { SidebarLink } from '@/components/SidebarLink';
-import { fetchSlimOrganizations, getOrganizationSlugByOrganizationId } from '@/data/user/organizations';
+import { fetchSlimOrganizations } from '@/data/user/organizations';
 import { getSlimProjectById, getSlimProjectBySlug } from '@/data/user/projects';
 import { cn } from '@/utils/cn';
 import { projectSlugParamSchema } from '@/utils/zod-schemas/params';
-import { ArrowLeft, Bird, History, Image, Layers, Settings } from 'lucide-react';
+import { Activity, ArrowLeft, FileText, GitCompare, Layers, MessageCircle, Settings, Shield } from 'lucide-react';
 import { Suspense } from 'react';
 
 async function ProjectSidebarInternal({ projectId, projectSlug }: { projectId: string; projectSlug: string }) {
@@ -15,61 +14,60 @@ async function ProjectSidebarInternal({ projectId, projectSlug }: { projectId: s
     getSlimProjectById(projectId),
   ]);
   const organizationId = project.organization_id;
-  const organizationSlug = await getOrganizationSlugByOrganizationId(organizationId);
 
   return (
     <div
       className={cn(
-        'flex flex-col justify-between h-full',
-        'lg:px-3 lg:py-4 lg:pt-2.5 ',
+        'flex flex-col h-full',
+        'lg:px-3 lg:py-4',
       )}
     >
-      <div>
+      <div className="flex justify-between items-center mb-4">
         <SwitcherAndToggle organizationId={organizationId} slimOrganizations={slimOrganizations} />
-        <div className="flex flex-col">
-          <SidebarLink
-            label="Back to organization"
-            href={`/${organizationSlug}`}
-            icon={<ArrowLeft className="h-5 w-5" />}
-          />
-          {project.team_id && (
-            <SidebarLink
-              label="Back to team"
-              href={`/${organizationSlug}/team/${project.team_id}`}
-              icon={<ArrowLeft className="h-5 w-5" />}
-            />
-          )}
-          <SidebarLink
-            label="Project Home"
-            href={`/project/${projectSlug}`}
-            icon={<Layers className="h-5 w-5" />}
-          />
-          <SidebarLink
-            label="Image Generator"
-            href={`/project/${projectSlug}/image-generator`}
-            icon={<Image className="h-5 w-5" />}
-          />
-          <SidebarLink
-            label="Post Generator"
-            href={`/project/${projectSlug}/post-generator`}
-            icon={<Bird className="h-5 w-5" />}
-          />
-          <SidebarLink
-            label="Project Settings"
-            href={`/project/${projectSlug}/settings`}
-            icon={<Settings className="h-5 w-5" />}
-          />
-          <SidebarLink
-            label="Chats"
-            href={`/project/${projectSlug}/chats`}
-            icon={<History className="h-5 w-5" />}
-          />
-        </div>
       </div>
-      <OrganizationSwitcher
-        currentOrganizationId={organizationId}
-        slimOrganizations={slimOrganizations}
-      />
+
+      <div className="flex flex-col gap-0">
+        <SidebarLink
+          label="Back to organization"
+          href={`/org/${organizationId}`}
+          icon={<ArrowLeft className="size-4 text-foreground" />}
+        />
+        <SidebarLink
+          label="Projects"
+          href={`/org/${organizationId}/projects`}
+          icon={<Layers className="size-4 text-foreground" />}
+        />
+        <SidebarLink
+          label="Activity"
+          href={`/org/${organizationId}/activity`}
+          icon={<Activity className="size-4 text-foreground" />}
+        />
+        <SidebarLink
+          label="Policies"
+          href={`/org/${organizationId}/policies`}
+          icon={<Shield className="size-4 text-foreground" />}
+        />
+        <SidebarLink
+          label="Drift"
+          href={`/org/${organizationId}/drift`}
+          icon={<GitCompare className="size-4 text-foreground" />}
+        />
+        <SidebarLink
+          label="Docs"
+          href={`/org/${organizationId}/docs`}
+          icon={<FileText className="size-4 text-foreground" />}
+        />
+        <SidebarLink
+          label="Admin"
+          href={`/org/${organizationId}/admin`}
+          icon={<Settings className="size-4 text-foreground" />}
+        />
+        <SidebarLink
+          label="Ask in Slack"
+          href="#"
+          icon={<MessageCircle className="size-4 text-foreground" />}
+        />
+      </div>
     </div>
   );
 }
@@ -82,4 +80,4 @@ export async function ProjectSidebar({ params }: { params: unknown }) {
       <ProjectSidebarInternal projectId={project.id} projectSlug={project.slug} />
     </Suspense>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/project/[projectSlug]/(specific-project-pages)/layout.tsx b/src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/project/[projectSlug]/(specific-project-pages)/layout.tsx
index 835fda44..314b6179 100644
--- a/src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/project/[projectSlug]/(specific-project-pages)/layout.tsx
+++ b/src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/project/[projectSlug]/(specific-project-pages)/layout.tsx
@@ -36,6 +36,7 @@ export default async function ProjectLayout({
   const project = await getSlimProjectBySlug(projectSlug);
 
   return (
+
     <ApplicationLayoutShell sidebar={sidebar}>
       <div className="">
         <InternalNavbar>
diff --git a/src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/project/[projectSlug]/(specific-project-pages)/page.tsx b/src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/project/[projectSlug]/(specific-project-pages)/page.tsx
index 5286ba5f..1ea43755 100644
--- a/src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/project/[projectSlug]/(specific-project-pages)/page.tsx
+++ b/src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/project/[projectSlug]/(specific-project-pages)/page.tsx
@@ -1,12 +1,9 @@
-import { ChatContainer } from "@/components/chat-container";
-import { T } from "@/components/ui/Typography";
-import { getSlimProjectBySlug } from "@/data/user/projects";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { getProjectById, getSlimProjectBySlug } from "@/data/user/projects";
 import { projectSlugParamSchema } from "@/utils/zod-schemas/params";
-import { nanoid } from "ai";
+import { CalendarIcon, GitBranchIcon, LayersIcon } from "lucide-react";
 import type { Metadata } from "next";
-import { Suspense } from "react";
-import { CommentInput } from "./CommentInput";
-import { ProjectComments } from "./ProjectComments";
 
 type ProjectPageProps = {
   params: {
@@ -20,7 +17,6 @@ export async function generateMetadata({
   const { projectSlug } = projectSlugParamSchema.parse(params);
   const project = await getSlimProjectBySlug(projectSlug);
 
-
   return {
     title: `Project | ${project.name}`,
     description: `View and manage your project ${project.name}`,
@@ -29,32 +25,51 @@ export async function generateMetadata({
 
 export default async function ProjectPage({ params }: { params: unknown }) {
   const { projectSlug } = projectSlugParamSchema.parse(params);
-  const project = await getSlimProjectBySlug(projectSlug);
+  const slimProject = await getSlimProjectBySlug(projectSlug);
+  const project = await getProjectById(slimProject.id);
 
-  const newChatId = nanoid();
   return (
     <div className="space-y-6">
-      <div className="mb-10">
-        <div
-          className="border dotted-bg dark:dotted-bg-dark border-gray-400/50 dark:border-gray-600/50 rounded-xl bg-gray-200/20 dark:bg-slate-950/40 flex justify-center items-center h-full"
-        >
-          <div className="h-[800px] w-full relative">
-            <ChatContainer id={newChatId} project={project} />
+      <Card>
+        <CardHeader>
+          <div className="flex justify-between items-center">
+            <CardTitle>{project.name}</CardTitle>
+            <Badge variant="outline">{project.project_status}</Badge>
           </div>
-
-        </div>
-        <div className="space-y-4 max-w-md">
-          <T.H4>Comments</T.H4>
-          <div className="space-y-2 mb-10">
-            <div className="space-y-4 mt-4 mb-10">
-              <CommentInput projectId={project.id} />
-              <Suspense>
-                <ProjectComments projectId={project.id} />
-              </Suspense>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div className="flex items-center">
+              <CalendarIcon className="mr-2" />
+              <span>Created: {new Date(project.created_at).toLocaleDateString()}</span>
+            </div>
+            <div className="flex items-center">
+              <LayersIcon className="mr-2" />
+              <span>Organization: {project.organization_id}</span>
+            </div>
+            <div className="flex items-center">
+              <GitBranchIcon className="mr-2" />
+              <span>Repository: {project.repo_id}</span>
             </div>
           </div>
-        </div>
-      </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Project Details</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-2">
+            <p><strong>Terraform Working Directory:</strong> {project.terraform_working_dir}</p>
+            <p><strong>Managing State:</strong> {project.is_managing_state ? 'Yes' : 'No'}</p>
+            <p><strong>In Main Branch:</strong> {project.is_in_main_branch ? 'Yes' : 'No'}</p>
+            <p><strong>Generated:</strong> {project.is_generated ? 'Yes' : 'No'}</p>
+            <p><strong>Latest Action:</strong> {project.latest_action_on ? new Date(project.latest_action_on).toLocaleString() : 'No actions'}</p>
+          </div>
+        </CardContent>
+      </Card>
+
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/(dynamic-pages)/(authenticated-pages)/app_admin/(admin-pages)/users/GetLoginLinkDialog.tsx b/src/app/(dynamic-pages)/(authenticated-pages)/app_admin/(admin-pages)/users/GetLoginLinkDialog.tsx
index 899d9ce2..2b373f68 100644
--- a/src/app/(dynamic-pages)/(authenticated-pages)/app_admin/(admin-pages)/users/GetLoginLinkDialog.tsx
+++ b/src/app/(dynamic-pages)/(authenticated-pages)/app_admin/(admin-pages)/users/GetLoginLinkDialog.tsx
@@ -1,3 +1,4 @@
+
 'use client';
 import { Button } from '@/components/ui/button';
 import {
diff --git a/src/app/(dynamic-pages)/(authenticated-pages)/onboarding/OnboardingFlow.tsx b/src/app/(dynamic-pages)/(authenticated-pages)/onboarding/OnboardingFlow.tsx
index 705e368f..369c6baf 100644
--- a/src/app/(dynamic-pages)/(authenticated-pages)/onboarding/OnboardingFlow.tsx
+++ b/src/app/(dynamic-pages)/(authenticated-pages)/onboarding/OnboardingFlow.tsx
@@ -32,6 +32,7 @@ export function UserOnboardingFlow({
   const [currentStep, setCurrentStep] = useState<FLOW_STATE>(
     getInitialFlowState(flowStates, onboardingStatus)
   );
+
   const { replace } = useRouter();
 
   const nextStep = useCallback(() => {
@@ -53,6 +54,8 @@ export function UserOnboardingFlow({
     exit: { opacity: 0, y: -50 },
   };
 
+  console.log(currentStep)
+
   return (
     <AnimatePresence mode="wait">
       <MotionCard
diff --git a/src/app/(dynamic-pages)/(authenticated-pages)/onboarding/OrganizationCreation.tsx b/src/app/(dynamic-pages)/(authenticated-pages)/onboarding/OrganizationCreation.tsx
index 99011dd0..75876368 100644
--- a/src/app/(dynamic-pages)/(authenticated-pages)/onboarding/OrganizationCreation.tsx
+++ b/src/app/(dynamic-pages)/(authenticated-pages)/onboarding/OrganizationCreation.tsx
@@ -24,9 +24,13 @@ export function OrganizationCreation({ onSuccess }: OrganizationCreationProps) {
   });
 
   const createOrgMutation = useMutation({
-    mutationFn: ({ organizationTitle, organizationSlug }: CreateOrganizationSchema) =>
-      createOrganization(organizationTitle, organizationSlug, { isOnboardingFlow: true }),
-    onSuccess: () => {
+    mutationFn: async ({ organizationTitle, organizationSlug }: CreateOrganizationSchema) => {
+      console.log('creating organization mutation');
+      return createOrganization(organizationTitle, organizationSlug, { isOnboardingFlow: true })
+    }
+    ,
+    onSuccess: (data) => {
+      console.log('success', data);
       toast({ title: "Organization created!", description: "Your new organization is ready." });
       onSuccess();
     },
@@ -36,6 +40,7 @@ export function OrganizationCreation({ onSuccess }: OrganizationCreationProps) {
   });
 
   const onSubmit = (data: CreateOrganizationSchema) => {
+    console.log('submitting');
     createOrgMutation.mutate(data);
   };
 
diff --git a/src/app/(dynamic-pages)/(authenticated-pages)/onboarding/page.tsx b/src/app/(dynamic-pages)/(authenticated-pages)/onboarding/page.tsx
index e89e21e5..45077bbb 100644
--- a/src/app/(dynamic-pages)/(authenticated-pages)/onboarding/page.tsx
+++ b/src/app/(dynamic-pages)/(authenticated-pages)/onboarding/page.tsx
@@ -47,7 +47,10 @@ async function OnboardingFlowWrapper({ userId, userEmail }: { userId: string; us
     serverGetLoggedInUser(),
   ]);
   const { userProfile } = onboardingConditions;
+  console.log(userProfile);
   const onboardingStatus = authUserMetadataSchema.parse(user.user_metadata);
+  console.log(onboardingStatus);
+  console.log(userEmail);
 
   return (
     <UserOnboardingFlow
diff --git a/src/components/CreateProjectDialog.tsx b/src/components/CreateProjectDialog.tsx
deleted file mode 100644
index a999007e..00000000
--- a/src/components/CreateProjectDialog.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-"use client";
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { createProjectAction } from "@/data/user/projects";
-import { useSAToastMutation } from "@/hooks/useSAToastMutation";
-import { generateSlug } from "@/lib/utils";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { Layers } from "lucide-react";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-import { useForm, type SubmitHandler } from "react-hook-form";
-import { z } from "zod";
-
-const createProjectFormSchema = z.object({
-  name: z.string().min(1),
-  slug: z.string().min(1),
-});
-
-type CreateProjectDialogProps = {
-  organizationId: string;
-};
-
-export function CreateProjectDialog({
-  organizationId,
-}: CreateProjectDialogProps) {
-  const { register, handleSubmit, setValue } = useForm({
-    resolver: zodResolver(createProjectFormSchema),
-    defaultValues: {
-      name: "",
-      slug: "",
-    },
-  });
-
-  const [open, setOpen] = useState(false);
-  const router = useRouter();
-  const createProjectMutation = useSAToastMutation(
-    async ({
-      organizationId,
-      name,
-      slug,
-    }: { organizationId: string; name: string; slug: string }) =>
-      await createProjectAction({ organizationId, name, slug }),
-    {
-      loadingMessage: "Creating project...",
-      successMessage: "Project created!",
-      errorMessage: "Failed to create project",
-      onSuccess: (response) => {
-        setOpen(false);
-        if (response.status === "success" && response.data) {
-          router.push(`/project/${response.data.slug}`);
-        }
-      },
-    },
-  );
-
-  const onSubmit: SubmitHandler<{ name: string; slug: string }> = (data) => {
-    createProjectMutation.mutate({
-      organizationId,
-      name: data.name,
-      slug: data.slug,
-    });
-  };
-
-  return (
-    <>
-      <Dialog open={open} onOpenChange={setOpen}>
-        <DialogTrigger asChild>
-          <Button variant="default" size="default">
-            <Layers className="mr-2 w-5 h-5" />
-            Create Project
-          </Button>
-        </DialogTrigger>
-        <DialogContent>
-          <DialogHeader>
-            <div className="p-3 w-fit bg-gray-200/50 dark:bg-gray-700/40 mb-2 rounded-lg">
-              <Layers className=" w-6 h-6" />
-            </div>
-            <div className="p-1">
-              <DialogTitle className="text-lg">Create Project</DialogTitle>
-              <DialogDescription className="text-base mt-0">
-                Create a new project and get started.
-              </DialogDescription>
-            </div>
-          </DialogHeader>
-          <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
-            <div>
-              <Label>Project Name</Label>
-              <Input
-                {...register("name")}
-                className="mt-1.5 shadow appearance-none border rounded-lg w-full"
-                onChange={(e) => {
-                  setValue("name", e.target.value);
-                  setValue("slug", generateSlug(e.target.value), {
-                    shouldValidate: true,
-                  });
-                }}
-                id="name"
-                type="text"
-                placeholder="Project Name"
-                disabled={createProjectMutation.isLoading}
-              />
-            </div>
-            <div>
-              <Label>Project Slug</Label>
-              <Input
-                {...register("slug")}
-                className="mt-1.5 shadow appearance-none border rounded-lg w-full"
-                id="slug"
-                type="text"
-                placeholder="project-slug"
-                disabled={createProjectMutation.isLoading}
-              />
-            </div>
-
-            <DialogFooter>
-              <Button
-                type="button"
-                variant="outline"
-                disabled={createProjectMutation.isLoading}
-                className="w-full"
-                onClick={() => {
-                  setOpen(false);
-                }}
-              >
-                Cancel
-              </Button>
-              <Button
-                type="submit"
-                variant="default"
-                className="w-full"
-                disabled={createProjectMutation.isLoading}
-              >
-                {createProjectMutation.isLoading
-                  ? "Creating project..."
-                  : "Create Project"}
-              </Button>
-            </DialogFooter>
-          </form>
-        </DialogContent>
-      </Dialog>
-    </>
-  );
-}
diff --git a/src/components/CreateProjectForm.tsx b/src/components/CreateProjectForm.tsx
index ef2c4422..02ad532a 100644
--- a/src/components/CreateProjectForm.tsx
+++ b/src/components/CreateProjectForm.tsx
@@ -3,166 +3,269 @@
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { createProjectAction } from "@/data/user/projects";
+import { useSAToastMutation } from "@/hooks/useSAToastMutation";
+import { generateSlug } from "@/lib/utils";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { motion } from "framer-motion";
-import { Check, Github, MonitorOff, Play, RotateCw } from "lucide-react";
+import { Check, Github } from "lucide-react";
+import { useRouter } from "next/navigation";
 import { useState } from 'react';
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+import { InputTags } from "./InputTags";
 import { T } from "./ui/Typography";
 
 const MotionCard = motion(Card);
 
+const createProjectFormSchema = z.object({
+    name: z.string().min(1, "Project name is required"),
+    repository: z.number().int().positive("Repository ID must be a positive integer"),
+    terraformDir: z.string().min(1, "Terraform working directory is required"),
+    managedState: z.boolean(),
+    labels: z.array(z.string()),
+});
+
+type CreateProjectFormData = z.infer<typeof createProjectFormSchema>;
+
+const repositories = [
+    { id: 12, name: 'Repository 1' },
+    { id: 123, name: 'Repository 2' },
+    { id: 41, name: 'Repository 3' },
+    { id: 24, name: 'Repository 4' },
+    { id: 124, name: 'Repository 5' },
+];
+
 export default function CreateProjectForm({ organizationId }: { organizationId: string }) {
-    const [selectedRepo, setSelectedRepo] = useState('');
-    const [autoQueueRun, setAutoQueueRun] = useState('apply-before-merge');
+    const [selectedRepo, setSelectedRepo] = useState(repositories[0].id);
+    const router = useRouter();
+
+    const { control, handleSubmit, setValue, watch } = useForm<CreateProjectFormData>({
+        resolver: zodResolver(createProjectFormSchema),
+        defaultValues: {
+            name: "",
+            repository: repositories[0].id,
+            terraformDir: "",
+            managedState: true,
+            labels: [],
+        },
+    });
+
+    const createProjectMutation = useSAToastMutation(
+        async (data: CreateProjectFormData) => {
+            const slug = generateSlug(data.name);
+            return await createProjectAction({
+                organizationId,
+                name: data.name,
+                slug,
+                repoId: data.repository,
+                terraformWorkingDir: data.terraformDir,
+                isManagingState: data.managedState,
+                labels: data.labels,
+            });
+        },
+        {
+            loadingMessage: "Creating project...",
+            successMessage: "Project created!",
+            errorMessage: "Failed to create project",
+            onSuccess: (response) => {
+                if (response.status === "success" && response.data) {
+                    router.push(`/project/${response.data.slug}`);
+                }
+            },
+        },
+    );
+
+    const onSubmit = (data: CreateProjectFormData) => {
+        createProjectMutation.mutate(data);
+    };
+
 
-    const repositories = [
-        { id: 'repo1', name: 'Repository 1' },
-        { id: 'repo2', name: 'Repository 2' },
-        { id: 'repo3', name: 'Repository 3' },
-        { id: 'repo4', name: 'Repository 4' },
-        { id: 'repo5', name: 'Repository 5' },
-    ];
 
     return (
         <div className="p-6 max-w-4xl mx-auto">
-            <div className="mb-6 flex justify-between items-center">
-                <div>
-                    <T.H3>Create new Project</T.H3>
-                    <T.P className="text-muted-foreground">Create a new project within your organization.</T.P>
-                </div>
-                <div className="flex space-x-2 mt-6">
-                    <Button variant="outline">Cancel</Button>
-                    <Button>Create Project</Button>
-                </div>
-            </div>
-
-            <MotionCard
-                className="mb-6"
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ delay: 0.1 }}
-            >
-                <CardHeader>
-                    <div className="flex flex-col">
-                        <CardTitle className="text-lg ">Project Details</CardTitle>
-                        <CardDescription className="text-sm text-muted-foreground">Provide the name of your project</CardDescription>
-                    </div>
-                </CardHeader>
-                <CardContent >
-                    <form className="space-y-6">
-                        <div>
-                            <Label htmlFor="projectName">Project Name *</Label>
-                            <Input id="projectName" placeholder="Enter workspace name" className="mt-1" />
-                        </div>
-                    </form>
-                </CardContent>
-            </MotionCard>
-
-            <MotionCard
-                className="mb-6"
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ delay: 0.2 }}
-            >
-                <CardHeader className="flex flex-row justify-between items-center w-full">
-                    <div className="flex flex-col">
-                        <CardTitle className="text-lg">Select a repository</CardTitle>
-                        <CardDescription className="text-sm text-muted-foreground">Choose the repository for your project</CardDescription>
-                    </div>
-                    <Badge variant="outline" size="lg" className="flex py-1.5 items-center space-x-1">
-                        <Github className="h-4 w-4 mr-1" />
-                        <span>Connected to GitHub</span>
-                        <Check className="h-3 w-3 ml-1" />
-                    </Badge>
-                </CardHeader>
-                <CardContent>
-                    <ScrollArea className="w-full whitespace-nowrap rounded-md border">
-                        <div className="flex w-max space-x-4 p-4">
-                            {repositories.map((repo, index) => (
-                                <MotionCard
-                                    key={repo.id}
-                                    className={`w-[200px] cursor-pointer ${selectedRepo === repo.id ? 'ring-2 ring-primary' : ''}`}
-                                    whileHover={{ scale: 1.05 }}
-                                    whileTap={{ scale: 0.95 }}
-                                    onClick={() => setSelectedRepo(repo.id)}
-                                    initial={{ opacity: 0, y: 20 }}
-                                    animate={{ opacity: 1, y: 0 }}
-                                    transition={{ delay: index * 0.1 }}
-                                >
-                                    <CardContent className="flex items-center justify-center p-6">
-                                        <Github className="mr-2 h-6 w-6" />
-                                        <span>{repo.name}</span>
-                                    </CardContent>
-                                </MotionCard>
-                            ))}
-                        </div>
-                        <ScrollBar orientation="horizontal" />
-                    </ScrollArea>
-                </CardContent>
-            </MotionCard>
-
-            <MotionCard
-                className="mb-6"
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ delay: 0.3 }}
-            >
-                <CardHeader>
-                    <div className="flex flex-col">
-                        <CardTitle className="text-lg ">Terraform Configuration</CardTitle>
-                        <CardDescription className="text-sm text-muted-foreground">Specify the working directory for Terraform</CardDescription>
+            <form onSubmit={(e) => {
+                e.preventDefault();
+                handleSubmit(onSubmit)(e);
+            }}>
+                {/* {Object.entries(watch()).map(([key, value]) => (
+                    <div key={key}>
+                        <strong>{key}:</strong> {JSON.stringify(value)}
                     </div>
-                </CardHeader>
-                <CardContent>
+                ))} */}
+                <div className="mb-6 flex justify-between items-center">
                     <div>
-                        <Label htmlFor="terraformDir">Terraform Working Directory *</Label>
-                        <Input id="terraformDir" placeholder="Enter directory path" className="mt-1" />
+                        <T.H3>Create new Project</T.H3>
+                        <T.P className="text-muted-foreground">Create a new project within your organization.</T.P>
                     </div>
-                </CardContent>
-            </MotionCard>
-
-            <MotionCard
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ delay: 0.4 }}
-            >
-                <CardHeader>
-                    <div className="flex flex-col">
-                        <CardTitle className="text-lg ">Auto Queue Runs</CardTitle>
-                        <CardDescription className="text-sm text-muted-foreground">Configure when to automatically queue runs</CardDescription>
+                    <div className="flex space-x-2 mt-6">
+                        <Button type="button" variant="outline" onClick={() => router.back()}>Cancel</Button>
+                        <Button type="submit" disabled={createProjectMutation.isLoading}>
+                            {createProjectMutation.isLoading ? "Creating..." : "Create Project"}
+                        </Button>
                     </div>
-                </CardHeader>
-                <CardContent>
-                    <div className="grid grid-cols-3 gap-4">
-                        {[
-                            { id: 'apply-before-merge', label: 'Apply Before Merge', icon: Play },
-                            { id: 'apply-after-merge', label: 'Apply After Merge', icon: RotateCw },
-                            { id: 'never', label: 'Never', icon: MonitorOff },
-                        ].map((option, index) => (
-                            <MotionCard
-                                key={option.id}
-                                className={`cursor-pointer ${autoQueueRun === option.id ? 'ring-2 ring-primary' : ''}`}
-                                whileHover={{ scale: 1.05 }}
-                                whileTap={{ scale: 0.95 }}
-                                onClick={() => setAutoQueueRun(option.id)}
-                                initial={{ opacity: 0, y: 20 }}
-                                animate={{ opacity: 1, y: 0 }}
-                                transition={{ delay: index * 0.1 }}
-                            >
-                                <CardContent className="flex flex-col items-center justify-center p-6">
-                                    <option.icon className="h-6 w-6 mb-2" />
-                                    <span>{option.label}</span>
-                                    <p className="text-xs text-gray-500 text-center mt-2">
-                                        Provide information regarding your project.
-                                    </p>
-                                </CardContent>
-                            </MotionCard>
-                        ))}
-                    </div>
-                </CardContent>
-            </MotionCard>
+                </div>
+
+                <MotionCard
+                    className="mb-6"
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: 0.1 }}
+                >
+                    <CardHeader>
+                        <div className="flex flex-col">
+                            <CardTitle className="text-lg ">Project Details</CardTitle>
+                            <CardDescription className="text-sm text-muted-foreground">Provide the name of your project</CardDescription>
+                        </div>
+                    </CardHeader>
+                    <CardContent >
+                        <div>
+                            <Label htmlFor="name">Project Name *</Label>
+                            <Controller
+                                name="name"
+                                control={control}
+                                render={({ field }) => (
+                                    <Input
+                                        id="name"
+                                        placeholder="Enter workspace name"
+                                        className="mt-1"
+                                        {...field}
+                                    />
+                                )}
+                            />
+                        </div>
+                    </CardContent>
+                </MotionCard>
+
+                <MotionCard
+                    className="mb-6"
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: 0.2 }}
+                >
+                    <CardHeader className="flex flex-row justify-between items-center w-full">
+                        <div className="flex flex-col">
+                            <CardTitle className="text-lg">Select a repository</CardTitle>
+                            <CardDescription className="text-sm text-muted-foreground">Choose the repository for your project</CardDescription>
+                        </div>
+                        <Badge variant="outline" size="lg" className="flex py-1.5 items-center space-x-1">
+                            <Github className="h-4 w-4 mr-1" />
+                            <span>Connected to GitHub</span>
+                            <Check className="h-3 w-3 ml-1" />
+                        </Badge>
+                    </CardHeader>
+                    <CardContent>
+                        <ScrollArea className="w-full whitespace-nowrap rounded-md border">
+                            <div className="flex w-max space-x-4 p-4">
+                                {repositories.map((repo, index) => (
+                                    <MotionCard
+                                        key={repo.id}
+                                        className={`w-[200px] cursor-pointer ${selectedRepo === repo.id ? 'ring-2 ring-primary' : ''}`}
+                                        whileHover={{ scale: 1.05 }}
+                                        whileTap={{ scale: 0.95 }}
+                                        onClick={() => {
+                                            setSelectedRepo(repo.id);
+                                            setValue("repository", repo.id);
+                                        }}
+                                        initial={{ opacity: 0, y: 20 }}
+                                        animate={{ opacity: 1, y: 0 }}
+                                        transition={{ delay: index * 0.1 }}
+                                    >
+                                        <CardContent className="flex items-center justify-center p-6">
+                                            <Github className="mr-2 h-6 w-6" />
+                                            <span>{repo.name}</span>
+                                        </CardContent>
+                                    </MotionCard>
+                                ))}
+                            </div>
+                            <ScrollBar orientation="horizontal" />
+                        </ScrollArea>
+                    </CardContent>
+                </MotionCard>
+
+                <MotionCard
+                    className="mb-6"
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: 0.3 }}
+                >
+                    <CardHeader>
+                        <div className="flex flex-col">
+                            <CardTitle className="text-lg ">Terraform Configuration</CardTitle>
+                            <CardDescription className="text-sm text-muted-foreground">Specify the working directory for Terraform</CardDescription>
+                        </div>
+                    </CardHeader>
+                    <CardContent>
+                        <div>
+                            <Label htmlFor="terraformDir">Terraform Working Directory *</Label>
+                            <Controller
+                                name="terraformDir"
+                                control={control}
+                                render={({ field }) => (
+                                    <Input
+                                        id="terraformDir"
+                                        placeholder="Enter directory path"
+                                        className="mt-1"
+                                        {...field}
+                                    />
+                                )}
+                            />
+                        </div>
+                    </CardContent>
+                </MotionCard>
+
+                <MotionCard
+                    className="mb-6"
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: 0.4 }}
+                >
+                    <CardHeader>
+                        <div className="flex flex-col">
+                            <CardTitle className="text-lg ">Additional Settings</CardTitle>
+                            <CardDescription className="text-sm text-muted-foreground">Configure additional project settings</CardDescription>
+                        </div>
+                    </CardHeader>
+                    <CardContent>
+                        <div className="space-y-4">
+                            <div className="flex items-center space-x-2">
+                                <Controller
+                                    name="managedState"
+                                    control={control}
+                                    render={({ field }) => (
+                                        <Checkbox
+                                            id="managedState"
+                                            checked={field.value}
+                                            onCheckedChange={field.onChange}
+                                        />
+                                    )}
+                                />
+                                <Label htmlFor="managedState">Managed State</Label>
+                            </div>
+                            <div>
+                                <Label htmlFor="labels">Labels</Label>
+                                <Controller
+                                    name="labels"
+                                    control={control}
+                                    render={({ field }) => (
+                                        <InputTags
+                                            id="labels"
+                                            value={field.value}
+                                            onChange={field.onChange}
+                                            placeholder="Add labels"
+                                            className="mt-1"
+                                        />
+                                    )}
+                                />
+                            </div>
+                        </div>
+                    </CardContent>
+                </MotionCard>
+            </form>
         </div>
     );
 }
\ No newline at end of file
diff --git a/src/components/InputTags.tsx b/src/components/InputTags.tsx
new file mode 100644
index 00000000..4146e62e
--- /dev/null
+++ b/src/components/InputTags.tsx
@@ -0,0 +1,72 @@
+'use client'
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input, InputProps } from "@/components/ui/input";
+import { XIcon } from "lucide-react";
+import { Dispatch, SetStateAction, forwardRef, useState } from "react";
+
+type InputTagsProps = InputProps & {
+    value: string[];
+    onChange: Dispatch<SetStateAction<string[]>>;
+};
+
+export const InputTags = forwardRef<HTMLInputElement, InputTagsProps>(
+    ({ value, onChange, ...props }, ref) => {
+        const [pendingDataPoint, setPendingDataPoint] = useState("");
+
+        const addPendingDataPoint = () => {
+            if (pendingDataPoint.trim()) {
+                const newDataPoints = new Set([...value, pendingDataPoint.trim()]);
+                onChange(Array.from(newDataPoints));
+                setPendingDataPoint("");
+            }
+        };
+
+        return (
+            <>
+                <div className="flex gap-2">
+                    <Input
+                        value={pendingDataPoint}
+                        onChange={(e) => setPendingDataPoint(e.target.value)}
+                        onKeyDown={(e) => {
+                            if (e.key === "Enter") {
+                                e.preventDefault();
+                                addPendingDataPoint();
+                            }
+                        }}
+                        className="rounded-r-none"
+                        {...props}
+                        ref={ref}
+                    />
+                    <Button
+                        type="button"
+                        variant="secondary"
+                        className=" border mt-1 border-l-0"
+                        onClick={addPendingDataPoint}
+                    >
+                        Add
+                    </Button>
+                </div>
+                {value.length > 0 && (
+                    <div className=" rounded-md mt-1 min-h-[2.5rem] overflow-y-auto flex gap-2 flex-wrap items-center">
+                        {value.map((item, idx) => (
+                            <Badge key={idx} variant="secondary">
+                                {item}
+                                <button
+                                    type="button"
+                                    className="w-3 ml-2"
+                                    onClick={() => {
+                                        onChange(value.filter((i) => i !== item));
+                                    }}
+                                >
+                                    <XIcon className="w-3" />
+                                </button>
+                            </Badge>
+                        ))}
+                    </div>
+                )}
+            </>
+        );
+    }
+);
\ No newline at end of file
diff --git a/src/components/SidebarComponents/OrganizationSwitcher.tsx b/src/components/SidebarComponents/OrganizationSwitcher.tsx
index 8beb58b1..780de508 100644
--- a/src/components/SidebarComponents/OrganizationSwitcher.tsx
+++ b/src/components/SidebarComponents/OrganizationSwitcher.tsx
@@ -75,7 +75,7 @@ export function OrganizationSwitcher({
                   key={organization.id}
                   onSelect={() => {
                     setIsPopoverOpen(false);
-                    router.push(`/${organization.slug}`);
+                    router.push(`/org/${organization.id}`);
                   }}
                   className="text-sm flex items-start"
                 >
diff --git a/src/components/SidebarLink.tsx b/src/components/SidebarLink.tsx
index 0066d34b..d7c3018e 100644
--- a/src/components/SidebarLink.tsx
+++ b/src/components/SidebarLink.tsx
@@ -4,6 +4,7 @@ import { MOBILE_MEDIA_QUERY_MATCHER } from '@/constants';
 import { SidebarVisibilityContext } from '@/contexts/SidebarVisibilityContext';
 import useMatchMedia from '@/hooks/useMatchMedia';
 import Link from 'next/link';
+import { usePathname } from 'next/navigation';
 import React, { useContext } from 'react';
 
 type SidebarLinkProps = {
@@ -15,16 +16,24 @@ type SidebarLinkProps = {
 export function SidebarLink({ label, href, icon }: SidebarLinkProps) {
   const { setVisibility } = useContext(SidebarVisibilityContext);
   const isMobile = useMatchMedia(MOBILE_MEDIA_QUERY_MATCHER);
+  const pathname = usePathname();
+  const isActive = pathname === href;
 
   return (
     <div
       key={href}
-      className=" hover:cursor-pointer hover:text-foreground text-muted-foreground rounded-md hover:bg-accent group w-full flex items-center pr-2"
+      className={`px-1 hover:cursor-pointer rounded-md w-full flex items-center pr-2 ${isActive
+        ? 'bg-muted text-foreground'
+        : 'hover:text-foreground text-muted-foreground hover:bg-accent'
+        } group`}
     >
-      <div className="p-2 group-hover:text-foreground">{icon}</div>
+      <div className={`p-2 pr-0.5 ${isActive ? 'text-foreground' : 'group-hover:text-foreground'}`}>
+        {icon}
+      </div>
       <Link
         onClick={() => isMobile && setVisibility(false)}
-        className="p-2 w-full text-sm group-hover:text-gray-800 dark:group-hover:text-slate-300"
+        className={`p-2 w-full text-sm ${isActive ? 'text-foreground' : 'text-foreground group-hover:text-foreground'
+          }`}
         href={href}
       >
         {label}
diff --git a/src/data/user/organizations.ts b/src/data/user/organizations.ts
index f53bb934..0bd3477e 100644
--- a/src/data/user/organizations.ts
+++ b/src/data/user/organizations.ts
@@ -102,33 +102,12 @@ export const createOrganization = async (
 
   if (isOnboardingFlow) {
     // insert 3 dummy projects
-
-    const { error: projectError } = await supabaseClient
-      .from('projects')
-      .insert([
-        {
-          organization_id: organizationId,
-          name: 'Project 1',
-        },
-        {
-          organization_id: organizationId,
-          name: 'Project 2',
-        },
-        {
-          organization_id: organizationId,
-          name: 'Project 3',
-        },
-      ]);
-
-    if (projectError) {
-      return { status: 'error', message: projectError.message };
-    }
-
     const { error: updateError } = await supabaseClient
       .from('user_private_info')
       .update({ default_organization: organizationId })
       .eq('id', user.id);
 
+    console.log('updateError', updateError);
     if (updateError) {
       return { status: 'error', message: updateError.message };
     }
@@ -152,6 +131,8 @@ export const createOrganization = async (
     if (refreshSessionResponse.status === 'error') {
       return refreshSessionResponse;
     }
+
+    throw new Error('failed');
   }
 
   return {
diff --git a/src/data/user/projects.tsx b/src/data/user/projects.tsx
index 44351c1e..02055915 100644
--- a/src/data/user/projects.tsx
+++ b/src/data/user/projects.tsx
@@ -66,10 +66,18 @@ export const createProjectAction = async ({
   organizationId,
   name,
   slug,
+  repoId,
+  terraformWorkingDir,
+  isManagingState,
+  labels,
 }: {
   organizationId: string;
   name: string;
   slug: string;
+  repoId: number;
+  terraformWorkingDir: string;
+  isManagingState: boolean;
+  labels: string[];
 }): Promise<SAPayload<Tables<"projects">>> => {
   "use server";
   const supabaseClient = createSupabaseUserServerActionClient();
@@ -79,12 +87,24 @@ export const createProjectAction = async ({
       organization_id: organizationId,
       name,
       slug,
+      repo_id: repoId,
+      terraform_working_dir: terraformWorkingDir,
+      is_managing_state: isManagingState,
+      is_in_main_branch: true,
+      is_generated: true,
+      project_status: "draft",
+      latest_action_on: new Date().toISOString(),
+      labels,
+
     })
     .select("*")
     .single();
 
+  console.log('createProjectAction', project);
+
 
   if (error) {
+    console.log('createProjectAction', error);
     return {
       status: 'error',
       message: error.message,
@@ -92,8 +112,8 @@ export const createProjectAction = async ({
   }
 
 
-  revalidatePath("/[organizationSlug]", "layout");
-  revalidatePath("/[organizationSlug]/projects", "layout");
+  revalidatePath(`/org/[organizationId]`, "layout");
+  revalidatePath(`/org/[organizationId]/projects/`, "layout");
 
   return {
     status: 'success',
diff --git a/src/data/user/repos.ts b/src/data/user/repos.ts
new file mode 100644
index 00000000..6e4ebcb9
--- /dev/null
+++ b/src/data/user/repos.ts
@@ -0,0 +1,18 @@
+'use server';
+
+import { createSupabaseUserServerComponentClient } from '@/supabase-clients/user/createSupabaseUserServerComponentClient';
+
+export async function getRepoDetails(repoId: number) {
+  const supabaseClient = createSupabaseUserServerComponentClient();
+  const { data, error } = await supabaseClient
+    .from('repos')
+    .select('id, name')
+    .eq('id', repoId)
+    .single();
+
+  if (error) {
+    throw error;
+  }
+
+  return data;
+}
diff --git a/src/lib/database.types.ts b/src/lib/database.types.ts
index e86b6f49..1ba527e4 100644
--- a/src/lib/database.types.ts
+++ b/src/lib/database.types.ts
@@ -2,7 +2,7 @@ export type Json =
   | string
   | number
   | boolean
-  | null
+  | null 
   | { [key: string]: Json | undefined }
   | Json[]
 
@@ -681,36 +681,119 @@ export type Database = {
       }
       projects: {
         Row: {
+          configuration_yaml: string | null
           created_at: string
+          deleted_at: string | null
           id: string
+          is_generated: boolean | null
+          is_in_main_branch: boolean | null
+          is_managing_state: boolean | null
+          labels: string[] | null
+          latest_action_on: string | null
           name: string
           organization_id: string
           project_status: Database["public"]["Enums"]["project_status"]
+          repo_id: number
           slug: string
+          status: string | null
           team_id: number | null
+          terraform_working_dir: string | null
           updated_at: string
         }
         Insert: {
+          configuration_yaml?: string | null
           created_at?: string
+          deleted_at?: string | null
           id?: string
+          is_generated?: boolean | null
+          is_in_main_branch?: boolean | null
+          is_managing_state?: boolean | null
+          labels?: string[] | null
+          latest_action_on?: string | null
           name: string
           organization_id: string
           project_status?: Database["public"]["Enums"]["project_status"]
+          repo_id?: number
           slug?: string
+          status?: string | null
           team_id?: number | null
+          terraform_working_dir?: string | null
           updated_at?: string
         }
         Update: {
+          configuration_yaml?: string | null
           created_at?: string
+          deleted_at?: string | null
           id?: string
+          is_generated?: boolean | null
+          is_in_main_branch?: boolean | null
+          is_managing_state?: boolean | null
+          labels?: string[] | null
+          latest_action_on?: string | null
           name?: string
           organization_id?: string
           project_status?: Database["public"]["Enums"]["project_status"]
+          repo_id?: number
           slug?: string
+          status?: string | null
           team_id?: number | null
+          terraform_working_dir?: string | null
           updated_at?: string
         }
-        Relationships: []
+        Relationships: [
+          {
+            foreignKeyName: "fk_projects_organization"
+            columns: ["organization_id"]
+            isOneToOne: false
+            referencedRelation: "organizations"
+            referencedColumns: ["id"]
+          },
+          {
+            foreignKeyName: "fk_projects_repo"
+            columns: ["repo_id"]
+            isOneToOne: false
+            referencedRelation: "repos"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
+      repos: {
+        Row: {
+          created_at: string | null
+          deleted_at: string | null
+          digger_config: string | null
+          id: number
+          name: string
+          organization_id: string | null
+          updated_at: string | null
+        }
+        Insert: {
+          created_at?: string | null
+          deleted_at?: string | null
+          digger_config?: string | null
+          id?: number
+          name: string
+          organization_id?: string | null
+          updated_at?: string | null
+        }
+        Update: {
+          created_at?: string | null
+          deleted_at?: string | null
+          digger_config?: string | null
+          id?: number
+          name?: string
+          organization_id?: string | null
+          updated_at?: string | null
+        }
+        Relationships: [
+          {
+            foreignKeyName: "fk_repos_organization"
+            columns: ["organization_id"]
+            isOneToOne: false
+            referencedRelation: "organizations"
+            referencedColumns: ["id"]
+          },
+        ]
       }
       subscriptions: {
         Row: {
diff --git a/supabase/migrations/20240718105020_add_new_tables.sql b/supabase/migrations/20240718105020_add_new_tables.sql
new file mode 100644
index 00000000..daceb0f1
--- /dev/null
+++ b/supabase/migrations/20240718105020_add_new_tables.sql
@@ -0,0 +1,35 @@
+CREATE TABLE "public"."repos" (
+  "id" bigserial NOT NULL,
+  "created_at" timestamptz DEFAULT now(),
+  "updated_at" timestamptz,
+  "deleted_at" timestamptz,
+  "name" text,
+  "organization_id" uuid,
+  "digger_config" text,
+  PRIMARY KEY ("id"),
+  CONSTRAINT "fk_repos_organization" FOREIGN KEY ("organization_id") REFERENCES "public"."organizations" ("id") ON UPDATE NO ACTION ON DELETE NO ACTION
+);
+-- Create index "idx_org_repo" to table: "repos"
+CREATE UNIQUE INDEX "idx_org_repo" ON "public"."repos" ("name", "organization_id");
+-- Create index "idx_repos_deleted_at" to table: "repos"
+CREATE INDEX "idx_repos_deleted_at" ON "public"."repos" ("deleted_at");
+-- Create "projects" table
+
+ALTER TABLE "public"."projects" 
+  ADD COLUMN "latest_action_on" text,
+  ADD COLUMN "repo_id" bigserial,
+  ADD COLUMN "configuration_yaml" text,
+  ADD COLUMN "status" text,
+  ADD COLUMN "is_generated" boolean,
+  ADD COLUMN "is_in_main_branch" boolean,
+  ADD COLUMN "deleted_at" timestamptz,
+  ADD COLUMN "terraform_working_dir" text,
+  ADD COLUMN "is_managing_state" boolean,
+  ADD COLUMN "labels" text[];
+
+
+ALTER TABLE "public"."projects"
+  ADD CONSTRAINT "fk_projects_organization" FOREIGN KEY ("organization_id") REFERENCES "public"."organizations" ("id") ON UPDATE NO ACTION ON DELETE NO ACTION;
+
+ALTER TABLE "public"."projects"
+  ADD CONSTRAINT "fk_projects_repo" FOREIGN KEY ("repo_id") REFERENCES "public"."repos" ("id") ON UPDATE NO ACTION ON DELETE NO ACTION;
\ No newline at end of file
diff --git a/supabase/migrations/20240718184709_add_user_projects.sql b/supabase/migrations/20240718184709_add_user_projects.sql
new file mode 100644
index 00000000..7ea9d500
--- /dev/null
+++ b/supabase/migrations/20240718184709_add_user_projects.sql
@@ -0,0 +1,4 @@
+-- Add NOT NULL constraint to the name column in the repos table
+ALTER TABLE "public"."repos"
+ALTER COLUMN "name" SET NOT NULL;
+