Skip to content

chore:Comprehensive Mobile Responsive Design Implementation #117

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
JamesVictor-O wants to merge 1 commit into
base: main
Choose a base branch
from
Open

chore:Comprehensive Mobile Responsive Design Implementation #117

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
270 changes: 139 additions & 131 deletions src/app/dashboard/appeals/pending/components/appealsDocument.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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<ProjectDashboardProps & { setActiveTabOne: (tab: string) => 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 (
<div className="flex scrollbar-hide flex-col bg-[#171720] text-white w-full h-full overflow-y-auto max-h-[calc(100vh-150px)] rounded-md border border-gray-700 my-4 p-3">
<div className="flex justify-between items-center mb-8">
<Image
src="/ArrowLeft.svg"
alt="Arrow left"
width={20}
height={20}
className="z-10 cursor-pointer"
onClick={() => setActiveTabOne('appeal')} // Fix: Switch back to appeal tab
/>
<h1 className="text-lg text-center font-medium">{projectName} Dao</h1>
<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>
return (
<div className="flex flex-col bg-[#171720] text-white w-full min-w-[300px] max-w-full rounded-md border border-gray-700 my-4 sm:my-6 p-4 sm:p-6 overflow-y-auto">
<div className="flex flex-col sm:flex-row justify-between items-center mb-6 sm:mb-8 gap-3 sm:gap-4">
<Image
src="/ArrowLeft.svg"
alt="Back to appeals"
width={20}
height={20}
className="h-5 sm:h-6 w-5 sm:w-6 cursor-pointer"
onClick={() => setActiveTabOne('appeal')}
/>
<h1 className="text-base sm:text-lg font-medium text-center truncate">{projectName} Dao</h1>
<button
onClick={handleDownload}
className="flex items-center text-xs sm:text-sm gap-1 sm:gap-2 border border-gray-500 rounded-md px-3 sm:px-4 py-2 sm:py-3 text-gray-300"
aria-label="Download records"
>
<Download className="h-4 sm:h-5 w-4 sm:w-5" />
<span>Download Records</span>
</button>
</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={200}
endAngle={0}
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">
{projectDetails.map((detail, index) => (
<div key={index}>
<span className="text-gray-400 mr-3">{detail.label}:</span>
<span>{detail.value}</span>
</div>
<div className="flex justify-center mb-6 sm:mb-8 relative">
<div className="w-full max-w-[240px] sm:max-w-[300px] aspect-square">
<ResponsiveContainer width="100%" height="100%">
<PieChart>
<Pie
data={pieData}
cx="50%"
cy="50%"
innerRadius="60%"
outerRadius="80%"
paddingAngle={0}
dataKey="value"
startAngle={200}
endAngle={0}
cornerRadius={25}
stroke="none"
>
{pieData.map((entry, index) => (
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
))}
</div>
</Pie>
</PieChart>
</ResponsiveContainer>
<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-xl sm:text-2xl lg:text-3xl font-bold">{completionPercentage}%</span>
<span className="text-xs sm:text-sm text-gray-400">Completed</span>
</div>
</div>
</div>

<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 mb-6 sm:mb-8">
{projectDetails.map((detail, index) => (
<div key={index} className="flex flex-col">
<span className="text-xs sm:text-sm text-gray-400">{detail.label}</span>
<span className="text-sm sm:text-base text-wrap max-w-[90%]">{detail.value}</span>
</div>
))}
</div>

<div className="space-y-4">
<h2 className="text-gray-400 mr-3">Uploaded Documents:</h2>
<div className="flex flex-wrap ml-48 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 className="space-y-4 sm:space-y-6">
<h2 className="text-base sm:text-lg text-gray-400">Uploaded Documents</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
{documents && documents.length > 0 ? (
documents.map((doc) => (
<div key={doc.id} className="w-full max-w-[120px] sm:max-w-[150px] flex flex-col items-center">
<Image
src={doc.imageUrl ? doc.imageUrl : Cert.src}
alt={doc.title}
width={120}
height={120}
className="w-full h-auto aspect-square object-contain rounded-md"
/>
<p className="text-xs sm:text-sm text-wrap truncate mt-2">{doc.title}</p>
</div>
))
) : (
<p className="text-xs sm:text-sm text-gray-400">No documents available</p>
)}
</div>
);
</div>
</div>
);
};

export default ProjectDashboard;
export default ProjectDashboard;
9 changes: 6 additions & 3 deletions src/app/dashboard/appeals/pending/components/document.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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<SetActiveTabProps> = ({ setActiveTabOne }) => {
Expand Down Expand Up @@ -31,6 +34,6 @@ const PendingDocument: React.FC<SetActiveTabProps> = ({ setActiveTabOne }) => {
};

return <ProjectDashboard {...projectData} setActiveTabOne={setActiveTabOne} />;
}
};

export default PendingDocument;
34 changes: 17 additions & 17 deletions src/app/dashboard/appeals/pending/components/pendingTabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
'use client';

import { useState } from 'react';
import PendingDocument from './document';
import AppealsAppeal from './appealsAppeal';
Expand All @@ -6,39 +8,37 @@ export default function PendingAppeals() {
const [activeTab, setActiveTab] = useState('appeal');

return (
<div className=" text-white scrollbar-hide bg-transparent max-w-6xl mx-auto px-4 py-4">
<div className="flex border-b border-gray-700 w-fit">
<div className="text-white bg-transparent max-w-7xl mx-auto p-4 sm:p-6 min-w-[300px] max-w-full">
<div className="flex border-b border-gray-700 overflow-x-auto">
<button
className={`flex items-center gap-2 px-6 py-2 text-sm ${
activeTab === 'appeal'
? 'border-b-2 border-purple-500'
: 'text-gray-400'
className={`flex items-center gap-2 px-4 sm:px-6 py-2 sm:py-3 text-xs sm:text-sm min-w-[100px] ${
activeTab === 'appeal' ? 'border-b-2 border-purple-500' : 'text-gray-400'
}`}
onClick={() => setActiveTab('appeal')}
role="tab"
aria-selected={activeTab === 'appeal'}
>
Appeal{' '}

Appeal
</button>
<button
className={`px-4 py-2 text-sm ${
activeTab === 'document'
? 'border-b-2 border-purple-500'
: 'text-gray-400'
className={`px-4 sm:px-6 py-2 sm:py-3 text-xs sm:text-sm min-w-[100px] ${
activeTab === 'document' ? 'border-b-2 border-purple-500' : 'text-gray-400'
}`}
onClick={() => setActiveTab('document')}
role="tab"
aria-selected={activeTab === 'document'}
>
Document
</button>
</div>

{activeTab === 'appeal' && (
<div className="my-4">
<AppealsAppeal />

<div className="my-4 sm:my-6">
<AppealsAppeal />
</div>
)}

{activeTab == 'document' && <PendingDocument setActiveTabOne={setActiveTab} /> }
{activeTab === 'document' && <PendingDocument setActiveTabOne={setActiveTab} />}
</div>
);
}
}
Loading