Handle Civil ID removal errors and image mapping

[AIandI0x1]

Summary

Bounty reference: BAWES-Universe/studenthub#55

/claim #55

This PR handles the candidate-facing Civil ID frontend slice:

• shows API failure feedback when removing front/back Civil ID photos fails instead of silently clearing local form state
• keeps the removal loading state correctly reset on success or failure
• fixes the profile preview mapping so the front slot uses candidate_civil_photo_front and the back slot uses candidate_civil_photo_back
• adds a profile return path when the Civil ID page is opened from profile editing

Privacy and scope

• No live account, candidate record, Civil ID value, phone number, image, credential, or payment data was accessed.
• Short synthetic demo video: https://github.com/AIandI0x1/studenthub/releases/download/g075-demo-videos-20260514/g075-candidate-civil-id-demo-public-redacted.mp4
• Unexpected network/server failures now use a generic user-facing message instead of echoing raw backend error details.
• No AWS/IAM, bucket policy, key, or infrastructure changes are included.

Validation

• npm run build passes.
• git diff --check passes.

Build notes: existing project warnings remain around stale Browserslist data and missing PWA theme_color; this PR does not introduce them.

Summary by CodeRabbit

• Bug Fixes

  • Improved error handling for Civil ID photo removal operations with clearer failure notifications.

• UX Improvements

  • Added "Back to Profile" navigation button when accessing Civil ID page from the profile section.

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR adds robust error handling to civil ID photo removal operations and improves navigation flow. Photo removal handlers now validate operation success, display alerts on failure, catch promise rejections, and always reset removal state. The civil ID page conditionally renders a "Back to Profile" button when navigated from the profile context. Minor JSX formatting adjustments are made to photo tiles.

Changes

Civil ID Robustness and Navigation

Layer / File(s)	Summary
Photo Removal Error Handling src/pages/(auth)/civil-id/page.tsx	Both resetFrontId() and resetBackId() now check the operation field in the removal result, alert users on failure, catch promise rejections with a fallback message, and ensure removal state flags are reset in a finally block.
Profile Navigation Context src/pages/(auth)/civil-id/page.tsx	The page header conditionally renders a "Back to Profile" button that navigates to /profile when the fromProfile query parameter is present; the onboard progress component is omitted in that case.
Photo Tile JSX Formatting src/components/app/profile/personal-detail.tsx	The conditional <img> markup for front and back civil ID photo tiles is reformatted for consistent structure; the component's closing brace is corrected to fix the TSX structure.

Estimated Code Review Effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 A rabbit hops through error states with care,

Removing photos, catching faults fair,

Back to profile with a button so sweet,

Formatting fixed—the JSX now neat! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the two main changes: error handling for Civil ID removal and image mapping fixes for photo tiles.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

• Generate code and open pull requests
• Plan features and break down work
• Investigate incidents and troubleshoot customer tickets together
• Automate recurring tasks and respond to alerts with triggers
• Summarize progress and report instantly

Built for teams:

• Shared memory across your entire org—no repeating context
• Per-thread sandboxes to safely plan and execute work
• Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[AIandI0x1]

Demo video for /claim #55 linked below.

Privacy note: this demo uses synthetic localStorage state and intercepted local API/AWS/chat calls only. It does not use a live account, candidate record, Civil ID image/value, phone number, credential, payment/tax data, AWS/IAM data, or private logs.

What the demo covers:

• Opens /civil-id?fromProfile=1 with synthetic candidate state.
• Simulates DELETE /account/remove-civil-photo-front returning 500.
• Verifies the local Civil ID photo could not be removed. Please try again. dialog appears and the app stays on /civil-id instead of routing to the global server-error page.

Video: https://github.com/AIandI0x1/studenthub/releases/download/g075-demo-videos-20260514/g075-candidate-civil-id-demo-public-redacted.mp4
SHA-256: 0af1689a3b58ca3817675c080e2a7a6182119c19248f9a8003c3ecc4e6825adf