Skip to content

feat: PDF preview, skeleton loaders, error boundary, 404 page & risk …#443

Merged
mftee merged 1 commit into
CodeGirlsInc:mainfrom
lynaDev2:feature/issues-395-396-397-398-fe-components
Apr 24, 2026
Merged

feat: PDF preview, skeleton loaders, error boundary, 404 page & risk …#443
mftee merged 1 commit into
CodeGirlsInc:mainfrom
lynaDev2:feature/issues-395-396-397-398-fe-components

Conversation

@lynaDev2

Copy link
Copy Markdown
Contributor

Changes

#395 — PDF Document Inline Preview [FE-29]

  • `frontend/cmmty/components/PdfPreview/`
  • react-pdf renderer with iframe fallback
  • Prev/next navigation with current page / total pages display
  • Loading skeleton while PDF loads
  • Error state on load failure
  • Tests: page navigation logic

#396 — Skeleton Loading Screen Components [FE-30]

  • `frontend/cmmty/components/Skeleton/`
  • Variants: table row, document card, stat summary card, detail page
  • Tailwind `animate-pulse` on all variants
  • Layout matches real content shape
  • Tests: each variant renders without errors

#397 — Error Boundary & Custom 404 Page [FE-31]

  • `frontend/cmmty/components/ErrorBoundary/` — class-based React error boundary
  • User-friendly error UI with Reload Page button
  • Console logging of caught errors
  • `frontend/cmmty/pages/not-found/` — 404 page with icon, message, Back to Home
  • Tests: error boundary catch behavior

#398 — Risk Flag Breakdown Bar Chart [FE-32]

  • `frontend/cmmty/components/RiskFlagChart/`
  • Horizontal bar per detected flag, width proportional to weight
  • Flag name + point value labelled on each bar
  • Color coding: gray / amber / red by weight tier
  • Empty state when no flags detected
  • Tests: bar width calculation

Checklist

  • All files inside `frontend/cmmty/` only
  • No files outside contribution folder modified
  • Unit tests written for all four components
  • PR targets main

Closes

Closes #395
Closes #396
Closes #397
Closes #398

…flag chart

- feat(CodeGirlsInc#395): build PDF document inline preview component [FE-29]
  · Create frontend/cmmty/components/PdfPreview/ with react-pdf + iframe fallback
  · Page navigation controls: prev/next, current page / total pages
  · Loading skeleton shown while PDF loads
  · Error state shown if PDF fails to load
  · Unit tests for page navigation logic

- feat(CodeGirlsInc#396): create skeleton loading screen components [FE-30]
  · Create frontend/cmmty/components/Skeleton/ with all skeleton variants
  · Skeletons for: table row, document card, stat summary card, detail page
  · Tailwind animate-pulse pulsing animation on all variants
  · Layout matches approximate shape of real content they replace
  · Unit tests verifying each skeleton renders without errors

- feat(CodeGirlsInc#397): implement error boundary and custom 404 page [FE-31]
  · Create frontend/cmmty/components/ErrorBoundary/ as class-based component
  · User-friendly error UI with Reload Page button on caught errors
  · Caught errors logged to console
  · Create frontend/cmmty/pages/not-found/ with custom 404 page
  · 404 page includes icon, message and Back to Home button
  · Unit tests for error boundary catch behavior

- feat(CodeGirlsInc#398): build risk flag breakdown bar chart component [FE-32]
  · Create frontend/cmmty/components/RiskFlagChart/ with horizontal bar chart
  · One horizontal bar per detected risk flag
  · Bar width proportional to flag weight relative to total score
  · Flag name and point value shown on each bar
  · Color coding: gray for low-weight, amber for medium, red for high
  · Empty state message shown when no flags detected
  · Unit tests for bar width calculation logic

Closes CodeGirlsInc#395, Closes CodeGirlsInc#396, Closes CodeGirlsInc#397, Closes CodeGirlsInc#398
@vercel

vercel Bot commented Apr 24, 2026

Copy link
Copy Markdown
Contributor

@lynaDev2 is attempting to deploy a commit to the Mftee's projects Team on Vercel.

A member of the Team first needs to authorize it.

@drips-wave

drips-wave Bot commented Apr 24, 2026

Copy link
Copy Markdown

@lynaDev2 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@mftee mftee merged commit 114d18a into CodeGirlsInc:main Apr 24, 2026
1 check failed
mftee pushed a commit that referenced this pull request Apr 25, 2026
…fe-components

git push -u origin feat/SC-08-Expose-Prometheus-metrics-endpoint-Repo-Avatar
feat: PDF preview, skeleton loaders, error boundary, 404 page & risk …
mftee added a commit that referenced this pull request Apr 25, 2026
…etrics-endpoint-Repo-Avatar

Merge pull request #443 from lynaDev2/feature/issues-395-396-397-398-…
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

2 participants