Implement Commitment Detail parameters section

[solomonadzape95]

Implement Commitment Detail Parameters Section

Summary

Implements the Commitment Parameters section for the Commitment Detail page, displaying key configured parameters (duration, max loss threshold, commitment type, early exit penalty) in a responsive card grid layout matching the provided design specifications.

Changes

New Components

• CommitmentDetailParameters (src/components/CommitmentDetailParameters/)
  • Reusable component that displays four parameter cards in a 2x2 grid
  • Fully prop-driven with no internal calculations
  • Supports optional description overrides for future customization
  • Uses lucide-react icons (Clock, AlertTriangle, Shield, DollarSign) for consistency
  • Custom section header icon using react-icons/pi (PiStack)
  • Responsive design: 2x2 grid on desktop/tablet, single column on mobile

Design Implementation

Visual Design

• ✅ Dark theme matching existing design system (#0A0A0AE5 card backgrounds)
• ✅ Rounded corners (14px radius) with subtle borders
• ✅ Icon containers with gradient backgrounds and rounded corners
• ✅ Subtle hover effects (soft glow, no transform/scale)
• ✅ Typography hierarchy: uppercase labels, bold values, muted descriptions
• ✅ Color-coded icons matching app iconography:
  • Duration: Blue (#51A2FF)
  • Max Loss Threshold: Red (#FF3B30)
  • Commitment Type: Green (#05DF72)
  • Early Exit Penalty: Orange/Gold (#F5A623)

Props Interface

interface CommitmentDetailParametersProps {
  durationLabel: string              // e.g., "30 days"
  maxLossLabel: string               // e.g., "2%"
  commitmentTypeLabel: string         // e.g., "Safe"
  earlyExitPenaltyLabel: string      // e.g., "3%"
  durationDescription?: string        // Optional override
  maxLossDescription?: string          // Optional override
  commitmentTypeDescription?: string  // Optional override
  earlyExitPenaltyDescription?: string // Optional override
}

Testing

Manual Testing

• ✅ Component renders correctly with all props
• ✅ Responsive breakpoints work as expected
• ✅ Hover states display subtle glow effect
• ✅ Navigation from list page to detail page works
• ✅ 404 handling for invalid commitment IDs
• ✅ Demo page displays multiple examples correctly

Build Verification

• ✅ TypeScript compilation passes
• ✅ ESLint checks pass
• ✅ Next.js build succeeds
• ✅ No console errors or warnings

Files Changed

Created

• src/components/CommitmentDetailParameters/CommitmentDetailParameters.tsx
• src/components/CommitmentDetailParameters/CommitmentDetailParameters.module.css
• src/app/commitments/[id]/page.tsx
• src/app/commitments/[id]/page.module.css

Modified

• src/app/commitments/page.tsx (View Details link)

Acceptance Criteria

• ✅ Parameters section visually matches the design (heading, icons, labels, values, descriptions)
• ✅ All parameter values are fully driven via props
• ✅ Section is responsive and readable on desktop, tablet, and mobile
• ✅ Component integrates cleanly with other sections of the Commitment Detail page

Screenshots

Related Issues

Closes #53

[vercel]

@solomonadzape95 is attempting to deploy a commit to the 1nonly's projects Team on Vercel.

A member of the Team first needs to authorize it.

[solomonadzape95]

@1nonlypiece please review and merge

[1nonlypiece]

@solomonadzape95 please resolve the conflicts