Empty-State & Error-State UI for Tables and Lists #76
Description
The 'Why'
Tables and lists in CropChain (e.g., Admin Dashboard batch table, track results) currently look similar whether data is loading, empty, or has failed to load.
This forces users to “guess” what’s happening: Is the network slow? Are there no batches? Did an error occur?
For farmers, this can look like “my data disappeared”.
For admins, it’s harder to distinguish a genuine empty dataset (e.g., no batches yet) from a backend failure or filter mismatch.
Clear empty-state and error-state patterns reduce confusion and make the system feel much more robust and intentional.
Proposed Logic/UI
- Introduce consistent, reusable empty/error components and apply them to key pages:
- Empty State Design
- A simple illustration or icon (box, crops, or magnifying glass).
- Short headline: “No batches yet” / “No results found”.
- Supporting text: why this might be happening (e.g., “Try adjusting your filters or creating a new batch.”).
- Optional CTA button (e.g., “Create Batch” for admins).
- Error State Design
- Distinct icon (warning/alert).
- Headline: “Something went wrong”.
- Short technical-friendly message: “We couldn’t load batches from the server.”
- A “Retry” button that re-triggers the last fetch.
Apply these to:
Admin Dashboard batch table
Track Batch results section (when no batch found vs error fetching)
Any other high-traffic lists where “no data” vs “error” matters.
Tasks
[ ] Create EmptyState and ErrorState React components (with props like title, description, optional action).
[ ] Update Admin Dashboard to use these components when:
[ ] There are zero batches.
[ ] Fetching batches fails.
[ ] Update Track Batch page to show:
[ ] “No batch found” empty state when a valid search returns nothing.
[ ] Error state when the backend call fails.
[ ] Verify mobile responsiveness and dark mode styling.
Definition of Done
- Users clearly see the difference between:
- Loading
- No data / no results
- API/network error
- Admin Dashboard and Track Batch do not show “blank” tables or ambiguous screens in these cases.
- Empty/error states are reusable for future pages.