Staging

[Riyad-Murad]

Summary by Sourcery

Provide table-driven admin pages by integrating a new Table component and backend fetch services for providers and contact messages, update sidebar layout styling, and document the new admin screens in README.

New Features:

• Add generic Table component for admin data listings with action icons
• Fetch and display providers in the Admin View Providers page
• Fetch and display contact messages in the Admin Contact Messages page

Enhancements:

• Fix sidebar CSS to be fixed and adjust main content margins
• Rename .main-content class to .admin-main-content for consistency

Documentation:

• Update README to include new admin screens and corresponding demo images

[sourcery-ai]

Reviewer's Guide

This PR integrates API-driven data fetching for admin provider and contact message lists via a new reusable Table component, updates related styles and layout for the admin interface sidebar and main content, and refreshes the README with new screen demos.

File-Level Changes

Change	Details	Files
Added dynamic data fetching and rendering for admin provider and contact message pages	Hooked useState/useEffect to load data on mount Implemented fetchAllProviders and fetchContactMessages service calls Injected headers and fetched data into Table component	AdminViewProviders.jsx AdminContactMessages.jsx AdminViewProvidersService.js AdminContactMessagesService.js
Created reusable Admin Table component	Added Table.jsx rendering headers, rows and action icon Applied new CSS for table layout, colors and icon	Components/AdminComponents/Table/Table.jsx Components/AdminComponents/Table/styles.css
Adjusted admin sidebar and main content layout styling	Fixed sidebar position and dimensions Renamed .main-content to .admin-main-content Updated margin offsets for main content	AdminSidebar/styles.css
Updated README to include Contact Us and new Admin screen demos	Added Contact Us demo image entry Inserted Admin View Providers and Admin Contact Messages demo rows	README.md

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey @Riyad-Murad - I've reviewed your changes and they look great!

Here's what I looked at during the review

• 🟡 General issues: 4 issues found
• 🟢 Security: all looks good
• 🟢 Testing: all looks good
• 🟢 Documentation: all looks good

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[sourcery-ai]

issue: Table component hardcodes data fields and doesn't align with provided headers

This will break if headers don’t match these hardcoded fields (e.g., missing message). Refactor Table to accept column accessors or render functions so each page can map its own data shape.

[sourcery-ai]

suggestion (bug_risk): Avoid using array index as key in list rendering

Use a stable unique identifier (e.g., item.id or item.provider_id) instead of the array index to avoid rendering glitches when the list changes.

Suggested change

	{data.map((item, idx) => (
	<tr key={idx}>
	{data.map(item => (
	<tr key={item.id}>

[sourcery-ai]

nitpick (bug_risk): Inconsistent endpoint format between services

Use a consistent leading slash for your API paths to prevent URL resolution issues.

[sourcery-ai]

suggestion: No empty state handling for tables with no data

Add a fallback row (e.g. 'No records found') when data is empty to prevent a blank table body and improve user feedback.

Suggested change

	<tbody>
	{data.map((item, idx) => (
	<tr key={idx}>
	<tbody>
	{data.length === 0 ? (
	<tr>
	<td colSpan={headers.length} style={{ textAlign: 'center' }}>
	No records found
	</td>
	</tr>
	) : (
	data.map((item, idx) => (
	<tr key={idx}>