Merge pull request #1326 from Tanmay-Mirgal/main

Dashboard Webpage Completed

Front-with-React/VigyBag/src/components/Aside(Dashboard)/Aside.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { FaHome, FaClipboardList, FaShoppingCart, FaHeart, FaBell, FaQuestionCircle, FaPhoneAlt } from 'react-icons/fa';
+import Logo from '../../assets/offical_logo.png';
+
+const Aside = () => {
+  return (
+    <aside className="w-64 bg-[#393d3cff] text-white flex flex-col sticky top-0 " style={{position:'sticky'}}>
+      <div className="flex items-center justify-center h-20  ">
+        <img className='mt-10' src={Logo} alt="Logo" style={{ width: '50px', height: '50px' }} />
+      </div>
+      <nav className="flex-1 px-4 py-8 space-y-2">
+        <a href="#" className="flex items-center space-x-2 p-2 hover:bg-gray-700 rounded-md">
+          <FaHome />
+          <span>Home</span>
+        </a>
+        <a href="#" className="flex items-center space-x-2 p-2 hover:bg-gray-700 rounded-md">
+          <FaClipboardList />
+          <span>My Order</span>
+        </a>
+        <a href="#" className="flex items-center space-x-2 p-2 hover:bg-gray-700 rounded-md relative">
+          <FaShoppingCart />
+          <span>My Cart</span>
+          <span className="absolute right-2 top-1 bg-red-500 text-xs text-white rounded-full w-5 h-5 flex items-center justify-center">5</span>
+        </a>
+        <a href="#" className="flex items-center space-x-2 p-2 hover:bg-gray-700 rounded-md">
+          <FaHeart />
+          <span>Wishlist</span>
+        </a>
+        <a href="#" className="flex items-center space-x-2 p-2 hover:bg-gray-700 rounded-md relative">
+          <FaBell />
+          <span>Notifications</span>
+          <span className="absolute right-2 top-1 bg-red-500 text-xs text-white rounded-full w-5 h-5 flex items-center justify-center">2</span>
+        </a>
+        <a href="#" className="flex items-center space-x-2 p-2 hover:bg-gray-700 rounded-md">
+          <FaQuestionCircle />
+          <span>Help</span>
+        </a>
+        <a href="#" className="flex items-center space-x-2 p-2 hover:bg-gray-700 rounded-md">
+          <FaPhoneAlt />
+          <span>Contact Us</span>
+        </a>
+        <a href="#" className="flex items-center space-x-2 p-2 relative justify-center">
+          <button className="mt-20 bg-green-500" style={{ padding: '13px 13px', borderRadius: '10px',border:'1px solid #98bf8cff' }}>Logout</button>
+        </a>
+      </nav>
+    </aside>
+  );
+};
+
+export default Aside;

Front-with-React/VigyBag/src/components/Aside/Aside.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { FaHome, FaClipboardList, FaShoppingCart, FaHeart, FaBell, FaQuestionCircle, FaPhoneAlt } from 'react-icons/fa';
+import Logo from '../../assets/offical_logo.png';
+
+const Aside = () => {
+  return (
+    <aside className="w-64 bg-[#393d3cff] text-white flex flex-col sticky top-0 " style={{position:'sticky'}}>
+      <div className="flex items-center justify-center h-20  ">
+        <img className='mt-10' src={Logo} alt="Logo" style={{ width: '50px', height: '50px' }} />
+      </div>
+      <nav className="flex-1 px-4 py-8 space-y-2">
+        <a href="#" className="flex items-center space-x-2 p-2 hover:bg-gray-700 rounded-md">
+          <FaHome />
+          <span>Home</span>
+        </a>
+        <a href="#" className="flex items-center space-x-2 p-2 hover:bg-gray-700 rounded-md">
+          <FaClipboardList />
+          <span>My Order</span>
+        </a>
+        <a href="#" className="flex items-center space-x-2 p-2 hover:bg-gray-700 rounded-md relative">
+          <FaShoppingCart />
+          <span>My Cart</span>
+          <span className="absolute right-2 top-1 bg-red-500 text-xs text-white rounded-full w-5 h-5 flex items-center justify-center mt-1">5</span>
+        </a>
+        <a href="#" className="flex items-center space-x-2 p-2 hover:bg-gray-700 rounded-md">
+          <FaHeart />
+          <span>Wishlist</span>
+        </a>
+        <a href="#" className="flex items-center space-x-2 p-2 hover:bg-gray-700 rounded-md relative">
+          <FaBell />
+          <span>Notifications</span>
+          <span className="absolute right-2 top-1 bg-red-500 text-xs text-white rounded-full w-5 h-5 flex items-center justify-center mt-1">2</span>
+        </a>
+        <a href="#" className="flex items-center space-x-2 p-2 hover:bg-gray-700 rounded-md">
+          <FaQuestionCircle />
+          <span>Help</span>
+        </a>
+        <a href="#" className="flex items-center space-x-2 p-2 hover:bg-gray-700 rounded-md">
+          <FaPhoneAlt />
+          <span>Contact Us</span>
+        </a>
+        <a href="#" className="flex items-center space-x-2 p-2 relative justify-center">
+          <button className="mt-20 bg-green-500" style={{ padding: '13px 13px', borderRadius: '10px',border:'1px solid #98bf8cff' }}>Logout</button>
+        </a>
+      </nav>
+    </aside>
+  );
+};
+
+export default Aside;

Front-with-React/VigyBag/src/components/ProductCard/ProductCard.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { FaStar } from 'react-icons/fa';
+import {FaShoppingCart} from'react-icons/fa';
+
+const ProductCard = ({ image, title, price, rating }) => {
+  return (
+    <div className="bg-white rounded-lg shadow-md p-4">
+      <img src={image} alt={title} className="w-full h-40 object-cover rounded-t-lg" />
+      <div className="mt-2 ">
+        <h3 className="text-lg font-semibold text-[#171616]">{title}</h3>
+
+        <div className="flex items-center mt-3"style={{display:'flex',
+        alignItems:'center',flexDirection:'row'}}>
+        <p className="text-[#1b1a1a]">₹{price}</p>
+          {[...Array(rating)].map((_, i) => (
+            <FaStar style={{position:'relative',left:'8vw'}} key={i} className="text-yellow-500" />
+          ))}
+        </div>
+        <button className="mt-4 w-full bg-green-500 text-white py-2 rounded-md hover:bg-green-600" style={{display:'flex',
+        justifyContent:'center',alignItems:'center',gap:'10px'}}>
+          Add to Cart
+          <FaShoppingCart className="ml-2 text-[black]" />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default ProductCard;

Front-with-React/VigyBag/src/main.jsx

@@ -10,6 +10,7 @@ import DecorativeItems from './pages/Category/DecorativeItems';
 import AboutUs from './pages/AboutUs';
 import Gifts from './pages/gifts/Gifts';
 import Contact from './pages/Contact';
+import Dashboard from './pages/Dashboard';
 import Home from './pages/Home';
 import Layout from './Layout'
 import Team from './components/Team/Team';
@@ -37,6 +38,7 @@ const router = createBrowserRouter(
       <Route path="contact" element={<Contact/>}/>
       <Route path="team" element={<Team/>}/>
       <Route path="login" element={<Login/>}/>
+      <Route path="dashboard" element={<Dashboard/>}/>
     </Route>
   )
 )

Front-with-React/VigyBag/src/pages/Contact.jsx

@@ -3,6 +3,8 @@ import React from 'react'
 function Contact() {
   return (
     <div>This is Contact us page</div>
+
+
   )
 }
 

Front-with-React/VigyBag/src/pages/Dashboard.jsx

@@ -1,13 +1,206 @@
-import React from "react";
-import Navbar from "../components/Navbar/Navbar";
-
-function Dashboard() {
-    return (
-        <div>
-            <Navbar />
-            <h1>Dashboard</h1>
+import React, { useState } from 'react';
+import granola from '../assets/granola.jpg';
+import cuttery from '../assets/cuttery-set.jpg';
+import basket from '../assets/basket.png';
+import shawls from '../assets/shawals.jpg';
+import notebooks from '../assets/eco-friendly-notebooks.jpeg';
+import toothbrushes from '../assets/Bamboo-Toothbrush-Set.jpeg';
+import towels from '../assets/Organic Cotton Towels.jpg';
+import shoppingBags from '../assets/Reusable-Shopping-Bags.jpeg';
+import phoneCase from '../assets/Biodegradable-Phone-Case.jpeg';
+import journals from '../assets/Recycled-Paper-Journals.webp';
+import waterBottle from '../assets/Glass-Water-Bottle.webp';
+import teaSet from '../assets/Organic-Tea-Set.webp';
+import { FaSearch } from 'react-icons/fa';
+import carryBag from '../assets/vigybag-carry-bag.png';
+import profile from '../assets/profile.png';
+import ProductCard from '../components/ProductCard/ProductCard';
+import Aside from '../components/Aside/Aside';
+
+const Dashboard = () => {
+
+  const initialProducts = [
+    {
+      image: granola,
+      title: "Snacker's Special Granola",
+      price: 350,
+      rating: 5,
+    },
+    {
+      image: cuttery,
+      title: 'Wooden Cutlery Set of 7',
+      price: 1200,
+      rating: 4,
+    },
+    {
+      image: basket,
+      title: 'Jute Cotton Basket',
+      price: 399,
+      rating: 4,
+    },
+    {
+      image: shawls,
+      title: 'Premium Woolen Shawls',
+      price: 5000,
+      rating: 5,
+    },
+  ];
+
+  const moreProducts = [
+    {
+      image: notebooks,
+      title: 'Eco-Friendly Notebook',
+      price: 250,
+      rating: 4,
+    },
+    {
+      image: toothbrushes,
+      title: 'Bamboo Toothbrush Set',
+      price: 150,
+      rating: 5,
+    },
+    {
+      image: towels,
+      title: 'Organic Cotton Towels',
+      price: 600,
+      rating: 4,
+    },
+    {
+      image: shoppingBags,
+      title: 'Reusable Shopping Bags',
+      price: 300,
+      rating: 5,
+    },
+    {
+      image: phoneCase,
+      title: 'Biodegradable Phone Case',
+      price: 450,
+      rating: 5,
+    },
+    {
+      image: journals,
+      title: 'Recycled Paper Journals',
+      price: 200,
+      rating: 4,
+    },
+    {
+      image: waterBottle,
+      title: 'Glass Water Bottle',
+      price: 350,
+      rating: 5,
+    },
+    {
+      image: teaSet,
+      title: 'Organic Tea Set',
+      price: 750,
+      rating: 5,
+    },
+  ];
+
+  const [products] = useState([...initialProducts, ...moreProducts]);
+  const [visibleProducts, setVisibleProducts] = useState(4);
+  const [clicked, setClicked] = useState(0);
+  const [showViewLess, setShowViewLess] = useState(false);
+
+  const handleSeeMore = () => {
+    if (clicked === 0) {
+      setVisibleProducts(visibleProducts + 4);
+    } else if (clicked === 1) {
+      setVisibleProducts(products.length);
+      setShowViewLess(true);
+    }
+    setClicked(clicked + 1);
+  };
+
+  const handleViewLess = () => {
+    setVisibleProducts(4);
+    setClicked(0);
+    setShowViewLess(false);
+  };
+
+  return (
+
+    <div className="flex min-h-screen bg-[#fff1e6] mt-1">
+
+      {/* Sidebar */}
+      <Aside />
+
+      {/* Main Content */}
+      <main className="flex-1 p-6">
+        {/* Header */}
+        <header className="flex justify-between items-center mb-6">
+          <h1 className="text-3xl font-bold">Dashboard</h1>
+          <div className="flex items-center space-x-4">
+
+
+            <div className="h-10 bg-[#686469ff]  flex items-center justify-center px-3 rounded-xl">
+            <img src={profile} alt="" style={{ width: '30px', height: '30px',borderRadius:'50%' ,border: '1px solid black',margin:'5px' }} />
+              <span className="text-white">Vivek Prajapati</span>
+            </div>
+          </div>
+        </header>
+
+        {/* Welcome Banner */}
+        <div className="bg-[#686469ff] p-6 rounded-lg shadow-lg text-white mb-6"style={{ width: '100%' ,display: 'flex',
+          alignItems: 'center',flexDirection: 'row'}}>
+            <div style={{ width: '100%' ,display: 'flex',flexDirection: 'column'}}>
+            <h1 className="text-3xl ml-3 ">Welcome Back, <span style={{ color: '#faf48cff' }}>Vivek Prajapati</span></h1>
+          <h1 className=" text-xl ml-3 mt-2">What will u learn today?</h1>
+            </div>
+
+          <div className="flex mt-3 mr-20 ">
+            <img src={carryBag} alt="" style={{ width: '13vw', height: '19vh' }} />
+          </div>
         </div>
-    );
-}
 
-export default Dashboard;
+        {/* Search Bar */}
+        <div className="relative mb-6">
+          <input
+            type="text"
+            placeholder="Search"
+            className="w-full pl-10 pr-4 py-2 rounded-md bg-[#d1cdcdff] focus:outline-none focus:ring-2 focus:ring-[#6AB04C] text-[#616161ff]"
+          />
+          <FaSearch className="absolute right-10 top-2.5 text-[#616161ff]" />
+        </div>
+
+        {/* New Today Section */}
+        <section>
+          <h2 className="text-2xl font-bold mb-4">New Today</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+
+            {products.slice(0, visibleProducts).map((product, index) => (
+              <ProductCard
+                key={index}
+                image={product.image}
+                title={product.title}
+                price={product.price}
+                rating={product.rating}
+              />
+            ))}
+          </div>
+          <div className="mt-6 flex justify-center">
+            {clicked < 2 && (
+              <button 
+                className="bg-green-500 text-white py-2 px-4 rounded-md hover:bg-green-600"
+                onClick={handleSeeMore}
+              >
+                See More
+              </button>
+            )}
+            {showViewLess && (
+              <button 
+                className="bg-red-500 text-white py-2 px-4 rounded-md hover:bg-red-600 ml-4"
+                onClick={handleViewLess}
+              >
+                View Less
+              </button>
+            )}
+          </div>
+
+        </section>
+      </main>
+    </div>
+  );
+};
+
+export default Dashboard;

Front-with-React/VigyBag/src/pages/Login/Login.jsx

@@ -12,7 +12,8 @@ function Login() {
         <>
             <div className="flex justify-center items-center h-screen bg-[#fff0e3ff]">
                 <div className="flex">
-                    <div className="bg-[#393d3cff] rounded-lg p-20 mr-20 relative" style={{ borderRadius: '20px', paddingRight: '9vw', left: '-13vw', width: '35vw', height: '80vh' }}>
+                    <div className="bg-[#393d3cff] rounded-lg p-20 mr-20 relative " style={{ borderRadius: '20px', 
+                    paddingRight: '9vw', left: '-13vw', width: '35vw', height: '80vh',top:'-2.5vh' }}>
                         <div className=" flex items-center mb-6 " style={{ flexDirection: 'column', gap: '5%' }} >
                             <div className=" absolute flex items-center justify-center " style={{
                                 top: '-5vh', height: '15vh', width: '7vw',
@@ -93,8 +94,10 @@ function Login() {
                             </div>
                         </form>
                     </div>
-                    <div className="absolute bg-[#c1cfabff] rounded-ml" style={{ borderRadius: '20px', right: '17%', width: '35vw', height: '80vh' }}>
-                        <img src={signUp} alt="Illustration" className="relative max-w-xl mx-auto my-10 rounded-ml" style={{ scale: '1.3', width: '31vw', height: '68vh' }} />
+                    <div className="absolute bg-[#c1cfabff] rounded-ml" style={{ borderRadius: '20px', right: '17%',
+                     width: '35vw', height: '80vh',top:'17vh' }}>
+                        <img src={signUp} alt="Illustration" className="relative max-w-xl mx-auto my-10 rounded-ml" style={{ scale: '1.3', 
+                        width: '31vw', height: '68vh' }} />
                     </div>
                 </div>
             </div>