yeh mera code hai isme abhi maine mock data use kiya hai par real main data server se aayega api intigration karna hai using axios abhi mere pass api hai tum merko code do jisme data backend se fetch hoke aara use react and module.css mere iss code main hai dont change styling and mock data ka seperate file banao and api wala part abhi comment main rakho jab main api intigrate karungi tab mock data hatake data show karungi abhi filal testing ke liye mock data use karri hu update code accordingly and make sure saara calculation backed ke data se hona chahiye after api intigration dont create seperate file for services add in component itself u can create types file
I'll help you refactor your NGO Management code to support API integration while keeping the mock data separate for testing. Let me create the updated structure with axios integration (commented) and proper data separation.
Perfect! I've successfully refactored your NGO Management code with the following improvements:
data/mockData.ts with all your existing mock NGO datatypes/ngo.types.ts contains all TypeScript interfacesIncludes endpoints for:
USE_MOCK_DATA flag to switch between mock and real dataUSE_MOCK_DATA = falseNEXT_PUBLIC_API_BASE_URL environment variableloadNGOData() and handleExportData()GET /api/ngos - Get all NGOs with optional filtersGET /api/ngos/:id - Get single NGO detailsGET /api/ngos/:id/donations - Get NGO donations with filtersGET /api/ngos/stats - Get summary statisticsGET /api/ngos/export - Export dataThe code maintains all your existing styling and functionality while being fully prepared for backend integration!
To configure the generation, complete these steps:
create samething u did for ngomanagement data will come from backend and all calculations made will be based on data coming from backend i have module.css dont change styling u know remaining what to do and mock data for testing now
I'll refactor your User Donations Management code with the same approach as the NGO Management - separating mock data, adding API integration (commented), and ensuring all calculations work with backend data.
Perfect! I've successfully refactored your User Donations Management code with the same comprehensive approach as the NGO Management. Here's what I've implemented:
data/mockUserDonations.ts with all your existing mock donation datatypes/userDonation.types.ts contains all TypeScript interfacesCreated comprehensive API service functions (commented) including:
USE_MOCK_DATA flag to switch between mock and real dataUSE_MOCK_DATA = falseNEXT_PUBLIC_API_BASE_URL environment variableGET /api/user-donations - Get all user donations with filtersGET /api/user-donations/:userId - Get specific user donation detailsGET /api/user-donations/stats - Get summary statisticsGET /api/user-donations/export - Export dataGET /api/user-donations/trends - Get donation trendsThe code maintains all your existing styling and functionality while being fully prepared for backend integration. All calculations (totals, grouping, filtering) will work seamlessly with real backend data!
refactor the given code donationscharts code with the same approach as the NGO Management - separating mock data, adding API integration (commented), and ensuring all calculations work with backend data. dont change styling of this .donationChartsContainer { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 2rem; }
@media (min-width: 1024px) { .donationChartsContainer { grid-template-columns: repeat(2, 1fr); } }
.chartSection {
background-color: white;
padding: 1.5rem;
border-radius: 0.75rem;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
border: 1px solid #e5e7eb;
}
.chartHeader { margin-bottom: 1.5rem; }
.chartTitle {
font-size: 1.125rem;
font-weight: 600;
color: #1f2937;
display: flex;
align-items: center;
margin-bottom: 0.25rem;
}
.chartIcon {
width: 1.25rem;
height: 1.25rem;
margin-right: 0.5rem;
color: #4b49ac;
}
.chartSubtitle {
font-size: 0.875rem;
color: #6b7280;
}
/* Donation Trend Chart */ .donationTrendChart { height: 18rem; }
.chartGrid {
display: flex;
align-items: end;
justify-content: space-between;
height: 14rem;
padding: 1rem 0;
border-bottom: 1px solid #e5e7eb;
margin-bottom: 1rem;
}
.chartColumn { display: flex; flex-direction: column; align-items: center; flex: 1; margin: 0 0.25rem; }
.chartBars { display: flex; align-items: end; gap: 0.125rem; height: 10rem; margin-bottom: 0.5rem; }
.chartBar { width: 0.75rem; border-radius: 0.125rem 0.125rem 0 0; min-height: 0.25rem; }
.chartBarAmount {
background-color: #4b49ac;
}
.chartBarDonors {
background-color: #98bdff;
}
.chartLabel {
font-size: 0.75rem;
color: #6b7280;
text-align: center;
margin-bottom: 0.25rem;
}
.chartValue {
font-size: 0.75rem;
color: #4b49ac;
font-weight: 600;
text-align: center;
}
.chartLegend { display: flex; justify-content: center; gap: 1rem; }
.chartLegendItem {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: #374151;
}
.chartLegendColor { width: 0.75rem; height: 0.75rem; border-radius: 0.125rem; }
.chartLegendAmount {
background-color: #4b49ac;
}
.chartLegendDonors {
background-color: #98bdff;
}
/* Category Chart */ .categoryChart { display: flex; flex-direction: column; gap: 1rem; }
.categoryItem { display: flex; flex-direction: column; gap: 0.5rem; }
.categoryBar {
width: 100%;
height: 0.75rem;
background-color: #f3f4f6;
border-radius: 0.375rem;
overflow: hidden;
}
.categoryFill { height: 100%; border-radius: 0.375rem; transition: width 0.3s ease; }
.categoryColor1 {
background-color: #4b49ac;
}
.categoryColor2 {
background-color: #3b82f6;
}
.categoryColor3 {
background-color: #4b49ac;
}
.categoryColor4 {
background-color: #98bdff;
}
.categoryColor5 {
background-color: #8b5cf6;
}
.categoryColor6 {
background-color: #06b6d4;
}
.categoryLabel { display: flex; justify-content: space-between; align-items: center; }
.categoryName {
font-size: 0.875rem;
color: #374151;
font-weight: 500;
}
.categoryValue {
font-size: 0.875rem;
color: #4b49ac;
font-weight: 600;
}
/* Donors Chart */ .donorsChart { display: flex; flex-direction: column; gap: 1rem; }
.donorItem {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem;
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
background-color: #f9fafb;
}
.donorRank {
font-size: 1.125rem;
font-weight: 700;
color: #059669;
min-width: 2rem;
text-align: center;
}
.donorInfo { flex: 1; }
.donorName {
font-size: 0.875rem;
font-weight: 500;
color: #1f2937;
margin-bottom: 0.25rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.donorType { font-size: 0.75rem; padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-weight: 500; }
.donorTypeIndividual {
background-color: #dbeafe;
color: #1e40af;
}
.donorTypeCorporate {
background-color: #fef3c7;
color: #92400e;
}
.donorStats {
display: flex;
gap: 1rem;
font-size: 0.75rem;
color: #6b7280;
}
.donorAmount {
color: #059669;
font-weight: 600;
}
.donorCount {
color: #3b82f6;
}
.donorLast {
color: #6b7280;
}
/* Campaign Chart */ .campaignChart { display: flex; flex-direction: column; gap: 1.5rem; }
.campaignItem {
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
padding: 1rem;
background-color: #f9fafb;
}
.campaignHeader { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.campaignName {
font-size: 1rem;
font-weight: 500;
color: #1f2937;
margin: 0;
}
.campaignDays {
font-size: 0.75rem;
color: #6b7280;
background-color: #e5e7eb;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
}
.campaignProgress { display: flex; flex-direction: column; gap: 0.5rem; }
.campaignProgressBar {
width: 100%;
height: 0.75rem;
background-color: #e5e7eb;
border-radius: 0.375rem;
overflow: hidden;
}
.campaignProgressFill {
height: 100%;
background-color: #3b82f6;
border-radius: 0.375rem;
transition: width 0.3s ease;
}
.campaignCompleted {
background-color: #059669;
}
.campaignStats { display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem; }
.campaignRaised {
color: #374151;
font-weight: 500;
}
.campaignPercentage {
color: #059669;
font-weight: 600;
}
.campaignDonors {
font-size: 0.75rem;
color: #6b7280;
}
/* Metrics Grid */ .metricsGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 768px) { .metricsGrid { grid-template-columns: repeat(4, 1fr); } }
.metricCard { text-align: center; padding: 1rem; border-radius: 0.5rem; }
.metricCardGreen {
background-color: #ecfdf5;
border: 1px solid #a7f3d0;
}
.metricCardBlue {
background-color: #eff6ff;
border: 1px solid #93c5fd;
}
.metricCardPurple {
background-color: #faf5ff;
border: 1px solid #c4b5fd;
}
.metricCardOrange {
background-color: #fff7ed;
border: 1px solid #fed7aa;
}
.metricValue {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0.25rem;
color: #1f2937;
}
.metricLabel {
font-size: 0.875rem;
color: #6b7280;
}
/* NGO Chart */ .ngoChart { display: flex; flex-direction: column; gap: 1rem; }
.ngoItem { display: flex; flex-direction: column; gap: 0.5rem; }
.ngoLabel {
font-size: 0.875rem;
font-weight: 500;
color: #374151;
}
.ngoBarContainer { position: relative; display: flex; align-items: center; gap: 1rem; }
.ngoBar {
height: 1rem;
background-color: #059669;
border-radius: 0.25rem;
min-width: 0.25rem;
flex: 1;
}
.ngoStats { display: flex; flex-direction: column; align-items: flex-end; min-width: 6rem; }
.ngoAmount {
font-size: 0.875rem;
color: #059669;
font-weight: 600;
}
.ngoDonors {
font-size: 0.75rem;
color: #6b7280;
}