From 0464163e303333a7ee9eade38d62d3007d3be8f1 Mon Sep 17 00:00:00 2001
From: Rohit Dhakane <rohitdhakane6@gmail.com>
Date: Fri, 28 Feb 2025 12:47:14 +0530
Subject: [PATCH 1/8] feat: initialize studio app with package.json, tsconfig,
 and .gitignore

---
 apps/studio/.gitignore    |  3 +++
 apps/studio/package.json  | 12 ++++++++++++
 apps/studio/tsconfig.json |  5 +++++
 3 files changed, 20 insertions(+)
 create mode 100644 apps/studio/.gitignore
 create mode 100644 apps/studio/package.json
 create mode 100644 apps/studio/tsconfig.json

diff --git a/apps/studio/.gitignore b/apps/studio/.gitignore
new file mode 100644
index 0000000..3a254f0
--- /dev/null
+++ b/apps/studio/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+# Keep environment variables out of version control
+.env
\ No newline at end of file
diff --git a/apps/studio/package.json b/apps/studio/package.json
new file mode 100644
index 0000000..3f62d06
--- /dev/null
+++ b/apps/studio/package.json
@@ -0,0 +1,12 @@
+{
+    "name": "studio",
+    "version": "0.0.0",
+    "scripts": {
+      "dev": "prisma studio --schema ../../packages/db/prisma/schema.prisma --port 3005",
+      "clean": "git clean -xdf .cache .turbo dist node_modules",
+      "typecheck": "tsc --noEmit --emitDeclarationOnly false"
+    },
+    "devDependencies": {
+      "prisma": "6.3.1"
+    }
+  }
\ No newline at end of file
diff --git a/apps/studio/tsconfig.json b/apps/studio/tsconfig.json
new file mode 100644
index 0000000..61b87a1
--- /dev/null
+++ b/apps/studio/tsconfig.json
@@ -0,0 +1,5 @@
+{
+    "extends": "@repo/typescript-config/nextjs.json",
+    "include": ["**/*.ts", "**/*.tsx"],
+    "exclude": ["node_modules"]
+  }
\ No newline at end of file

From 02c86439d3935eb46cb6cd881e999f65b60049d3 Mon Sep 17 00:00:00 2001
From: Rohit Dhakane <rohitdhakane6@gmail.com>
Date: Fri, 28 Feb 2025 13:56:12 +0530
Subject: [PATCH 2/8] feat: group all content in main

---
 apps/web/app/{ => (main)}/dashboard/page.tsx       |  0
 apps/web/app/(main)/layout.tsx                     | 12 ++++++++++++
 apps/web/app/{ => (main)}/page.module.css          |  0
 apps/web/app/{ => (main)}/page.tsx                 |  0
 apps/web/app/{ => (main)}/payment/cancel/page.tsx  |  0
 apps/web/app/{ => (main)}/payment/success/page.tsx |  0
 apps/web/app/{ => (main)}/payment/verify/page.tsx  |  0
 apps/web/app/{ => (main)}/pricing/page.tsx         |  0
 apps/web/app/{ => (main)}/purchases/page.tsx       |  0
 apps/web/app/{ => (main)}/train/page.tsx           |  3 +--
 apps/web/app/layout.tsx                            |  4 ----
 11 files changed, 13 insertions(+), 6 deletions(-)
 rename apps/web/app/{ => (main)}/dashboard/page.tsx (100%)
 create mode 100644 apps/web/app/(main)/layout.tsx
 rename apps/web/app/{ => (main)}/page.module.css (100%)
 rename apps/web/app/{ => (main)}/page.tsx (100%)
 rename apps/web/app/{ => (main)}/payment/cancel/page.tsx (100%)
 rename apps/web/app/{ => (main)}/payment/success/page.tsx (100%)
 rename apps/web/app/{ => (main)}/payment/verify/page.tsx (100%)
 rename apps/web/app/{ => (main)}/pricing/page.tsx (100%)
 rename apps/web/app/{ => (main)}/purchases/page.tsx (100%)
 rename apps/web/app/{ => (main)}/train/page.tsx (99%)

diff --git a/apps/web/app/dashboard/page.tsx b/apps/web/app/(main)/dashboard/page.tsx
similarity index 100%
rename from apps/web/app/dashboard/page.tsx
rename to apps/web/app/(main)/dashboard/page.tsx
diff --git a/apps/web/app/(main)/layout.tsx b/apps/web/app/(main)/layout.tsx
new file mode 100644
index 0000000..a3dd5db
--- /dev/null
+++ b/apps/web/app/(main)/layout.tsx
@@ -0,0 +1,12 @@
+import { Appbar } from "@/components/Appbar";
+import { Footer } from "@/components/Footer";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="relative flex min-h-screen flex-col">
+      <Appbar />
+      <main className="flex-1">{children}</main>
+      <Footer />
+    </div>
+  );
+}
diff --git a/apps/web/app/page.module.css b/apps/web/app/(main)/page.module.css
similarity index 100%
rename from apps/web/app/page.module.css
rename to apps/web/app/(main)/page.module.css
diff --git a/apps/web/app/page.tsx b/apps/web/app/(main)/page.tsx
similarity index 100%
rename from apps/web/app/page.tsx
rename to apps/web/app/(main)/page.tsx
diff --git a/apps/web/app/payment/cancel/page.tsx b/apps/web/app/(main)/payment/cancel/page.tsx
similarity index 100%
rename from apps/web/app/payment/cancel/page.tsx
rename to apps/web/app/(main)/payment/cancel/page.tsx
diff --git a/apps/web/app/payment/success/page.tsx b/apps/web/app/(main)/payment/success/page.tsx
similarity index 100%
rename from apps/web/app/payment/success/page.tsx
rename to apps/web/app/(main)/payment/success/page.tsx
diff --git a/apps/web/app/payment/verify/page.tsx b/apps/web/app/(main)/payment/verify/page.tsx
similarity index 100%
rename from apps/web/app/payment/verify/page.tsx
rename to apps/web/app/(main)/payment/verify/page.tsx
diff --git a/apps/web/app/pricing/page.tsx b/apps/web/app/(main)/pricing/page.tsx
similarity index 100%
rename from apps/web/app/pricing/page.tsx
rename to apps/web/app/(main)/pricing/page.tsx
diff --git a/apps/web/app/purchases/page.tsx b/apps/web/app/(main)/purchases/page.tsx
similarity index 100%
rename from apps/web/app/purchases/page.tsx
rename to apps/web/app/(main)/purchases/page.tsx
diff --git a/apps/web/app/train/page.tsx b/apps/web/app/(main)/train/page.tsx
similarity index 99%
rename from apps/web/app/train/page.tsx
rename to apps/web/app/(main)/train/page.tsx
index 5d9ab39..5ae3398 100644
--- a/apps/web/app/train/page.tsx
+++ b/apps/web/app/(main)/train/page.tsx
@@ -22,7 +22,7 @@ import { UploadModal } from "@/components/ui/upload"
 import { useState } from "react"
 import { TrainModelInput } from "common/inferred"
 import axios from "axios"
-import { BACKEND_URL } from "../config"
+import { BACKEND_URL } from "../../config"
 import { useRouter } from "next/navigation"
 import { useAuth } from "@clerk/nextjs"
 
@@ -53,7 +53,6 @@ export default function Train() {
         const response = await axios.post(`${BACKEND_URL}/ai/training`, input, {
             headers: {
                 Authorization
-                
                 : `Bearer ${token}`
             }
         });
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index bf5c6db..9230e19 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -1,9 +1,7 @@
 import type { Metadata } from "next";
 import localFont from "next/font/local";
 import "./globals.css";
-import { Appbar } from "@/components/Appbar";
 import { Providers } from "@/components/providers/Providers";
-import { Footer } from "@/components/Footer";
 import Script from "next/script";
 
 const geistSans = localFont({
@@ -41,9 +39,7 @@ export default function RootLayout({
       >
         <Providers>
           <div className="relative flex min-h-screen flex-col">
-            <Appbar />
             <main className="flex-1">{children}</main>
-            <Footer />
           </div>
         </Providers>
       </body>

From caea48bb1b824b313473395fc6b3798f70151cfd Mon Sep 17 00:00:00 2001
From: Rohit Dhakane <rohitdhakane6@gmail.com>
Date: Fri, 28 Feb 2025 22:37:59 +0530
Subject: [PATCH 3/8] feat: add UI components for separator, alert, breadcrumb,
 and form

---
 apps/web/components/ui/alert-dialog.tsx | 157 ++++++++++++++++++++++
 apps/web/components/ui/alert.tsx        |  66 ++++++++++
 apps/web/components/ui/breadcrumb.tsx   | 109 ++++++++++++++++
 apps/web/components/ui/form.tsx         | 167 ++++++++++++++++++++++++
 apps/web/components/ui/separator.tsx    |  28 ++++
 5 files changed, 527 insertions(+)
 create mode 100644 apps/web/components/ui/alert-dialog.tsx
 create mode 100644 apps/web/components/ui/alert.tsx
 create mode 100644 apps/web/components/ui/breadcrumb.tsx
 create mode 100644 apps/web/components/ui/form.tsx
 create mode 100644 apps/web/components/ui/separator.tsx

diff --git a/apps/web/components/ui/alert-dialog.tsx b/apps/web/components/ui/alert-dialog.tsx
new file mode 100644
index 0000000..27a1b77
--- /dev/null
+++ b/apps/web/components/ui/alert-dialog.tsx
@@ -0,0 +1,157 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: "outline" }), className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}
diff --git a/apps/web/components/ui/alert.tsx b/apps/web/components/ui/alert.tsx
new file mode 100644
index 0000000..3b8ee79
--- /dev/null
+++ b/apps/web/components/ui/alert.tsx
@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "text-destructive-foreground [&>svg]:text-current *:data-[slot=alert-description]:text-destructive-foreground/80",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }
diff --git a/apps/web/components/ui/breadcrumb.tsx b/apps/web/components/ui/breadcrumb.tsx
new file mode 100644
index 0000000..eb88f32
--- /dev/null
+++ b/apps/web/components/ui/breadcrumb.tsx
@@ -0,0 +1,109 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("hover:text-foreground transition-colors", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("text-foreground font-normal", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  )
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}
diff --git a/apps/web/components/ui/form.tsx b/apps/web/components/ui/form.tsx
new file mode 100644
index 0000000..7f4f244
--- /dev/null
+++ b/apps/web/components/ui/form.tsx
@@ -0,0 +1,167 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+  useFormState,
+} from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState } = useFormContext()
+  const formState = useFormState({ name: fieldContext.name })
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+function FormItem({ className, ...props }: React.ComponentProps<"div">) {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div
+        data-slot="form-item"
+        className={cn("grid gap-2", className)}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  )
+}
+
+function FormLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!error}
+      className={className}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message) : props.children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn("text-destructive text-sm", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+}
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}
diff --git a/apps/web/components/ui/separator.tsx b/apps/web/components/ui/separator.tsx
new file mode 100644
index 0000000..67c73e5
--- /dev/null
+++ b/apps/web/components/ui/separator.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator-root"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

From e0b69865d407673e31a31ce66f00a56c48f93e9f Mon Sep 17 00:00:00 2001
From: Rohit Dhakane <rohitdhakane6@gmail.com>
Date: Fri, 28 Feb 2025 22:38:30 +0530
Subject: [PATCH 4/8] feat: update Providers component to use custom Toaster
 and set axios base URL

---
 apps/web/components/providers/Providers.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/apps/web/components/providers/Providers.tsx b/apps/web/components/providers/Providers.tsx
index 60b6477..fe010ca 100644
--- a/apps/web/components/providers/Providers.tsx
+++ b/apps/web/components/providers/Providers.tsx
@@ -2,15 +2,17 @@
 import { dark } from '@clerk/themes'
 import { ClerkProvider } from "@clerk/nextjs";
 import { ThemeProvider } from "@/components/theme-provider";
-import { Toaster } from "react-hot-toast";
+import { Toaster } from "@/components/ui/toaster";
+import axios from 'axios';
 
 interface ProvidersProps {
   children: React.ReactNode;
 }
 
+axios.defaults.baseURL = process.env.NEXT_PUBLIC_BACKEND_URL;
+
 export function Providers({ children }: ProvidersProps) {
   return (
-    // dark mode
     <ClerkProvider appearance={{ layout: { logoPlacement: "inside" }, baseTheme: dark }}>
       <ThemeProvider
         attribute="class"
@@ -19,7 +21,7 @@ export function Providers({ children }: ProvidersProps) {
         disableTransitionOnChange
       >
         {children}
-        <Toaster position="bottom-right" />
+        <Toaster/>
       </ThemeProvider>
     </ClerkProvider>
   );

From cba0b369682fb0560efe14d904f964ac8ec8fc2c Mon Sep 17 00:00:00 2001
From: Rohit Dhakane <rohitdhakane6@gmail.com>
Date: Fri, 28 Feb 2025 22:38:46 +0530
Subject: [PATCH 5/8] feat: extend inferred types and add prompt and pack
 schemas

---
 packages/common/inferred-types.ts | 15 ++++++-
 packages/common/types.ts          | 70 ++++++++++++++++++++-----------
 2 files changed, 60 insertions(+), 25 deletions(-)

diff --git a/packages/common/inferred-types.ts b/packages/common/inferred-types.ts
index 6d03b3f..233e6c0 100644
--- a/packages/common/inferred-types.ts
+++ b/packages/common/inferred-types.ts
@@ -1,6 +1,19 @@
 import { z } from "zod";
-import {TrainModel, GenerateImage, GenerateImagesFromPack} from "./types";
+import {
+  TrainModel,
+  GenerateImage,
+  GenerateImagesFromPack,
+  promptSchema,
+  packSchema,
+} from "./types";
 
 export type TrainModelInput = z.infer<typeof TrainModel>;
 export type GenerateImageInput = z.infer<typeof GenerateImage>;
 export type GenerateImagesFromPackInput = z.infer<typeof GenerateImagesFromPack>;
+export type Prompt = z.infer<typeof promptSchema>;
+export type PackFormValues = z.infer<typeof packSchema>;
+export interface Pack extends PackFormValues {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+}
diff --git a/packages/common/types.ts b/packages/common/types.ts
index aa20adc..186e162 100644
--- a/packages/common/types.ts
+++ b/packages/common/types.ts
@@ -1,31 +1,53 @@
 import { z } from "zod";
 
 export const TrainModel = z.object({
-    name: z.string(),
-    type: z.enum(["Man", "Woman", "Others"]),
-    age: z.number(),
-    ethinicity: z.enum(["White", 
-        "Black", 
-        "Asian_American", 
-        "East_Asian",
-        "South_East_Asian", 
-        "South_Asian", 
-        "Middle_Eastern", 
-        "Pacific", 
-        "Hispanic"
-    ]),
-    eyeColor: z.enum(["Brown", "Blue", "Hazel", "Gray"]),
-    bald: z.boolean(),
-    zipUrl: z.string()
-})
+  name: z.string(),
+  type: z.enum(["Man", "Woman", "Others"]),
+  age: z.number(),
+  ethinicity: z.enum([
+    "White",
+    "Black",
+    "Asian_American",
+    "East_Asian",
+    "South_East_Asian",
+    "South_Asian",
+    "Middle_Eastern",
+    "Pacific",
+    "Hispanic",
+  ]),
+  eyeColor: z.enum(["Brown", "Blue", "Hazel", "Gray"]),
+  bald: z.boolean(),
+  zipUrl: z.string(),
+});
 
 export const GenerateImage = z.object({
-    prompt: z.string(),
-    modelId: z.string(),
-    num: z.number()
-})
+  prompt: z.string(),
+  modelId: z.string(),
+  num: z.number(),
+});
 
 export const GenerateImagesFromPack = z.object({
-    modelId: z.string(),
-    packId: z.string()
-})
\ No newline at end of file
+  modelId: z.string(),
+  packId: z.string(),
+});
+export const promptSchema = z.object({
+  id: z.string().optional(),
+  prompt: z.string(),
+});
+
+export const packSchema = z.object({
+  id: z.string().optional(),
+  name: z
+    .string()
+    .min(3, "Name must be at least 3 characters")
+    .max(50, "Name must be at most 50 characters"),
+  description: z
+    .string()
+    .min(10, "Description must be at least 10 characters")
+    .max(500, "Description must be at most 500 characters"),
+  imageUrl1: z.string().url("Please enter a valid URL"),
+  imageUrl2: z.string().url("Please enter a valid URL"),
+  prompts: z.array(promptSchema),
+});
+
+

From 8e78cfbdf6826d4f32599a82eb2a74ecec906f4f Mon Sep 17 00:00:00 2001
From: Rohit Dhakane <rohitdhakane6@gmail.com>
Date: Fri, 28 Feb 2025 22:39:03 +0530
Subject: [PATCH 6/8] feat: update PackPrompts model to include createdAt and
 updatedAt fields with cascading delete

---
 .../migrations/20250228170244_add_ondelete/migration.sql | 9 +++++++++
 .../20250228170302_remove_defult/migration.sql           | 2 ++
 packages/db/prisma/schema.prisma                         | 4 +++-
 3 files changed, 14 insertions(+), 1 deletion(-)
 create mode 100644 packages/db/prisma/migrations/20250228170244_add_ondelete/migration.sql
 create mode 100644 packages/db/prisma/migrations/20250228170302_remove_defult/migration.sql

diff --git a/packages/db/prisma/migrations/20250228170244_add_ondelete/migration.sql b/packages/db/prisma/migrations/20250228170244_add_ondelete/migration.sql
new file mode 100644
index 0000000..58522ae
--- /dev/null
+++ b/packages/db/prisma/migrations/20250228170244_add_ondelete/migration.sql
@@ -0,0 +1,9 @@
+-- DropForeignKey
+ALTER TABLE "PackPrompts" DROP CONSTRAINT "PackPrompts_packId_fkey";
+
+-- AlterTable
+ALTER TABLE "PackPrompts" ADD COLUMN     "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+ADD COLUMN     "updatedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP;
+
+-- AddForeignKey
+ALTER TABLE "PackPrompts" ADD CONSTRAINT "PackPrompts_packId_fkey" FOREIGN KEY ("packId") REFERENCES "Packs"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/packages/db/prisma/migrations/20250228170302_remove_defult/migration.sql b/packages/db/prisma/migrations/20250228170302_remove_defult/migration.sql
new file mode 100644
index 0000000..658862c
--- /dev/null
+++ b/packages/db/prisma/migrations/20250228170302_remove_defult/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "PackPrompts" ALTER COLUMN "updatedAt" DROP DEFAULT;
diff --git a/packages/db/prisma/schema.prisma b/packages/db/prisma/schema.prisma
index d420e79..8752d06 100644
--- a/packages/db/prisma/schema.prisma
+++ b/packages/db/prisma/schema.prisma
@@ -84,7 +84,9 @@ model PackPrompts {
   id        String    @id @default(uuid())
   prompt    String
   packId    String
-  pack      Packs    @relation(fields: [packId], references: [id])
+  pack      Packs    @relation(fields: [packId], references: [id] , onDelete: Cascade)
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
 }
 
 model Subscription {

From 81d7c17f35aa95b3fdbab98bc55f24b655e1dd93 Mon Sep 17 00:00:00 2001
From: Rohit Dhakane <rohitdhakane6@gmail.com>
Date: Fri, 28 Feb 2025 22:40:12 +0530
Subject: [PATCH 7/8] feat: implement packs routes with CRUD operations and
 admin middleware

---
 apps/backend/index.ts               |   8 +-
 apps/backend/middleware.ts          |  24 +++++-
 apps/backend/package.json           |   2 +-
 apps/backend/routes/packs.routes.ts | 119 ++++++++++++++++++++++++++++
 4 files changed, 145 insertions(+), 8 deletions(-)
 create mode 100644 apps/backend/routes/packs.routes.ts

diff --git a/apps/backend/index.ts b/apps/backend/index.ts
index f9da50b..c88732d 100644
--- a/apps/backend/index.ts
+++ b/apps/backend/index.ts
@@ -14,6 +14,7 @@ import dotenv from "dotenv";
 
 import paymentRoutes from "./routes/payment.routes";
 import { router as webhookRouter } from "./routes/webhook.routes";
+import { router as packRoutes } from "./routes/packs.routes";
 
 const IMAGE_GEN_CREDITS = 1;
 const TRAIN_MODEL_CREDITS = 20;
@@ -223,13 +224,7 @@ app.post("/pack/generate", authMiddleware, async (req, res) => {
   });
 });
 
-app.get("/pack/bulk", async (req, res) => {
-  const packs = await prismaClient.packs.findMany({});
 
-  res.json({
-    packs,
-  });
-});
 
 app.get("/image/bulk", authMiddleware, async (req, res) => {
   const ids = req.query.ids as string[];
@@ -356,6 +351,7 @@ app.post("/fal-ai/webhook/image", async (req, res) => {
 
 app.use("/payment", paymentRoutes);
 app.use("/api/webhook", webhookRouter);
+app.use("/pack", packRoutes);
 
 app.listen(PORT, () => {
   console.log(`Server is running on port ${PORT}`);
diff --git a/apps/backend/middleware.ts b/apps/backend/middleware.ts
index ee1eab9..7f3b6cb 100644
--- a/apps/backend/middleware.ts
+++ b/apps/backend/middleware.ts
@@ -7,6 +7,7 @@ declare global {
     interface Request {
       userId?: string;
       user?: {
+        role?: "admin" | "user";
         email: string;
       };
     }
@@ -19,6 +20,7 @@ export async function authMiddleware(
   next: NextFunction
 ) {
   try {
+    console.log("Authenticating request");
     const authHeader = req.headers["authorization"];
     const token = authHeader?.split(" ")[1];
 
@@ -26,7 +28,7 @@ export async function authMiddleware(
       res.status(401).json({ message: "No token provided" });
       return;
     }
-
+    
     // Debug logs
     console.log("Received token:", token);
 
@@ -62,6 +64,7 @@ export async function authMiddleware(
 
     // Fetch user details from Clerk
     const user = await clerkClient.users.getUser(userId);
+    console.log("User details:", user); 
     const primaryEmail = user.emailAddresses.find(
       (email) => email.id === user.primaryEmailAddressId
     );
@@ -70,11 +73,13 @@ export async function authMiddleware(
       console.error("No email found for user");
       res.status(400).json({ message: "User email not found" });
       return;
+
     }
 
     // Attach the user ID and email to the request
     req.userId = userId;
     req.user = {
+      role: (user.publicMetadata.role as "admin" | "user") || "user",
       email: primaryEmail.emailAddress,
     };
 
@@ -99,3 +104,20 @@ export async function authMiddleware(
     return;
   }
 }
+
+export async function adminMiddleware(
+  req: Request,
+  res: Response,
+  next: NextFunction
+) {
+  console.log("Checking user role");
+  await authMiddleware(req, res, () => {
+    console.log("User role:", req.user?.role);
+    if (req.user?.role !== "admin") {
+      res.status(403).json({ error: "Unauthorized" });
+      return;
+    }
+
+    next();
+  });
+}
diff --git a/apps/backend/package.json b/apps/backend/package.json
index c6d3181..b6411c6 100644
--- a/apps/backend/package.json
+++ b/apps/backend/package.json
@@ -4,7 +4,7 @@
   "type": "module",
   "scripts": {
     "start": "bun run index.ts",
-    "dev": "bun run index.ts"
+    "dev": "bun run --watch index.ts"
   },
   "devDependencies": {
     "@types/bun": "latest"
diff --git a/apps/backend/routes/packs.routes.ts b/apps/backend/routes/packs.routes.ts
new file mode 100644
index 0000000..0963aa5
--- /dev/null
+++ b/apps/backend/routes/packs.routes.ts
@@ -0,0 +1,119 @@
+import { prismaClient } from "db";
+import { Router } from "express";
+import { adminMiddleware } from "../middleware";
+import { packSchema } from "common/types";
+
+export const router: Router = Router();
+
+// Fetch all packs
+router.get("/bulk", async (req, res) => {
+  try {
+    const packs = await prismaClient.packs.findMany();
+    res.status(200).json({ packs });
+  } catch (error) {
+    res.status(500).json({ error: "Error fetching packs" });
+  }
+});
+
+// Fetch a pack by ID
+router.get("/:id", async (req, res) => {
+  try {
+    const pack = await prismaClient.packs.findUnique({
+      where: {
+        id: req.params.id,
+      },
+      include: {
+        prompts: true,
+      },
+    });
+
+    if (!pack) {
+      res.status(404).json({ error: "Pack not found" });
+      return;
+    }
+
+    res.status(200).json({ pack });
+  } catch (error) {
+    res.status(500).json({ error: "Error fetching pack" });
+  }
+});
+
+// Create a new pack
+router.post("/",adminMiddleware, async (req, res) => {
+  try {
+    const parsedata = packSchema.safeParse(req.body);
+    if (!parsedata.success) {
+      res.status(400).json({ error: parsedata.error });
+      return;
+    }
+
+    const newPack = await prismaClient.packs.create({
+      data: {
+        name: parsedata.data.name,
+        description: parsedata.data.description,
+        imageUrl1: parsedata.data.imageUrl1,
+        imageUrl2: parsedata.data.imageUrl2,
+        prompts: {
+          create: parsedata.data.prompts.map((prompt) => ({
+            prompt: prompt.prompt,
+          })),
+        },
+      },
+    });
+
+    res.status(201).json({ pack: newPack });
+  } catch (error) {
+    res.status(500).json({ error: "Error creating pack" });
+  }
+});
+
+// Update a pack by ID
+router.put("/:id",adminMiddleware, async (req, res) => {
+  try {
+    const parsedata = packSchema.safeParse(req.body);
+    if (!parsedata.success) {
+      res.status(400).json({ error: parsedata.error });
+      return;
+    }
+    const updatedPack = await prismaClient.packs.update({
+      where: {
+        id: parsedata.data.id,
+      },
+      data: {
+        name: parsedata.data.name,
+        description: parsedata.data.description,
+        imageUrl1: parsedata.data.imageUrl1,
+        imageUrl2: parsedata.data.imageUrl2,
+        prompts: {
+          upsert: parsedata.data.prompts.map((prompt) => ({
+            where: { id: prompt.id },
+            update: { prompt: prompt.prompt },
+            create: { prompt: prompt.prompt },
+          })),
+        },
+      },
+    });
+
+    res.status(200).json({
+      pack: updatedPack,
+    });
+  } catch (error) {
+    res.status(500).json({ error: "Error updating pack" });
+  }
+});
+
+// Delete a pack by ID
+router.delete("/:id",adminMiddleware, async (req, res) => {
+  try {
+    await prismaClient.packs.delete({
+      where: {
+        id: req.params.id,
+      },
+    });
+
+    res.status(204).json({ message: "Pack deleted" });
+  } catch (error) {
+    console.error(error);
+    res.status(500).json({ error: "Error deleting pack" });
+  }
+});

From 22a45c60915f9976e78869f6060f21c2f7e4f6c9 Mon Sep 17 00:00:00 2001
From: Rohit Dhakane <rohitdhakane6@gmail.com>
Date: Fri, 28 Feb 2025 22:41:05 +0530
Subject: [PATCH 8/8] feat: add pack management components including grid,
 dialog, and button; implement scrollbar styles

---
 apps/web/app/admin/packs/[packId]/page.tsx    |  71 ++++
 apps/web/app/admin/packs/page.tsx             |  42 +++
 apps/web/app/globals.css                      |  21 ++
 apps/web/components/packs/add-pack-button.tsx |  22 ++
 apps/web/components/packs/add-pack-dialog.tsx |  27 ++
 .../components/packs/delete-pack-dialog.tsx   | 102 ++++++
 apps/web/components/packs/pack-card.tsx       | 100 ++++++
 apps/web/components/packs/pack-form.tsx       | 312 ++++++++++++++++++
 .../components/packs/pack-grid-skeleton.tsx   |  24 ++
 apps/web/components/packs/pack-grid.tsx       |  77 +++++
 apps/web/components/packs/pack.tsx            |   3 +
 apps/web/hooks/use-packs.ts                   |  39 +++
 apps/web/package.json                         |   7 +-
 13 files changed, 846 insertions(+), 1 deletion(-)
 create mode 100644 apps/web/app/admin/packs/[packId]/page.tsx
 create mode 100644 apps/web/app/admin/packs/page.tsx
 create mode 100644 apps/web/components/packs/add-pack-button.tsx
 create mode 100644 apps/web/components/packs/add-pack-dialog.tsx
 create mode 100644 apps/web/components/packs/delete-pack-dialog.tsx
 create mode 100644 apps/web/components/packs/pack-card.tsx
 create mode 100644 apps/web/components/packs/pack-form.tsx
 create mode 100644 apps/web/components/packs/pack-grid-skeleton.tsx
 create mode 100644 apps/web/components/packs/pack-grid.tsx
 create mode 100644 apps/web/components/packs/pack.tsx
 create mode 100644 apps/web/hooks/use-packs.ts

diff --git a/apps/web/app/admin/packs/[packId]/page.tsx b/apps/web/app/admin/packs/[packId]/page.tsx
new file mode 100644
index 0000000..57336a3
--- /dev/null
+++ b/apps/web/app/admin/packs/[packId]/page.tsx
@@ -0,0 +1,71 @@
+"use client";
+import { useState, useEffect,use } from "react";
+import axios from "axios";
+
+import { PackForm } from "@/components/packs/pack-form";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { Pack } from "@/types";
+
+export default function Page({ params }:{params:{packId:string}}) {
+  const { packId } = use(params);
+  const [pack, setPack] = useState<Pack | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isError, setIsError] = useState(false);
+
+  useEffect(() => {
+    const fetchPack = async () => {
+      setIsLoading(true);
+      setIsError(false);
+      try {
+        const response = await axios.get(`/pack/${packId}`);
+        console.log(response.data.pack);
+        setPack(response.data.pack);
+      } catch (error) {
+        console.error("Failed to fetch pack:", error);
+        setIsError(true);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchPack();
+  }, [packId]);
+
+  if (isLoading) {
+    return <div>Loading pack...</div>;
+  }
+  if (isError) {
+    return <div>Failed to load the pack. Please try again later.</div>;
+  }
+
+  return (
+    <div className="container mx-auto px-4 py-6 space-y-6">
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 sticky bg-background top-0 z-10 py-4">
+        <div className="space-y-1">
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem>
+                <BreadcrumbLink href="/admin">Admin</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator />
+              <BreadcrumbItem>
+                <BreadcrumbLink href="/admin/packs">Packs</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator />
+              <BreadcrumbItem>
+                <BreadcrumbPage>{pack?.name || "Pack"}</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </div>
+      </div>
+      {pack && <PackForm pack={pack} />}
+    </div>
+  );
+}
diff --git a/apps/web/app/admin/packs/page.tsx b/apps/web/app/admin/packs/page.tsx
new file mode 100644
index 0000000..e87494e
--- /dev/null
+++ b/apps/web/app/admin/packs/page.tsx
@@ -0,0 +1,42 @@
+import { Suspense } from "react";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+
+import { PackGrid } from "@/components/packs/pack-grid";
+import { PackGridSkeleton } from "@/components/packs/pack-grid-skeleton";
+import { AddPackButton } from "@/components/packs/add-pack-button";
+
+export default function Page() {
+  return (
+    <div className="container mx-auto px-4 py-6 space-y-6">
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 sticky bg-background top-0 z-10 py-4">
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/admin">Admin</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Packs</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+        <AddPackButton />
+      </div>
+
+      <div>
+        <h1 className="text-2xl font-bold tracking-tight">Content Packs</h1>
+      </div>
+
+      <Suspense fallback={<PackGridSkeleton />}>
+        <PackGrid />
+      </Suspense>
+    </div>
+  );
+}
diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index d8c9c45..4e8932f 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -195,3 +195,24 @@
     --sidebar-ring: 217.2 91.2% 59.8%;
   }
 }
+/* width */
+::-webkit-scrollbar {
+  width: 5px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: #020202;
+  border-radius: 5px;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: #3a3a3a;
+  border-radius: 5px;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
\ No newline at end of file
diff --git a/apps/web/components/packs/add-pack-button.tsx b/apps/web/components/packs/add-pack-button.tsx
new file mode 100644
index 0000000..5a359a3
--- /dev/null
+++ b/apps/web/components/packs/add-pack-button.tsx
@@ -0,0 +1,22 @@
+"use client"
+
+import { useState } from "react"
+import { Plus } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { AddPackDialog } from "@/components/packs/add-pack-dialog"
+
+export function AddPackButton() {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)} size="sm" className="h-9">
+        <Plus className="h-4 w-4 mr-2" />
+        Add New Pack
+      </Button>
+      <AddPackDialog open={open} onOpenChange={setOpen} />
+    </>
+  )
+}
+
diff --git a/apps/web/components/packs/add-pack-dialog.tsx b/apps/web/components/packs/add-pack-dialog.tsx
new file mode 100644
index 0000000..ea3b15f
--- /dev/null
+++ b/apps/web/components/packs/add-pack-dialog.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import { PackForm } from "@/components/packs/pack-form";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+interface AddPackDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function AddPackDialog({ open, onOpenChange }: AddPackDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[600px] md:max-w-[800px] max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>Add New Pack</DialogTitle>
+        </DialogHeader>
+        <PackForm onSuccess={() => onOpenChange(false)} />
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/web/components/packs/delete-pack-dialog.tsx b/apps/web/components/packs/delete-pack-dialog.tsx
new file mode 100644
index 0000000..28c2085
--- /dev/null
+++ b/apps/web/components/packs/delete-pack-dialog.tsx
@@ -0,0 +1,102 @@
+"use client";
+
+import { useState } from "react";
+import { Loader2 } from "lucide-react";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { useToast } from "@/hooks/use-toast";
+import type { Pack } from "@/types";
+import axios from "axios";
+import { useAuth } from "@/hooks/useAuth";
+
+interface DeletePackDialogProps {
+  pack: Pack;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  refetch: () => void;
+}
+
+export function DeletePackDialog({
+  pack,
+  open,
+  onOpenChange,
+  refetch,
+}: DeletePackDialogProps) {
+  const [isDeleting, setIsDeleting] = useState(false);
+  const { toast } = useToast();
+  const { getToken } = useAuth();
+
+
+  const handleDelete = async () => {
+    setIsDeleting(true);
+    try {
+      const token = await getToken();
+
+      await axios.delete(`/pack/${pack.id}`,{
+        headers:{
+          Authorization: `Bearer ${token}`,
+        }
+      });
+
+      toast({
+        title: "Pack deleted",
+        description: `"${pack.name}" has been successfully deleted.`,
+      });
+      refetch();
+      onOpenChange(false);
+    } catch (error) {
+      toast({
+        variant: "destructive",
+        title: "Failed to delete pack",
+        description: "Please try again later.",
+      });
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This will permanently delete the content pack "{pack.name}" and all
+            its prompts. This action cannot be undone.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel className="cursor-pointer" disabled={isDeleting}>
+            Cancel
+          </AlertDialogCancel>
+          <AlertDialogAction
+            onClick={(e) => {
+              e.preventDefault();
+              handleDelete();
+            }}
+            disabled={isDeleting}
+            className="bg-destructive text-destructive-foreground hover:bg-destructive/90 cursor-pointer"
+          >
+            {isDeleting ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Deleting...
+              </>
+            ) : (
+              "Delete"
+            )}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
diff --git a/apps/web/components/packs/pack-card.tsx b/apps/web/components/packs/pack-card.tsx
new file mode 100644
index 0000000..06eeeb4
--- /dev/null
+++ b/apps/web/components/packs/pack-card.tsx
@@ -0,0 +1,100 @@
+"use client";
+
+import Image from "next/image";
+import { MoreHorizontal } from "lucide-react";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import type { Pack } from "@/types";
+import Link from "next/link";
+
+interface PackCardProps {
+  pack: Pack;
+  onDelete: () => void;
+}
+
+export function PackCard({ pack, onDelete }: PackCardProps) {
+  return (
+    <Link href={`/admin/packs/${pack.id}`}>
+      <Card className="overflow-hidden transition-all duration-200 hover:shadow-md group">
+        <CardHeader className="relative pb-2">
+          <div className="absolute right-4 top-4 flex items-center gap-2">
+            {/* <Badge variant="secondary" className="font-normal">
+            {pack.prompts.length} {pack.prompts.length === 1 ? "prompt" : "prompts"}
+          </Badge> */}
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="icon" className="h-8 w-8 cursor-pointer">
+                  <MoreHorizontal className="h-4 w-4" />
+                  <span className="sr-only">Open menu</span>
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    onDelete();
+                  }}
+                  className="text-destructive focus:text-destructive cursor-pointer"
+                >
+                  Delete
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+          <CardTitle className="group-hover:text-primary transition-colors">
+            {pack.name}
+          </CardTitle>
+          <CardDescription className="line-clamp-3">
+            {pack.description}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-2 gap-2 h-64">
+            <div className="relative rounded-md overflow-hidden bg-muted">
+              {pack.imageUrl1 ? (
+                <Image
+                  src={pack.imageUrl1 || "/placeholder.svg"}
+                  alt={`${pack.name} image 1`}
+                  fill
+                  className="object-cover"
+                />
+              ) : (
+                <div className="absolute inset-0 flex items-center justify-center text-muted-foreground">
+                  No image
+                </div>
+              )}
+            </div>
+            <div className="relative rounded-md overflow-hidden bg-muted">
+              {pack.imageUrl2 ? (
+                <Image
+                  src={pack.imageUrl2 || "/placeholder.svg"}
+                  alt={`${pack.name} image 2`}
+                  fill
+                  className="object-cover"
+                />
+              ) : (
+                <div className="absolute inset-0 flex items-center justify-center text-muted-foreground">
+                  No image
+                </div>
+              )}
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </Link>
+  );
+}
diff --git a/apps/web/components/packs/pack-form.tsx b/apps/web/components/packs/pack-form.tsx
new file mode 100644
index 0000000..2bc094d
--- /dev/null
+++ b/apps/web/components/packs/pack-form.tsx
@@ -0,0 +1,312 @@
+ "use client";
+
+import { useState } from "react";
+import { useForm, useFieldArray } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Loader2, Plus, Trash2, ImageIcon } from "lucide-react";
+import axios from "axios";
+import { useAuth } from "@/hooks/useAuth";
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Separator } from "@/components/ui/separator";
+import { useToast } from "@/hooks/use-toast";
+import { type Pack, type PackFormValues } from "common/inferred";
+import { packSchema } from "common/types";
+
+interface PackFormProps {
+  pack?: Pack;
+  onSuccess?: () => void;
+}
+
+export function PackForm({ pack }: PackFormProps) {
+  const { getToken } = useAuth();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const { toast } = useToast();
+
+  const form = useForm<PackFormValues>({
+    resolver: zodResolver(packSchema),
+    defaultValues: pack
+      ? {
+          id: pack.id,
+          name: pack.name,
+          description: pack.description,
+          imageUrl1: pack.imageUrl1,
+          imageUrl2: pack.imageUrl2,
+          prompts: pack.prompts,
+        }
+      : {
+          name: "",
+          description: "",
+          imageUrl1: "",
+          imageUrl2: "",
+          prompts: [{ prompt: "" }],
+        },
+    mode: "onBlur",
+  });
+
+  const { fields, append, remove } = useFieldArray({
+    control: form.control,
+    name: "prompts",
+  });
+
+  const updatePack = async (id: string, data: PackFormValues) => {
+    try {
+      const token = await getToken();
+      const response = await axios.put(`/pack/${id}`, data,{
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      }
+      )
+      console.log(response.data.pack);
+    } catch (error) {
+      console.error("Failed to update pack:", error);
+    }
+  };
+
+  const createPack = async (data: PackFormValues) => {
+    try {
+      const token = await getToken();
+      const response = await axios.post("/pack", data, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+      console.log(response.data.pack);
+    } catch (error) {
+      console.error("Failed to create pack:", error);
+    }
+  }
+
+
+  const onSubmit = async (data: PackFormValues) => {
+    setIsSubmitting(true);
+    try {
+      if (pack) {
+        await updatePack(pack.id, data)
+        console.log("Updating pack:", data);
+        toast({
+          title: "Pack updated",
+          description: "Your content pack has been updated successfully.",
+        });
+      } else {
+        await createPack(data)
+        console.log("Creating pack:", data);
+        toast({
+          title: "Pack created",
+          description: "Your new content pack has been created successfully.",
+        });
+      }
+      // onSuccess()
+    } catch (error) {
+      toast({
+        variant: "destructive",
+        title: pack ? "Failed to update pack" : "Failed to create pack",
+        description: "Please try again later.",
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <div className="space-y-4 p-4">
+          <div>
+            <h3 className="text-xl font-semibold">Pack Details</h3>
+          </div>
+          <FormField
+            control={form.control}
+            name="name"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="text-base">Name</FormLabel>
+                <FormControl>
+                  <Input
+                    placeholder="Enter pack name"
+                    className="mt-1"
+                    {...field}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="description"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="">Description</FormLabel>
+                <FormControl>
+                  <Textarea
+                    placeholder="Enter pack description"
+                    className="min-h-[120px] mt-1"
+                    {...field}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
+        <div className="space-y-4 p-4">
+          <div>
+            <h3 className="text-xl font-semibold">Pack Images</h3>
+          </div>
+          <div className="grid gap-4 sm:grid-cols-2">
+            <FormField
+              control={form.control}
+              name="imageUrl1"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="text-base">Image 1</FormLabel>
+                  <FormControl>
+                    <div className="flex gap-2">
+                      <Input
+                        placeholder="Enter image URL"
+                        className="mt-0"
+                        {...field}
+                      />
+                      {field.value && (
+                        <Button
+                          type="button"
+                          variant="outline"
+                          size="icon"
+                          className="flex-shrink-0 cursor-pointer"
+                          onClick={() => {
+                            window.open(field.value, "_blank");
+                          }}
+                        >
+                          <ImageIcon className="h-4 w-4" />
+                          <span className="sr-only">Preview image</span>
+                        </Button>
+                      )}
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="imageUrl2"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="text-base">Image 2</FormLabel>
+                  <FormControl>
+                    <div className="flex gap-2">
+                      <Input
+                        placeholder="Enter image URL"
+                        className="mt-0"
+                        {...field}
+                      />
+                      {field.value && (
+                        <Button
+                          type="button"
+                          variant="outline"
+                          size="icon"
+                          className="flex-shrink-0 cursor-pointer"
+                          onClick={() => {
+                            window.open(field.value, "_blank");
+                          }}
+                        >
+                          <ImageIcon className="h-4 w-4" />
+                          <span className="sr-only">Preview image</span>
+                        </Button>
+                      )}
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+        </div>
+
+        <Separator className="my-4" />
+
+        <div className="space-y-4 p-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <h3 className="text-xl font-semibold">Prompts</h3>
+            </div>
+            <Button
+              type="button"
+              variant="outline"
+              className="cursor-pointer"
+              size="sm"
+              onClick={() => append({ prompt: "" })}
+            >
+              <Plus className="h-4 w-4 mr-2" />
+              Add Prompt
+            </Button>
+          </div>
+
+          {fields.map((field, index) => (
+            <div
+              key={field.id}
+              className="border rounded-lg p-6 space-y-4 relative"
+            >
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="absolute top-2 right-2 h-8 w-8 cursor-pointer text-muted-foreground hover:text-destructive"
+                onClick={() => {
+                  if (fields.length > 1) {
+                    remove(index);
+                  } else {
+                    toast({
+                      variant: "destructive",
+                      title: "Cannot remove prompt",
+                      description: "You must have at least one prompt.",
+                    });
+                  }
+                }}
+              >
+                <Trash2 className="h-4 w-4" />
+                <span className="sr-only">Remove prompt</span>
+              </Button>
+
+              <FormField
+                control={form.control}
+                name={`prompts.${index}.prompt`}
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="text-base">Prompt Text</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        placeholder="Enter prompt text"
+                        className="min-h-[100px] mt-1"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+          ))}
+        </div>
+
+        <div className="flex justify-end gap-4 p-4">
+          <Button type="submit" disabled={isSubmitting}>
+            {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            {pack ? "Update Pack" : "Create Pack"}
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+}
diff --git a/apps/web/components/packs/pack-grid-skeleton.tsx b/apps/web/components/packs/pack-grid-skeleton.tsx
new file mode 100644
index 0000000..72d8b25
--- /dev/null
+++ b/apps/web/components/packs/pack-grid-skeleton.tsx
@@ -0,0 +1,24 @@
+export function PackGridSkeleton() {
+    return (
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <div key={i} className="rounded-lg border bg-card text-card-foreground shadow-sm animate-pulse">
+            <div className="p-6 space-y-4">
+              <div className="h-6 bg-muted rounded w-3/4"></div>
+              <div className="space-y-2">
+                <div className="h-4 bg-muted rounded w-full"></div>
+                <div className="h-4 bg-muted rounded w-5/6"></div>
+                <div className="h-4 bg-muted rounded w-4/6"></div>
+              </div>
+              <div className="flex gap-2 h-24">
+                <div className="h-full bg-muted rounded flex-1"></div>
+                <div className="h-full bg-muted rounded flex-1"></div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    )
+  }
+  
+  
\ No newline at end of file
diff --git a/apps/web/components/packs/pack-grid.tsx b/apps/web/components/packs/pack-grid.tsx
new file mode 100644
index 0000000..485299a
--- /dev/null
+++ b/apps/web/components/packs/pack-grid.tsx
@@ -0,0 +1,77 @@
+"use client"
+
+import { useState } from "react"
+import { AlertCircle, Loader2 } from "lucide-react"
+
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
+import { Button } from "@/components/ui/button"
+import { PackCard } from "@/components/packs/pack-card"
+import { DeletePackDialog } from "@/components/packs/delete-pack-dialog"
+import { usePacks } from "@/hooks/use-packs"
+import type { Pack } from "@/types"
+
+
+export function PackGrid() {
+  const { packs, isLoading, isError, refetch } = usePacks()
+  const [packToDelete, setPackToDelete] = useState<Pack | null>(null)
+
+  if (isLoading) {
+    return (
+      <div className="flex justify-center items-center min-h-[400px]">
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+      </div>
+    )
+  }
+
+  if (isError) {
+    return (
+      <Alert  className="max-w-2xl mx-auto">
+        <AlertCircle className="h-4 w-4" />
+        <AlertTitle>Error</AlertTitle>
+        <AlertDescription className="flex flex-col sm:flex-row gap-4 sm:items-center">
+          <span>Failed to load content packs.</span>
+          <Button variant="outline" size="sm" onClick={() => refetch()} className="sm:ml-auto">
+            Try Again
+          </Button>
+        </AlertDescription>
+      </Alert>
+    )
+  }
+  if(packs.length == 0) {
+    return (
+      <Alert variant='default' className="max-w-2xl mx-auto">
+        <AlertCircle className="h-4 w-4" />
+        <AlertTitle>No Content Packs</AlertTitle>
+        <AlertDescription>
+          <span>There are no content packs available. Click the button below to create one.</span>
+          <Button variant='default' size="sm" className="sm:ml-auto">
+            Create Content Pack
+          </Button>
+        </AlertDescription>
+      </Alert>
+    )
+  }
+
+  return (
+    <>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {packs.map((pack) => (
+          <PackCard
+            key={pack.id}
+            pack={pack}
+            onDelete={() => setPackToDelete(pack)}
+          />
+        ))}
+      </div>
+      {packToDelete && (
+        <DeletePackDialog
+          pack={packToDelete}
+          open={!!packToDelete}
+          onOpenChange={(open) => !open && setPackToDelete(null)}
+          refetch={refetch}
+        />
+      )}
+    </>
+  )
+}
+
diff --git a/apps/web/components/packs/pack.tsx b/apps/web/components/packs/pack.tsx
new file mode 100644
index 0000000..e821429
--- /dev/null
+++ b/apps/web/components/packs/pack.tsx
@@ -0,0 +1,3 @@
+export function pack() {
+  return <div>pack</div>;
+}
diff --git a/apps/web/hooks/use-packs.ts b/apps/web/hooks/use-packs.ts
new file mode 100644
index 0000000..a774a43
--- /dev/null
+++ b/apps/web/hooks/use-packs.ts
@@ -0,0 +1,39 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import type { Pack } from "@/types"
+import axios from "axios"
+
+
+export function usePacks() {
+  const [packs, setPacks] = useState<Pack[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const [isError, setIsError] = useState(false)
+
+  const fetchPacks = async () => {
+    setIsLoading(true)
+    setIsError(false)
+    try {
+      const response = await axios.get("/pack/bulk")
+      setPacks(response.data.packs)
+    } catch (error) {
+      setIsError(true)
+      console.error("Failed to fetch packs:", error)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    fetchPacks()
+  }, [])
+
+  return {
+    packs,
+    isLoading,
+    isError,
+    refetch: fetchPacks,
+    setPacks,
+  }
+}
+
diff --git a/apps/web/package.json b/apps/web/package.json
index 2469cc0..daa8b33 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -12,12 +12,15 @@
   },
   "dependencies": {
     "@clerk/themes": "^2.2.19",
+    "@hookform/resolvers": "^4.1.2",
+    "@radix-ui/react-alert-dialog": "^1.1.6",
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-dropdown-menu": "^2.1.6",
     "@radix-ui/react-label": "^2.1.2",
     "@radix-ui/react-progress": "^1.1.2",
     "@radix-ui/react-scroll-area": "^1.2.3",
     "@radix-ui/react-select": "^2.1.6",
+    "@radix-ui/react-separator": "^1.1.2",
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-switch": "^1.1.3",
     "@radix-ui/react-tabs": "^1.1.3",
@@ -42,10 +45,12 @@
     "postcss": "^8.5.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-hook-form": "^7.54.2",
     "react-hot-toast": "^2.5.1",
     "tailwind-merge": "^3.0.1",
     "tailwindcss": "^4.0.6",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.24.2"
   },
   "devDependencies": {
     "@repo/eslint-config": "*",