bugs fixing

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "axios": "^1.7.2",
+    "flutterwave-react-v3": "^1.3.2",
     "framer-motion": "^11.2.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/App.jsx

@@ -5,6 +5,7 @@ import {
   Route,
   // Navigate,
 } from "react-router-dom";
+import { CardProvider } from "./context/CardContext"; // Updated import name
 import { SignupContextProvider } from "./context/SignupContext";
 import Landing from "./components/landingPage/landingPage";
 import EnrollPage from "./components/onboarding/Enroll";
@@ -19,6 +20,7 @@ import Dashboard from "./components/dashboard/dashbord/DashboardHome"
 import Eservice from "./components/E-service/Services";
 import Tuition from "./components/dashboard/PayTuition/Tuition";
 import Wallet from "./components/dashboard/wallet/Wallets";
+import TargetSavings from "./components/dashboard/TargetSavings/Target";
 
 import "./index.css";
 
@@ -27,6 +29,7 @@ function App() {
 
   return (
     <SignupContextProvider>
+      <CardProvider>
       <Router>
         <Routes>
           <Route path="/" element={<Landing />} />
@@ -55,13 +58,18 @@ function App() {
             path="/dashboard/wallet"
             element={isLoggedIn ? <Wallet /> : <SignIn />}
           />
+           <Route
+              path="/dashboard/target-savings"
+              element={isLoggedIn ? <TargetSavings /> : <SignIn />}
+            />
 
           {/* <Route path="/dashboard" element={<Dashboard />} />
           <Route path="/dashboard/tuition" element={<Tuition />} />
           <Route path="/dashboard/e-service" element={<Eservice />} />
           <Route path="/dashboard/wallet" element={<Wallet />} /> */}
         </Routes>
       </Router>
+      </CardProvider>
     </SignupContextProvider>
   );
 }

src/components/dashboard/TargetSavings/Completed.jsx

@@ -0,0 +1,46 @@
+import Vector from "../../../assets/images/VectorX.png"
+export default function Completed() {
+    return(
+        <div
+        className=" justify-between bg-white  rounded-xl"
+        style={{ border: "1px solid #CCCCCC0D " }}
+      >
+        <div className="flex border-b mb-6 p-4">
+          <button
+            className=" text-[#4B56A0] py-2 px-2 bg-[#F8FAFD] 
+                    font-Modarat text-base text-center mr-[355px]"
+            style={{ borderRadius: "99px"}}
+          >
+            {" "}
+            Completed
+          </button>
+          <div
+            className="bg-[#CCCCCC0D] "
+            style={{ borderRadius: "100%", padding: "8px" }}
+          >
+            <img className="w-[24px] h-[24px]" src={Vector} />
+          </div>
+        </div>
+        <div className="flex flex-col justify-center text-center items-center">
+          <p className="text-customBlack mb-4 font-Modarat text-2xl">$0.00</p>
+          <p className="text-base font-Modarat text-[#606569] mb-[32px]">
+            Balance left to Maturity
+          </p>
+        </div>
+        <div className="ml-4 mr-4">
+          <div className="flex justify-between rounded-2xl p-5 mb-4	bg-[#CCCCCC0D]">
+              <p className="text-[#606569] text-base font-Modarat">Institution</p>
+              <p className="text-[#51575D] font-Modarat text-lg font-bold">Algonquin College</p>
+          </div>
+          <div className="flex justify-between rounded-2xl p-5 mb-4	bg-[#CCCCCC0D]">
+              <p className="text-[#606569] text-base font-Modarat">Description</p>
+              <p className="text-[#51575D] font-Modarat text-lg font-bold">First Semester Tuition</p>
+          </div>
+          <div className="flex justify-between rounded-2xl p-5 mb-4	bg-[#CCCCCC0D]">
+              <p className="text-[#606569] text-base font-Modarat">Maturity Amount</p>
+              <p className="text-[#51575D] font-Modarat text-lg font-bold">$760.00 </p>
+          </div>
+        </div>
+      </div>
+    )
+}

src/components/dashboard/TargetSavings/CreatePlan.jsx

@@ -0,0 +1,58 @@
+import React, { useState } from "react";
+import Coin from "../../../assets/images/151055041_b058e357-f1d4-48f6-8977-25b8bead6dcc-removebg-preview 1.png";
+import Coin1 from "../../../assets/images/151055041_b058e357-f1d4-48f6-8977-25b8bead6dcc-removebg-preview 2.png";
+import Image from "../../../assets/images/2151266604 (1) 1.png";
+import Ongoing from "./Ongoing";
+import Completed from "./Completed";
+import Tuition from "./PlanCreate";
+import Terminated from "./Terminated";
+import Button from "./Button";
+
+export default function CreatePlan() {
+    const [showTuition, setTuition] = useState(false);
+
+    const handleClick = () => {
+        console.log("Button clicked");
+        setTuition(true); // Show Tuition component
+    };
+
+    return (
+        <>
+            {!showTuition ? (
+                <>
+                    <div className="w-[90%] mt-[64px] mr-[40px] ml-[40px] mb-[128px]">
+                        <div className="bg-[#CCCCCC0D] flex justify-between relative px-18 rounded">
+                            <div className="ml-[42px] mt-8">
+                                <h3 className="font-millik text-[30px] leading-[40px] text-customBlack mb-4">
+                                    Hedge Your Funds With <br />
+                                    <span className="text-[#252E6A]">Target Savings</span>
+                                </h3>
+                                <Button onClick={handleClick} className="text-white">
+                                    <span className="text-white text-sm">Create New Plan</span>
+                                </Button>
+                            </div>
+                            <div className="flex">
+                                <img src={Coin1} alt="coin" className="w-[143px] h-[120px] mt-[80px] mr-2" />
+                                <img src={Coin} alt="coin" className="w-[143px] h-[120px] right-20 top-20 absolute" />
+                                <img src={Image} alt="coin" className="w-[200px] h-[200px]" />
+                            </div>
+                        </div>
+                    </div>
+                    <div>
+                    <div className="flex justify-between">
+                        <div className="mr-10"><Ongoing /></div>
+                        <Completed />
+                    </div>
+                    <div ><Terminated/></div>
+                    </div>
+
+
+                </>
+            ) : (
+                <div className="">
+                    <Tuition />
+                </div>
+            )}
+        </>
+    );
+}

src/components/dashboard/TargetSavings/Ongoing.jsx

@@ -0,0 +1,53 @@
+import Vector from "../../../assets/images/VectorX.png";
+import { React , useState } from "react";
+export default function Ongoing() {
+
+    // const items = [
+    //     { instituition: "Institution",
+
+    //     }
+    // ]
+  return (
+    <div
+      className=" justify-between  bg-white  rounded-xl"
+      style={{ border: "1px solid #CCCCCC0D" }}
+    >
+      <div className="flex border-b mb-6 p-4">
+        <button
+          className=" text-[#FF9B00] py-2 px-2 bg-[#FFF6E9] 
+                  font-Modarat text-base text-center mr-[355px]"
+          style={{ borderRadius: "99px", }}
+        >
+          {" "}
+          Ongoing
+        </button>
+        <div
+          className="bg-[#CCCCCC0D] "
+          style={{ borderRadius: "100%", padding: "8px" }}
+        >
+          <img className="w-[24px] h-[24px]" src={Vector} />
+        </div>
+      </div>
+      <div className="flex flex-col justify-center text-center items-center">
+        <p className="text-customBlack mb-4 font-Modarat text-2xl">$760.00</p>
+        <p className="text-base font-Modarat text-[#606569] mb-[32px]">
+          Balance left to Maturity
+        </p>
+      </div>
+      <div className="ml-4 mr-4">
+        <div className="flex justify-between rounded-2xl p-5 mb-4	bg-[#CCCCCC0D]">
+            <p className="text-[#606569] text-base font-Modarat">Institution</p>
+            <p className="text-[#51575D] font-Modarat text-lg font-bold">Algonquin College</p>
+        </div>
+        <div className="flex justify-between rounded-2xl p-5 mb-4	bg-[#CCCCCC0D]">
+            <p className="text-[#606569] text-base font-Modarat">Description</p>
+            <p className="text-[#51575D] font-Modarat text-lg font-bold">Accommodation</p>
+        </div>
+        <div className="flex justify-between rounded-2xl p-5 mb-4	bg-[#CCCCCC0D]">
+            <p className="text-[#606569] text-base font-Modarat">Maturity Amount</p>
+            <p className="text-[#51575D] font-Modarat text-lg font-bold">$760.00 </p>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/dashboard/TargetSavings/PlanCreate.jsx

@@ -0,0 +1,59 @@
+import InstituteInfor from "../PayTuition/InstituteInfor";
+import PaymentInformation from "../PayTuition/PaymentInformation";
+import TuitionStatus from "../PayTuition/TuitionStatus";
+import StudentInfor from "../PayTuition/StudentInfor";
+import TransactionSummary from "../PayTuition/TransactionSummary";
+import CompletePayment from "../PayTuition/CompletePayment";
+import { useState } from "react";
+import { Steps } from "../../../constants/SidebarData";
+const Plan = () => {
+  const [currentForm, setCurrentForm] = useState(1);
+
+  const handleNext = () => {
+    setCurrentForm((prevForm) => Math.min(prevForm + 1, 5)); // Ensure it doesn't exceed the number of steps
+  };
+  const handleThreeBack = () => {
+    setCurrentForm((prevForm) => Math.max(prevForm - 3, 1)); // Ensure it doesn't go below the first step
+  };
+  const handleTwoBack = () => {
+    setCurrentForm((prevForm) => Math.max(prevForm - 2, 1)); // Ensure it doesn't go below the first step
+  };
+  const handleOneBack = () => {
+    setCurrentForm((prevForm) => Math.max(prevForm - 1, 1)); // Ensure it doesn't go below the first step
+  };
+  const renderForm = () => {
+    switch (currentForm) {
+      case 1:
+        return <InstituteInfor Next={handleNext} />;
+      case 2:
+        return <PaymentInformation Next={handleNext} />;
+      case 3:
+        return <StudentInfor Next={handleNext} />;
+      case 4:
+        return (
+          <TransactionSummary
+            Next={handleNext}
+            ThreeStepsBack={handleThreeBack}
+            TwoStepsBack={handleTwoBack}
+            OneStepBack={handleOneBack}
+          />
+        );
+      case 5:
+        return <CompletePayment Next={handleNext} />;
+      default:
+        return;
+    }
+  };
+  return (
+
+      <div className=" flex gap-[10rem]">
+        <div className="">{renderForm()}</div>
+        <div className=" mr-5">
+          <TuitionStatus Steps={Steps} activeState={currentForm} />
+        </div>
+      </div>
+
+  );
+};
+
+export default Plan;

src/components/dashboard/TargetSavings/Target.jsx

@@ -0,0 +1,11 @@
+import Dashboard from "../../views/dashboard";
+import CreatePlan from "./CreatePlan";
+const Target = () => {
+  return (
+    <Dashboard >
+      <CreatePlan />
+    </Dashboard>
+  );
+};
+
+export default Target;

src/components/dashboard/TargetSavings/Terminated.jsx

@@ -0,0 +1,49 @@
+import Vector from "../../../assets/images/VectorX.png";
+import { React , useState } from "react";
+export default function Ongoing() {
+
+
+  return (
+    <div
+      className=" justify-between  bg-white  rounded-xl w-[528px] mt-[64px]"
+      style={{ border: "1px solid #CCCCCC0D" }}
+    >
+      <div className="flex border-b mb-6 p-4">
+        <button
+          className=" bg-[#BB5A541A] py-4 px-4 text-[#CA3131] 
+                  font-Modarat text-base text-center mr-[355px]"
+          style={{ borderRadius: "99px", }}
+        >
+          {" "}
+          Terminated
+        </button>
+        <div
+          className="bg-[#CCCCCC0D] "
+          style={{ borderRadius: "100%", padding: "8px" }}
+        >
+          <img className="w-[24px] h-[24px]" src={Vector} />
+        </div>
+      </div>
+      <div className="flex flex-col justify-center text-center items-center">
+        <p className="text-customBlack mb-4 font-Modarat text-2xl">$760.00</p>
+        <p className="text-base font-Modarat text-[#606569] mb-[32px]">
+          Balance left to Maturity
+        </p>
+      </div>
+      <div className="ml-4 mr-4">
+        <div className="flex justify-between rounded-2xl p-5 mb-4	bg-[#CCCCCC0D]">
+            <p className="text-[#606569] text-base font-Modarat">Institution</p>
+            <p className="text-[#51575D] font-Modarat text-lg font-bold">Algonquin College</p>
+        </div>
+        <div className="flex justify-between rounded-2xl p-5 mb-4	bg-[#CCCCCC0D]">
+            <p className="text-[#606569] text-base font-Modarat">Description</p>
+            <p className="text-[#51575D] font-Modarat text-lg font-bold">Accommodation</p>
+        </div>
+        <div className="flex justify-between rounded-2xl p-5 mb-4	bg-[#CCCCCC0D]">
+            <p className="text-[#606569] text-base font-Modarat">Maturity Amount</p>
+            <p className="text-[#51575D] font-Modarat text-lg font-bold">$760.00 </p>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/dashboard/wallet/Animation.css

@@ -0,0 +1,9 @@
+@keyframes slow-spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+
+  .slow-spin {
+    animation: slow-spin 2s linear infinite; /* Adjust the duration here */
+  }
+

src/components/dashboard/wallet/CardDesign.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+import Card1 from "../../../assets/images/Card 7.png";
+
+export default function CardOne() {
+  return (
+    <div>
+      <div className="" 
+        style={{
+          backgroundImage: `url(${Card1})`,
+          width: '364px', 
+          height: '202.64px', 
+          backgroundSize: 'cover', 
+          backgroundPosition: 'center',
+          borderRadius: '16px' 
+        }}
+      >
+
+      </div>
+    </div>
+  );
+}

src/components/dashboard/wallet/CardDesign3.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+import Card3 from "../../../assets/images/Group 56.png";
+export default function CardThree() {
+  return (
+    <div>
+      <div className=" " 
+        style={{
+          backgroundImage: `url(${Card3})`,
+          width: '364px', 
+          height: '202.64px', 
+          backgroundSize: 'cover', 
+          backgroundPosition: 'center',
+          borderRadius: '16px' 
+        }}
+      >
+
+      </div>
+    </div>
+  );
+}