issue-#32

package.json

@@ -24,6 +24,7 @@
     "@starknet-react/chains": "^3.1.2",
     "@starknet-react/core": "^3.7.2",
     "@starknet-react/typescript-config": "^0.0.1",
+    "chart.js": "^4.4.9",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "framer-motion": "^12.5.0",

src/app/book-lisiting-page/page.tsx

@@ -6,10 +6,8 @@ import ExploreBooks from "@/components/BookListingPage/ExploreBooks";
 import NewRelease from "@/components/BookListingPage/NewRelease";
 import NftEdition from "@/components/BookListingPage/NftEdition";
 import Trending from "@/components/BookListingPage/Trending";
-import Footer from "@/components/layout/Footer";
-import Header from "@/components/layout/Header";
 import { Input } from "@/components/ui/input";
-import bookData from "@/lib/MockData";
+import { bookData } from "@/lib/MockData";
 import { useMemo, useState } from "react";
 
 
@@ -80,7 +78,6 @@ export default function Page() {
 
     return (
         <div className="w-full h-full flex flex-col items-start justify-start gap-6 " >
-            <Header />
             <BooksPageNav setDisplayedSection={setDisplayedSection} displayedSection={displayedSection} />
             <Input className=" max-w-[250px] self-end mr-[20px] " type={"search"} value={searchTerm} onChange={handleChange} placeholder="Search ..." />
 
@@ -99,7 +96,7 @@ export default function Page() {
 
 
 
-            <Footer />
+
         </div>
     )
 }

src/app/book-lisiting-page/review/[id]/page.tsx

@@ -1,7 +1,7 @@
 
 "use client"
 
-import bookData from '@/lib/MockData';
+import { bookData } from '@/lib/MockData';
 import { useParams } from 'next/navigation';
 
 

src/app/dashboard/earnings/page.tsx

@@ -1,12 +1,104 @@
+"use client"
+
+
+import EarningsSummary from "@/components/ dashboard-earnings/EarningSummary"
+import LinkWallet from "@/components/ dashboard-earnings/LinkWallet"
+import RevenueBreakdown from "@/components/ dashboard-earnings/RevenueBreakdown"
+import type { EarningTab } from "@/lib/interfaces/EarningTabInterface"
+import { RevenueChartInterface } from "@/lib/interfaces/RevenueChartInterface"
+import { useEffect, useState } from "react"
+import TransactionHistory from "../../../components/ dashboard-earnings/TransactionHistory"
+import RequestPaymentModal from "@/components/ dashboard-earnings/RequestPaymentModal"
+import { PaymentPropInterface } from "@/lib/interfaces/PaymentPropInterface"
+
+
+const earningsSumaryDetails: EarningTab[] = [
+  { title: "Current Balance", amount:  3150.0 , border: "#D6ECFF" },
+  { title: "Pending Payout", amount: 100.06, border: "#2396413D" },
+  { title: "Total Payout", amount: 2500.01, border: "#822ECB3D" },
+  { title: "Total Earned", amount: 2730.19, border: "#D6ECFF" },
+]
+
+
+
+
+const chartData: RevenueChartInterface[] = [
+  {
+    name: "Monthly Subcription Payment",
+    value: 121,
+    color: "#236FEA",
+    percentage: "40%"
+  },
+  {
+    name: "NFT Royalty",
+    value: 12,
+    color: "#FBBC05",
+    percentage: "10%"
+  },
+    {
+    name: "NFT",
+    value: 101,
+    color: "#822ECB",
+    percentage: "22%"
+  },
+  {
+    name: "Book Purchase",
+    value: 131,
+    color: "#34A853",
+    percentage: "28%"
+  },
+]
+
+
+
 function EarningsPage() {
+  const [openRequestModal, setOpenRequestModal] =  useState(false)
+  const [walletAddress, setWalletAddress] = useState({
+    braavos: "",
+    argent: "",
+  })
+
+  const ADDRESS_KEY = "walletAddressKey"
+
+  const [paymentDetails, setPaymentDetails] = useState<PaymentPropInterface> ({
+  amount: 0.00,
+  wallet: "",
+  walletAddress: ""
+})
+
+
+
+  // This function loads saved addresses
+  useEffect(() => {
+    const savedAddresses = localStorage.getItem(ADDRESS_KEY)
+    if (savedAddresses) {
+      try {
+        const parsedAddresses = JSON.parse(savedAddresses)
+        setWalletAddress(parsedAddresses)
+      }
+      catch (error) {
+        console.error("Failed to parse saved addresses:", error)
+      }
+    }
+  }, [])
+
+
+  // this function saves wallet address to local storage
+  useEffect(() => {
+    if (walletAddress.braavos || walletAddress.argent) {
+      localStorage.setItem(ADDRESS_KEY, JSON.stringify(walletAddress))
+    }
+  }, [walletAddress])
+
   return (
-    <div className="flex flex-col gap-4">
-      <h1 className="text-2xl font-bold">Earnings</h1>
-      <p className="text-gray-600">
-        This is the earnings page. You can view your earnings here.
-      </p>
+    <div className="flex flex-col gap-8 w-full px-6 py-8 mx-auto font-inter min-w-[350px] ">
+      <EarningsSummary earningsSumaryDetails={earningsSumaryDetails} setOpenRequestModal={setOpenRequestModal} />
+      <TransactionHistory/>
+      <RevenueBreakdown chartData={chartData}  />
+      <LinkWallet walletAddress={walletAddress} setWalletAddress={setWalletAddress}  />
+{openRequestModal &&       <RequestPaymentModal paymentDetails={paymentDetails} setPaymentDetails={setPaymentDetails} walletAddress={walletAddress}  setOpenRequestModal={setOpenRequestModal} />}
     </div>
-  );
+  )
 }
 
-export default EarningsPage;
+export default EarningsPage

src/app/globals.css

@@ -84,6 +84,7 @@
   /* Font Family */
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
+  --font-inter: var(--font-inter);
 
   /* DIsplay TextSizes */
   --text-display-large: 57px;

src/app/layout.tsx

@@ -4,19 +4,26 @@ import NavBar from "@/components/landingpage/NavBar";
 import Footer from "@/components/landingpage/Footer";
 import { WalletProvider } from "../components/blockchain/WalletProvider";
 import { StarknetProvider } from "../components/blockchain/Providers";
+import { Inter } from "next/font/google";
 
 export const metadata: Metadata = {
   title: "ChainLib",
   description: "An E-Libray Platform",
 };
 
+const inter = Inter({
+  subsets: ["latin"],
+  display: "swap",
+  variable: "--font-inter",
+});
+
 export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" className={inter.className} >
       <body>
         <NavBar />
         <StarknetProvider>

src/components/ dashboard-earnings/Chart.tsx

@@ -0,0 +1,51 @@
+import { RevenueChartInterface } from "@/lib/interfaces/RevenueChartInterface";
+import {
+  BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer,
+  Cell
+} from 'recharts';
+
+
+
+interface RevenueChartProps {
+    chartData: RevenueChartInterface[]
+}
+
+
+
+export default function RevenueChart({chartData}: RevenueChartProps) {
+
+
+
+
+
+
+
+
+    return (
+
+<div className="w-full max-w-[651px] h-full   border-[1px] border-[var(--color-neutral-100)] rounded-lg px-0 md:px-6 py-6 flex items-center justify-center  " >
+
+
+<ResponsiveContainer width="100%" height={300} >
+    <BarChart data={chartData} >
+        <XAxis dataKey={"value" }  tickFormatter={(value) => `$${value}`} tick={{ dy: 10 }} tickLine={false}  axisLine={{ stroke: '#D1D1D1', strokeWidth: 1 }} />
+        <YAxis
+    axisLine={{ stroke: '#D1D1D1', strokeWidth: 1 }}
+  tick={false}
+  tickLine={false}
+         />
+        <Tooltip/>
+        <Bar dataKey="value" radius={[4, 4, 0, 0]}  barSize={60} >
+            {chartData.map((entry, index) => (
+                <Cell key={`ceil-${index}`} fill={entry.color}  />
+            ))}
+            </Bar>
+         </BarChart>
+
+</ResponsiveContainer>
+
+
+
+</div>
+    )
+}

src/components/ dashboard-earnings/EarningSummary.tsx

@@ -0,0 +1,38 @@
+import type { EarningTab } from "@/lib/interfaces/EarningTabInterface"
+import { Button } from "../ui/button"
+import Image from "next/image"
+import React from "react"
+
+interface EarningsSummaryProps {
+  earningsSumaryDetails: EarningTab[]
+  setOpenRequestModal: React.Dispatch<React.SetStateAction<boolean>>
+}
+
+const EarningsSummary = ({ earningsSumaryDetails, setOpenRequestModal }: EarningsSummaryProps) => {
+  return (
+    <div className="w-full mx-auto flex items-start flex-col gap-6 bg-[var(--color-background)] min-h-[181px] shadow-[0px_4px_12px_#1212120A] rounded-lg justify-center p-4">
+      <div className="w-full grid grid-cols-2 md:grid-cols-4 gap-6 ">
+        {earningsSumaryDetails.map((item, index) => (
+          <div
+            key={index}
+            className=" md:w-full md:max-w-[257px] py-3 px-6 flex flex-col gap-2 items-start justify-center rounded-lg border-[1px]"
+            style={{ borderColor: item.border }}
+          >
+            <h1 className=" text-xs  md:text-sm font-normal text-[var(--color-neutral-600)]">{item.title}</h1>
+
+            <div className="flex items-center gap-2">
+              <Image src={"/stark.svg"} alt="icon" width={30} height={30} className="w-[14px] h-[14px]" />
+              <p className=" text-sm md:text-base font-bold text-[var(--color-primary-600)]">{item.amount.toFixed(2)}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <Button onClick={() => setOpenRequestModal(true)} className="text-sm w-full md:w-fit font-normal text-[var(--color-background)] px-8 py-5 bg-[linear-gradient(180deg,_#096CFF_40.7%,_#054199_180.61%)]">
+        Request Payment
+      </Button>
+    </div>
+  )
+}
+
+export default EarningsSummary

src/components/ dashboard-earnings/FilterBar.tsx

@@ -0,0 +1,47 @@
+import { Input } from "../ui/input";
+
+
+export default function FilterBar() {
+  return (
+    <div className="flex  items-center lg:gap-10">
+      <div className="flex gap-1">
+        <button className="bg-[#E7E7E7] px-2 md:px-3 py-1.5 rounded text-[#5D5D5D] text-xs md:text-sm font-normal  md:font-medium">This Week</button>
+        <button className="bg-[#E7E7E7] px-2 md:px-3 py-1.5 rounded text-[#5D5D5D] text-xs md:text-sm font-normal md:font-medium">This Month</button>
+        <button className="bg-[#E7E7E7] px-2 md:px-3 py-1.5 rounded text-[#5D5D5D] text-xs md:text-sm font-normal md:font-medium">This Year</button>
+      </div>
+
+
+      <div className=" hidden md:flex items-center justify-center gap-4 " >
+
+<Input
+value={""}
+placeholder="dd/mm/yyyy"
+className="border-[1px] border-[#E7E7E7] max-w-[106px] "
+type="date"
+/>
+
+to
+
+
+<Input
+value={""}
+placeholder="dd/mm/yyyy"
+className="border-[1px] border-[#E7E7E7] max-w-[106px] "
+type="date"
+/>
+
+
+
+
+
+       <button className="bg-[#E7E7E7] px-3 py-1.5 rounded text-[#5D5D5D] text-xs md:text-sm font-medium">Apply</button>
+      </div>
+
+
+
+      <div className="ml-auto flex gap-2">
+        <button className="bg-[#E7E7E7] px-2 md:px-3 py-1.5 rounded text-[#5D5D5D] text-xs md:text-sm font-normal md:font-medium">Filter by</button>
+      </div>
+    </div>
+  );
+}