From 5b7960639b8eab6dd9ec2b1092df3e22f93b886d Mon Sep 17 00:00:00 2001
From: Shivansh <shivanshsaxena2910@gmail.com>
Date: Fri, 8 Nov 2024 05:37:11 +0530
Subject: [PATCH 1/3] added Image upload functionality

---
 alimento-nextjs/.env.example                  | 23 ++++-
 alimento-nextjs/actions/dish/dishCREATE.ts    |  5 ++
 .../components/sidebarConstants.tsx           |  5 ++
 .../multistepForm/pages/formPage4.tsx         | 25 ++++++
 .../components/multistepForm/pages/main.tsx   | 13 +--
 alimento-nextjs/components/ui/imageUpload.tsx | 89 +++++++++++++++++++
 alimento-nextjs/context/dishFormContext.tsx   | 40 ++++++++-
 alimento-nextjs/next.config.ts                | 13 ++-
 alimento-nextjs/package.json                  |  1 +
 alimento-nextjs/prisma/schema.prisma          | 24 +++--
 10 files changed, 222 insertions(+), 16 deletions(-)
 create mode 100644 alimento-nextjs/components/multistepForm/pages/formPage4.tsx
 create mode 100644 alimento-nextjs/components/ui/imageUpload.tsx

diff --git a/alimento-nextjs/.env.example b/alimento-nextjs/.env.example
index 36157c9..9e52350 100644
--- a/alimento-nextjs/.env.example
+++ b/alimento-nextjs/.env.example
@@ -1 +1,22 @@
-DATABASE_URL="your mongodb url"
\ No newline at end of file
+# Database URL for MongoDB connection
+# Format: "mongodb+srv://<username>:<password>@<cluster-url>/<database-name>"
+DATABASE_URL="your_mongodb_connection_string_here"
+
+# SMTP Configuration for Email Services
+# Replace with your SMTP provider's details if not using Gmail.
+SMTP_HOST="smtp.gmail.com"                    # SMTP server host
+SMTP_PORT=587                                  # SMTP server port (587 for TLS)
+SMTP_SECURE=false                              # Use false for TLS/STARTTLS, true for SSL
+SMTP_USER="your_email@example.com"             # Email address to send from
+SMTP_PASS="your_smtp_password_here"            # SMTP password or app-specific password for Gmail
+
+# NextAuth Configuration
+# NEXTAUTH_URL: Set to your app's URL for production; use http://localhost:3000 for local development.
+NEXTAUTH_URL="http://localhost:3000"           # Base URL for NextAuth authentication
+NEXTAUTH_SECRET="your_nextauth_secret_here"    # Secret used to sign NextAuth tokens
+
+# Cloudinary Configuration for Image Uploads
+# Replace these with your Cloudinary account details for image uploads.
+NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="your_cloud_name_here"   # Cloudinary cloud name
+NEXT_PUBLIC_CLOUDINARY_CLOUD_PRESET="your_upload_preset"   # Cloudinary upload preset
+
diff --git a/alimento-nextjs/actions/dish/dishCREATE.ts b/alimento-nextjs/actions/dish/dishCREATE.ts
index 678842a..d05edb3 100644
--- a/alimento-nextjs/actions/dish/dishCREATE.ts
+++ b/alimento-nextjs/actions/dish/dishCREATE.ts
@@ -10,6 +10,7 @@ export async function createDish({
   category,
   tags,
   vendorId,
+  images,
 }: {
   name: string;
   description?: string;
@@ -17,6 +18,7 @@ export async function createDish({
   category: Category;
   tags: Tag[];
   vendorId: string;
+  images: string[]
 }): Promise<{ success: boolean; error?: string; data?: Dish }> {
   try {
     const newDish = await prismadb.dish.create({
@@ -27,6 +29,9 @@ export async function createDish({
         category,
         tags,
         vendorId,
+        images: {
+          create: images.map(url => ({ url })), // Assuming you're passing URLs
+        },
       },
     });
     return { success: true, data: newDish };
diff --git a/alimento-nextjs/components/multistepForm/components/sidebarConstants.tsx b/alimento-nextjs/components/multistepForm/components/sidebarConstants.tsx
index bb2a25a..0f9630d 100644
--- a/alimento-nextjs/components/multistepForm/components/sidebarConstants.tsx
+++ b/alimento-nextjs/components/multistepForm/components/sidebarConstants.tsx
@@ -14,5 +14,10 @@ export const data = [
       step: 'step 3',
       title: 'select tags',
     },
+    {
+      id: 4,
+      step: 'step 4',
+      title: 'add images',
+    },
   ];
   
\ No newline at end of file
diff --git a/alimento-nextjs/components/multistepForm/pages/formPage4.tsx b/alimento-nextjs/components/multistepForm/pages/formPage4.tsx
new file mode 100644
index 0000000..802dfc4
--- /dev/null
+++ b/alimento-nextjs/components/multistepForm/pages/formPage4.tsx
@@ -0,0 +1,25 @@
+import ImageUpload from '@/components/ui/imageUpload';
+import { useGlobalDish } from '@/context/dishFormContext';
+
+const FormPage4 = () => {
+  const { imageUrl, handleImageChange, handleImageRemove } = useGlobalDish();
+
+  return (
+    <div className="h-3/4 flex mb-5 flex-col items-start gap-8 justify-start">
+      <h1 className="text-primary-marineBlue font-bold text-[1.6rem] md:text-4xl leading-9">
+        Add Images
+      </h1>
+      <h3 className="text-gray-400 mt-2 ">
+        Please add some images for your listing
+        <br />
+      </h3>
+      <ImageUpload
+        value={imageUrl.map(imageUrl => imageUrl)}
+        onChange={handleImageChange}
+        onRemove={handleImageRemove}
+      />
+    </div>
+  );
+};
+
+export default FormPage4;
diff --git a/alimento-nextjs/components/multistepForm/pages/main.tsx b/alimento-nextjs/components/multistepForm/pages/main.tsx
index 194431a..6354526 100644
--- a/alimento-nextjs/components/multistepForm/pages/main.tsx
+++ b/alimento-nextjs/components/multistepForm/pages/main.tsx
@@ -5,6 +5,8 @@ import { Toaster } from 'react-hot-toast';
 import FormPage1 from './formPage1';
 import FormPage2 from './formPage2';
 import TagSelector from './formPage3';
+import FormPage3 from './formPage3';
+import FormPage4 from './formPage4';
 
 const Main = ({ VendorId }: { VendorId: string }) => {
   const {
@@ -77,7 +79,8 @@ const Main = ({ VendorId }: { VendorId: string }) => {
         <Toaster />
         {currentStep === 1 && <FormPage1/>}
         {currentStep === 2 && <FormPage2/>}
-        {currentStep === 3 && <TagSelector/>}
+        {currentStep === 3 && <FormPage3/>}
+        {currentStep === 4 && <FormPage4/>}
         {!formCompleted && (
           <footer className="md:block hidden w-full left-0 right-0 bottom-0">
             <div className="flex">
@@ -94,7 +97,7 @@ const Main = ({ VendorId }: { VendorId: string }) => {
               <div className="text-right text-sm mt-2">
                 <button
                   onClick={
-                    currentStep === 3
+                    currentStep === 4
                       ? e => {
                           e.preventDefault();
                           submitListingForm(VendorId)
@@ -103,7 +106,7 @@ const Main = ({ VendorId }: { VendorId: string }) => {
                   }
                   className="bg-black text-gray-200 rounded-full p-3"
                 >
-                  {currentStep === 3 ? 'Confirm' : 'Next Step'}
+                  {currentStep === 4 ? 'Confirm' : 'Next Step'}
                 </button>
               </div>
             </div>
@@ -128,7 +131,7 @@ const Main = ({ VendorId }: { VendorId: string }) => {
               <div className="text-right">
                 <button
                   onClick={
-                    currentStep === 3
+                    currentStep === 4
                       ? e => {
                           e.preventDefault();
                           submitListingForm(VendorId)
@@ -137,7 +140,7 @@ const Main = ({ VendorId }: { VendorId: string }) => {
                   }
                   className="bg-black text-gray-200 rounded-full p-2"
                 >
-                  {currentStep === 3 ? 'Confirm' : 'Next Step'}
+                  {currentStep === 4 ? 'Confirm' : 'Next Step'}
                 </button>
               </div>
             </div>
diff --git a/alimento-nextjs/components/ui/imageUpload.tsx b/alimento-nextjs/components/ui/imageUpload.tsx
new file mode 100644
index 0000000..9bdff70
--- /dev/null
+++ b/alimento-nextjs/components/ui/imageUpload.tsx
@@ -0,0 +1,89 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { ImagePlus, Trash } from 'lucide-react';
+import Image from 'next/image';
+import {
+  CldUploadWidget,
+  CloudinaryUploadWidgetResults,
+} from 'next-cloudinary';
+
+import { Button } from '@/components/ui/button';
+
+interface ImageUploadProps {
+  disabled?: boolean;
+  onChange: (value: string) => void;
+  onRemove: (value: string) => void;
+  value: string[];
+}
+
+const ImageUpload: React.FC<ImageUploadProps> = ({
+  disabled,
+  onChange,
+  onRemove,
+  value,
+}) => {
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  const onUpload = (result: CloudinaryUploadWidgetResults) => {
+    if (typeof result.info !== 'string' && result.info?.secure_url) {
+      onChange(result.info.secure_url);
+      console.log(value);
+    }
+  };
+
+  if (!isMounted) return null;
+
+  return (
+    <div>
+      <div className="mb-4 flex items-center gap-4">
+        {/* iterate to display existing images */}
+        {value.map(url => (
+          <div
+            key={url}
+            className="relative w-[200px] h-[200px] rounded-md overflow-hidden"
+          >
+            <div className="z-10 absolute top-2 right-2">
+              <Button
+                type="button"
+                variant={'destructive'}
+                onClick={() => onRemove(url)}
+                size={'icon'}
+              >
+                <Trash className="h-4 w-4" />
+              </Button>
+            </div>
+            <Image fill className="object-cover" alt="Image" src={url} />
+          </div>
+        ))}
+      </div>
+
+      {/* upload image button */}
+      <CldUploadWidget onSuccess={onUpload} uploadPreset={process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_PRESET}>
+        {({ open }) => {
+          const onClick = () => {
+            open();
+          };
+
+          return (
+            <Button
+              type="button"
+              disabled={disabled}
+              variant={'secondary'}
+              onClick={onClick}
+            >
+              <ImagePlus className="w-4 h-4 mr-2" />
+              Upload an Image
+            </Button>
+          );
+        }}
+      </CldUploadWidget>
+    </div>
+  );
+};
+
+export default ImageUpload;
diff --git a/alimento-nextjs/context/dishFormContext.tsx b/alimento-nextjs/context/dishFormContext.tsx
index 122b178..0623602 100644
--- a/alimento-nextjs/context/dishFormContext.tsx
+++ b/alimento-nextjs/context/dishFormContext.tsx
@@ -37,6 +37,15 @@ interface GlobalContextType {
   setValidDishCategory: (valid: boolean) => void;
   validDishTags: boolean;
   setValidDishTags: (valid: boolean) => void;
+  validImageUrls: boolean; // New state for image URL validation
+  setValidImageUrls: (valid: boolean) => void;
+
+
+  imageUrl: string[];
+  setImageUrl: (url: string[]) => void;
+
+  handleImageChange: (url: string) => void;
+  handleImageRemove: (url: string) => void;
 
   checkedBox: boolean;
   setCheckedBox: (checkedBox: boolean) => void;
@@ -71,11 +80,22 @@ export const GlobalDishProvider = ({ children }: { children: ReactNode }) => {
   );
   const [dishTags, setDishTags] = useState<Tag[]>([]);
 
+  const [imageUrl, setImageUrl] = useState<string[]>([]);
+
+  const handleImageChange = useCallback((url: string) => {
+    setImageUrl(prevUrls => [...prevUrls, url]); // Use the previous state
+  }, []);
+
+  const handleImageRemove = useCallback((url: string) => {
+    setImageUrl(prevUrls => prevUrls.filter(image => image !== url)); // Use the previous state
+  }, []);
+
   const [validDishName, setValidDishName] = useState(false);
   const [validDishPrice, setValidDishPrice] = useState(false);
   const [validDishDescription, setValidDishDescription] = useState(false);
   const [validDishCategory, setValidDishCategory] = useState(false);
   const [validDishTags, setValidDishTags] = useState(false);
+  const [validImageUrls, setValidImageUrls] = useState(false);
 
   const [checkedBox, setCheckedBox] = useState(false);
   const [formCompleted, setFormCompleted] = useState(false);
@@ -124,6 +144,14 @@ export const GlobalDishProvider = ({ children }: { children: ReactNode }) => {
       setValidDishTags(true);
     }
   
+
+    if (imageUrl.length === 0) {
+      setValidImageUrls(false); // No image URLs provided
+      allValid = false;
+    } else {
+      setValidImageUrls(true); // At least one image URL is present
+    }
+
     // If all fields are valid, proceed with submission
     if (allValid) {
       setFormCompleted(true);
@@ -140,7 +168,8 @@ export const GlobalDishProvider = ({ children }: { children: ReactNode }) => {
             description: dishDescription,
             category: dishCategory,
             tags: dishTags,
-            vendorId:vendorId
+            vendorId:vendorId,
+            images:imageUrl
         });
   
         if (!response.data) {
@@ -177,6 +206,11 @@ export const GlobalDishProvider = ({ children }: { children: ReactNode }) => {
         setDishCategory,
         dishTags,
         setDishTags,
+        imageUrl,
+        setImageUrl,
+        handleImageChange,
+        handleImageRemove,
+
 
         validDishName,
         setValidDishName,
@@ -189,6 +223,10 @@ export const GlobalDishProvider = ({ children }: { children: ReactNode }) => {
         validDishTags,
         setValidDishTags,
 
+        validImageUrls,
+        setValidImageUrls,
+
+
         checkedBox,
         setCheckedBox,
         formCompleted,
diff --git a/alimento-nextjs/next.config.ts b/alimento-nextjs/next.config.ts
index e9ffa30..3f884aa 100644
--- a/alimento-nextjs/next.config.ts
+++ b/alimento-nextjs/next.config.ts
@@ -1,7 +1,16 @@
-import type { NextConfig } from "next";
+import type { NextConfig } from 'next';
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'res.cloudinary.com',
+        port: '',
+        pathname: '/**',
+      },
+    ]
+  },
 };
 
 export default nextConfig;
diff --git a/alimento-nextjs/package.json b/alimento-nextjs/package.json
index 492a6f0..fadfb6b 100644
--- a/alimento-nextjs/package.json
+++ b/alimento-nextjs/package.json
@@ -24,6 +24,7 @@
     "lucide-react": "^0.454.0",
     "next": "15.0.2",
     "next-auth": "^4.24.10",
+    "next-cloudinary": "^6.16.0",
     "nodemailer": "^6.9.16",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
diff --git a/alimento-nextjs/prisma/schema.prisma b/alimento-nextjs/prisma/schema.prisma
index 3ac79c6..f13fe88 100644
--- a/alimento-nextjs/prisma/schema.prisma
+++ b/alimento-nextjs/prisma/schema.prisma
@@ -55,17 +55,27 @@ enum Tag {
 }
 
 model Dish {
-  id          String    @id @default(uuid()) @map("_id")
+  id          String   @id @default(uuid()) @map("_id")
   name        String
   description String?
   price       Float
-  category    Category 
-  tags        Tag[]   
+  category    Category
+  tags        Tag[]
 
-  vendorId    String    
-  vendor      Vendor    @relation(fields: [vendorId], references: [id])
+  images Image[]
 
-  createdAt   DateTime  @default(now())
-  updatedAt   DateTime  @updatedAt
+  vendorId String
+  vendor   Vendor @relation(fields: [vendorId], references: [id])
+
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
 }
 
+model Image {
+  id        String   @id @default(uuid()) @map("_id")
+  dishId    String
+  dish      Dish     @relation(fields: [dishId], references: [id], onDelete: Cascade)
+  url       String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+}

From 8de5a39672cb2f9cf35ac4f22e84979c71280bcb Mon Sep 17 00:00:00 2001
From: Shivansh <shivanshsaxena2910@gmail.com>
Date: Fri, 8 Nov 2024 06:04:34 +0530
Subject: [PATCH 2/3] vendor dashboard page

---
 .../[vendorId]/components/dishesPage.tsx      |  52 ++++
 .../app/vendor/[vendorId]/page.tsx            |  14 +-
 alimento-nextjs/components/ui/carousel.tsx    | 261 ++++++++++++++++++
 .../components/vendor/dishCard.tsx            |  83 ++++++
 alimento-nextjs/package.json                  |   2 +
 alimento-nextjs/prisma/schema.prisma          |   2 +-
 6 files changed, 410 insertions(+), 4 deletions(-)
 create mode 100644 alimento-nextjs/app/vendor/[vendorId]/components/dishesPage.tsx
 create mode 100644 alimento-nextjs/components/ui/carousel.tsx
 create mode 100644 alimento-nextjs/components/vendor/dishCard.tsx

diff --git a/alimento-nextjs/app/vendor/[vendorId]/components/dishesPage.tsx b/alimento-nextjs/app/vendor/[vendorId]/components/dishesPage.tsx
new file mode 100644
index 0000000..ae47169
--- /dev/null
+++ b/alimento-nextjs/app/vendor/[vendorId]/components/dishesPage.tsx
@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+import { Button } from '@/components/ui/button'; // Import the Shadcn Button component
+import Link from 'next/link';
+import { DishWithImages } from '../page';
+import DishCard from '@/components/vendor/dishCard';
+
+const DishesPage = async ({
+  vendorId,
+  Dishes,
+}: {
+  vendorId: string
+  Dishes: DishWithImages[];
+}) => {
+
+  return (
+    <div className="min-h-screen p-8 flex flex-col gap-10 bg-gray-50">
+      <div className="flex flex-col gap-5 lg:gap-0 md:flex-row justify-between mb-4 p-5 bg-gray-200 items-center rounded-xl">
+        <h1 className="text-4xl font-bold text-center">Your Dishes</h1>
+
+        <Link href={`/vendor/${vendorId}/createDish`} ><Button className="md:ml-auto">Add New Dish</Button></Link>
+      </div>
+
+      <div className="flex justify-center mb-4">
+        <input
+          type="text"
+          placeholder="Search Dishes..."
+          //   value={searchTerm}
+          //   onChange={(e) => setSearchTerm(e.target.value)}
+          className="p-3 border rounded-full border-gray-300 w-full md:w-1/2" // Adjusted width to make it centered
+        />
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+        {Dishes.map((Dish, index) => (
+          <DishCard
+            key={index}
+            vendorId={vendorId}
+            DishId={Dish.id}
+            name={Dish.name}
+            price={Dish.price}
+            description={Dish.description}
+            category={Dish.category}
+            tags={Dish.tags}
+            images={Dish.images} 
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default DishesPage;
diff --git a/alimento-nextjs/app/vendor/[vendorId]/page.tsx b/alimento-nextjs/app/vendor/[vendorId]/page.tsx
index 380f943..e60f994 100644
--- a/alimento-nextjs/app/vendor/[vendorId]/page.tsx
+++ b/alimento-nextjs/app/vendor/[vendorId]/page.tsx
@@ -1,6 +1,7 @@
 import SetUpDishes from '@/components/multistepForm/setupDishes';
 import prismadb from '@/lib/prismadb';
-import { Dish } from '@prisma/client';
+import { Dish, Image } from '@prisma/client';
+import DishesPage from './components/dishesPage';
 
 interface VendorPageProps {
   params: {
@@ -8,8 +9,12 @@ interface VendorPageProps {
   };
 }
 
+export interface DishWithImages extends Dish{
+  images:Image[]
+}
+
 const VendorPage: React.FC<VendorPageProps> = async ({ params }) => {
-  let Dishes: Dish[] | null = [];
+  let Dishes: DishWithImages[] | null = [];
 
   const { vendorId } = await params;
   try {
@@ -17,6 +22,9 @@ const VendorPage: React.FC<VendorPageProps> = async ({ params }) => {
       where: {
         vendorId: vendorId,
       },
+      include:{
+        images:true
+      }
     });
   } catch (err) {
     console.error(
@@ -26,7 +34,7 @@ const VendorPage: React.FC<VendorPageProps> = async ({ params }) => {
   }
 
     if (Dishes.length){
-       return <div>this will be the dishes page</div>
+       return <DishesPage vendorId={vendorId} Dishes={Dishes}/>
     }
   
     else{
diff --git a/alimento-nextjs/components/ui/carousel.tsx b/alimento-nextjs/components/ui/carousel.tsx
new file mode 100644
index 0000000..5a36366
--- /dev/null
+++ b/alimento-nextjs/components/ui/carousel.tsx
@@ -0,0 +1,261 @@
+"use client"
+
+import * as React from "react"
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons"
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: "horizontal" | "vertical"
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+
+  return context
+}
+
+const Carousel = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & CarouselProps
+>(
+  (
+    {
+      orientation = "horizontal",
+      opts,
+      setApi,
+      plugins,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === "horizontal" ? "x" : "y",
+      },
+      plugins
+    )
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+    const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+    const onSelect = React.useCallback((api: CarouselApi) => {
+      if (!api) {
+        return
+      }
+
+      setCanScrollPrev(api.canScrollPrev())
+      setCanScrollNext(api.canScrollNext())
+    }, [])
+
+    const scrollPrev = React.useCallback(() => {
+      api?.scrollPrev()
+    }, [api])
+
+    const scrollNext = React.useCallback(() => {
+      api?.scrollNext()
+    }, [api])
+
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === "ArrowLeft") {
+          event.preventDefault()
+          scrollPrev()
+        } else if (event.key === "ArrowRight") {
+          event.preventDefault()
+          scrollNext()
+        }
+      },
+      [scrollPrev, scrollNext]
+    )
+
+    React.useEffect(() => {
+      if (!api || !setApi) {
+        return
+      }
+
+      setApi(api)
+    }, [api, setApi])
+
+    React.useEffect(() => {
+      if (!api) {
+        return
+      }
+
+      onSelect(api)
+      api.on("reInit", onSelect)
+      api.on("select", onSelect)
+
+      return () => {
+        api?.off("select", onSelect)
+      }
+    }, [api, onSelect])
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          carouselRef,
+          api: api,
+          opts,
+          orientation:
+            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+        }}
+      >
+        <div
+          ref={ref}
+          onKeyDownCapture={handleKeyDown}
+          className={cn("relative", className)}
+          role="region"
+          aria-roledescription="carousel"
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    )
+  }
+)
+Carousel.displayName = "Carousel"
+
+const CarouselContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div ref={carouselRef} className="overflow-hidden">
+      <div
+        ref={ref}
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+})
+CarouselContent.displayName = "CarouselContent"
+
+const CarouselItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      ref={ref}
+      role="group"
+      aria-roledescription="slide"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+CarouselItem.displayName = "CarouselItem"
+
+const CarouselPrevious = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute  h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-left-12 top-1/2 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeftIcon className="h-4 w-4" />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  )
+})
+CarouselPrevious.displayName = "CarouselPrevious"
+
+const CarouselNext = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-right-12 top-1/2 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRightIcon className="h-4 w-4" />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  )
+})
+CarouselNext.displayName = "CarouselNext"
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+}
diff --git a/alimento-nextjs/components/vendor/dishCard.tsx b/alimento-nextjs/components/vendor/dishCard.tsx
new file mode 100644
index 0000000..424418b
--- /dev/null
+++ b/alimento-nextjs/components/vendor/dishCard.tsx
@@ -0,0 +1,83 @@
+'use client';
+import React from 'react';
+import { Category, Image as ImageInterface, Tag } from '@prisma/client';
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from '@/components/ui/carousel';
+import Image from 'next/image';
+import Autoplay from 'embla-carousel-autoplay';
+import { Button } from '@/components/ui/button'; // Importing the Button component from Shadcn
+import Link from 'next/link';
+
+interface DishCardProps {
+  name: string;
+  price: number;
+  description: string;
+  vendorId:string
+  category: Category
+  images: ImageInterface[];
+  tags: Tag[]
+  DishId: string
+}
+
+const DishCard: React.FC<DishCardProps> = ({
+  name,
+  vendorId,
+  price,
+  description,
+  category,
+  images,
+  DishId
+}) => {
+  return (
+    <div className="bg-white overflow-hidden shadow-lg rounded-lg">
+      <Carousel
+        className="h-48"
+        opts={{
+          align: 'start',
+          loop: true,
+        }}
+        plugins={[
+          Autoplay({
+            delay: 2000,
+          }),
+        ]}
+      >
+        <CarouselContent className="flex gap-4">
+          {images.map((image, index) => (
+            <CarouselItem key={index}>
+              <Image
+                src={image.url} // Use the image URL from the database
+                alt={name}
+                width={1000}
+                height={1000} // Fill the parent container
+                  
+                className="rounded-t-lg h-48 w-full" // Optional: Add styling for rounded corners
+              />
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+      </Carousel>
+      <div className="p-4">
+        <h3 className="text-xl font-semibold mb-2">{name}</h3>
+        <p className="text-gray-600 mb-2">{description}</p>
+        <p className="text-lg font-bold mb-2">Price: ₹{price}</p>
+        <p className="text-sm text-gray-500 mb-4">Category: {category}</p>
+        <div className="flex justify-between">
+          <Link href={`/vendor/${vendorId}/${DishId}`}>
+          <Button variant="outline" className="text-blue-600">
+            Edit
+          </Button>
+          </Link>
+          <Button variant="outline" className="text-red-600">
+            Delete
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DishCard;
diff --git a/alimento-nextjs/package.json b/alimento-nextjs/package.json
index fadfb6b..23068f8 100644
--- a/alimento-nextjs/package.json
+++ b/alimento-nextjs/package.json
@@ -20,6 +20,8 @@
     "axios": "^1.7.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "embla-carousel-autoplay": "^8.3.1",
+    "embla-carousel-react": "^8.3.1",
     "input-otp": "^1.4.1",
     "lucide-react": "^0.454.0",
     "next": "15.0.2",
diff --git a/alimento-nextjs/prisma/schema.prisma b/alimento-nextjs/prisma/schema.prisma
index f13fe88..c5ef52b 100644
--- a/alimento-nextjs/prisma/schema.prisma
+++ b/alimento-nextjs/prisma/schema.prisma
@@ -57,7 +57,7 @@ enum Tag {
 model Dish {
   id          String   @id @default(uuid()) @map("_id")
   name        String
-  description String?
+  description String
   price       Float
   category    Category
   tags        Tag[]

From 4247d928c1a3ebb6848c1c9b98010385e1c38455 Mon Sep 17 00:00:00 2001
From: Shivansh <shivanshsaxena2910@gmail.com>
Date: Fri, 8 Nov 2024 10:47:40 +0530
Subject: [PATCH 3/3] create dish form

---
 alimento-nextjs/actions/dish/dishCREATE.ts    |   2 +-
 alimento-nextjs/app/api/testing/dish/route.ts |   8 +-
 alimento-nextjs/app/layout.tsx                |   2 -
 .../[vendorId]/components/dishesPage.tsx      |   2 +-
 .../createDish/components/postDishForm.tsx    | 275 ++++++++++++++++++
 .../app/vendor/[vendorId]/createDish/page.tsx |  15 +
 .../multistepForm/components/tagSelector.tsx  |   1 -
 .../multistepForm/pages/formPage2.tsx         |   2 +-
 .../components/multistepForm/pages/main.tsx   |   1 -
 alimento-nextjs/components/ui/heading.tsx     |  13 +
 alimento-nextjs/components/ui/separator.tsx   |  31 ++
 .../vendor/tagSelectorCreateDishForm.tsx      |  85 ++++++
 alimento-nextjs/package.json                  |   1 +
 13 files changed, 426 insertions(+), 12 deletions(-)
 create mode 100644 alimento-nextjs/app/vendor/[vendorId]/createDish/components/postDishForm.tsx
 create mode 100644 alimento-nextjs/app/vendor/[vendorId]/createDish/page.tsx
 create mode 100644 alimento-nextjs/components/ui/heading.tsx
 create mode 100644 alimento-nextjs/components/ui/separator.tsx
 create mode 100644 alimento-nextjs/components/vendor/tagSelectorCreateDishForm.tsx

diff --git a/alimento-nextjs/actions/dish/dishCREATE.ts b/alimento-nextjs/actions/dish/dishCREATE.ts
index d05edb3..ac5a773 100644
--- a/alimento-nextjs/actions/dish/dishCREATE.ts
+++ b/alimento-nextjs/actions/dish/dishCREATE.ts
@@ -13,7 +13,7 @@ export async function createDish({
   images,
 }: {
   name: string;
-  description?: string;
+  description: string;
   price: number;
   category: Category;
   tags: Tag[];
diff --git a/alimento-nextjs/app/api/testing/dish/route.ts b/alimento-nextjs/app/api/testing/dish/route.ts
index 69f8cd1..fe4b2fb 100644
--- a/alimento-nextjs/app/api/testing/dish/route.ts
+++ b/alimento-nextjs/app/api/testing/dish/route.ts
@@ -1,20 +1,19 @@
 
 import { createDish } from "@/actions/dish/dishCREATE";
 import { getAllDishes } from "@/actions/dish/dishGETALL";
-import { Category, Tag } from "@prisma/client";
 import { NextResponse } from "next/server";
 
 // POST route: Creates a new dish
 export async function POST(req: Request) {
   try {
     const body = await req.json();
-    const { name, description, price, category, tags, vendorId } = body;
+    const { name, description, price, category, tags, vendorId ,images} = body;
 
-    if (!name || !price || !category || !vendorId) {
+    if (!name || !price || !category || !vendorId || !images) {
       return new NextResponse("Name, price, category, and vendor ID are required!", { status: 400 });
     }
 
-    const resp = await createDish({ name, description, price, category, tags, vendorId });
+    const resp = await createDish({ name, description, price, category, tags, vendorId, images });
 
     if (!resp.success) {
       return new NextResponse(resp.error || "Failed to create dish", { status: 500 });
@@ -30,7 +29,6 @@ export async function POST(req: Request) {
 // GET route: Retrieves all dishes with optional filtering
 export async function GET(req: Request) {
   try {
-    const url = new URL(req.url);
 
     const resp = await getAllDishes({});
 
diff --git a/alimento-nextjs/app/layout.tsx b/alimento-nextjs/app/layout.tsx
index 7c3f28a..400a61f 100644
--- a/alimento-nextjs/app/layout.tsx
+++ b/alimento-nextjs/app/layout.tsx
@@ -1,8 +1,6 @@
 import type { Metadata } from "next";
 import "./globals.css";
 import { Providers } from "@/lib/providers";
-import Navbar from "@/components/common/navbar";
-import Footer from "@/components/common/footer";
 
 
 export const metadata: Metadata = {
diff --git a/alimento-nextjs/app/vendor/[vendorId]/components/dishesPage.tsx b/alimento-nextjs/app/vendor/[vendorId]/components/dishesPage.tsx
index ae47169..2221aa2 100644
--- a/alimento-nextjs/app/vendor/[vendorId]/components/dishesPage.tsx
+++ b/alimento-nextjs/app/vendor/[vendorId]/components/dishesPage.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { Button } from '@/components/ui/button'; // Import the Shadcn Button component
 import Link from 'next/link';
 import { DishWithImages } from '../page';
diff --git a/alimento-nextjs/app/vendor/[vendorId]/createDish/components/postDishForm.tsx b/alimento-nextjs/app/vendor/[vendorId]/createDish/components/postDishForm.tsx
new file mode 100644
index 0000000..a501acf
--- /dev/null
+++ b/alimento-nextjs/app/vendor/[vendorId]/createDish/components/postDishForm.tsx
@@ -0,0 +1,275 @@
+"use client";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useParams, useRouter } from "next/navigation";
+import { useCallback, useState } from "react";
+import { useForm } from "react-hook-form";
+import toast from "react-hot-toast";
+import * as z from "zod";
+
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Heading } from "@/components/ui/heading";
+import ImageUpload from "@/components/ui/imageUpload";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+import { createDish } from "@/actions/dish/dishCREATE";
+import TagSelectorCreateDish from "@/components/vendor/tagSelectorCreateDishForm";
+
+const formSchema = z.object({
+  name: z.string().min(1, "Name is required"),
+  price: z.number().min(0, "Price must be a positive number"),
+  description: z.string().min(1, "Description is required"),
+  category: z.enum(
+    ["APPETIZER", "MAIN_COURSE", "DESSERT", "BEVERAGE", "SNACK"],
+    {
+      errorMap: () => ({ message: "Category is required" }),
+    }
+  ),
+  tags: z.array(z.enum([
+    "SPICY",
+    "VEGETARIAN",
+    "VEGAN",
+    "GLUTEN_FREE",
+    "DAIRY_FREE",
+    "NUT_FREE",
+    "INDIAN",
+    "CHINESE",
+    "ITALIAN",
+    "ARABIC",
+  ])).min(1, "Atleast 1 tag is required"),
+  images: z.array(z.string()).min(1, "At least one image is required"),
+});
+
+type CreateDishFormValues = z.infer<typeof formSchema>;
+
+export const CreateDishForm: React.FC = () => {
+  const params = useParams();
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+
+  const title = "Create Dish";
+  const description = "Fill in the details to create a new Dish.";
+  const toastMessage = "Dish created.";
+  const action = "Create";
+
+  const form = useForm<CreateDishFormValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: "",
+      price: 0,
+      description: "",
+      category: "APPETIZER",
+      tags: [],
+      images: [],
+    },
+  });
+
+  const onSubmit = async (data: CreateDishFormValues) => {
+    try {
+      if (!params.vendorId) {
+        toast.error("vendorId is required!");
+        return;
+      }
+
+      const vendorId = Array.isArray(params.vendorId)
+        ? params.vendorId[0]
+        : params.vendorId;
+
+      if (!vendorId) {
+        toast.error("Valid vendorId is required!");
+        return;
+      }
+
+      setLoading(true);
+
+      console.log(data,vendorId)
+      await createDish({
+        vendorId: vendorId,
+        name : data.name,
+        description :data.description,
+        price : data.price,
+        category : data.category,
+        tags : data.tags,
+        images : data.images
+      });
+
+      router.push(`/vendor/${vendorId}/`);
+      toast.success(toastMessage);
+    } catch (err) {
+      toast.error("Something went wrong");
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Handle image change
+  const handleImageChange = useCallback(
+    (url: string) => {
+      form.setValue("images", [...form.getValues("images"), url]);
+    },
+    [form]
+  );
+
+  // Handle image removal
+  const handleImageRemove = useCallback(
+    (url: string) => {
+      const updatedImages = form
+        .getValues("images")
+        .filter((image) => image !== url);
+      form.setValue("images", updatedImages);
+    },
+    [form]
+  );
+
+  return (
+    <>
+      <div className="flex items-center justify-between">
+        <Heading title={title} description={description} />
+      </div>
+      <Separator />
+
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="space-y-8 w-full"
+        >
+          <FormField
+            control={form.control}
+            name="images"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Images</FormLabel>
+                <FormControl>
+                  <ImageUpload
+                    value={field.value}
+                    disabled={loading}
+                    onChange={handleImageChange}
+                    onRemove={handleImageRemove}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Name</FormLabel>
+                  <FormControl>
+                    <Input
+                      disabled={loading}
+                      placeholder="Dish Name"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="price"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Price</FormLabel>
+                  <FormControl>
+                    <Input
+                      type="number"
+                      disabled={loading}
+                      placeholder="Price"
+                      {...field}
+                      // Ensure value is a number and valid for form submission
+                      onChange={(e) => {
+                        const value = parseFloat(e.target.value);
+                        field.onChange(isNaN(value) ? 0 : value);
+                      }}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Description</FormLabel>
+                  <FormControl>
+                    <Input
+                      disabled={loading}
+                      placeholder="Description"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="category"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Category</FormLabel>
+                  <FormControl>
+                    <select
+                      disabled={loading}
+                      {...field}
+                      className="border rounded-md p-2"
+                    >
+                      <option value="" disabled>
+                        Select a category
+                      </option>
+                      <option value="APPETIZER">Appetizer</option>
+                      <option value="MAIN_COURSE">Main Course</option>
+                      <option value="DESSERT">Dessert</option>
+                      <option value="BEVERAGE">Beverage</option>
+                      <option value="SNACK">Snack</option>
+                    </select>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="tags"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Tags</FormLabel>
+                  <FormControl>
+                    <TagSelectorCreateDish
+                      dishTags={field.value}
+                      setDishTags={(tags) => field.onChange(tags)}
+                      disabled={loading}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+
+          <Button disabled={loading} className="ml-auto" type="submit">
+            {action}
+          </Button>
+        </form>
+      </Form>
+      <Separator />
+    </>
+  );
+};
diff --git a/alimento-nextjs/app/vendor/[vendorId]/createDish/page.tsx b/alimento-nextjs/app/vendor/[vendorId]/createDish/page.tsx
new file mode 100644
index 0000000..5169b81
--- /dev/null
+++ b/alimento-nextjs/app/vendor/[vendorId]/createDish/page.tsx
@@ -0,0 +1,15 @@
+
+import { CreateDishForm } from "./components/postDishForm";
+
+const DishPage = () => {
+  
+  return (
+    <div className="flex-col">
+      <div className="flex-1 space-y-4 p-8 pt-6">
+        <CreateDishForm/>
+      </div>
+    </div>
+  );
+};
+
+export default DishPage;
diff --git a/alimento-nextjs/components/multistepForm/components/tagSelector.tsx b/alimento-nextjs/components/multistepForm/components/tagSelector.tsx
index e506703..bbbe960 100644
--- a/alimento-nextjs/components/multistepForm/components/tagSelector.tsx
+++ b/alimento-nextjs/components/multistepForm/components/tagSelector.tsx
@@ -7,7 +7,6 @@ import {
   } from "@/components/ui/select";
 import { useGlobalDish } from "@/context/dishFormContext";
   import { Tag } from "@prisma/client";
-  import { useState } from "react";
   
   const TagSelector = () => {
     const tags = Object.values(Tag)
diff --git a/alimento-nextjs/components/multistepForm/pages/formPage2.tsx b/alimento-nextjs/components/multistepForm/pages/formPage2.tsx
index 89cdd7f..53b4ce0 100644
--- a/alimento-nextjs/components/multistepForm/pages/formPage2.tsx
+++ b/alimento-nextjs/components/multistepForm/pages/formPage2.tsx
@@ -7,7 +7,7 @@ import {
     DropdownMenuTrigger,
   } from '@/components/ui/dropdown-menu';
 import { useGlobalDish } from '@/context/dishFormContext';
-import { Category, Prisma } from '@prisma/client';
+import { Category } from '@prisma/client';
   import { ChevronDown } from 'lucide-react';
   
   const categories =Object.values(Category)
diff --git a/alimento-nextjs/components/multistepForm/pages/main.tsx b/alimento-nextjs/components/multistepForm/pages/main.tsx
index 6354526..dedd032 100644
--- a/alimento-nextjs/components/multistepForm/pages/main.tsx
+++ b/alimento-nextjs/components/multistepForm/pages/main.tsx
@@ -4,7 +4,6 @@ import { MouseEventHandler, useEffect } from 'react';
 import { Toaster } from 'react-hot-toast';
 import FormPage1 from './formPage1';
 import FormPage2 from './formPage2';
-import TagSelector from './formPage3';
 import FormPage3 from './formPage3';
 import FormPage4 from './formPage4';
 
diff --git a/alimento-nextjs/components/ui/heading.tsx b/alimento-nextjs/components/ui/heading.tsx
new file mode 100644
index 0000000..bb58c7c
--- /dev/null
+++ b/alimento-nextjs/components/ui/heading.tsx
@@ -0,0 +1,13 @@
+interface HeadingProps {
+  title: string;
+  description: string;
+}
+
+export const Heading: React.FC<HeadingProps> = ({ title, description }) => {
+  return (
+    <div className="dark:text-gray-200 text-center ">
+      <h2 className="text-4xl font-bold tracking-tight font-handlee text-customTeal dark:text-Green">{title}</h2>
+      <p className="text-lg text-muted-foreground"> {description}</p>
+    </div>
+  );
+};
diff --git a/alimento-nextjs/components/ui/separator.tsx b/alimento-nextjs/components/ui/separator.tsx
new file mode 100644
index 0000000..12d81c4
--- /dev/null
+++ b/alimento-nextjs/components/ui/separator.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }
diff --git a/alimento-nextjs/components/vendor/tagSelectorCreateDishForm.tsx b/alimento-nextjs/components/vendor/tagSelectorCreateDishForm.tsx
new file mode 100644
index 0000000..6b5f364
--- /dev/null
+++ b/alimento-nextjs/components/vendor/tagSelectorCreateDishForm.tsx
@@ -0,0 +1,85 @@
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from "@/components/ui/select";
+import { Tag } from "@prisma/client";
+import React from "react";
+
+interface TagSelectorCreateDishProps {
+  dishTags: Tag[];
+  setDishTags: (tags: Tag[]) => void;
+  disabled: boolean;
+}
+
+const TagSelectorCreateDish: React.FC<TagSelectorCreateDishProps> = ({
+  dishTags,
+  setDishTags,
+  disabled,
+}) => {
+  const tags = Object.values(Tag); // Get tags from Prisma enum
+
+  // Handle selecting or deselecting a tag
+  const handleTagSelect = (tag: Tag) => {
+    if (disabled) return; // Prevent action if disabled
+    if (dishTags.includes(tag)) {
+      // Remove tag if already selected
+      setDishTags(dishTags.filter((t) => t !== tag));
+    } else {
+      // Add tag if not already selected
+      setDishTags([...dishTags, tag]);
+    }
+  };
+
+  return (
+    <div className={disabled ? "opacity-50 pointer-events-none" : ""}>
+      <div className="mb-2">
+        <Select onValueChange={(value) => handleTagSelect(value as Tag)}>
+          <SelectTrigger className="w-64" disabled={disabled}>
+            <SelectValue placeholder="Select tags" />
+          </SelectTrigger>
+          <SelectContent>
+            {tags.map((tag) => (
+              <SelectItem key={tag} value={tag}>
+                <div className="flex items-center">
+                  <input
+                    type="checkbox"
+                    checked={dishTags.includes(tag)}
+                    onChange={() => handleTagSelect(tag)}
+                    disabled={disabled}
+                    className="mr-2"
+                  />
+                  {tag}
+                </div>
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* Display Selected Tags */}
+      <div className="flex flex-wrap gap-2 mt-2">
+        {dishTags.map((tag) => (
+          <span
+            key={tag}
+            className="bg-blue-200 text-blue-800 px-3 py-1 rounded-full flex items-center space-x-2"
+          >
+            <span>{tag}</span>
+            <button
+              type="button"
+              onClick={() => handleTagSelect(tag)}
+              disabled={disabled}
+              className="text-sm text-blue-600"
+            >
+              ×
+            </button>
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default TagSelectorCreateDish;
diff --git a/alimento-nextjs/package.json b/alimento-nextjs/package.json
index 23068f8..e8fc500 100644
--- a/alimento-nextjs/package.json
+++ b/alimento-nextjs/package.json
@@ -15,6 +15,7 @@
     "@radix-ui/react-icons": "^1.3.1",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-select": "^2.1.2",
+    "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@types/nodemailer": "^6.4.16",
     "axios": "^1.7.7",