Merge pull request #40 from ShinichiShi/Shinichi

Shinichi

client/package.json

@@ -22,9 +22,10 @@
     "react": "^18.3.1",
     "react-bootstrap": "^2.10.4",
     "react-dom": "^18.3.1",
-    "react-phone-number-input": "^3.4.5",
     "react-icons": "^5.3.0",
-    "react-router-dom": "^6.26.1"
+    "react-phone-number-input": "^3.4.5",
+    "react-router-dom": "^6.26.1",
+    "react-toastify": "^10.0.5"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",

client/src/Landing.jsx

@@ -1,14 +1,8 @@
-// import Profilesetup from './components/Profilesetup';
-
 import './App.css';
-// import Signup from './components/Buyer/Signup';
 import AgriConnect from './components/LandingPage/AgriConnect';
-import './components/LandingPage/Landing.css'
 function Landing() {
   return (
     <>
-      {/* <Signup/> */}
-      {/* <Profilesetup/> */}
       {<AgriConnect />},
     </>
   );

client/src/components/Buyer/BDashboard.jsx

@@ -1,28 +1,35 @@
-import { useState } from 'react';
+import { useState,useContext, useEffect} from 'react';
+import { useNavigate } from 'react-router-dom';
 import BHeader from './BHeader';
 import BNavbar from './BNavbar';
 import BSettings from './Settings/BSettings';
 import BDeals from './Deals/BDeals';
 import BContract from './Contract/BContract';
+import { AuthContext } from '../context/Authcontext';
 function Dashboard() {
-  const [navigate, setNavigate] = useState('home');
+  const navigateRoute = useNavigate();
+  const [navigate, setNavigate] = useState('settings');
+  const { currentUser } = useContext(AuthContext);
+
+
+  useEffect(() => {
+    if (currentUser === null) {
+      navigateRoute('/signup');
+    } 
+  }, [currentUser, navigateRoute]); 
 
   const handleNavigate = (key) => {
     setNavigate(key);
   };
-
   return (
     <>
-      <BHeader />
-      <BNavbar handleNavigate={handleNavigate} navigate={navigate} />
+    <BHeader />
+    <BNavbar handleNavigate={handleNavigate} navigate={navigate} />
+
       {navigate === 'settings' && <BSettings />}
       {navigate === 'deals' && <BDeals />}
       {navigate === 'contract' && <BContract />}
-      {/* Visited History here
-       <div className="text-sm text-gray-500 mb-6">
-          <span>Home</span> &gt; <span>Account</span> &gt;{' '}
-          <span className="text-green-500">Settings</span>
-        </div> */}
+
     </>
   );
 }

client/src/components/Buyer/BHeader.jsx

@@ -2,7 +2,10 @@ import { FaSearch } from 'react-icons/fa';
 import { MdOutlineTranslate } from 'react-icons/md';
 import { IoIosArrowDropdown ,IoIosArrowDropup } from "react-icons/io";
 import { useState, useEffect, useRef } from 'react';
+import { signOut } from 'firebase/auth';  
+import { auth } from '../../../firebase'
 import {useNavigate} from 'react-router-dom'
+import { toast, ToastContainer } from 'react-toastify';
 
 function BHeader() {
   const [dropdownOpen, setDropdownOpen] = useState(false);
@@ -21,17 +24,28 @@ function BHeader() {
     };  
   }, [dropdownRef]);
 
+  const handleLogout = async () => {
+    console.log("enter")
+    try {
+      await signOut(auth);
+      console.log('hello')
+      toast.success("Logged Out")
+      navigate('/login'); 
+    } catch (error) {
+      toast.error('Error signing out:', error);
+    }
+  };
   return (
-    <header className="w-[100vw] h-[10vh] font-sans">
-      <div className="bg-white shadow">
-        <div className="flex justify-between items-center py-4 px-4">
+    <header className="h-20 font-sans">
+      <div className="bg-white h-full shadow flex w-full">
+        <div className=" w-full flex justify-between items-center  px-4">
           <div className="text-green-500 text-2xl font-bold">AgriConnect</div>
-          <div className="flex-grow items-center justify-centerc mx-8">
-            <div className="flex">
+          <div className="flex-grow items-center justify-center mx-8">
+            <div className="flex items-center justify-center ">
               <input
                 type="text"
                 placeholder="Search"
-                className="w-full px-4 py-2 border border-gray-300 rounded-l"
+                className="w-full px-4 border border-gray-300 rounded-l"
               />
               <button className="px-6 py-2 bg-green-500 hover:bg-green-600 text-white rounded-r flex items-center justify-center gap-4">
                 <FaSearch />
@@ -66,12 +80,13 @@ function BHeader() {
                   </div>
                 )}
               </div>
-              <button className="py-2 border rounded-lg flex items-center justify-center bg-green-500 hover:bg-green-600 text-white" onClick={()=>{navigate('/login')}}>
+              <button className="py-2 border rounded-lg flex items-center justify-center bg-green-500 hover:bg-green-600 text-white" onClick={handleLogout}>
                 Logout
               </button>
             </div>
           </div>
         </div>
+        <ToastContainer/>
       </div>
     </header>
   );

client/src/components/Buyer/BNavbar.jsx

@@ -5,7 +5,6 @@ export default function BNavbar({ handleNavigate, navigate }) {
     <nav className="bg-white border-t">
       <div className=" mx-auto flex justify-between items-center px-4 py-3">
         <ul className="flex space-x-5">
-          <li className={`cursor-pointer py-1 px-2 rounded-lg ${navigate === 'home' ? "bg-green-300" : ""} hover:bg-green-200`} onClick={() => handleNavigate('home')}>Home</li>
           <li className={`cursor-pointer py-1 px-2 rounded-lg ${navigate === 'deals' ? "bg-green-300" : ""} hover:bg-green-200`} onClick={() => handleNavigate('deals')}>Deals</li>
           <li className={`cursor-pointer py-1 px-2 rounded-lg ${navigate === 'contract' ? "bg-green-300" : ""} hover:bg-green-200`} onClick={() => handleNavigate('contract')}>Contract Status</li>
           <li className={`cursor-pointer py-1 px-2 rounded-lg ${navigate === 'transactions' ? "bg-green-300" : ""} hover:bg-green-200`} onClick={() => handleNavigate('transactions')}>Transactions</li>

client/src/components/Buyer/Contract/BContract.jsx

@@ -1,21 +1,51 @@
+import { useContext, useEffect, useState } from 'react';
+import { AuthContext } from '../../context/Authcontext';
+import { db } from '../../../../firebase';
+import { getDoc, doc } from 'firebase/firestore';
 import ContractStatus from './ContractStatus';
 export default function BContract() {
+  const { currentUser } = useContext(AuthContext);
+  const [contracts, setContracts] = useState([]); // Initialize state to store contracts
+
+  useEffect(() => {
+    const fetchDetails = async () => {
+      if (currentUser) {
+        const buyerRef = doc(db, 'buyers', currentUser.uid);
+        const docSnap = await getDoc(buyerRef);
+
+        if (docSnap.exists()) {
+          const data = docSnap.data();
+          const contractsData = data.contracts
+            ? Object.values(data.contracts)
+            : []; // Convert map to array
+          setContracts(contractsData); // Update state with contracts
+        }
+      }
+    };
+
+    fetchDetails(); // Fetch details on component mount
+  }, [currentUser]);
+
   return (
-    <div className="w-full flex justify-center bg-slate-50">
-      <div className="w-3/4 p-4 container h-full shadow flex flex-col items-center justify-center gap-2">
-        <div className="font-bold text-xl self-start">Contract History :</div>
-        <div className="w-full h-8 bg-slate-400 flex flex-row items-center justify-around">
-          <div>Order ID</div>
-          <div>Date</div>
-          <div>Total</div>
-          <div>Status</div>
-          <div></div>
-        </div>
-        <ContractStatus />
-        <ContractStatus />
-        <ContractStatus />
-        <ContractStatus />
-      </div>
+    <div className="w-full h-[100vh] flex self-start justify-center">
+  <div className="w-3/4 p-4 h-full shadow flex flex-col self-start items-start justify-start gap-2">
+    <div className="font-bold text-xl self-start mb-2">Contract History :</div>
+    <div className="w-full h-8 bg-slate-400 flex flex-row items-center justify-between px-4">
+      <div className="flex-1 text-center">Date</div>
+      <div className="flex-1 text-center">Total</div>
+      <div className="flex-1 text-center">Status</div>
+      <div className="flex-1 text-center">Details</div>
     </div>
-  );
+    <div className="w-full flex flex-col items-start justify-start mt-2">
+      {contracts.length > 0 ? (
+        contracts.map((contract, index) => (
+          <ContractStatus key={index} contract={contract} />
+        ))
+      ) : (
+        <p className='flex-1 w-full flex text-center'>No contracts found</p>
+      )}
+    </div>
+  </div>
+</div>
+  )
 }

client/src/components/Buyer/Contract/ContractStatus.jsx

@@ -1,11 +1,13 @@
-export default function ContractStatus() {
+export default function ContractStatus({ contract, key }) {
   return (
-    <div className="w-full h-10 bg-green-200 flex flex-row items-center justify-around" >
-        <div>Order ID</div>
-            <div>Date</div>
-            <div>Total</div>
-            <div>Status</div>
-            <div className="text-green-800">View Details</div>     
-        </div>
-  )
+    <div className="w-full h-12 bg-green-200 flex flex-row items-center justify-between px-4 mb-2">
+      {/* Assuming `contract.id` is available */}
+      <div className="flex-1 text-center">{contract.date || 'N/A'}</div>
+      <div className="flex-1 text-center">{contract.total || 'N/A'}</div>
+      <div className="flex-1 text-center">{contract.status || 'N/A'}</div>
+      <div className="flex-1 text-center text-green-800 cursor-pointer">
+        View Details
+      </div>
+    </div>
+  );
 }

client/src/components/Buyer/Login.jsx

@@ -5,7 +5,6 @@ import {useNavigate } from 'react-router-dom';
 import './Signup.css';
 
 const auth=getAuth(app);
-
 const Login = () => {
   const [email,setemail]=useState("")
   const [password,setpass]=useState("")
@@ -19,7 +18,7 @@ const Login = () => {
       await signInWithEmailAndPassword(auth,email,password).then(()=>
       {
         alert("success")
-        // navigate('/Login') 
+        navigate('/buyer') 
       })
     }
     catch(error){

client/src/components/Buyer/Settings/BSettings.jsx

@@ -1,7 +1,6 @@
 import { useState } from 'react';
 import ProfileSetting from './ProfileSetting';
 import PaymentSetting from './PaymentSetting';
-import ContractSetting from './ContractSetting';
 export default function BSettings() {
   const [choice, setChoice] = useState('profile');
   return (
@@ -27,20 +26,12 @@ export default function BSettings() {
               >
                 <span>Payment Credentials</span>
               </div>
-              <div
-                className={`p-3 text-gray-700 rounded-lg flex items-center cursor-pointer space-x-2 ${choice === 'contract' ? 'bg-green-200 font-bold' : ''}`}
-                onClick={() => {
-                  setChoice('contract');
-                }}
-              >
-                <span>Contract History</span>
-              </div>
+
             </div>
           </div>
 
           {/* Main Content */}
           {choice === 'profile' && <ProfileSetting />}
-          {choice === 'contract' && <ContractSetting />}
           {choice === 'payment' && <PaymentSetting />}
         </div>
       </div>