[Due for payment 2025-05-22] [Report Creation UI] Add remaining empty state views (search result and report preview)

[trjExpensify]

👋 @SzymczakJ @mountiny @luacmartins @sumo-slonik @DylanDylann @allgandalf I realised this one hasn't been completed, so I'm creating an issue for it.

---

Empty report - preview

Current:

Expected:

• Report title
• empty state preview
• Add expense dropdown button

---

Empty report - search result

Current:
(not displayed at all)

Expected:

• Divider line between the report details and the expense lines
• Bold report title and amount fields
• Submitter avatar with workspace avatar overlaid
• Secondary line with hyperlink to the parent chat (e.g From in

Note: We expect that new header of the expense reports in search results to be consistent across reports with expenses as well. I.e

Thanks! CC: @shawnborton

Issue Owner

Current Issue Owner: @trjExpensify

[melvin-bot]

Current assignee @trjExpensify is eligible for the Bug assigner, not assigning anyone new.

[shawnborton]

Looks great, happy to assist with the design review once we begin implementation on this one.

[JmillsExpensify]

We should probably add the expected headers for IOU and Invoice report types too right?

[mountiny]

@SzymczakJ @sumo-slonik who will tackle this one?

[SzymczakJ]

We will take it and split it between us. In fact @sumo-slonik already started working on empty report preview.

[trjExpensify]

We should probably add the expected headers for IOU and Invoice report types too right?

Sure! Here's them all:

Note: ignore the expense details in line, just focus on the report headers.

[sumo-slonik]

Hi, I think I can do it, please assign me :D

[trjExpensify]

Nice, you're assigned!

[sumo-slonik]

@trjExpensify
I have a question regarding the design of the empty component. It looks like this:

And that's how I implemented it in the project:

However, in the report, for a regular carousel element, the inner part of the component has a different background color than the outer part.

Shouldn't we aim for consistency here?

[shawnborton]

the inner part of the component has a different background color than the outer part.

That's because that is the empty state of a receipt image. So I think we should still go with what we have mocked up.

[shawnborton]

I have a few nitpicks about the current empty report preview you are showing though - let me know when the PR is ready to review and I will provide feedback there!

[sumo-slonik]

We should probably add the expected headers for IOU and Invoice report types too right?

Sure! Here's them all:

Note: ignore the expense details in line, just focus on the report headers.

I have a question regarding the blue labels describing the report type:

are they just for labels in the mockup, or do we want them in the application as well? I'm asking because they are not present in all the Figma designs, only in this one.

[mountiny]

Nono those are just for you to understand the different types but check the avatars and the titles for each

[sumo-slonik]

It seems to me that there are a few additional differences here that we shouldn't worry about, but I wanted to double-check:

A different table header

A tab that doesn't exist yet

Using new expense components in the Search tab

Should we change this, or should we focus only on report headers and adding the empty state component for now?

[mountiny]

Yeah I think lets keep this focused and only handle the headers and what is in the og

[shawnborton]

Yup, agree with Vit's comments above. Happy to help with the review when you are ready too, please tag me!

[sumo-slonik]

@mountiny
Could you check if the SEARCH request on the backend is accidentally filtering out the reports we create in our report flow?
I checked the report ID created via "create report," and it does not appear in the RS for such an RQ.

Request URL:
https://dev.new.expensify.com:8082/api/Search?

hash: 243428839
jsonQuery: {"type":"expense","status":"all","sortBy":"date","sortOrder":"desc","groupBy":"reports","filters":null,"inputQuery":"type:expense status:all sortBy:date sortOrder:desc groupBy:reports","hash":243428839,"recentSearchHash":422547233,"offset":0}

Screen.Recording.2025-04-04.at.15.07.15.mov

[luacmartins]

I'm taking a look at ^

[luacmartins]

@sumo-slonik the way Search works right now is:

1. Select all transactions that match the search query
2. Loop over all transactions and add their reportIDs to a list
3. Get all reports in the list

So the reason why we don't return those reports is because they are empty. We'll have to make some significant changes to the Search API to allow returning empty reports.

[melvin-bot]

@sumo-slonik Whoops! This issue is 2 days overdue. Let's get this updated quick!

[sumo-slonik]

Hi @luacmartins. What's the status of the backend for the search returning reports without transactions?

[trjExpensify]

Carlos has an Auth PR in review with @mountiny for that, I believe: https://github.com/Expensify/Auth/pull/14938

[luacmartins]

Yea, PR is in review. Awaiting review from @mountiny

[mountiny]

Merged and should be deployed tomorrow

[trjExpensify]

Got a bit of a hold up with the Auth deploy it seems, still waiting here.

[trjExpensify]

Auth PR has been deployed, we can proceed with the App PR: #59804

[melvin-bot]

@sumo-slonik Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.1.45-21 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Empty report chat view #59804

If no regressions arise, payment will be issued on 2025-05-22. 🎊

For reference, here are some details about the assignees on this issue:

• @sumo-slonik does not require payment (Contractor)
• @SzymczakJ does not require payment (Contractor)
• @allgandalf requires payment (Needs manual offer from BZ)
• @DylanDylann requires payment through NewDot Manual Requests

[melvin-bot]

@allgandalf / @DylanDylann @trjExpensify @allgandalf / @DylanDylann The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[trjExpensify]

This is on prod now, so I think we can close.