BudgetChain · anonfedora · Mar 28, 2025 · Mar 22, 2025 · Mar 22, 2025 · Mar 28, 2025
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
     "react-hot-toast": "^2.5.2",
     "react-icons": "^5.5.0",
     "recharts": "^2.15.1",
+    "sharp": "^0.33.5",
     "starknet": "^6.23.1",
     "tailwind-merge": "^3.0.2",
     "tailwindcss-animate": "^1.0.7",

diff --git a/public/svg/image 29.png → public/doc.png b/public/svg/image 29.png → public/doc.png
diff --git a/src/app/dashboard/components/document.tsx b/src/app/dashboard/components/document.tsx
@@ -1,8 +1,9 @@
-// ProjectDashboard.tsx
-import { useState } from 'react';
+'use client';
 import { ArrowLeft, Download } from 'lucide-react';
 import Image from 'next/image';
-import Cert from '../../../../public/svg/image 29.png';
+import Cert from '../../../../public/doc.png';
+import { PieChart, Pie, Cell } from 'recharts';
+import { useState, useEffect } from 'react';
 
 interface ProjectDocument {
   id: string;
@@ -37,105 +38,100 @@ const ProjectDashboard: React.FC<ProjectDashboardProps> = ({
   completionPercentage,
   documents,
 }) => {
+  const [chartSize, setChartSize] = useState(140);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setChartSize(window.innerWidth < 600 ? 100 : 140);
+    };
+    window.addEventListener('resize', handleResize);
+    handleResize();
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  const pieData = [
+    { name: 'Completed', value: completionPercentage },
+    { name: 'Remaining', value: 100 - completionPercentage },
+  ];
+
+  const COLORS = ['#e14eca', '#171720'];
+
+  const projectDetails = [
+    { label: 'Name of Project', value: projectName },
+    { label: 'Head of Team', value: teamHead },
+    { label: 'Number of people in team', value: teamSize },
+    { label: 'Purpose of Project', value: projectPurpose },
+    { label: 'Funds requested', value: `$${fundsRequested.toLocaleString()}` },
+    { label: 'Timeline', value: `${timelineMonths} months` },
+    { label: 'Start date', value: startDate },
+    { label: 'End date', value: endDate },
+    { label: 'Location', value: location },
+  ];
+
+  const handleDownload = () => {
+    console.log('Downloading records...');
+    // Implement download logic here
+  };
+
   return (
     <div className="flex flex-col bg-[#171720] text-white w-full h-full rounded-md border border-gray-700 p-3">
       <div className="flex justify-between items-center mb-8">
         <h1 className="text-lg font-medium">{teamHead}</h1>
-        <button className="flex items-center text-sm gap-1 border border-gray-500 rounded-md p-2 text-gray-300">
+        <button onClick={handleDownload} className="flex items-center text-sm gap-1 border border-gray-500 rounded-md p-2 text-gray-300">
           <Download size={16} />
           <span>Download Records</span>
         </button>
       </div>
 
-      <div className="flex flex-col items-center justify-center mb-10">
-        <div className="relative h-36 w-36">
-          <div className="absolute inset-0 rounded-full bg-[#171720]"></div>
-
-          <svg className="absolute inset-0" viewBox="0 0 100 100">
-            <circle
-              cx="50"
-              cy="50"
-              r="45"
-              fill="none"
-              stroke="#171720"
-              strokeWidth="10"
-            />
-            <circle
-              cx="50"
-              cy="50"
-              r="45"
-              fill="none"
-              stroke="#e14eca"
-              strokeWidth="10"
-              strokeDasharray={`${(2 * Math.PI * 45 * completionPercentage) / 100} ${2 * Math.PI * 45 * (1 - completionPercentage / 100)}`}
-              strokeDashoffset={(2 * Math.PI * 45) / 4}
-              strokeLinecap="round"
-            />
-          </svg>
-
-          <div className="absolute inset-0 flex flex-col justify-center items-center">
-            <span className="text-3xl font-bold">{completionPercentage}%</span>
-            <span className="text-xs text-gray-400">Completed</span>
-          </div>
+      <div className="flex flex-col items-center justify-center mb-10 relative">
+        <PieChart width={300} height={300}>
+          <Pie
+            data={pieData}
+            cx={chartSize}
+            cy={chartSize}
+            innerRadius={chartSize - 30}
+            outerRadius={chartSize - 15}
+            paddingAngle={0}
+            dataKey="value"
+            startAngle={90}
+            endAngle={-270}
+            cornerRadius={25}
+            stroke="none"
+          >
+            {pieData.map((entry, index) => (
+              <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+            ))}
+          </Pie>
+        </PieChart>
+        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex flex-col justify-center items-center">
+          <span className="text-3xl font-bold">{completionPercentage}%</span>
+          <span className="text-xs text-gray-400">Completed</span>
         </div>
       </div>
 
       <div className="space-y-4 mb-8 flex flex-col">
-        <div>
-          <span className="text-gray-400 mr-3">Name of Project:</span>
-          <span>{projectName}</span>
-        </div>
-        <div>
-          <span className="text-gray-400 mr-3">Head of Team:</span>
-          <span>{teamHead}</span>
-        </div>
-        <div>
-          <span className="text-gray-400 mr-3">Number of people in team:</span>
-          <span>{teamSize}</span>
-        </div>
-        <div>
-          <span className="text-gray-400 mr-3">Purpose of Project:</span>
-          <span className="text-right">{projectPurpose}</span>
-        </div>
-        <div>
-          <span className="text-gray-400 mr-3">Funds requested:</span>
-          <span>${fundsRequested ? fundsRequested.toLocaleString() : '0'}</span>
-        </div>
-        <div>
-          <span className="text-gray-400 mr-3">Timeline:</span>
-          <span>{timelineMonths} months</span>
-        </div>
-        <div>
-          <span className="text-gray-400 mr-3">Start date:</span>
-          <span>{startDate}</span>
-        </div>
-        <div>
-          <span className="text-gray-400 mr-3">End date:</span>
-          <span>{endDate}</span>
-        </div>
-        <div>
-          <span className="text-gray-400 mr-3">Location:</span>
-          <span>{location}</span>
-        </div>
+        {projectDetails.map((detail, index) => (
+          <div key={index}>
+            <span className="text-gray-400 mr-3">{detail.label}:</span>
+            <span>{detail.value}</span>
+          </div>
+        ))}
       </div>
 
       <div className="space-y-4">
         <h2 className="text-gray-400 mr-3">Uploaded Documents:</h2>
-        <div className="flex gap-4 ml-56">
-          {documents &&
-            documents.map((doc) => (
-              <div key={doc.id}>
-                <div className="w-[150px] relative">
-                  <Image
-                    src={Cert}
-                    alt={doc.title}
-                    width={150}
-                    height={150}
-                    className="object-cover"
-                  />
-                </div>
-              </div>
-            ))}
+        <div className="flex flex-wrap gap-4">
+          {documents && documents.map((doc) => (
+            <div key={doc.id} className="w-[150px] relative">
+              <Image
+                src={doc.imageUrl ? doc.imageUrl : Cert.src}
+                alt={doc.title}
+                width={150}
+                height={150}
+                className="object-cover"
+              />
+            </div>
+          ))}
         </div>
       </div>
     </div>

diff --git a/src/app/dashboard/components/navBar.tsx b/src/app/dashboard/components/navBar.tsx
@@ -4,31 +4,31 @@ import { Search } from 'lucide-react';
 
 const NavBar = () => {
   return (
-    <nav className="w-full h-[100px] flex justify-between items-center px-4 ">
-      <div className="relative w-[400px]">
+    <nav className="w-full h-[100px] bg-[#171720] flex justify-between items-center px-6 ">
+      <div className="flex justify-center items-center w-[300px] bg-transparent border-2 border-white/10 rounded-md px-4 overflow-hidden">
         <input
           placeholder="Search"
-          className="w-full h-[48px] bg-[#181824] border border-gray-800 rounded-md text-white px-4 focus:outline-none"
+          className="w-full h-[48px] bg-transparent text-white pr-4 focus:outline-none"
         />
-        <div className="absolute right-4 top-1/2 transform -translate-y-1/2">
+        <div className="">
           <Search size={20} className="text-gray-400" />
         </div>
       </div>
-      
+
       <div className="flex gap-3 items-center">
-        <div className="w-[300px] h-[48px] bg-[#181824] border border-gray-800 text-white rounded-md flex items-center justify-center">
+        <div className="w-[300px] h-[48px]  bg-transparent border-2 border-white/10 text-white rounded-md flex items-center justify-center">
           <div className="flex items-center gap-2">
             <span className="h-2.5 w-2.5 rounded-full bg-green-500"></span>
             <span className="text-white">Eli`z DAO</span>
           </div>
         </div>
-        
-        <div className="w-[300px] h-[48px] bg-[#181824] border border-gray-800 text-white rounded-md flex items-center justify-center">
+
+        <div className="w-[280px] h-[48px]  bg-transparent border-2 border-white/10 text-white rounded-md flex items-center justify-center">
           <span className="text-white">0xdf23Z.....bF42l5G</span>
         </div>
       </div>
     </nav>
   );
 };
 
-export default NavBar;
+export default NavBar;
diff --git a/src/app/dashboard/components/progressCard.tsx b/src/app/dashboard/components/progressCard.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { PieChart, Pie, Cell } from 'recharts';
 
 interface ProgressCardProps {
   name: string;
@@ -19,13 +20,14 @@ const ProgressCard: React.FC<ProgressCardProps> = ({
   color,
   border,
 }) => {
-  const radius = 40;
-  const circumference = 2 * Math.PI * radius;
-  const dashOffset = circumference - (circumference * percentage) / 100;
+  const data = [
+    { name: 'Completed', value: percentage },
+    { name: 'Remaining', value: 100 - percentage },
+  ];
 
   return (
     <div
-      className="w-[500px] h-[250px] rounded-lg p-4 bg-[#171720] cursor-pointer"
+      className="w-[500px] h-[294px] rounded-lg p-4 bg-[#171720] cursor-pointer"
       style={{ borderColor: border, borderWidth: '2px' }}
     >
       <div className="mb-2">
@@ -38,35 +40,27 @@ const ProgressCard: React.FC<ProgressCardProps> = ({
       </div>
 
       <div className="flex justify-center my-6">
-        <div className="relative w-24 h-24 flex items-center justify-center">
-          <svg
-            width="100%"
-            height="100%"
-            viewBox="0 0 100 100"
-            className="transform -rotate-90"
-          >
-            <circle
-              cx="50"
-              cy="50"
-              r={radius}
-              fill="transparent"
-              stroke="#171720"
-              strokeWidth="6"
-            />
-            <circle
-              cx="50"
-              cy="50"
-              r={radius}
-              fill="transparent"
-              stroke={color}
-              strokeWidth="6"
-              strokeDasharray={circumference}
-              strokeDashoffset={dashOffset}
-              strokeLinecap="round"
-            />
-          </svg>
+        <div className="relative w-40 h-40 flex items-center justify-center">
+          <PieChart width={160} height={160}>
+            <Pie
+              data={data}
+              cx={80}
+              cy={80}
+              innerRadius={60}
+              outerRadius={70}
+              paddingAngle={0}
+              dataKey="value"
+              startAngle={90}
+              endAngle={-270}
+              cornerRadius={25}
+              stroke="none"
+            >
+              <Cell key="completed" fill={color} />
+              <Cell key="remaining" fill="#171720" />
+            </Pie>
+          </PieChart>
           <div className="absolute inset-0 flex flex-col items-center justify-center">
-            <span className="text-xl text-white font-bold">{percentage}%</span>
+            <span className="text-3xl text-white font-bold">{percentage}%</span>
             <span className="text-xs text-gray-400">Completed</span>
           </div>
         </div>

diff --git a/src/app/dashboard/components/sideBar.tsx b/src/app/dashboard/components/sideBar.tsx
@@ -111,7 +111,7 @@ const Sidebar: FC = () => {
   }, [pathname]);
 
   return (
-    <div className="w-[260px] h-screen sticky bg-[#050512] text-white flex flex-col left-[20px] top-0 rounded-md">
+    <div className="min-w-[260px] h-screen sticky bg-[#050512] text-white flex flex-col left-[20px] top-0 rounded-md">
       <div className="w-full mb-5 flex justify-center items-center pt-10">
         <Image src={Brand} alt="Logo" />
       </div>

diff --git a/src/app/dashboard/components/transaction.tsx b/src/app/dashboard/components/transaction.tsx
@@ -75,20 +75,22 @@ const TransactionTable = () => {
   };
 
   return (
-    <div className="rounded-md border border-gray-700 py-3">
+    <div className="bg-[#171720] rounded-md border border-gray-700 py-3">
       <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-4 gap-2 px-3">
         <h2 className="text-xl font-semibold">Nduka's Transactions</h2>
         <div className="flex items-center space-x-2">
           <span className="text-gray-400 text-sm">Filter by:</span>
           <select className="bg-gray-800 text-gray-300 text-sm rounded-md px-2 py-1 border border-gray-700">
             <option>First uploaded</option>
+            <option>Date</option>
+            <option>Status</option>
           </select>
         </div>
       </div>
 
       <div className="hidden md:block overflow-x-auto">
         <table className="w-full text-sm">
-          <thead>
+          <thead> 
             <tr className="text-gray-400 border-b border-gray-800 bg-[#2B2B46]">
               <th className="py-3 text-left pl-4">S/N</th>
               <th className="py-3 text-left">Date</th>

diff --git a/src/app/dashboard/layout.tsx b/src/app/dashboard/layout.tsx
@@ -6,14 +6,14 @@ import NavBar from './components/navBar';
 
 const DashboardLayout = ({ children }: { children: ReactNode }) => {
   return (
-    <div className="flex bg-[#070716] min-h-screen">
+    <div className="flex bg-[#171720] min-h-screen gap-4">
       <Sidebar />
-      <div className="flex-1 px-10">
+      <div className="flex flex-col">
         <NavBar />
         <div className="mt-6">{children}</div>
       </div>
     </div>
   );
 };
 
-export default DashboardLayout;
+export default DashboardLayout;
diff --git a/src/app/dashboard/records/page.tsx b/src/app/dashboard/records/page.tsx
@@ -16,7 +16,7 @@ export default function Home() {
   };
 
   return (
-    <div className="flex-grow min-h-screen bg-[#171720] text-white p-2 sm:p-4">
+    <div className="flex-grow min-h-screen bg-[#171720] text-white">
       <main className="max-w-6xl mx-auto">
         <div className="md:hidden flex justify-end mb-4">
           <button
@@ -27,7 +27,7 @@ export default function Home() {
           </button>
         </div>
 
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10 mb-6">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10 mb-6 pr-4">
           <StatCard title="Total Transactions" value="3" />
           <StatCard title="Total Successful" value="2" />
           <StatCard title="Total Cancelled" value="1" />