Epic Feature – Conservation Projects Page

[SAUMILDHANKAR]

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/design/eRcnlUKzSsIJv3JcOMddwU/OpenNature-Map?node-id=5771-3944&t=PvHYPjlEBBF151A0-0

---