Epic Feature – Conservation Projects Page

Issue created with ChatGPT models' help¹

---

Description

This epic focuses on implementing the Conservation Projects page, where all projects from the map are displayed in a structured table view¹.

The page will follow the Figma design and include a table layout with columns (Project Name, Location, Date Created, Date Updated) along with pagination and filtering capabilities³. The primary goal is to build a fully functional UI with component-based architecture, while ensuring extensibility for backend integration later⁴.

---

Goals

• Display conservation projects in a table format¹
• Enable navigation from side nav
• Match Figma layout and styling exactly⁴
• Implement reusable components (table, pagination, filters)¹
• Ensure scalable structure for future backend integration²
• Please make table responsive as much possible for smaller screens

---

Implementation Instructions

• Create Conservation Projects page layout container¹

• Store conservation projects (local state or temporary storage)³

• Render conservation projects in table format⁴

• Make project name clickable → navigate to map view¹

• Create reusable components:

  • Table component²
  • Pagination component³
  • Filter component⁴

• Apply exact Figma layout specs (see below)¹

• Ensure responsive and clean UI behavior²

• Add basic routing integration for navigation³

• Add placeholder validation/testing logic⁴

• Please make table responsive as much possible for smaller screens

---

Layout Specs (Figma)

Main Container

• Width: 1146px¹
• Height: 291px²
• Padding: 16px³

Conservation Projects Header

• Width: 1114px¹
• Height: 33px²
• Gap: 10px³
• Padding-left/right: 2px⁴

Row Spacer

• Width: 1114px¹
• Height: 24px²

Table Container

• Width: 1114px¹
• Height: 202px²
• Border-radius: 16px³
• Background: #FFFFFF⁴

Table Body

• Width: 1114px¹
• Height: 144px²
• Border-radius: 4px³
• Background: #FFFFFF⁴

---

Project Name Column

• Width: 564px¹
• Height: 144px²

Heading

• Height: 48px¹
• Padding: 10px top/bottom, 16px left/right²

Heading Text

• Font-weight: SemiBold¹
• Font-size: Body SM²
• Color: #757575³

Filter Icon

• Size: 12x18¹
• Font: Font Awesome²
• Color: #00000042³

Values (Clickable Rows)

• Height: 48px¹
• Padding: 14px top/bottom, 16px left/right²
• Background: #FFFFFF³
• Box-shadow: inset border⁴

Value Link Text

• Font-weight: Light¹
• Font-size: Body MD²
• Color: #01579B³

👉 On click:

• Navigate to: Ecosystem Map > Bluff > Info¹
• Animation: Instant (0ms)²

---

Other Columns

Location Column

• Width: 250px¹

Acreage Column

• Width: 150px¹

Status Column

• Width: 150px¹

---

Footer (Pagination)

• Width: 1114px¹
• Height: 58px²
• Gap: 32px³
• Padding-left/right: 8px⁴

Pagination Text

• Text: "1 - 2 of 2"¹
• Font-size: Body XS²
• Color: #000000DE³

Navigation Buttons

• Size: 32x32¹
• Border-radius: 32px²
• Type: plain³
• Includes forward and back buttons⁴

---

Acceptance Criteria

• Conservation Projects page renders with correct layout¹
• Project name is clickable and navigates to map view³
• Table layout matches Figma specs exactly⁴
• Pagination UI is present and functional¹
• Filter UI is present (basic or placeholder)²
• Components are reusable and modular³
• Please make table responsive as much possible for smaller screens

---

Sub-Issues

• Create Conservation Projects page layout
• Implement routing from table → map view
• Add basic validation/state handling
• Add UI tests

---

Resources

¹ https://react.dev/learn/sharing-state-between-components
² https://react.dev/learn/conditional-rendering
³ https://developer.mozilla.org/en-US/docs/Web/CSS/flex
⁴ https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

Figma Design (Full Details): https://www.figma.com/proto/e9z8edludVssFYABGEWsoI/OpenNature-Map--Hackathons-?node-id=1-1465&viewport=787%2C545%2C0.11&t=Xwc2asfn9Qksi99P-8&scaling=scale-down&content-scaling=fixed&starting-point-node-id=1%3A896&page-id=0%3A1&hide-ui=1

---

Review the linked Figma design and the existing map and side-navigation entry points first; the issue names no files or tests, so locate the current routing and UI structure before splitting the work. Done means the responsive projects page matches the design, supports navigation, pagination, filtering, reusable components, and the listed acceptance criteria.