# Debugging and Fixing Status Badge Inconsistency in Storage Dashboard

**URL:** <https://talk.openelis-global.org/t/debugging-and-fixing-status-badge-inconsistency-in-storage-dashboard/2065>\
**Category:** Implementing\
**Tags:** dev\_setup, dev\
**Created:** [March 6, 2026, 3:01pm UTC](https://talk.openelis-global.org/t/debugging-and-fixing-status-badge-inconsistency-in-storage-dashboard/2065 "2026-03-06T15:01:13Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![priyanshu56](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.openelis-global.org/priyanshu56/32/1148_2.png) [@priyanshu56](https://talk.openelis-global.org/u/priyanshu56)\
**Post date:** [March 6, 2026, 3:01pm UTC](https://talk.openelis-global.org/t/debugging-and-fixing-status-badge-inconsistency-in-storage-dashboard/2065/1 "2026-03-06T15:01:13Z")

</div>

While working on frontend improvements in OpenELIS Global, I investigated the issue where **Sample Items filtered by “Disposed” still displayed an “Active” badge in the UI**.

**Root Cause**

After tracing both the frontend and backend flow, I found that:

- The backend returns the `status` field as a **status ID** (or `"active"` when no status ID exists).

- The frontend logic in `StorageDashboard.jsx` expected literal values like `"active"` or `"disposed"`.

Because of this mismatch, the UI always fell back to displaying the **Active** badge even when disposed records were correctly returned by the backend filter.

**Solution**

I updated the frontend formatting logic in `formatSamplesData` to interpret the backend status value correctly and render the appropriate badge.

**Result**

- Disposed records now show the **red “Disposed” badge.**

- Active records show the **green “Active” badge.**

- Filtering behavior now matches the actual record state returned by the backend.

**Additional Improvement**

While reviewing the location search flow, I also added a small robustness improvement by trimming the search input before sending the query to `/rest/storage/locations/search`.

**Takeaway**

This fix highlights how **frontend assumptions about backend data structures can lead to subtle UI inconsistencies**. Ensuring alignment between backend responses and frontend display logic improves reliability and user trust in dashboard state.

Happy to continue contributing improvements around **frontend stability, UI correctness, and performance** in the Storage module.

> <https://github.com/DIGI-UW/OpenELIS-Global-2/pull/3013>
>
> …# Pull Requests Requirements
> 
> \* \[x\] The PR title includes a brief description… of the work done, including the Issue number.
> \* \[x\] The PR includes a video showing the changes for the work done.
> \* \[x\] The PR title follows conventional commit label standards.
> \* \[x\] The changes conform to the OpenELIS Global x3 Styleguide and Design documentation.
> \* \[x\] The changes include tests or are validated by existing tests.
> \* \[x\] I have read and agree to the Contributing Guidelines of this project.
> 
> \---
> 
> \## Summary
> 
> This PR fixes the \*\*status badge inconsistency in the Sample Items tab\*\* of the Storage Dashboard.
> 
> When filtering by \*\*Disposed\*\*, the backend correctly returns disposed records, but the UI still displayed the \*\*Active\*\* badge.
> 
> \### Root Cause
> 
> The backend returns the \`status\` field as a \*\*status ID\*\* (or \`"active"\` when no status ID exists).
> However, the frontend logic expected literal values such as \`"active"\` or \`"disposed"\`.
> 
> Because of this mismatch, the UI always displayed the \*\*Active\*\* badge.
> 
> \### Changes
> 
> \* Updated \`formatSamplesData\` in \`StorageDashboard.jsx\` to correctly interpret the backend \`status\` value and render the appropriate status badge.
> \* Added a small robustness improvement to the \*\*location search\*\* by trimming the search input before sending the query.
> 
> \### Result
> 
> \* Disposed records now display the \*\*Disposed (red) badge\*\*.
> \* Active records display the \*\*Active (green) badge\*\*.
> \* Location search behaves more reliably when users enter text with leading or trailing spaces.
> 
> \---
> 
> \## Screenshots
> 
> Before Fix
> Filtering by \*\*Disposed\*\* returned correct records but the badge still showed \*\*Active\*\*.
> 
> After Fix
> Filtering by \*\*Disposed\*\* correctly displays the \*\*Disposed\*\* badge for those records.
> 
> (Attached screenshots / video demonstrating the behavior.)
> 
> \---
> 
> \## Related Issue
> 
> Closes #2989
> 
> \---
> 
> \## Other
> 
> The fix maintains the existing UI logic while ensuring the status badge reflects the actual record state returned by the backend.
> The change is limited to frontend display logic and does not affect backend behavior.

Please review the code of my PR. is I am approaching this project in right way according to the company policy @Moses_Mutesasira@Agaba_Derrick_Junior@caseyi @shauryag2002