feat: Implement Comprehensive Project Dashboard

src/app/dashboard/home_dashboard/AppealAllocation.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { PieChart, Pie, Cell } from 'recharts';
+
+const pieChartData = [
+  { name: 'Fragma Project', value: 17000, color: '#6366F1', price: '$17,000' },
+  { name: 'Ndida Project', value: 20000, color: '#EC4899', price: '$20,000' },
+];
+
+export default function AppealAllocation() {
+  return (
+    <div className="bg-[#0F0F1A]  rounded-lg space-y-6">
+      {/* Pending Appeal Section */}
+      <div className="text-center border p-5 rounded-xl border-[#EBEBEB40]">
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-[#848484] text-lg font-semibold">
+            Pending Appeal
+          </h2>
+          <a
+            href="#"
+            className="text-[#EBEBEB] border rounded p-1 border-[#848484] hover:text-indigo-300 flex items-center"
+          >
+            View
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              className="ml-1"
+            >
+              <path d="M7 17l9.2-9.2M17 17V7H7" />
+            </svg>
+          </a>
+        </div>
+        <div className="text-sm text-[#4F4AE6] mb-2">Request of</div>
+        <div className="text-2xl font-bold text-white mb-2">$20,000</div>
+        <div className="text-sm text-[#848484] my-7">
+          From <span className="text-[#EBEBEB]">Ndida Project</span> via
+          <span className="text-[#EBEBEB]">BudgetChain</span>
+        </div>
+        <div className="flex space-x-4">
+          <Button
+            variant="outline"
+            className="w-full bg-transparent border border-[#4F4AE6] hover:border-[#EBEBEB40] text-white hover:bg-[#4F4AE6]"
+          >
+            Reject
+          </Button>
+          <Button className="w-full bg-[#4F4AE6] text-white hover:bg-indigo-700">
+            Approve
+          </Button>
+        </div>
+      </div>
+
+      {/* Projects Funds Allocation Section */}
+      <div className="text-center border p-5 rounded-xl border-[#EBEBEB40]">
+        <h2 className="text-[#848484] text-left text-lg font-semibold mb-4">
+          Projects Funds Allocation
+        </h2>
+
+        <div className="flex justify-between w-full">
+          <div className="relative  justify-center">
+            <div className="w-48 h-48">
+              <PieChart width={192} height={192}>
+                <Pie
+                  data={pieChartData}
+                  cx="50%"
+                  cy="50%"
+                  innerRadius={60}
+                  outerRadius={80}
+                  paddingAngle={3}
+                  dataKey="value"
+                >
+                  {pieChartData.map((entry, index) => (
+                    <Cell key={`cell-${index}`} fill={entry.color} />
+                  ))}
+                </Pie>
+              </PieChart>
+            </div>
+          </div>
+          <div className=" flex flex-col justify-end items-center space-x-3 m-4">
+            {pieChartData.map((entry, index) => (
+              <div key={index} className="">
+                <div className="flex items-center justify-center space-y-4">
+                  <div
+                    className="w-3 h-3 mt-3.5 rounded-full mr-2"
+                    style={{ backgroundColor: entry.color }}
+                  />
+                  <span className="text-sm text-white">{entry.name}</span>
+                </div>
+
+                <p className="text-[#EBEBEB]">{entry.price}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/dashboard/home_dashboard/TransactionFilter.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { useState } from 'react';
+
+const TransactionFilter = () => {
+  const [sortBy, setSortBy] = useState('Date Added');
+
+  return (
+    <div>
+      <select
+        value={sortBy}
+        onChange={(e) => setSortBy(e.target.value)}
+        className="bg-gray-900 text-gray-300 border border-[#42415B] px-4 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-500"
+      >
+        <option value="Date Added">Date Added</option>
+        <option value="Amount">Amount</option>
+        <option value="Status">Status</option>
+      </select>
+    </div>
+  );
+};
+
+export default TransactionFilter;

src/app/dashboard/home_dashboard/TransactionTable.tsx

@@ -0,0 +1,216 @@
+import React from 'react';
+import TransactionFilter from './TransactionFilter';
+
+interface Transaction {
+  id: number;
+  currency: string;
+  address: string;
+  projects: string;
+  amount: string;
+  note: string;
+  date: string;
+  time: string;
+  status: 'SUCCESSFUL' | 'CANCELED';
+}
+
+const transactions: Transaction[] = [
+  {
+    id: 1,
+    currency: 'STRK',
+    projects: 'Fragma',
+    address: '0xcK4R....7G4F',
+    amount: '20,000 STRK ($10,200)',
+    note: 'Lorem ipsum dolor sit amet, consectetur...',
+    date: '18/02/2025',
+    time: '5:34 UTC',
+    status: 'SUCCESSFUL',
+  },
+  {
+    id: 2,
+    currency: 'STRK',
+    projects: 'Stelo',
+    address: '0xcK4R....7G4F',
+    amount: '20,000 STRK ($10,200)',
+    note: 'Lorem ipsum dolor sit amet, consectetur...',
+    date: '18/02/2025',
+    time: '5:34 UTC',
+    status: 'CANCELED',
+  },
+  {
+    id: 3,
+    currency: 'STRK',
+    projects: 'Ndida',
+    address: '0xcK4R....7G4F',
+    amount: '2,000 STRK ($1,200)',
+    note: 'Lorem ipsum dolor sit amet, consectetur...',
+    date: '18/02/2025',
+    time: '5:34 UTC',
+    status: 'SUCCESSFUL',
+  },
+  {
+    id: 4,
+    currency: 'USDC',
+    projects: 'Fragma',
+    address: '0xcK4R....7G4F',
+    amount: '$1,200',
+    note: 'Lorem ipsum dolor sit amet, consectetur...',
+    date: '18/02/2025',
+    time: '5:34 UTC',
+    status: 'SUCCESSFUL',
+  },
+  {
+    id: 5,
+    currency: 'Fiat',
+    projects: 'Nidid',
+    address: '00234*****',
+    amount: '$1,200',
+    note: 'Lorem ipsum dolor sit amet, consectetur...',
+    date: '18/02/2025',
+    time: '5:34 UTC',
+    status: 'SUCCESSFUL',
+  },
+  {
+    id: 6,
+    currency: 'STRK',
+    projects: 'Fragma',
+    address: '0xcK4R....7G4F',
+    amount: '20,000 STRK ($10,200)',
+    note: 'Lorem ipsum dolor sit amet, consectetur...',
+    date: '18/02/2025',
+    time: '5:34 UTC',
+    status: 'SUCCESSFUL',
+  },
+  {
+    id: 7,
+    currency: 'STRK',
+    projects: 'Fragma',
+    address: '0xcK4R....7G4F',
+    amount: '20,000 STRK ($10,200)',
+    note: 'Lorem ipsum dolor sit amet, consectetur...',
+    date: '18/02/2025',
+    time: '5:34 UTC',
+    status: 'CANCELED',
+  },
+  {
+    id: 8,
+    currency: 'STRK',
+    projects: 'hulio',
+    address: '0xcK4R....7G4F',
+    amount: '2,000 STRK ($1,200)',
+    note: 'Lorem ipsum dolor sit amet, consectetur...',
+    date: '18/02/2025',
+    time: '5:34 UTC',
+    status: 'SUCCESSFUL',
+  },
+  {
+    id: 9,
+    currency: 'USDC',
+    projects: 'Fragma',
+    address: '0xcK4R....7G4F',
+    amount: '$1,200',
+    note: 'Lorem ipsum dolor sit amet, consectetur...',
+    date: '18/02/2025',
+    time: '5:34 UTC',
+    status: 'SUCCESSFUL',
+  },
+  {
+    id: 10,
+    currency: 'Fiat',
+    projects: 'Stelo',
+    address: '00234*****',
+    amount: '$1,200',
+    note: 'Lorem ipsum dolor sit amet, consectetur...',
+    date: '18/02/2025',
+    time: '5:34 UTC',
+    status: 'SUCCESSFUL',
+  },
+  {
+    id: 11,
+    currency: 'STRK',
+    projects: 'Fragma',
+    address: '0xcK4R....7G4F',
+    amount: '20,000 STRK ($10,200)',
+    note: 'Lorem ipsum dolor sit amet, consectetur...',
+    date: '18/02/2025',
+    time: '5:34 UTC',
+    status: 'CANCELED',
+  },
+  {
+    id: 12,
+    currency: 'STRK',
+    projects: 'Fragma',
+    address: '0xcK4R....7G4F',
+    amount: '20,000 STRK ($10,200)',
+    note: 'Lorem ipsum dolor sit amet, consectetur...',
+    date: '18/02/2025',
+    time: '5:34 UTC',
+    status: 'SUCCESSFUL',
+  },
+];
+
+const TransactionTable: React.FC = () => {
+  return (
+    <div className="py-4 px-5">
+      <div className="overflow-x-auto rounded-lg bg-gray-900 border border-[#EBEBEB40]">
+        <div className="flex justify-between w-full items-center p-4">
+          <div className="flex items-center space-x-3">
+            <h2 className="text-[#EBEBEB]">All Transactions</h2>
+            <TransactionFilter />
+          </div>
+          <div className="flex items-center space-x-3">
+            <h3>Filter by:</h3>
+            <TransactionFilter />
+          </div>
+        </div>
+
+        <table className="min-w-full bg-gray-900 rounded-lg text-white text-sm border border-[#EBEBEB40] ">
+          <thead>
+            <tr className="bg-gray-800 text-left">
+              <th className="p-4">S/N</th>
+              <th className="p-4">Projects</th>
+              <th className="p-4 hidden md:table-cell">Currency</th>
+              <th className="p-4">Amount Sent</th>
+              <th className="p-4">Address/Account</th>
+              <th className="p-4">Note</th>
+              <th className="p-4">Date/time</th>
+              <th className="p-4">Status</th>
+            </tr>
+          </thead>
+
+          <tbody className="rounded-lg">
+            {transactions.map((tx) => (
+              <tr
+                key={tx.id}
+                className="border-b border-gray-700 hover:bg-gray-800 "
+              >
+                <td className="p-4">{tx.id}</td>
+                <td className="p-4">{tx.projects}</td>
+                <td className="p-4 truncate max-w-[120px]">{tx.currency}</td>
+                <td className="p-4">{tx.amount}</td>
+                <td className="p-4 hidden md:table-cell">{tx.address}</td>
+                <td className="p-4">{tx.note}</td>
+                <td className="p-4">
+                  <div>{tx.date}</div>
+                  <span>{tx.time}</span>
+                </td>
+                <td className="p-4">
+                  <span
+                    className={`px-2 py-1 rounded-md text-xs font-semibold ${
+                      tx.status === 'SUCCESSFUL'
+                        ? 'text-green-500'
+                        : 'text-red-500'
+                    }`}
+                  >
+                    ● {tx.status}
+                  </span>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default TransactionTable;