CSR-Finder

Develop Alembic migrations for the initial database schema setup.

Develop JWT-based authentication for the API, ensuring secure access for Business and NGO users.

As a frontend developer, implement the LandingHero section for the Landing page using React. This section features animated SVG paths and icons from lucide-react, with persistent anchor nodes and traveling shapes that animate across the screen. It uses motion/react for animations and includes parallax effects for background layers. Ensure the animations are smooth and responsive. Page access: shared by all personas (Business User, NGO User).

As a frontend developer, implement the LandingValueProp section for the Landing page using React. This section highlights the platform's value propositions for businesses and NGOs, using motion/react for staggered animations of content cards. It includes interactive elements that animate on scroll into view. Page access: shared by all personas (Business User, NGO User).

As a frontend developer, implement the NetworkScene section for the Landing page using React and @react-three/fiber. This section features a 3D scene with animated nodes representing businesses and NGOs, using gsap for animations. Ensure the 3D elements are interactive and responsive. Page access: shared by all personas (Business User, NGO User).

As a frontend developer, implement the NetworkNodes section for the Landing page using React and @react-three/fiber. This section displays nodes distributed on a sphere using the Fibonacci sphere algorithm, with nodes representing businesses and NGOs. Ensure the nodes are interactive and animations are smooth. Page access: shared by all personas (Business User, NGO User).

As a frontend developer, implement the NetworkConnections section for the Landing page using React and @react-three/fiber. This section visualizes connections between businesses and NGOs with animated lines that change color based on status. Use gsap for animations and ensure the connections are interactive. Page access: shared by all personas (Business User, NGO User).

As a frontend developer, implement the NodeInteractionHandler section for the Landing page using React. This section allows users to interact with nodes representing entities, displaying detailed information on hover. Use gsap for animations and ensure the interactions are smooth and responsive. Page access: shared by all personas (Business User, NGO User).

As a frontend developer, implement the LandingFeatures section for the Landing page using React. This section showcases the platform's features with animated cards using motion/react. Ensure the animations are smooth and the section is responsive. Page access: shared by all personas (Business User, NGO User).

As a frontend developer, implement the LandingPricing section for the Landing page using React. This section displays subscription tiers with interactive pricing toggles for monthly and annual billing. Use motion/react for animations and ensure the section is responsive. Page access: shared by all personas (Business User, NGO User).

As a frontend developer, implement the LandingCTA section for the Landing page using React. This section includes a call-to-action for users to start their CSR journey, with interactive email subscription input and animations using motion/react. Ensure the section is responsive and the animations are smooth. Page access: shared by all personas (Business User, NGO User).

As a frontend developer, implement the LoginForm section which includes email and password fields with validation, error handling, and a submit button. The form uses state hooks for managing input values and errors, and includes a password visibility toggle. The form should display error messages for invalid inputs and a general error message if login fails. This section is accessible by both Business User and NGO User personas. Page access: shared by all personas (Business User, NGO User).

As a frontend developer, implement the SignupHero section using the provided JSX. This section includes a Users icon from 'lucide-react', a heading, and subheadings that describe the purpose of CSR-Finder. Ensure the section is styled according to 'SignupHero.css'. This section is accessible by both Business and NGO users. It depends on the Navbar from the Landing page. Page access: shared by all personas (Business User, NGO User).

Create API endpoints for CSR opportunity matching, accessible by Business users.

Create API endpoints for accessing the grant database, available to all users.

Create API endpoints for generating CSR project proposals, accessible by Business users.

Create API endpoints for CSR impact reporting, accessible by all users.

Develop role-based access control middleware to enforce page and API access restrictions based on user roles.

As a frontend developer, implement the SignupFormPanel section using the provided JSX. This section includes form fields for user type selection, email, password, and confirm password with validation logic. It uses state hooks for managing form data and errors. Ensure the form is styled according to 'SignupFormPanel.css'. This section is accessible by both Business and NGO users. Page access: shared by all personas (Business User, NGO User).

As a frontend developer, implement the SignupSocialAuth section using the provided JSX. This section includes buttons for Google and Microsoft social authentication, with SVG icons and click handlers for initiating OAuth redirects. Ensure the section is styled according to 'SignupSocialAuth.css'. This section is accessible by both Business and NGO users. Page access: shared by all personas (Business User, NGO User).

As a frontend developer, implement the SignupTrust section using the provided JSX. This section highlights the security features of CSR-Finder with icons and text describing GDPR compliance, SSL encryption, and secure servers. Ensure the section is styled according to 'SignupTrust.css'. This section is accessible by both Business and NGO users. Page access: shared by all personas (Business User, NGO User).

As a frontend developer, implement the DashboardWelcome section using React and motion for animations. This section greets the user based on their role ('business' or 'ngo') and displays their subscription tier. It includes a call-to-action link that changes based on recent activity. The section uses motion for fade-in animations and includes icons from lucide-react. This section is accessible by Business User and NGO User. Ensure that the greeting and CTA are conditionally rendered based on the user's role and activity status. Page access: shared by all personas (Business User, NGO User).

Implement the routing shell for the frontend, ensuring protected routes for persona-specific pages.

Test the CSR matching workflow for Business users, ensuring accurate matches and secure access.

Test the grant access workflow for all users, ensuring data integrity and secure access.

As a frontend developer, implement the DashboardQuickStats section using React and motion for animations. This section displays quick statistics with icons and links to various parts of the dashboard. Each stat card includes an icon, label, value, and change indicator, with hover effects for interactivity. This section is accessible by Business User and NGO User. Ensure that the stats are dynamically rendered and styled according to the design specifications. Page access: shared by all personas (Business User, NGO User).

As a frontend developer, implement the DashboardActiveMatches section using React, motion, and state management. This section displays a list of active matches with filtering options. Users can filter matches by status ('all', 'active', 'pending', 'completed'). Each match card includes details like name, mission, and last activity, with animations for transitions. This section is accessible by Business User and NGO User. Ensure that the filtering logic and animations are implemented as per the design. Page access: shared by all personas (Business User, NGO User).

As a frontend developer, implement the DashboardGrantsList section using React and motion for animations. This section displays a list of recommended grants with details such as title, funder, amount, deadline, and relevance. Each grant card includes a relevance indicator with color coding. This section is accessible by Business User and NGO User. Ensure that the grants are dynamically rendered and styled according to the design specifications. Page access: shared by all personas (Business User, NGO User).

As a frontend developer, implement the DashboardActions section using React and motion for animations. This section provides quick action cards for tasks like searching for matches, creating proposals, viewing reports, and managing subscriptions. Each card includes an icon, title, and description, with hover effects for interactivity. This section is accessible by Business User and NGO User. Ensure that the actions are dynamically rendered and styled according to the design specifications. Page access: shared by all personas (Business User, NGO User).

As a frontend developer, implement the OpportunitiesHeader section which includes animated statistics using the motion library. The section displays total opportunities, live matches, and funding rate with icons from lucide-react. It features a motion-enhanced title and description that fade in with a vertical slide effect. This section is accessible by Business Users only and should integrate with the Dashboard page. Page access: Business User only.

As a frontend developer, implement the GrantsHeader section which displays the title 'Grant Database', a subheading, and the total number of active grants using the Database icon from lucide-react. This section is accessible by Business User and NGO User. Ensure the component integrates with the Dashboard page as it depends on task IDs from the Dashboard. Page access: shared by all personas (Business User, NGO User).

As a frontend developer, implement the ReportsHeader section which includes a BarChart3 icon and a Calendar icon from lucide-react. The section displays the title 'Impact Reports' and a subtitle describing the CSR partnerships. It also shows the report period 'Jan 2024 – Dec 2024'. This section is accessible by Business User and NGO User. Page access: shared by all personas (Business User, NGO User).

As a frontend developer, implement the SubscriptionHeader section which displays the user's current subscription plan, renewal date, and billing period. This section uses the planNames and planBadgeColors objects to dynamically render the plan name and badge color based on the currentPlan prop. It is accessible by both Business and NGO Users. Page access: shared by all personas (Business User, NGO User).

As a frontend developer, implement the PartnersHeader section for the Partners page. This section includes a title, description, and statistics about total partners and active collaborations. It uses the Building2 and HeartHandshake icons from lucide-react to visually represent the statistics. This section is accessible only to NGO Users and should display the number of partners and active collaborations dynamically based on props. Page access: NGO User only.

As a frontend developer, implement the ProfileHeader section for the Profile page. This section includes a breadcrumb navigation with links to the Dashboard and the current Profile page, an avatar with an edit button, and user information such as name, organization, and account status. The section uses components like ChevronRight, User, Building2, and Shield from lucide-react. This page is accessible by NGO Users only. Page access: NGO User only.

As a Tech Lead, verify the end-to-end integration between the CSR Matching frontend implementation and the CSR Matching backend API. Ensure data flows correctly, API responses are handled properly in the UI, and all interactions work as expected.

As a Tech Lead, verify the end-to-end integration between the Proposal Generation frontend implementation and the Proposal Generation backend API. Ensure data flows correctly, API responses are handled properly in the UI, and all interactions work as expected.

As a Tech Lead, verify the end-to-end integration between the Impact Reporting frontend implementation and the Impact Reporting backend API. Ensure data flows correctly, API responses are handled properly in the UI, and all interactions work as expected.

As a frontend developer, implement the OpportunitiesFilters section which includes interactive filter groups with collapsible panels using motion and AnimatePresence. The section allows users to filter opportunities by type, category, organization type, and impact. It features a responsive design with a mobile toggle for filter visibility. This section is accessible by Business Users only. Page access: Business User only.

As a frontend developer, implement the OpportunitiesResults section which displays a list of opportunity cards with animated entry using motion. Each card shows the opportunity type, organization, title, excerpt, and impact tags. It includes pagination controls and an empty state message when no results match the filters. This section is accessible by Business Users only. Page access: Business User only.

As a frontend developer, implement the GrantsSearchBar section which includes a search input with a Search icon from lucide-react, allowing users to search grants by keyword, funder, or description. The component handles input changes and submits search queries on Enter key press or button click. This section is accessible by Business User and NGO User. Page access: shared by all personas (Business User, NGO User).

As a frontend developer, implement the GrantsFilterPanel section which allows users to filter grants by various criteria such as sector, type, eligibility, and deadline. The component uses state to manage open sections and filter changes, and includes a reset functionality. This section is accessible by Business User and NGO User. Page access: shared by all personas (Business User, NGO User).

As a frontend developer, implement the GrantsSortAndToolbar section which provides sorting options for grants and displays active filter chips. It includes a dropdown for sorting by relevance, deadline, or amount, and buttons to remove individual filters or clear all. This section is accessible by Business User and NGO User. Page access: shared by all personas (Business User, NGO User).

As a frontend developer, implement the GrantsGrid section which displays a grid of grant cards with pagination. Each card shows grant details and allows users to save grants. The component handles pagination and displays messages when no grants match the filters. This section is accessible by Business User and NGO User. Page access: shared by all personas (Business User, NGO User).

As a frontend developer, implement the ReportsFilterBar section which includes date inputs, project and category dropdowns, and filter buttons. The section uses state hooks to manage filter values and is accessible by Business User and NGO User. Page access: shared by all personas (Business User, NGO User).

As a frontend developer, implement the ReportsImpactSummary section which displays impact cards with icons like Users, Banknote, and Clock from lucide-react. Each card shows a value, label, and detail about CSR impact metrics. This section is accessible by Business User and NGO User. Page access: shared by all personas (Business User, NGO User).

As a frontend developer, implement the ReportsMetricsGrid section which displays key performance indicators with trend icons like TrendingUp and TrendingDown from lucide-react. The section includes formatted values and progress indicators. This section is accessible by Business User and NGO User. Page access: shared by all personas (Business User, NGO User).

As a frontend developer, implement the ReportsVisualization section which includes interactive charts like BarChart, LineChart, and PieChart using lucide-react icons. The section allows users to switch between different chart types. This section is accessible by Business User and NGO User. Page access: shared by all personas (Business User, NGO User).

As a frontend developer, implement the ReportsDetailedBreakdown section which includes expandable sections for project summary, key outcomes, testimonials, challenges, lessons, and next steps. This section is accessible by Business User and NGO User. Page access: shared by all personas (Business User, NGO User).

As a frontend developer, implement the ReportsExportActions section which includes buttons for downloading PDF, exporting CSV, sharing reports, and printing. Each button uses an icon from lucide-react and provides a description of the action. This section is accessible by Business User and NGO User. Page access: shared by all personas (Business User, NGO User).

As a frontend developer, implement the SubscriptionPricingCards section which displays different subscription plans with their features and prices. This section includes interactive elements such as plan selection and highlights the recommended plan. It uses the SubscriptionPricingAction component for plan selection actions. Accessible by Business and NGO Users. Page access: shared by all personas (Business User, NGO User).

As a frontend developer, implement the SubscriptionFeatureTable section which provides a detailed comparison of features across different subscription plans. This section uses a table layout to display feature availability and differences between plans. Accessible by Business and NGO Users. Page access: shared by all personas (Business User, NGO User).

As a frontend developer, implement the SubscriptionFAQ section which provides answers to common questions about subscription plans. This section uses a state hook to toggle the visibility of answers. Accessible by Business and NGO Users. Page access: shared by all personas (Business User, NGO User).

As a frontend developer, implement the SubscriptionCTA section which encourages users to choose a subscription plan or view the FAQ. This section includes call-to-action buttons linking to the pricing and FAQ sections. Accessible by Business and NGO Users. Page access: shared by all personas (Business User, NGO User).

As a frontend developer, implement the PartnersFilters section for the Partners page. This section allows NGO Users to filter partners by various criteria such as company size, industry, CSR focus, budget, location, and experience. It includes a search input and dynamically updates the filter state using React hooks. The section also displays the count of active filters and provides a clear all functionality. Page access: NGO User only.

As a frontend developer, implement the PartnersResults section for the Partners page. This section displays a list of partners in a grid format using the PartnerCard component. It includes pagination controls via the PartnersPagination component and a sorting dropdown to order results by relevance, match score, company size, or recency. If no partners are found, it shows the PartnersEmptyState component. This section is accessible only to NGO Users. Page access: NGO User only.

As a frontend developer, implement the ProfilePersonalInfo section for the Profile page. This section allows NGO Users to update personal details such as full name, email, phone, location, and bio. It includes form validation and error handling for fields like full name and email. The section uses state hooks for form data and editing mode management. Page access: NGO User only.

As a frontend developer, implement the ProfileOrganizationBasic section for the Profile page. This section allows NGO Users to view and edit basic organization details such as organization name, type, and industry. It includes a verified badge for the organization name and uses state hooks to manage form data and editing state. Page access: NGO User only.

As a frontend developer, implement the ProfileOrganizationExtended section for the Profile page. This section provides NGO Users with additional organization details such as organization size, website, CSR focus, and tax ID. It includes form fields for editing and uses state hooks to manage form data and editing state. Page access: NGO User only.

As a frontend developer, implement the ProfileNotifications section for the Profile page. This section allows NGO Users to set notification preferences for various types of alerts such as new CSR matches and project updates. It includes frequency options and uses state hooks to manage preferences. Page access: NGO User only.

As a frontend developer, implement the ProfilePasswordChange section for the Profile page. This section allows NGO Users to change their account password. It includes password strength validation, error handling, and visibility toggles for password fields. The section uses state hooks for form data and error management. Page access: NGO User only.

As a frontend developer, implement the ProfileTwoFactorAuth section for the Profile page. This section allows NGO Users to enable or disable two-factor authentication (2FA) for their account. It includes a setup process with QR code scanning and backup codes. The section uses state hooks to manage 2FA status and setup steps. Page access: NGO User only.

As a frontend developer, implement the ProfileSessions section for the Profile page. This section allows NGO Users to view and manage active sessions and review login activity. It includes a list of sessions with options to revoke access and a log of recent login activities. Page access: NGO User only.

As a frontend developer, implement the ProfilePrivacy section for the Profile page. This section allows NGO Users to manage privacy and data sharing settings. It includes toggles for profile visibility, data sharing, analytics tracking, and marketing communications. The section uses state hooks to manage preferences. Page access: NGO User only.

As a frontend developer, implement the NGOProfileHeader section using React and motion for animations. This section includes a logo with hover animation, organization name, tagline, and a 'Request Match' button with interactive scaling effects. Ensure the 'Verified Partner' badge is displayed. This section is accessible by Business Users only and must include page-level dependencies from the Opportunities page. Page access: Business User only.

As a frontend developer, implement the BusinessProfileHeader section which includes a back button using the ArrowLeft icon, a company logo, and company details such as name, industry, partner tier, and verification status. This section is accessible by NGO Users only and must include a dependency on the Partners page header task to ensure proper navigation integration. Page access: NGO User only.

As a frontend developer, implement the SubscriptionPricingAction component which provides buttons for upgrading or downgrading subscription plans. The component dynamically adjusts button labels and styles based on the current and target plans. Accessible by Business and NGO Users. Page access: shared by all personas (Business User, NGO User).

As a frontend developer, implement the NGOProfileMissionAndMetrics section using React and motion for animations. This section displays the NGO's mission, focus areas, and key metrics with hover effects on metric cards. It includes dynamic rendering of focus areas and metrics. This section is accessible by Business Users only. Page access: Business User only.

As a frontend developer, implement the NGOProfileTeamAndContact section using React and motion for animations. This section includes team member cards with hover effects and contact information with social media links. Ensure the layout is responsive and accessible by Business Users only. Page access: Business User only.

As a frontend developer, implement the NGOProfileProjects section using React and motion for animations. This section showcases various projects with hover effects on project cards, displaying project details and outcomes. Ensure the section is accessible by Business Users only. Page access: Business User only.

As a frontend developer, implement the NGOProfileImpactHighlights section using React and motion for animations. This section includes impact statistics and a testimonial with hover effects on stat cards. Ensure the download link for the impact report is functional. This section is accessible by Business Users only. Page access: Business User only.

As a frontend developer, implement the NGOProfileMatchCriteria section using React. This section displays partnership preferences with tags for partner types, industries, and capability gaps. Ensure the section is styled according to design specifications and is accessible by Business Users only. Page access: Business User only.

As a frontend developer, implement the NGOProfileActions section using React and motion for animations. This section includes interactive buttons for sending match requests, scheduling calls, and browsing proposals, as well as a form for sending quick messages. Ensure the form handles state changes and is accessible by Business Users only. Page access: Business User only.

As a frontend developer, implement the BusinessProfileOverview section which includes a description of the company, a toggleable CSR mission statement, and a grid of details such as geographic focus, CSR budget, website, and contact information. This section is accessible by NGO Users only. Page access: NGO User only.

As a frontend developer, implement the BusinessProfileCSRFocus section which displays various CSR focus areas with icons and descriptions. The section includes hover interactions to show detailed descriptions. This section is accessible by NGO Users only. Page access: NGO User only.

As a frontend developer, implement the BusinessProfileCollaborations section which lists collaborations with NGOs, including project details, status, and impact. The section includes filter buttons to view all, ongoing, or completed projects. This section is accessible by NGO Users only. Page access: NGO User only.

As a frontend developer, implement the BusinessProfileActions section which provides action buttons for NGO users to propose collaborations, message the business, or save the profile. This section is accessible by NGO Users only. Page access: NGO User only.

As a frontend developer, implement the ProposalHeader section for the Proposal page. This section includes a breadcrumb navigation for proposal steps ('Edit', 'Preview', 'Submit') with the active step highlighted. It also displays the context of the proposal ('Green Earth Foundation' and 'CSR Partnership Proposal') and includes a help button using the HelpCircle icon from lucide-react. This section is accessible by Business Users only and must integrate with the existing NGO Profile page as it depends on task ID '1e94c096-631c-486a-a3c7-90c9d6b0508f'. Page access: Business User only.

As a frontend developer, implement the ProjectHeader section for the Project page. This section includes a headline with the project title 'Community Water Initiative', a status indicator, and metadata such as partner organizations and project dates. It uses icons from 'lucide-react' for visual representation. This page is accessible by NGO Users only, and the ProjectHeader must conditionally display navigation links based on user access. This section depends on the Business Profile page implementation. Page access: NGO User only.

As a Tech Lead, verify the end-to-end integration between the Grant Access frontend implementation and the Grant Access backend API. Ensure data flows correctly, API responses are handled properly in the UI, and all interactions work as expected.

As a frontend developer, implement the ProposalForm section for the Proposal page. This section includes multiple expandable field groups ('Project Details', 'Budget & Timeline', 'Impact Metrics', 'Contact Information') with fields for text, textarea, email, and phone inputs. It features an auto-save mechanism that updates the save status ('idle', 'saving', 'saved') based on form changes. This section is accessible by Business Users only. Page access: Business User only.

As a frontend developer, implement the ProposalPreview section for the Proposal page. This section displays a live preview of the proposal data, including project title, description, goals, budget, timeline, impact metrics, and contact information. It includes a download button that opens a new window with the preview content styled for printing. This section is accessible by Business Users only. Page access: Business User only.

As a frontend developer, implement the ProposalActions section for the Proposal page. This section includes buttons for saving drafts, toggling the preview, and submitting the proposal. It features a checkbox for agreement before submission and handles button states based on the 'submitting' and 'agreed' states. This section is accessible by Business Users only. Page access: Business User only.

As a frontend developer, implement the ProjectStatusPanel section for the Project page. This section displays various project metrics such as overall progress, budget usage, timeline status, and other key metrics like beneficiaries and volunteer hours. It uses 'lucide-react' icons for visual elements and includes a progress bar for visualizing data. This page is accessible by NGO Users only. Page access: NGO User only.

As a frontend developer, implement the ProjectTeamMembers section for the Project page. This section lists team members involved in the project, displaying their name, organization, role, and status. It includes an 'Invite' button for adding new members, which logs an action to the console. This page is accessible by NGO Users only. Page access: NGO User only.

As a frontend developer, implement the ProjectTimeline section for the Project page. This section visualizes the project phases with a timeline chart, indicating the current phase and progress. It calculates the current phase based on today's date and displays it with a highlighted color. This page is accessible by NGO Users only. Page access: NGO User only.

As a frontend developer, implement the ProjectMilestones section for the Project page. This section lists project milestones with details such as name, target date, status, owner, and description. It includes an 'Add Milestone' button that logs an action to the console. This page is accessible by NGO Users only. Page access: NGO User only.

As a frontend developer, implement the ProjectCollaborationTools section for the Project page. This section provides buttons for accessing various collaboration tools such as documents, discussions, file uploads, workspace, and activity feed. Each button logs an action to the console when clicked. This page is accessible by NGO Users only. Page access: NGO User only.

As a frontend developer, implement the ProjectActions section for the Project page. This section includes buttons for various project actions such as editing, archiving, downloading summaries, sharing, and accessing admin settings. Each button logs an action to the console when clicked. This page is accessible by NGO Users only. Page access: NGO User only.