Fully Responsive Dishes Page

alimento-nextjs/.env.example

@@ -1 +1,22 @@
-DATABASE_URL="your mongodb url"
+# 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="[email protected]"             # 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
+

alimento-nextjs/actions/dish/dishCREATE.ts

@@ -10,13 +10,15 @@ export async function createDish({
   category,
   tags,
   vendorId,
+  images,
 }: {
   name: string;
   description?: string;
   price: number;
   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 };

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;

alimento-nextjs/app/vendor/[vendorId]/page.tsx

@@ -1,22 +1,30 @@
 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: {
     vendorId: string;
   };
 }
 
+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 {
     Dishes = await prismadb.dish.findMany({
       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{

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',
+    },
   ];
 

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;

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>