[Customer Portal][FE][Web] Implement Case Details Content Orchestrator and Modular Tabbed UI

[dileepapeiris]

###. Description

This pull request introduces a new CaseDetailsContent component to the customer portal webapp, which consolidates the display logic for case details, including loading and error states, header, tabs, and content panels. The component improves code organization and maintainability by encapsulating the case details UI in a single, well-structured React function component.

Key additions in this pull request:

New Component Implementation:

• Added a new CaseDetailsContent React component in CaseDetailsContent.tsx to handle the rendering of case details, including header, action row, tabs, and content panels, as well as loading and error states.
• Incorporated logic to fetch and display case attachments count, assigned engineer initials, and dynamic status chip styling based on the case status and theme.
• Utilized subcomponents such as CaseDetailsHeader, CaseDetailsActionRow, CaseDetailsTabs, and CaseDetailsTabPanels for modular UI composition.
• Implemented focus mode and tab switching logic to control the layout and visibility of certain UI elements.
• Added a skeleton loading state using CaseDetailsSkeleton for improved user experience during data fetches.

[coderabbitai]

Warning

Rate limit exceeded

@dileepapeiris has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 9 minutes and 28 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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.}

[Copilot]

Pull request overview

Adds a new CaseDetailsContent container component that composes the Case Details page layout (header, action row, tabs, and tab panels) and handles loading vs. content rendering.

Changes:

• Introduces CaseDetailsContent component to render case details header/action row and tabbed content.
• Adds focus mode support to hide header/action row while keeping the tab bar visible.
• Fetches attachment count to display in the “Attachments” tab label.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.