From 7ef27058d6c729f486c1a5057148b67b74a80d20 Mon Sep 17 00:00:00 2001
From: Kirtan Tank <tankkirtan5@gmail.com>
Date: Sat, 17 Aug 2024 00:53:53 +0530
Subject: [PATCH] changes in components and added new layout

---
 components/{Vendor.js => AddVendor.jsx} | 154 +++++-----
 components/DeleteVendorModal.jsx        |   2 +-
 components/EditVendorModal.jsx          | 367 ++++++++++++++++--------
 components/LogBtn.js                    |  61 ++--
 components/Navbar.js                    |  24 +-
 components/NoDataFound.jsx              |  17 ++
 components/Pagination.js                |   2 +-
 components/VendorCard.jsx               |  98 +++----
 models/User.js                          |  19 ++
 9 files changed, 464 insertions(+), 280 deletions(-)
 rename components/{Vendor.js => AddVendor.jsx} (62%)
 create mode 100644 components/NoDataFound.jsx
 create mode 100644 models/User.js

diff --git a/components/Vendor.js b/components/AddVendor.jsx
similarity index 62%
rename from components/Vendor.js
rename to components/AddVendor.jsx
index 3e086a0..de0eb65 100644
--- a/components/Vendor.js
+++ b/components/AddVendor.jsx
@@ -1,24 +1,41 @@
 import { useState } from "react";
 import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
+import { useSession } from 'next-auth/react'; 
 
 const VendorComp = () => {
-  const [name, setName] = useState("");
-  const [bankName, setBankName] = useState("");
-  const [accNo, setAccNo] = useState("");
-  const [address1, setAddress1] = useState("");
-  const [address2, setAddress2] = useState("");
-  const [city, setCity] = useState("");
-  const [zipCode, setZipCode] = useState("");
-  const [country, setCountry] = useState("");
+  const [formData, setFormData] = useState({
+    name: "",
+    bankName: "",
+    accNo: "",
+    address1: "",
+    address2: "",
+    city: "",
+    zipCode: "",
+    country: "",
+  });
+
   const [inputError, setInputError] = useState({});
+  const { data: session } = useSession();
+  const userId = session?.userId;
+
+  const handleChange = ({ target: { name, value } }) => {
+    setFormData({
+      ...formData,
+      [name]: value,
+    });
+    setInputError({
+      ...inputError,
+      [name]: "",
+    });
+  };
 
   const validateInput = () => {
     const newErrors = {};
-    if (accNo.length !== 12) {
+    if (formData.accNo.length !== 12) {
       newErrors.accNo = "Account number must be exactly 12 digits.";
     }
-    if (zipCode.length > 10) {
+    if (formData.zipCode.length > 10) {
       newErrors.zipCode = "Zip code must be less than 10 digits.";
     }
 
@@ -30,19 +47,14 @@ const VendorComp = () => {
     e.preventDefault();
 
     if (!validateInput()) {
-      toast("Please fix the inputError before submitting", { type: "error" });
+      toast("Please fix the errors before submitting", { type: "error" });
       return;
     }
 
+    // Add userId to formData
     const VendorPayload = {
-      accNo,
-      address1,
-      address2,
-      bankName,
-      city,
-      country,
-      name,
-      zipCode,
+      ...formData,
+      userId,
     };
 
     // Send Data to Server
@@ -54,34 +66,40 @@ const VendorComp = () => {
       },
     })
       .then((res) => {
-        if (res) {
+        if (res.ok) {
           toast("Vendor created successfully", { type: "success" });
+        } else {
+          throw new Error("Network response was not ok.");
         }
       })
       .catch((err) => {
-        console.log(err);
-        toast("Sorry, could not create", { type: "error" });
+        console.log("Error: ", err);
+        toast("Sorry, could not create vendor", { type: "error" });
       });
-    setAccNo("");
-    setAddress1("");
-    setAddress2("");
-    setBankName("");
-    setCity("");
-    setCountry("");
-    setName("");
-    setZipCode("");
+
+    setFormData({
+      name: "",
+      bankName: "",
+      accNo: "",
+      address1: "",
+      address2: "",
+      city: "",
+      zipCode: "",
+      country: "",
+    });
   };
 
   return (
-    <div className="max-w-2xl bg-white px-5 m-auto w-full mt-10">
+    <div className="max-w-2xl px-5 m-auto w-full mt-10">
       <div className="text-3xl mb-6 text-center ">Create New Vendor</div>
-      <form>
+      <form onSubmit={handleSubmit}>
         <div className="grid grid-cols-2 gap-4 max-w-xl m-auto">
           <div className="col-span-2 lg:col-span-1">
             <input
               type="text"
-              value={name}
-              onChange={({ target }) => setName(target.value)}
+              name="name"
+              value={formData.name}
+              onChange={handleChange}
               className="border-solid border-gray-400 border-2 p-3 md:text-xl w-full rounded-md"
               id="vendorName"
               placeholder="Vendor Name"
@@ -92,8 +110,9 @@ const VendorComp = () => {
           <div className="col-span-2 lg:col-span-1">
             <input
               type="text"
-              value={bankName}
-              onChange={({ target }) => setBankName(target.value)}
+              name="bankName"
+              value={formData.bankName}
+              onChange={handleChange}
               className="border-solid border-gray-400 border-2 p-3 md:text-xl w-full rounded-md"
               id="bankName"
               placeholder="Bank Name"
@@ -104,32 +123,25 @@ const VendorComp = () => {
           <div className="col-span-2">
             <input
               type="number"
-              value={accNo}
-              onChange={({ target }) => {
-                setAccNo(target.value);
-                setInputError({ ...inputError, accNo: "" });
-              }}
-              cols="30"
-              rows="8"
+              name="accNo"
+              value={formData.accNo}
+              onChange={handleChange}
               className="border-solid border-gray-400 border-2 p-3 md:text-xl w-full rounded-md"
               id="accNumber"
               placeholder="Bank Account Number"
               required
             />
-            <span>
-              {inputError.accNo && (
-                <p className="text-red-500">{inputError.accNo}</p>
-              )}
-            </span>
+            {inputError.accNo && (
+              <p className="text-red-500">{inputError.accNo}</p>
+            )}
           </div>
 
           <div className="col-span-2">
             <input
               type="text"
-              cols="30"
-              rows="8"
-              value={address1}
-              onChange={({ target }) => setAddress1(target.value)}
+              name="address1"
+              value={formData.address1}
+              onChange={handleChange}
               className="border-solid border-gray-400 border-2 p-3 md:text-xl w-full rounded-md"
               id="address1"
               placeholder="Address Line 1"
@@ -140,10 +152,9 @@ const VendorComp = () => {
           <div className="col-span-2">
             <input
               type="text"
-              cols="30"
-              rows="8"
-              value={address2}
-              onChange={({ target }) => setAddress2(target.value)}
+              name="address2"
+              value={formData.address2}
+              onChange={handleChange}
               className="border-solid border-gray-400 border-2 p-3 md:text-xl w-full rounded-md"
               id="address2"
               placeholder="Address Line 2"
@@ -153,8 +164,9 @@ const VendorComp = () => {
           <div className="col-span-2 lg:col-span-1">
             <input
               type="text"
-              value={city}
-              onChange={({ target }) => setCity(target.value)}
+              name="city"
+              value={formData.city}
+              onChange={handleChange}
               className="border-solid border-gray-400 border-2 p-3 md:text-xl w-full rounded-md"
               id="city"
               placeholder="City"
@@ -165,30 +177,25 @@ const VendorComp = () => {
           <div className="col-span-2 lg:col-span-1">
             <input
               type="number"
-              value={zipCode}
-              onChange={({ target }) => {
-                setZipCode(target.value);
-                setInputError({ ...inputError, zipCode: "" });
-              }}
+              name="zipCode"
+              value={formData.zipCode}
+              onChange={handleChange}
               className="border-solid border-gray-400 border-2 p-3 md:text-xl w-full rounded-md"
               id="zip"
               placeholder="ZipCode"
               required
             />
-            <span>
-              {inputError.zipCode && (
-                <p className="text-red-500">{inputError.zipCode}</p>
-              )}
-            </span>
+            {inputError.zipCode && (
+              <p className="text-red-500">{inputError.zipCode}</p>
+            )}
           </div>
 
           <div className="col-span-2">
             <input
               type="text"
-              cols="30"
-              rows="8"
-              value={country}
-              onChange={({ target }) => setCountry(target.value)}
+              name="country"
+              value={formData.country}
+              onChange={handleChange}
               className="border-solid border-gray-400 border-2 p-3 md:text-xl w-full rounded-md"
               id="country"
               placeholder="Country"
@@ -198,9 +205,8 @@ const VendorComp = () => {
 
           <div className="col-span-2 text-right">
             <button
-              className="py-3 px-6  rounded-md bg-green-500 text-white font-bold w-full sm:w-32"
+              className="py-3 px-6 rounded-md bg-green-500 text-white font-bold w-full sm:w-32"
               type="submit"
-              onClick={handleSubmit}
             >
               CREATE
             </button>
diff --git a/components/DeleteVendorModal.jsx b/components/DeleteVendorModal.jsx
index 19a0c5c..f95afb0 100644
--- a/components/DeleteVendorModal.jsx
+++ b/components/DeleteVendorModal.jsx
@@ -41,7 +41,7 @@ const DeleteVendorModal = ({
     >
       <DialogBackdrop
         transition
-        className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in"
+        className="fixed inset-0 bg-gray-950 bg-opacity-75 transition-opacity data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in"
       />
 
       <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
diff --git a/components/EditVendorModal.jsx b/components/EditVendorModal.jsx
index 25c2f85..4784ab5 100644
--- a/components/EditVendorModal.jsx
+++ b/components/EditVendorModal.jsx
@@ -1,9 +1,16 @@
 import React from "react";
 import { toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
+import {
+  Dialog,
+  DialogBackdrop,
+  DialogPanel,
+  DialogTitle,
+} from "@headlessui/react";
 
 const EditVendorModal = ({
   setShowEditVendorModal,
+  showEditVendorModal,
   _id,
   accNo,
   address1,
@@ -64,146 +71,256 @@ const EditVendorModal = ({
 
   return (
     <>
-      <div className="fixed inset-0 bg-black bg-opacity-25 backdrop-blur-sm flex justify-center items-center">
-        {updatedDetailsOfVendors.map((ele) => {
-          return (
-            <div
-              key={ele._id}
-              className="max-w-2xl bg-blue-700 px-5 m-auto w-fit p-5 rounded-lg"
+      <Dialog
+        open={showEditVendorModal}
+        onClose={setShowEditVendorModal}
+        className="relative z-10"
+      >
+        <DialogBackdrop
+          transition
+          className="fixed inset-0 bg-gray-950 bg-opacity-75 transition-opacity data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in"
+        />
+        <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <DialogPanel
+              transition
+              className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all data-[closed]:translate-y-4 data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in sm:my-8 sm:w-full sm:max-w-lg data-[closed]:sm:translate-y-0 data-[closed]:sm:scale-95"
             >
-              <div className="text-3xl mb-6 text-center text-white">
-                Edit Vendor Details
-              </div>
-              <form>
-                <div className="grid grid-cols-2 gap-4 max-w-xl m-auto">
-                  <div className="col-span-2 lg:col-span-1">
-                    <input
-                      type="text"
-                      className="border-solid border-gray-400 border-2 p-3 md:text-xl w-full rounded-md"
-                      id="vendorName"
-                      placeholder="Vendor Name"
-                      value={name}
-                      onChange={(e) => setName(e.target.value)}
-                      required
-                    />
-                  </div>
+              <div className="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
+                <div className="sm:flex sm:items-start">
+                  <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
+                    <DialogTitle
+                      as="h1"
+                      className="font-semibold text-3xl text-gray-900 underline underline-offset-8 justify-center text-center py-3"
+                    >
+                      Update Vendor
+                    </DialogTitle>
+                    <div className="mt-2">
+                      {updatedDetailsOfVendors.map((ele) => {
+                        return (
+                          <div
+                            key={ele._id}
+                          >
+                            <form>
+                              <div className="grid grid-cols-2 gap-4 max-w-xl m-auto">
+                                <div className="col-span-2 lg:col-span-1">
+                                  <input
+                                    type="text"
+                                    className="border-solid border-gray-400 border-2 p-3 md:text-xl w-full rounded-md"
+                                    id="vendorName"
+                                    placeholder="Vendor Name"
+                                    value={name}
+                                    onChange={(e) => setName(e.target.value)}
+                                    required
+                                  />
+                                </div>
 
-                  <div className="col-span-2 lg:col-span-1">
-                    <input
-                      type="text"
-                      className="border-solid border-gray-400 border-2 p-3 md:text-xl w-full rounded-md"
-                      id="bankName"
-                      placeholder="Bank Name"
-                      value={bankName}
-                      onChange={(e) => setBankName(e.target.value)}
-                      required
-                    />
-                  </div>
+                                <div className="col-span-2 lg:col-span-1">
+                                  <input
+                                    type="text"
+                                    className="border-solid border-gray-400 border-2 p-3 md:text-xl w-full rounded-md"
+                                    id="bankName"
+                                    placeholder="Bank Name"
+                                    value={bankName}
+                                    onChange={(e) =>
+                                      setBankName(e.target.value)
+                                    }
+                                    required
+                                  />
+                                </div>
 
-                  <div className="col-span-2">
-                    <input
-                      type="number"
-                      cols="30"
-                      rows="8"
-                      className="border-solid border-gray-400 border-2 p-3 md:text-xl w-full rounded-md"
-                      id="accNumber"
-                      placeholder="Bank Account Number"
-                      value={accNo}
-                      onChange={(e) => setAccNo(e.target.value)}
-                      required
-                    />
-                  </div>
+                                <div className="col-span-2">
+                                  <input
+                                    type="number"
+                                    cols="30"
+                                    rows="8"
+                                    className="border-solid border-gray-400 border-2 p-3 md:text-xl w-full rounded-md"
+                                    id="accNumber"
+                                    placeholder="Bank Account Number"
+                                    value={accNo}
+                                    onChange={(e) => setAccNo(e.target.value)}
+                                    required
+                                  />
+                                </div>
 
-                  <div className="col-span-2">
-                    <input
-                      cols="30"
-                      rows="8"
-                      className="border-solid border-gray-400 border-2 p-3 md:text-xl w-full rounded-md"
-                      id="address1"
-                      placeholder="Address Line 1"
-                      value={address1}
-                      onChange={(e) => setAddress1(e.target.value)}
-                      required
-                    />
-                  </div>
+                                <div className="col-span-2">
+                                  <input
+                                    cols="30"
+                                    rows="8"
+                                    className="border-solid border-gray-400 border-2 p-3 md:text-xl w-full rounded-md"
+                                    id="address1"
+                                    placeholder="Address Line 1"
+                                    value={address1}
+                                    onChange={(e) =>
+                                      setAddress1(e.target.value)
+                                    }
+                                    required
+                                  />
+                                </div>
 
-                  <div className="col-span-2">
-                    <input
-                      cols="30"
-                      rows="8"
-                      className="border-solid border-gray-400 border-2 p-3 md:text-xl w-full rounded-md"
-                      id="address2"
-                      placeholder="Address Line 2"
-                      value={address2}
-                      onChange={(e) => setAddress2(e.target.value)}
-                    />
-                  </div>
+                                <div className="col-span-2">
+                                  <input
+                                    cols="30"
+                                    rows="8"
+                                    className="border-solid border-gray-400 border-2 p-3 md:text-xl w-full rounded-md"
+                                    id="address2"
+                                    placeholder="Address Line 2"
+                                    value={address2}
+                                    onChange={(e) =>
+                                      setAddress2(e.target.value)
+                                    }
+                                  />
+                                </div>
 
-                  <div className="col-span-2 lg:col-span-1">
-                    <input
-                      type="text"
-                      className="border-solid border-gray-400 border-2 p-3 md:text-xl w-full rounded-md"
-                      id="city"
-                      placeholder="City"
-                      value={city}
-                      onChange={(e) => setCity(e.target.value)}
-                      required
-                    />
-                  </div>
+                                <div className="col-span-2 lg:col-span-1">
+                                  <input
+                                    type="text"
+                                    className="border-solid border-gray-400 border-2 p-3 md:text-xl w-full rounded-md"
+                                    id="city"
+                                    placeholder="City"
+                                    value={city}
+                                    onChange={(e) => setCity(e.target.value)}
+                                    required
+                                  />
+                                </div>
 
-                  <div className="col-span-2 lg:col-span-1">
-                    <input
-                      type="number"
-                      className="border-solid border-gray-400 border-2 p-3 md:text-xl w-full rounded-md"
-                      id="zip"
-                      placeholder="ZipCode"
-                      value={zipCode}
-                      onChange={(e) => setZipCode(e.target.value)}
-                      required
-                    />
-                  </div>
+                                <div className="col-span-2 lg:col-span-1">
+                                  <input
+                                    type="number"
+                                    className="border-solid border-gray-400 border-2 p-3 md:text-xl w-full rounded-md"
+                                    id="zip"
+                                    placeholder="ZipCode"
+                                    value={zipCode}
+                                    onChange={(e) => setZipCode(e.target.value)}
+                                    required
+                                  />
+                                </div>
 
-                  <div className="col-span-2">
-                    <input
-                      cols="30"
-                      rows="8"
-                      className="border-solid border-gray-400 border-2 p-3 md:text-xl w-full rounded-md"
-                      id="country"
-                      placeholder="Country"
-                      value={country}
-                      onChange={(e) => setCountry(e.target.value)}
-                      required
-                    />
-                  </div>
+                                <div className="col-span-2">
+                                  <input
+                                    cols="30"
+                                    rows="8"
+                                    className="border-solid border-gray-400 border-2 p-3 md:text-xl w-full rounded-md"
+                                    id="country"
+                                    placeholder="Country"
+                                    value={country}
+                                    onChange={(e) => setCountry(e.target.value)}
+                                    required
+                                  />
+                                </div>
 
-                  <div className="col-span-2"></div>
-                  <div className="col-span-2 lg:col-span-1">
-                    <button
-                      type="button"
-                      className="py-3 px-6 rounded-md bg-green-500 text-white font-bold w-full sm:w-32"
-                      onClick={() => closeModal()}
-                    >
-                      CANCEL
-                    </button>
+                              </div>
+                            </form>
+                          </div>
+                        );
+                      })}
+                    </div>
                   </div>
+                </div>
+              </div>
+              <div className="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
+                <button
+                  type="button"
+                  onClick={() => updateVendor()}
+                  className="inline-flex w-full justify-center rounded-md bg-green-700 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-900 sm:ml-3 sm:w-auto"
+                >
+                  Edit
+                </button>
+                <button
+                  type="button"
+                  data-autofocus
+                  onClick={() => closeModal()}
+                  className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
+                >
+                  Cancel
+                </button>
+              </div>
+            </DialogPanel>
+          </div>
+        </div>
+      </Dialog>
+    </>
+  );
+};
 
-                  <div className="col-span-2 lg:col-span-1">
-                    <button
-                      type="button"
-                      className="py-3 px-6 rounded-md bg-green-500 text-white font-bold w-full sm:w-32"
-                      onClick={() => updateVendor()}
-                    >
-                      EDIT
-                    </button>
+export default EditVendorModal;
+
+
+/*
+"use client";
+
+import {
+  Dialog,
+  DialogBackdrop,
+  DialogPanel,
+  DialogTitle,
+} from "@headlessui/react";
+  return (
+    <Dialog
+      open={openDeleteModal}
+      onClose={setOpenDeleteModal}
+      className="relative z-10"
+    >
+      <DialogBackdrop
+        transition
+        className="fixed inset-0 bg-gray-950 bg-opacity-75 transition-opacity data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in"
+      />
+
+      <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
+        <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+          <DialogPanel
+            transition
+            className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all data-[closed]:translate-y-4 data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in sm:my-8 sm:w-full sm:max-w-lg data-[closed]:sm:translate-y-0 data-[closed]:sm:scale-95"
+          >
+            <div className="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
+              <div className="sm:flex sm:items-start">
+                <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                  <ExclamationTriangleIcon
+                    aria-hidden="true"
+                    className="h-6 w-6 text-red-600"
+                  />
+                </div>
+                <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
+                  <DialogTitle
+                    as="h3"
+                    className="text-base font-semibold leading-6 text-gray-900"
+                  >
+                    Delete Vendor
+                  </DialogTitle>
+                  <div className="mt-2">
+                    <p className="text-sm text-gray-500">
+                      Are you sure you want to delete this vendor? All of your
+                      data will be permanently removed. This action cannot be
+                      undone.
+                    </p>
                   </div>
                 </div>
-              </form>
+              </div>
+            </div>
+            <div className="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
+              <button
+                type="button"
+                onClick={() => deleteVendor(vendorToBeDelete)}
+                className="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 sm:ml-3 sm:w-auto"
+              >
+                Delete
+              </button>
+              <button
+                type="button"
+                data-autofocus
+                onClick={() => setOpenDeleteModal(false)}
+                className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
+              >
+                Cancel
+              </button>
             </div>
-          );
-        })}
+          </DialogPanel>
+        </div>
       </div>
-    </>
+    </Dialog>
   );
 };
 
-export default EditVendorModal;
+export default DeleteVendorModal;
+
+*/
\ No newline at end of file
diff --git a/components/LogBtn.js b/components/LogBtn.js
index 8fdf09e..b0b2531 100644
--- a/components/LogBtn.js
+++ b/components/LogBtn.js
@@ -1,23 +1,44 @@
-import {useSession, signIn, signOut} from 'next-auth/react'
+import { useSession, signIn, signOut } from "next-auth/react";
+import { useEffect } from "react";
 
-const LogBtn = () => {
-    const {data: session} = useSession()
-
-    if(session){
-        return ( 
-            <div>
-                {/* <p>{session.user.email}</p> */}
-                <button id="logBtn" className="inline-flex items-center transition-all p-2 font-bold border-0 focus:outline-none hover:bg-blue-700 hover:text-white rounded-md text-base mt-4 md:mt-0" onClick={async ()=>{await signOut()}}>Logout</button>
-            </div>
-        );
-    }
-    else{
-        return ( 
-            <div>
-                <button id="logBtn" className="inline-flex items-center transition-all p-2 font-bold border-0 focus:outline-none hover:bg-blue-700 hover:text-white rounded-md text-base mt-4 md:mt-0" onClick={async ()=>{await signIn()}}>Login</button>
-            </div>
-        );
+const LogBtn = ({setUserImage}) => {
+  const { data: session } = useSession();
+  
+  useEffect(() => {
+    if (session) {
+      setUserImage(session.user.image);
     }
-}
- 
+  }, [session, setUserImage]);
+
+  if (session) {
+    return (
+      <div>
+        <button
+          id="logBtn"
+          className="inline-flex items-center transition-all p-2 font-bold border-0 focus:outline-none hover:bg-[#387F39] hover:text-white rounded-md text-base md:mt-0"
+          onClick={async () => {
+            await signOut();
+          }}
+        >
+          Logout
+        </button>
+      </div>
+    );
+  } else {
+    return (
+      <div>
+        <button
+          id="logBtn"
+          className="inline-flex items-center transition-all p-2 font-bold border-0 focus:outline-none hover:bg-[#387F39] hover:text-white rounded-md text-base md:mt-0"
+          onClick={async () => {
+            await signIn();
+          }}
+        >
+          Login
+        </button>
+      </div>
+    );
+  }
+};
+
 export default LogBtn;
\ No newline at end of file
diff --git a/components/Navbar.js b/components/Navbar.js
index d9f4512..eead54f 100644
--- a/components/Navbar.js
+++ b/components/Navbar.js
@@ -3,30 +3,31 @@ import { useRouter } from "next/router";
 import LogBtn from "./LogBtn";
 import logo from "../public/Logo.png";
 import Image from "next/image";
+import { useState } from 'react';
 
 const Navbar = () => {
   const router = useRouter();
+  const [userImage, setUserImage] = useState("");
 
   const getNavLinkClass = (path) => {
     return router.pathname === path
-      ? "bg-blue-700 text-white"
-      : "hover:bg-blue-700 transition-all hover:text-white";
+      ? "bg-[#387F39] text-[#EEEEEE]"
+      : "hover:bg-[#387F39] transition-all hover:text-[#EEEEEE]";
   };
 
   return (
     <div>
-      <header className="text-black body-font bg-blue-300 rounded-br-xl rounded-bl-xl shadow-xl">
-        <div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
-          <a className="flex title-font font-medium items-center text-black mb-4 md:mb-0">
-            <Image src={logo} alt="logo" width={40} height={40} />
+      <header className="text-#1F316F body-font bg-[#F6E96B] shadow-xl">
+        <div className="container mx-auto flex flex-wrap p-2 flex-col md:flex-row items-center">
+          <a className="flex title-font font-medium items-center text-#1F316F">
+            <Image src={logo} alt="logo" width={50} height={50} />
             <span
-              className="ml-3 text-2xl font-semibold"
-              style={{ fontFamily: "Oswald, sans-serif", fontStyle: "normal" }}
+              className="ml-3 text-2xl font-semibold no-data-font"
             >
               VƎNDORVAULT
             </span>
           </a>
-          <nav className="md:ml-auto flex flex-wrap items-center text-base justify-center gap-5">
+          <nav className="md:ml-auto flex flex-wrap items-center text-base justify-center gap-5 no-data-font">
             <Link href="/" passHref>
               <span
                 className={`${getNavLinkClass(
@@ -45,7 +46,10 @@ const Navbar = () => {
                 New Vendor
               </span>
             </Link>
-            <LogBtn />
+            <LogBtn
+            setUserImage={setUserImage}
+            />
+            {userImage && <Image src={userImage} alt="logo" width={40} height={40} className="rounded-full" />}
           </nav>
         </div>
       </header>
diff --git a/components/NoDataFound.jsx b/components/NoDataFound.jsx
new file mode 100644
index 0000000..bec3fc3
--- /dev/null
+++ b/components/NoDataFound.jsx
@@ -0,0 +1,17 @@
+import NoDataFoundImage from "../public/no-data-bro.png";
+import Image from "next/image";
+import Link from "next/link";
+
+const NoDataFound = () => {
+  return (
+    <div className="flex flex-col justify-center items-center text-center relative">
+      <Image src={NoDataFoundImage} alt="No Data Found" className="w-2/6" />
+      <span className="text-4xl no-data-font mb-6 absolute bottom-14">Sorry! No data to display</span>
+      <Link href="/vendor" passHref className="get-started">
+        <span>Get Started</span>
+      </Link>
+    </div>
+  );
+};
+
+export default NoDataFound;
diff --git a/components/Pagination.js b/components/Pagination.js
index cb92ef5..847c08b 100644
--- a/components/Pagination.js
+++ b/components/Pagination.js
@@ -6,7 +6,7 @@ const Pagination = ({ vendorsPerPage, totalVendors, paginate }) => {
     }
   
     return (
-      <nav className="flex justify-center items-center py-10 cursor-pointer">
+      <nav className="flex justify-center items-center cursor-pointer">
         <ul className='inline-flex items-center -space-x-px'>
           {pageNumbers.map(number => (
             <li key={number} className='px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white rounded-md'
diff --git a/components/VendorCard.jsx b/components/VendorCard.jsx
index b7691e4..3a87c52 100644
--- a/components/VendorCard.jsx
+++ b/components/VendorCard.jsx
@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { FaEye, FaEyeSlash } from "react-icons/fa";
+import NoDataFound from "./NoDataFound";
 
 const VendorCard = ({
   editFun,
@@ -17,63 +18,62 @@ const VendorCard = ({
   };
 
   const maskAccountNumber = (accNo) => {
-    return accNo.replace(/.(?=.{4})/g, "*");
+    const masked = accNo.replace(/.(?=.{4})/g, "*");
+    const formatted = masked.replace(/(.{4})/g, "$1 ");
+    return formatted.trim();
   };
 
   return (
     <>
-      <div className="grid grid-cols-3 gap-6 justify-items-center px-16">
-        {currentVendors.map((item) => {
-          const isVisible = visibleAccounts[item._id];
-          return (
-            <div
-              key={item._id}
-              className="w-full items-center content-center max-w-sm bg-white rounded-xl shadow-[0_25px_80px_-5px_rgba(0,0,0,0.2)] dark:bg-gray-800 dark:border-gray-700"
-            >
-              <div className="flex flex-col items-center p-4">
-                <h5 className="mb-1 text-xl font-medium text-gray-900 dark:text-white">
-                  {item.name}
-                </h5>
-                <span className="text-sm text-gray-500 dark:text-gray-400">
-                  {item.bankName}
-                </span>
-                <div className="flex items-center space-x-2">
-                  <span className="text-sm text-gray-500 dark:text-gray-400">
-                    {isVisible ? item.accNo : maskAccountNumber(item.accNo)}
+      <div
+        className={`flex flex-wrap justify-center gap-20 text-center`}
+      >
+        {currentVendors.length === 0 ? (
+          <NoDataFound />
+        ) : (
+          currentVendors.map((item) => {
+            const isVisible = visibleAccounts[item._id];
+            return (
+              <div key={item._id} className="vendor-card">
+                <div className="flex flex-col items-center p-4">
+                  <h5 className="mb-1 text-3xl font-medium text-[#EEEEEE] dark:text-white">
+                    {item.name}
+                  </h5>
+                  <span className="text-xl">{item.bankName}</span>
+                  <div className="flex items-center space-x-2">
+                    <span className="text-lg">
+                      {isVisible ? item.accNo : maskAccountNumber(item.accNo)}
+                    </span>
+                    <span onClick={() => toggleVisibility(item._id)}>
+                      {isVisible ? <FaEyeSlash /> : <FaEye />}
+                    </span>
+                  </div>
+                  <span className="text-md">
+                    {item.city}, {item.country} - {item.zipCode}
                   </span>
-                  <button onClick={() => toggleVisibility(item._id)}>
-                    {isVisible ? (
-                      <FaEyeSlash className="h-5 w-5 text-gray-500 dark:text-gray-400" />
-                    ) : (
-                      <FaEye className="h-5 w-5 text-gray-500 dark:text-gray-400" />
-                    )}
-                  </button>
-                </div>
-                <span className="text-sm text-gray-500 dark:text-gray-400">
-                  {item.city}, {item.country} - {item.zipCode}
-                </span>
-                <div className="flex mt-4 space-x-3 md:mt-6">
-                  <button
-                    className="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-                    onClick={() => editFun(item._id)}
-                  >
-                    Edit
-                  </button>
+                  <div className="flex mt-4 space-x-3 md:mt-6">
+                    <button
+                      className="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-[#000000] hover:text-[#FFFFFF] rounded-lg focus:ring-4 focus:outline-none"
+                      onClick={() => editFun(item._id)}
+                    >
+                      Edit
+                    </button>
 
-                  <button
-                    className="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-gray-900 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-700"
-                    onClick={() => {
-                      setVendorToBeDelete(item._id);
-                      setOpenDeleteModal(true);
-                    }}
-                  >
-                    Delete
-                  </button>
+                    <button
+                      className="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-[#000000] hover:text-[#FFFFFF] rounded-lg focus:ring-4 focus:outline-none"
+                      onClick={() => {
+                        setVendorToBeDelete(item._id);
+                        setOpenDeleteModal(true);
+                      }}
+                    >
+                      Delete
+                    </button>
+                  </div>
                 </div>
               </div>
-            </div>
-          );
-        })}
+            );
+          })
+        )}
       </div>
     </>
   );
diff --git a/models/User.js b/models/User.js
new file mode 100644
index 0000000..428e354
--- /dev/null
+++ b/models/User.js
@@ -0,0 +1,19 @@
+const mongoose = require('mongoose');
+
+const UserSchema = new mongoose.Schema({
+    name: {
+        type: String, 
+        required:true
+    },
+    email: {
+        type: String, 
+        required:true
+    },
+    password: {
+        type: String,
+        required:false
+    },
+}, {timestamps: true});
+
+mongoose.models = {}
+export default mongoose.model("User", UserSchema);
\ No newline at end of file