[HOLD for payment 2024-10-29] [$250] Add the `Download` option to the report details screen.

[JmillsExpensify]

Problem

The original implementation for CSV downloads focused on bulk actions on the Search page. One small inconsistency this introduced is that it's still not possible to download individual reports. You could also argue that this inconsistency is now more glaring since it's possible to export reports to accounting systems, yet not CSV.

Solution

Let's add the ability to download reports to CSV at the report level, in addition to bulk CSV exports on the Search page. The solution will work like so:

• All expense reports will contain a Download option in the details page for that report. This is the case no matter whether the report is a "one expense report" or whether it's a report that contains several "batched" expenses.
• Clicking the Download option will generate a CSV and download it to the member's local device

And I think that's it? @trjExpensify do you think I'm missing anything else? Here's the relevant front-end example, for reference.

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021838716845402086708
• Upwork Job ID: 1838716845402086708
• Last Price Increase: 2024-09-24
• Automatic offers:
• nkdengineer | Contributor | 104193448
• abzokhattab | Contributor | 104195345

Issue Owner

Current Issue Owner: @JmillsExpensify

[melvin-bot]

Current assignee @JmillsExpensify is eligible for the NewFeature assigner, not assigning anyone new.

[NJ-2020]

Edited by proposal-police: This proposal was edited at 2023-10-02T00:00:00Z.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Add the Download option to the report details screen

What is the root cause of that problem?

New feature

What changes do you think we should make in order to solve the problem?

We can add new menu item inside report details page

App/src/pages/ReportDetailsPage.tsx

Lines 286 to 288 in accea60

	const menuItems: ReportDetailsPageMenuItem[] = useMemo(() => {
	const items: ReportDetailsPageMenuItem[] = [];

// For handling error
const {isSmallScreenWidth} = useResponsiveLayout(); 
const [downloadErrorModalVisible, setDownloadErrorModalVisible] = useState(false);

if (isExpenseReport || isSingleTransactionView) {
    items.push({
        key: CONST.REPORT_DETAILS_MENU_ITEM.DOWNLOAD,
        translationKey: 'common.download',
        icon: Expensicons.Download,
        action: () =>
            Report.downloadReportCSV(report.reportID, () => {
                setDownloadErrorModalVisible(true);
            }),
        isAnonymousAction: true,
    });
}

return (
    ...
    <DecisionModal
        title={translate('common.downloadFailedTitle')}
        prompt={translate('common.downloadFailedDescription')}
        isSmallScreenWidth={isSmallScreenWidth}
        onSecondOptionSubmit={() => setDownloadErrorModalVisible(false)}
        secondOptionText={translate('common.buttonConfirm')}
        isVisible={downloadErrorModalVisible}
        onClose={() => setDownloadErrorModalVisible(false)}
    />
)

And add download option inside REPORT_DETAILS_MENU_ITEM property
DOWNLOAD: "download"

App/src/CONST.ts

Lines 2807 to 2819 in accea60

	REPORT_DETAILS_MENU_ITEM: {
	MEMBERS: 'member',
	INVITE: 'invite',
	SETTINGS: 'settings',
	LEAVE_ROOM: 'leaveRoom',
	PRIVATE_NOTES: 'privateNotes',
	EXPORT: 'export',
	DELETE: 'delete',
	MARK_AS_INCOMPLETE: 'markAsIncomplete',
	CANCEL_PAYMENT: 'cancelPayment',
	UNAPPROVE: 'unapprove',
	DEBUG: 'debug',
	},

And create new function to download report as csv inside actions/Report.ts folder because almost all download as csv function are created under actions libs folder

/** Download report details as CSV */
function downloadReportCSV(reportID: string, onDownloadFailed: () => void) {
    const finalParameters = enhanceParameters(WRITE_COMMANDS.DOWNLOAD_REPORT_CSV, {
        reportID,
    });

    const fileName = `report_${reportID}.csv`;

    const formData = new FormData();
    Object.entries(finalParameters).forEach(([key, value]) => {
        formData.append(key, String(value));
    });

    fileDownload(ApiUtils.getCommandURL({command: WRITE_COMMANDS.DOWNLOAD_REPORT_CSV}), fileName, '', false, formData, CONST.NETWORK.METHOD.POST, onDownloadFailed);
}

We also need to create new endpoint inside the BE for download report as csv (because almost all download as csv function had endpoint to the BE like downloadCategoriesCSV, downloadTagsCSV, etc)

And create new API params for DOWNLOAD_REPORT_CSV

// DownloadReportCSVParams.ts
type DownloadReportCSVParams = {
    reportID: string;
};

export default DownloadReportCSVParams;

// And export it inside parameters/index.ts
export type {default as DownloadReportCSVParams} from './DownloadReportCSVParams';
 
// API/types.ts
...
DOWNLOAD_REPORT_CSV: 'DownloadReportCSV',
...
[WRITE_COMMANDS.DOWNLOAD_REPORT_CSV]: Parameters.DownloadReportCSVParams;

What alternative solutions did you explore? (Optional)

[abzokhattab]

Edited by proposal-police: This proposal was edited at 2024-09-24 14:02:47 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Add a "Download" option to the expense report details.

What is the root cause of that problem?

This is a request for a new feature.

What changes do you think we should make in order to solve the problem?

1. Add a "Download" menu item in the report details component here under the condition that the current report is an expense report. The requirement is that it should be shown for expense reports only not for all products

if (isExpenseReport) {
    items.push({
        key: CONST.REPORT_DETAILS_MENU_ITEM.DOWNLOAD,
        translationKey: 'common.download',
        icon: Expensicons.Download,
        action: () => ReportUtils.downloadReportAsCsv(report.reportID), 
        isAnonymousAction: false,
        shouldCloseModalOnSelect: true  // Optional, for consistent behavior with the search page
    });
}

2. Update the CONST.REPORT_DETAILS_MENU_ITEM to include the new record DOWNLOAD: "download"
3. The ReportUtils.downloadReportAsCsv function should be created. It will retrieve the report, convert the JSON object to CSV, and then initiate a download. You can refer to this example for guidance on converting JSON to CSV (or we can use existing npm packages such as jsonexport, this library has 0 dependencies and would be useful in our case).
4. Once the data is converted, the function should call localFileDownload . We should also add an argument to accept the file extension, with a default value of .txt.

What alternative solutions did you explore? (Optional)

Alternatively, the conversion from JSON to CSV could be handled on the backend. We can expose an endpoint in the backend .. then create a function similar to exportSearchItemsToCSV , where the URL is formulated, and data is requested from the database.

[trjExpensify]

@rlinoz I'm going to export this, but CC'ing you for vis for the internal proposal approval with context on this feature.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021838716845402086708