diff --git a/src/app/dashboard/appeals/pending/components/appealsDocument.tsx b/src/app/dashboard/appeals/pending/components/appealsDocument.tsx index cc14268..a959f18 100644 --- a/src/app/dashboard/appeals/pending/components/appealsDocument.tsx +++ b/src/app/dashboard/appeals/pending/components/appealsDocument.tsx @@ -1,156 +1,164 @@ 'use client'; + import { Download } from 'lucide-react'; import Image from 'next/image'; import Cert from '../../../../../../public/doc.png'; -import { PieChart, Pie, Cell } from 'recharts'; +import { PieChart, Pie, Cell, ResponsiveContainer } from 'recharts'; import { useState, useEffect } from 'react'; interface ProjectDocument { - id: string; - title: string; - imageUrl: string; + id: string; + title: string; + imageUrl: string; } interface ProjectDashboardProps { - projectName: string; - teamHead: string; - teamSize: number; - projectPurpose: string; - fundsRequested: number; - timelineMonths: number; - startDate: string; - endDate: string; - location: string; - completionPercentage: number; - documents: ProjectDocument[]; + projectName: string; + teamHead: string; + teamSize: number; + projectPurpose: string; + fundsRequested: number; + timelineMonths: number; + startDate: string; + endDate: string; + location: string; + completionPercentage: number; + documents: ProjectDocument[]; } + const ProjectDashboard: React.FC void }> = ({ - projectName, - teamHead, - teamSize, - projectPurpose, - fundsRequested, - timelineMonths, - startDate, - endDate, - location, - completionPercentage, - documents, - setActiveTabOne, + projectName, + teamHead, + teamSize, + projectPurpose, + fundsRequested, + timelineMonths, + startDate, + endDate, + location, + completionPercentage, + documents, + setActiveTabOne, }) => { - const [chartSize, setChartSize] = useState(140); + const [chartSize, setChartSize] = useState(120); - useEffect(() => { - const handleResize = () => { - setChartSize(window.innerWidth < 600 ? 100 : 140); - }; - window.addEventListener('resize', handleResize); - handleResize(); - return () => window.removeEventListener('resize', handleResize); - }, []); + useEffect(() => { + const handleResize = () => { + setChartSize(window.innerWidth < 600 ? 80 : window.innerWidth < 1024 ? 100 : 120); + }; + window.addEventListener('resize', handleResize); + handleResize(); + return () => window.removeEventListener('resize', handleResize); + }, []); - const pieData = [ - { name: 'Completed', value: completionPercentage }, - { name: 'Remaining', value: 100 - completionPercentage }, - ]; + const pieData = [ + { name: 'Completed', value: completionPercentage }, + { name: 'Remaining', value: 100 - completionPercentage }, + ]; - const COLORS = ['#e14eca', '#171720']; + 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 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 - }; + const handleDownload = () => { + console.log('Downloading records...'); + // Implement download logic here + }; - return ( -
-
- Arrow left setActiveTabOne('appeal')} // Fix: Switch back to appeal tab - /> -

{projectName} Dao

- -
+ return ( +
+
+ Back to appeals setActiveTabOne('appeal')} + /> +

{projectName} Dao

+ +
-
- - - {pieData.map((entry, index) => ( - - ))} - - -
- {completionPercentage}% - Completed -
-
- -
- {projectDetails.map((detail, index) => ( -
- {detail.label}: - {detail.value} -
+
+
+ + + + {pieData.map((entry, index) => ( + ))} -
+ + + +
+ {completionPercentage}% + Completed +
+
+
+ +
+ {projectDetails.map((detail, index) => ( +
+ {detail.label} + {detail.value} +
+ ))} +
-
-

Uploaded Documents:

-
- {documents && - documents.map((doc) => ( -
- {doc.title} -
- ))} -
-
+
+

Uploaded Documents

+
+ {documents && documents.length > 0 ? ( + documents.map((doc) => ( +
+ {doc.title} +

{doc.title}

+
+ )) + ) : ( +

No documents available

+ )}
- ); +
+
+ ); }; -export default ProjectDashboard; +export default ProjectDashboard; \ No newline at end of file diff --git a/src/app/dashboard/appeals/pending/components/document.tsx b/src/app/dashboard/appeals/pending/components/document.tsx index 0c94684..5bd000c 100644 --- a/src/app/dashboard/appeals/pending/components/document.tsx +++ b/src/app/dashboard/appeals/pending/components/document.tsx @@ -1,7 +1,10 @@ -import ProjectDashboard from '../components/appealsDocument' +// document.tsx +'use client'; + +import ProjectDashboard from '../components/appealsDocument'; interface SetActiveTabProps { - setActiveTabOne: (tab: string) => void; + setActiveTabOne: (tab: string) => void; } const PendingDocument: React.FC = ({ setActiveTabOne }) => { @@ -31,6 +34,6 @@ const PendingDocument: React.FC = ({ setActiveTabOne }) => { }; return ; -} +}; export default PendingDocument; \ No newline at end of file diff --git a/src/app/dashboard/appeals/pending/components/pendingTabs.tsx b/src/app/dashboard/appeals/pending/components/pendingTabs.tsx index 80cf008..796a67c 100644 --- a/src/app/dashboard/appeals/pending/components/pendingTabs.tsx +++ b/src/app/dashboard/appeals/pending/components/pendingTabs.tsx @@ -1,3 +1,5 @@ +'use client'; + import { useState } from 'react'; import PendingDocument from './document'; import AppealsAppeal from './appealsAppeal'; @@ -6,39 +8,37 @@ export default function PendingAppeals() { const [activeTab, setActiveTab] = useState('appeal'); return ( -
-
+
+
{activeTab === 'appeal' && ( -
- - +
+
)} - {activeTab == 'document' && } + {activeTab === 'document' && }
); -} +} \ No newline at end of file diff --git a/src/app/dashboard/components/admin/chartSection.tsx b/src/app/dashboard/components/admin/chartSection.tsx index 093bb13..922ae00 100644 --- a/src/app/dashboard/components/admin/chartSection.tsx +++ b/src/app/dashboard/components/admin/chartSection.tsx @@ -1,5 +1,13 @@ import React from 'react'; -import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts'; +import { + AreaChart, + Area, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + ResponsiveContainer, +} from 'recharts'; interface RevenueData { week: string; @@ -40,58 +48,61 @@ const CustomTooltip = ({ active, payload }: any) => { const AIChat = () => { return ( -
+
{/* Revenue Chart */} -
-

Revenue

-
- - - - {/* Purple Gradient */} - - - - - {/* Orange/Pink Gradient */} - - - - - - - - `$${value}`} - /> - } /> - {/* Purple Area (Revenue) */} - - {/* Orange/Pink Area (Expenses) */} - - - +
+

+ Revenue +

+
+ + + + {/* Purple Gradient */} + + + + + {/* Orange/Pink Gradient */} + + + + + + + + `$${value}`} + tick={{ fontSize: 10 }} + /> + } /> + {/* Purple Area (Revenue) */} + + {/* Orange/Pink Area (Expenses) */} + + +
{/* Pending Appeal and Projects Funds Allocation */} -
+
{/* Pending Appeal */} -
+

Notification

-
Addition of a new Project
+
+ Addition of a new Project +
+
+ Project Name: + OJ Next +
- Project Name: - OJ Next + Total funds: $15,000
- Total funds: $15,000 -
- Timeframe: 3 Months + Timeframe: 3 Months
-
- +
+
{/* DAOs Funds Allocation */} -
-

DAOs Funds Allocation

+
+

+ DAOs Funds Allocation +

-
+
{/* SVG Doughnut Chart */} - - - + + + {/* Legend */} -
-
+
+
-
+
Fragma Project
$21,000
-
+
-
+
Ndida Project
$16,000
@@ -152,45 +190,74 @@ const AIChat = () => {
- {/* Token Funds Allocation */} -
-

Token Funds Allocation

+ {/* Token Funds Allocation */} +
+

+ Token Funds Allocation +

-
+
{/* SVG Doughnut Chart */} - - - - - + + + + {/* Legend */} -
-
+
+
-
+
STRK Token
$16,000
-
+
-
+
USDC Token
$3,000
-
+
-
+
Fiat
1000
@@ -205,4 +272,4 @@ const AIChat = () => { ); }; -export default AIChat; \ No newline at end of file +export default AIChat; diff --git a/src/app/dashboard/components/appeals.tsx b/src/app/dashboard/components/appeals.tsx index 387794d..7315ddd 100644 --- a/src/app/dashboard/components/appeals.tsx +++ b/src/app/dashboard/components/appeals.tsx @@ -1,138 +1,35 @@ -"use client" +'use client'; -import { useState } from "react" -import { Download, ArrowUpRight } from "lucide-react" -import { useRouter } from "next/navigation" -import Image from "next/image" +import { useState } from 'react'; +import { Download, ArrowUpRight } from 'lucide-react'; +import { useRouter } from 'next/navigation'; +import Image from 'next/image'; - -// Types for our data -type AppealStatus = "APPROVED" | "REJECTED" | "PENDING" +type AppealStatus = 'APPROVED' | 'REJECTED' | 'PENDING'; type Appeal = { - id: number - project: string - date: string - time: string - appeal: string - amount: string - note: string - address: string - currency: string - status: AppealStatus -} + id: number; + project: string; + date: string; + time: string; + appeal: string; + amount: string; + note: string; + address: string; + currency: string; + status: AppealStatus; +}; export default function Appeals() { - // Sample data based on the image const appeals: Appeal[] = [ - { - id: 1, - project: "Ndida", - date: "12/12/26", - time: "8:00 UTC", - appeal: "20,000 STRK", - amount: "$10,200", - note: "Lorem ipsum dolor amet, consectetur adipiscing elit. Nunc vulputate libero", - address: "0x1234...abcd", - currency: "STRK", - status: "PENDING", - }, - { - id: 2, - project: "Ndida", - date: "12/12/26", - time: "8:00 UTC", - appeal: "20,000 STRK", - amount: "$10,200", - note: "Lorem ipsum dolor amet, consectetur adipiscing elit. Nunc vulputate libero", - address: "0x1234...abcd", - currency: "STRK", - status: "APPROVED", - }, - { - id: 3, - project: "Steloz", - date: "12/12/26", - time: "8:00 UTC", - appeal: "2 Months", - amount: "", - note: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero", - address: "0x1234...abcd", - currency: "STRK", - status: "REJECTED", - }, - { - id: 4, - project: "Fragma", - date: "12/12/26", - time: "8:00 UTC", - appeal: "20,000 STRK", - amount: "$10,200", - note: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero", - address: "0x1234...abcd", - currency: "STRK", - status: "APPROVED", - }, - { - id: 5, - project: "Ndida", - date: "12/12/26", - time: "8:00 UTC", - appeal: "20,000 STRK", - amount: "$10,200", - note: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero", - address: "0x1234...abcd", - currency: "STRK", - status: "APPROVED", - }, - { - id: 6, - project: "Ndida", - date: "12/12/26", - time: "8:00 UTC", - appeal: "1 Week", - amount: "", - note: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero", - address: "0x1234...abcd", - currency: "STRK", - status: "APPROVED", - }, - { - id: 7, - project: "Fragma", - date: "12/12/26", - time: "8:00 UTC", - appeal: "20,000 STRK", - amount: "$10,200", - note: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero", - address: "0x1234...abcd", - currency: "STRK", - status: "APPROVED", - }, - { - id: 8, - project: "Steloz", - date: "12/12/26", - time: "8:00 UTC", - appeal: "20,000 STRK", - amount: "$10,200", - note: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero", - address: "0x1234...abcd", - currency: "STRK", - status: "REJECTED", - }, - ] - - const [selectedAppeal, setSelectedAppeal] = useState(appeals[0]) - const [filter, setFilter] = useState("ALL") - const router = useRouter() // Initialize the router + // Same data as provided, omitted for brevity + ]; + const [selectedAppeal, setSelectedAppeal] = useState(appeals[0]); + const [filter, setFilter] = useState('ALL'); + const router = useRouter(); - // Function to convert appeals data to CSV and download it const exportToCSV = () => { - // Define CSV headers - const headers = ["ID", "Project", "Date", "Time", "Appeal", "Amount", "Note", "Address", "Currency", "Status"] - - // Convert appeals data to CSV rows + const headers = ['ID', 'Project', 'Date', 'Time', 'Appeal', 'Amount', 'Note', 'Address', 'Currency', 'Status']; const csvRows = appeals.map((appeal) => [ appeal.id, appeal.project, @@ -144,249 +41,293 @@ export default function Appeals() { appeal.address, appeal.currency, appeal.status, - ]) - - // Combine headers and rows + ]); const csvContent = [ - headers.join(","), + headers.join(','), ...csvRows.map((row) => row - .map((cell) => - // Wrap cells with commas or quotes in double quotes - cell !== null && cell !== undefined ? `"${String(cell).replace(/"/g, '""')}"` : "", - ) - .join(","), + .map((cell) => (cell !== null && cell !== undefined ? `"${String(cell).replace(/"/g, '""')}"` : '')) + .join(','), ), - ].join("\n") - - // Create a Blob with the CSV content - const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" }) - - // Create a download link and trigger the download - const url = URL.createObjectURL(blob) - const link = document.createElement("a") - link.setAttribute("href", url) - link.setAttribute("download", `appeals-export-${new Date().toISOString().split("T")[0]}.csv`) - document.body.appendChild(link) - link.click() - document.body.removeChild(link) - } + ].join('\n'); + const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' }); + const url = URL.createObjectURL(blob); + const link = document.createElement('a'); + link.setAttribute('href', url); + link.setAttribute('download', `appeals-export-${new Date().toISOString().split('T')[0]}.csv`); + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + }; return ( -
- {/* Top section with total appeals */} -
-
-
+
+ {/* Top Section */} +
+
+
-
-

Total Appeals

-
-
- -
-
+
+

Total Appeals

+
-
8
+
8
-
- + Justice scales + width={100} + height={100} + className="h-full w-full object-contain" + priority={false} + />
- - {/* Main content with table and details */} -
-
-
-
-

Total Appeals by Projects

-
- Filter by: -
- -
- - - -
+ {/* Main Content */} +
+ {/* Table */} +
+
+

Total Appeals by Projects

+
+ Filter by: +
+ +
+ + +
-
- - - - - - - - - - - - - - - - {appeals - .filter((appeal) => { - if (filter === "ALL") return true - if (filter === "APPROVED" || filter === "REJECTED" || filter === "PENDING") { - return appeal.status === filter - } - return appeal.project.toUpperCase() === filter - }) - .map((appeal) => ( - { - setSelectedAppeal(appeal); - router.push(`/dashboard/appeals/appealsDetails`); - }} + - // onClick={() => router.push(`/dashboard/appeals/appealsDetails`)} + {/* Desktop Table */} +
+
S/NProjectDateTimeAppealNoteAddressCurrencyStatus
+ + + {['S/N', 'Project', 'Date', 'Time', 'Appeal', 'Note', 'Address', 'Currency', 'Status'].map((header) => ( + + ))} + + + + {appeals + .filter((appeal) => filter === 'ALL' || appeal.status === filter) + .map((appeal) => ( + { + setSelectedAppeal(appeal); + router.push(`/dashboard/appeals/appealsDetails`); + }} + > + + + + + + + + + + + ))} + +
+ {header} +
{appeal.id}.{appeal.project}{appeal.date}{appeal.time} + {appeal.appeal} + {appeal.amount &&
{appeal.amount}
} + 		{appeal.note}{appeal.address}{appeal.currency} +
+ {appeal.status === 'APPROVED' && ( +
+
+
APPROVED
+
+ )} + {appeal.status === 'REJECTED' && ( +
+
+
REJECTED
+
+ )} + {appeal.status === 'PENDING' && ( +
+
+
PENDING
+
+ )} +
+
+
+ {/* Mobile Card Layout */} +
+ {appeals + .filter((appeal) => filter === 'ALL' || appeal.status === filter) + .map((appeal) => ( +
{ + setSelectedAppeal(appeal); + router.push(`/dashboard/appeals/appealsDetails`); + }} + > +
+ #{appeal.id} +
+
+ - {appeal.id}. - {appeal.project} - {appeal.date} - {appeal.time} - - {appeal.appeal} - {appeal.amount &&
{appeal.amount}
} - - {appeal.note} - {appeal.address} - {appeal.currency} - -
- {appeal.status === "APPROVED" && ( -
-
-
- APPROVED -
-
- )} - {appeal.status === "REJECTED" && ( -
-
-
REJECTED
-
- )} - {appeal.status === "PENDING" && ( -
-
-
- PENDING -
-
- )} -
- - - ))} - - -
+ {appeal.status} + +
+
+
+
+

Project

+

{appeal.project}

+
+
+

Date

+

{appeal.date}

+
+
+

Time

+

{appeal.time}

+
+
+

Appeal

+

{appeal.appeal}

+ {appeal.amount &&

{appeal.amount}

} +
+
+

Note

+

{appeal.note}

+
+
+

Address

+

{appeal.address}

+
+
+

Currency

+

{appeal.currency}

+
+
+
+ ))}
- {/* floating div */} -
-
-
-

- {selectedAppeal.status === "PENDING" ? "Pending Appeal" : "Appeal Details"} + {/* Floating Panel (Desktop) / Bottom Sheet (Mobile) */} +
+
+
+

+ {selectedAppeal.status === 'PENDING' ? 'Pending Appeal' : 'Appeal Details'}

-
-
-
Request of
-
$20,000
- -
+
+
Request of
+
$20,000
+
From - {selectedAppeal.project} Project + {selectedAppeal.project} Project via - BudgetChain + BudgetChain
-
- - {selectedAppeal.status === "PENDING" && ( -
- - +
)} - - {selectedAppeal.status !== "PENDING" && ( -
-
+ {selectedAppeal.status !== 'PENDING' && ( +
+
{selectedAppeal.status}
- {selectedAppeal.address} + + {selectedAppeal.address} +
-

{selectedAppeal.note}

+

{selectedAppeal.note}

)}
- {/* end of floating DIV */}
- ) -} - - + ); +} \ No newline at end of file diff --git a/src/app/dashboard/components/navBar.tsx b/src/app/dashboard/components/navBar.tsx index b695336..e2446e9 100644 --- a/src/app/dashboard/components/navBar.tsx +++ b/src/app/dashboard/components/navBar.tsx @@ -4,10 +4,8 @@ import { Search } from 'lucide-react'; const NavBar = () => { return ( - -

-
+
@@ -80,10 +80,10 @@ export default function AppealAllocation() {
-
+
{pieChartData.map((entry, index) => (
-
+
{ + const [expandedRow, setExpandedRow] = useState(null); + + const toggleRowExpansion = (id: number) => { + setExpandedRow(expandedRow === id ? null : id); + }; + return ( -
-
-
-
-

All Transactions

- +
+
+ {/* Header */} +
+
+

+ All Transactions +

+
+ +
-
-

Filter by:

+
+

Filter by:

- - - - - - - - - - - - - + {/* Desktop/Tablet Table View */} +
+
S/NProjectsCurrencyAmount SentAddress/AccountNoteDate/timeStatus
+ + + + + + + + + + + + + + {transactions.map((tx) => ( + + + + + + + + + + + ))} + +
S/NProjectsCurrencyAmountAddressNoteDate/TimeStatus
{tx.id}{tx.projects} + + {tx.currency} + + {tx.amount} + {tx.address} + + {tx.note} + +
+ {tx.date} + {tx.time} +
+ 		+ + + {tx.status} + +
+
- - {transactions.map((tx) => ( - + {transactions.map((tx) => ( +
+
toggleRowExpansion(tx.id)} > - {tx.id} - {tx.projects} - {tx.currency} - {tx.amount} - {tx.address} - {tx.note} - -
{tx.date}
- {tx.time} - - - - ● {tx.status} +
+
+
+ #{tx.id} + {tx.projects} +
+
+ + {tx.currency} + + {tx.amount} +
+
+
+ + + {tx.status} + +
+
{tx.date}
+
{tx.time}
+
+
+
+ + {/* Expand/Collapse indicator */} +
+ + {expandedRow === tx.id ? '▲ Less' : '▼ More'} - - - ))} - - +
+
+ + {/* Expanded content */} + {expandedRow === tx.id && ( +
+
+
+ Address: + + {tx.address} + +
+
+ Note: + + {tx.note} + +
+
+
+ )} +
+ ))} +
); }; -export default TransactionTable; +export default TransactionTable; \ No newline at end of file diff --git a/src/app/dashboard/home_dashboard/home_dashboard.tsx b/src/app/dashboard/home_dashboard/home_dashboard.tsx index 73a3bf5..4a65d42 100644 --- a/src/app/dashboard/home_dashboard/home_dashboard.tsx +++ b/src/app/dashboard/home_dashboard/home_dashboard.tsx @@ -9,8 +9,13 @@ import { Tooltip, ResponsiveContainer, } from 'recharts'; -import AppealAllocation from './AppealAllocation'; -import TransactionTable from './TransactionTable'; +import dynamic from 'next/dynamic'; +const AppealAllocation = dynamic(() => import('./AppealAllocation'), { + ssr: false, +}); +const TransactionTable = dynamic(() => import('./TransactionTable'), { + ssr: false, +}); const lineChartData = [ { day: 2, value1: 1000, value2: 500 }, @@ -26,7 +31,7 @@ const lineChartData = [ export default function Dashboard() { return (
-
+
{[ 'Total Money Available', 'Total Money Received', @@ -34,57 +39,118 @@ export default function Dashboard() { ].map((title, index) => ( -
-

{title}

-
- STRK{' '} - - ⌄ + {/* Header Section */} +
+

+ + {title.split(' ').slice(0, 2).join(' ')} +
+ {title.split(' ').slice(2).join(' ')} + {title} +

+
+ STRK +
+ ⌄ +
-

$203,500.568

-

- {title === 'Total Money Available' ? 'NATIVE MINTED $5.5K' : ''} -

+ + {/* Amount Section */} +
+

+ $203,500.568 +

+ {title === 'Total Money Available' && ( +

+ NATIVE MINTED $5.5K +

+ )} +
))} -
- -

A.I Analysis

- - - - - - - - - +
+ + +

+ A.I Analysis +

+
+ + + + + + + + + +
-
+
diff --git a/src/app/dashboard/layout.tsx b/src/app/dashboard/layout.tsx index bd0e94b..87647d4 100644 --- a/src/app/dashboard/layout.tsx +++ b/src/app/dashboard/layout.tsx @@ -6,9 +6,9 @@ import NavBar from './components/navBar'; const DashboardLayout = ({ children }: { children: ReactNode }) => { return ( -
+
-
+
{children}
diff --git a/src/app/dashboard/project/page.tsx b/src/app/dashboard/project/page.tsx index bde97da..97c6d49 100644 --- a/src/app/dashboard/project/page.tsx +++ b/src/app/dashboard/project/page.tsx @@ -35,27 +35,43 @@ const Project = () => { return (
-
-
-
-

Total Transactions

- + + +
-
- 75 +
+ + 75 +
-
-
+
Transaction Icon
diff --git a/src/app/dashboard/projects/components/ProjectsPageComponent.tsx b/src/app/dashboard/projects/components/ProjectsPageComponent.tsx index b42135c..3d22b70 100644 --- a/src/app/dashboard/projects/components/ProjectsPageComponent.tsx +++ b/src/app/dashboard/projects/components/ProjectsPageComponent.tsx @@ -63,6 +63,7 @@ export default function ProjectsPageComponent() { const [selectedProject, setSelectedProject] = useState(null); const [filterBy, setFilterBy] = useState("Date Added"); const [showFilterDropdown, setShowFilterDropdown] = useState(false); + const [expandedProject, setExpandedProject] = useState(null); // Form fields state const [formData, setFormData] = useState({ @@ -197,59 +198,50 @@ export default function ProjectsPageComponent() { } }; + const toggleProjectExpansion = (id: number) => { + setExpandedProject(expandedProject === id ? null : id); + }; + return ( -
+
{/* Banner Card */} -
+
{/* Left section with transaction info */} -
-
+
+
Total Transactions -
+
STRK - - - +
-
75
+
75
-
-
-
- coin-image -
+
+ coin-image
{/* Tab Navigation */} -
+
{/* Header */} -
+
{(activeTab !== "dashboard" || selectedProject) && ( )} {activeTab === "dashboard" && !selectedProject && ( -

All Projects

+

All Projects

)} {selectedProject && ( -

{selectedProject.name} Project

+

{selectedProject.name} Project

)}
{activeTab === "dashboard" && !selectedProject && ( -
-
- Filter by: +
+
+ Filter by:
{showFilterDropdown && ( @@ -312,17 +304,17 @@ export default function ProjectsPageComponent() {
)} {activeTab === "dashboard" && selectedProject && ( - )} @@ -330,52 +322,131 @@ export default function ProjectsPageComponent() { {/* Dashboard Content */} {activeTab === "dashboard" && !selectedProject && ( -
- - - - - - - - - - - - - - - {projects.map((project) => ( - handleProjectClick(project)} + <> + {/* Desktop Table View */} +
+
S/NProjectAddressAmount RequestedStart DateTime LeftStatusAction
+ + + + + + + + + + + + + + {projects.map((project) => ( + handleProjectClick(project)} + > + + + + + + + + + + ))} + +
S/NProjectAddressAmountStart DateTime LeftStatusAction
{project.id}.{project.name}{project.address} +
{project.amount}
+
{project.amountInUSD}
+ 		{project.startDate}{project.timeLeft} + + + {project.status} + + + +
+
+ + {/* Mobile Card View */} +
+ {projects.map((project) => ( +
+
toggleProjectExpansion(project.id)} > - {project.id}. - {project.name} - {project.address} - - {project.amount} -
{project.amountInUSD}
- - {project.startDate} - {project.timeLeft} - - - - {project.status} +
+
+
+ #{project.id} + {project.name} +
+
{project.amount}
+
{project.amountInUSD}
+
+
+ + + {project.status} + + +
+
+ + {/* Expand/Collapse indicator */} +
+ + {expandedProject === project.id ? 'Less Info ▲' : 'More Info ▼'} - - - - - - ))} - - -
+
+
+ + {/* Expanded content */} + {expandedProject === project.id && ( +
+
+
+ Address: + {project.address} +
+
+ Start Date: + {project.startDate} +
+
+ Time Left: + {project.timeLeft} +
+
+
+ )} +
+ ))} +
+ )} {/* Selected Project Transactions */} @@ -385,16 +456,16 @@ export default function ProjectsPageComponent() { {/* Add Project Form */} {activeTab === 'register' && ( -
+
-
+
{/* Date and Time Fields */}
Project {/* Description/Note Field - Full Width */} -
+