added customer dashboard

Vimall03 · Nov 10, 2024 · 2633b20 · 2633b20
1 parent ce3a320
commit 2633b20
Show file tree

Hide file tree

Showing 4 changed files with 248 additions and 12 deletions.
diff --git a/...ento-nextjs/app/(PublicRoutes)/customer/[customerId]/dashboard/components/listSellers.tsx b/...ento-nextjs/app/(PublicRoutes)/customer/[customerId]/dashboard/components/listSellers.tsx
@@ -0,0 +1,106 @@
+'use client';
+import React, { useState, useEffect } from 'react';
+import { Card, CardContent } from '@/components/ui/card';
+import { Utensils } from 'lucide-react';
+import { Dish, Vendor } from '@prisma/client';
+import { Spinner } from '@/components/ui/spinner';
+import Link from 'next/link';
+import { useSession } from 'next-auth/react';
+import { useRouter } from 'next/router';
+
+interface Customer {
+  id: string;
+  name: string;
+  email: string;
+  vendors: string[];
+}
+
+interface VendorWithDish extends Vendor {
+  dishes: Dish[];
+}
+
+const ListVendors = () => {
+  const [customer, setCustomer] = useState<Customer | null>(null);
+  const [Vendors, setVendors] = useState<VendorWithDish[]>([]);
+  const [selectedVendorId, setSelectedVendorId] = useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = useState<string>('');
+  const [isMounted, setIsMounted] = useState(false);
+
+  const session = useSession();
+  const userId= session.data?.user.id
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const customerData = await fetch('/data/customers.json').then(res =>
+        res.json()
+      );
+      setCustomer(customerData[0]);
+
+      const VendorData = await fetch('/data/vendors.json').then(res =>
+        res.json()
+      );
+      console.log(VendorData)
+      setVendors(VendorData);
+    };
+    fetchData();
+    setIsMounted(true);
+  }, [session.status]);
+
+  // Filter Vendors based on search query
+  const filteredVendors = Vendors.filter(Vendor =>
+    Vendor.name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  if (!isMounted || !Vendors.length || !userId) {
+    return <Spinner />; 
+  }
+
+
+  return (
+    <div className="bg-gray-200 p-5 rounded-lg">
+      {customer && (
+        <>
+          <div className="w-full flex items-center justify-center">
+            <div className="text-3xl font-bold py-2 ">Chat With Vendors</div>
+          </div>
+          {/* Search Bar */}
+          <div className="mb-6">
+            <input
+              type="text"
+              className="w-full p-3 border border-gray-300 rounded-lg"
+              placeholder="Search Vendors by name"
+              value={searchQuery}
+              onChange={e => setSearchQuery(e.target.value)}
+            />
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
+            {filteredVendors.length > 0 ? (
+              filteredVendors.map(Vendor => (
+                <Link href={`/${userId}/${Vendor.id}`} key={Vendor.id}>
+                  <Card className="hover:scale-105">
+                    <CardContent className="p-6">
+                      <div className="flex items-center space-x-4">
+                        <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center">
+                          <Utensils className="h-6 w-6 text-primary" />
+                        </div>
+                        <div>
+                          <div className="text-lg font-semibold">{Vendor.name}</div>
+                          <p className="text-sm text-gray-500">{Vendor.dishes.length} Dishs</p>
+                        </div>
+                      </div>
+                    </CardContent>
+                  </Card>
+                </Link>
+              ))
+            ) : (
+              <p className="col-span-full text-center text-gray-500">No Vendors found</p>
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default ListVendors;
diff --git a/alimento-nextjs/app/(PublicRoutes)/customer/[customerId]/dashboard/page.tsx b/alimento-nextjs/app/(PublicRoutes)/customer/[customerId]/dashboard/page.tsx
@@ -0,0 +1,23 @@
+import Container from '@/components/ui/container';
+import ListSellers from './components/listSellers';
+
+const CustomerDashboard = () => {
+  return (
+    <div className="min-h-screen bg-[url('/userdashboard.jpg')]">
+      <Container>
+        <div className="p-8 bg-black h-screen bg-opacity-50 flex flex-col">
+          <div className='bg-black text-gray-200 w-fit my-4 bg-opacity-80 rounded-xl p-5'>
+            <h1 className="text-6xl font-bold mb-2">
+              User Dashboard
+            </h1>
+            <p className='text-pink-500'>Ready to explore Alimento?</p>
+          </div>
+
+          <ListSellers />
+        </div>
+      </Container>
+    </div>
+  );
+};
+
+export default CustomerDashboard;
diff --git a/alimento-nextjs/public/data/vendors.json b/alimento-nextjs/public/data/vendors.json
@@ -1,13 +1,120 @@
 [
-    {
-      "id": "101",
-      "name": "Spicy Villa",
-      "orders": ["1001", "1002"]
-    },
-    {
-      "id": "102",
-      "name": "Sweet Treats",
-      "orders": ["1003"]
-    }
-  ]
-
+  {
+    "id": "f42a9a12-3c63-4f75-9b8e-d92896b4c5d1",
+    "name": "Alice's Bakery",
+    "email": "[email protected]",
+    "otp": "123456",
+    "role": "vendor",
+    "dishes": [
+      {
+        "id": "a1",
+        "name": "Chocolate Cake",
+        "description": "Delicious chocolate cake",
+        "price": 15.0,
+        "category": "FOODING",
+        "tags": ["VEGETARIAN"],
+        "images": [
+          { "url": "https://example.com/images/chocolate-cake.jpg" }
+        ],
+        "vendorId": "f42a9a12-3c63-4f75-9b8e-d92896b4c5d1",
+        "createdAt": "2024-11-09T10:00:00.000Z",
+        "updatedAt": "2024-11-09T10:00:00.000Z"
+      }
+    ],
+    "chats": [],
+    "createdAt": "2024-11-08T10:00:00.000Z",
+    "updatedAt": "2024-11-08T10:00:00.000Z"
+  },
+  {
+    "id": "b93f1b23-4d5e-4d29-b9c9-fd3e7a9132d4",
+    "name": "Bob's Burgers",
+    "email": "[email protected]",
+    "otp": "654321",
+    "role": "vendor",
+    "dishes": [
+      {
+        "id": "b1",
+        "name": "Classic Burger",
+        "description": "Juicy burger with lettuce, tomato, and cheese",
+        "price": 10.0,
+        "category": "FOODING",
+        "tags": ["SPICY"],
+        "images": [
+          { "url": "https://example.com/images/classic-burger.jpg" }
+        ],
+        "vendorId": "b93f1b23-4d5e-4d29-b9c9-fd3e7a9132d4",
+        "createdAt": "2024-11-09T10:00:00.000Z",
+        "updatedAt": "2024-11-09T10:00:00.000Z"
+      },
+      {
+        "id": "c1",
+        "name": "Margherita Pizza",
+        "description": "Classic Margherita with fresh tomatoes and basil",
+        "price": 12.0,
+        "category": "FOODING",
+        "tags": ["VEGETARIAN"],
+        "images": [
+          { "url": "https://example.com/images/margherita-pizza.jpg" }
+        ],
+        "vendorId": "b93f1b23-4d5e-4d29-b9c9-fd3e7a9132d4",
+        "createdAt": "2024-11-09T10:00:00.000Z",
+        "updatedAt": "2024-11-09T10:00:00.000Z"
+      }
+    ],
+    "chats": [],
+    "createdAt": "2024-11-08T10:00:00.000Z",
+    "updatedAt": "2024-11-08T10:00:00.000Z"
+  },
+  {
+    "id": "c84g1h56-5e78-6i31-a4f5-ld2k6l8m8z9n",
+    "name": "Charlie's Pizza",
+    "email": "[email protected]",
+    "otp": "789456",
+    "role": "vendor",
+    "dishes": [
+      {
+        "id": "c1",
+        "name": "Margherita Pizza",
+        "description": "Classic Margherita with fresh tomatoes and basil",
+        "price": 12.0,
+        "category": "FOODING",
+        "tags": ["VEGETARIAN"],
+        "images": [
+          { "url": "https://example.com/images/margherita-pizza.jpg" }
+        ],
+        "vendorId": "c84g1h56-5e78-6i31-a4f5-ld2k6l8m8z9n",
+        "createdAt": "2024-11-09T10:00:00.000Z",
+        "updatedAt": "2024-11-09T10:00:00.000Z"
+      }
+    ],
+    "chats": [],
+    "createdAt": "2024-11-08T10:00:00.000Z",
+    "updatedAt": "2024-11-08T10:00:00.000Z"
+  },
+  {
+    "id": "d74g9i22-8k53-5r31-c4j9-xd4p5k2m3z1p",
+    "name": "Debbie's Desserts",
+    "email": "[email protected]",
+    "otp": "234567",
+    "role": "vendor",
+    "dishes": [
+      {
+        "id": "d1",
+        "name": "Strawberry Cheesecake",
+        "description": "Creamy cheesecake with fresh strawberries",
+        "price": 18.0,
+        "category": "FOODING",
+        "tags": ["VEGETARIAN"],
+        "images": [
+          { "url": "https://example.com/images/strawberry-cheesecake.jpg" }
+        ],
+        "vendorId": "d74g9i22-8k53-5r31-c4j9-xd4p5k2m3z1p",
+        "createdAt": "2024-11-09T10:00:00.000Z",
+        "updatedAt": "2024-11-09T10:00:00.000Z"
+      }
+    ],
+    "chats": [],
+    "createdAt": "2024-11-08T10:00:00.000Z",
+    "updatedAt": "2024-11-08T10:00:00.000Z"
+  }
+]
diff --git a/alimento-nextjs/public/userdashboard.jpg b/alimento-nextjs/public/userdashboard.jpg