Would be nice to have a real live report preview in React UI.

The invoices part in the dashboard shows invoices which are paid with a remaining balance of 0.

In the Flutter interface (and v4) the PDF preview of the invoice refreshes when making changes. It doesn't seem to refresh in the React interface. Refreshing the page works, but having an auto-refresh would be handier.

v4's time tracker had this very nice "obvious in your face" indication that time is running in your current task, with an easy way to stop (or Resume) it with one click:

v5's task editor buries this into a menu, but particularly in the task's details / time records view, there would be a lot more space available to bring this functionality back:

I think that would make it more discoverable and readily accessible. It would also help prevent me from "forgetting to stop the clock" (which can happen quite often).

with react framework I cannot search customer and invoices with with phone number.
is there anyway I can edit a code and search like a Flutter framework?

In the flutter UI there was a health check option when you clicked the (i) info icon in the bottom left of the admin interface. The health feature check is needed because it's referenced in a lot of the troubleshooting docs etc., please add it back to the React UI.

Open Invoice from Client A

go to invoice list, open invoice from client B.
Check preview details.

in both invoices client is Client A.
running on docker-compose, - PDF is generated by SnapPDF, Self-hosted.

Hi,
in the settings->localization the setting "first month of year" isn't populated. Even though the value is set.

Hi,
in the settings all client portal values are not set. On the main page the setting for the po-number and for an external store is missing.

The registration tab provides also wrong data:
old

new

Hi,

In React, on my Selfhost install, widgets are not refreshing as they should after some actions.

As an example, Past Due Invoices has not refreshed after entering a payment for a few invoices listed in this widget.

Browsing to another page and coming back to Dashboard did not help
Only after a hard refresh did theses now paid invoices were removed from this widget list.

IMO, it should not need a hard refresh to update these widget infos.

Hi there,
by default the new UI shows USD, instead of the companys main currency EUR.

Is there any chance to set the default currency to the currency with the largest number?

Wrong amount format in balance and paid to date columns in Clients.
Some with currency symbol, other without.

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• Update dependency @headlessui/tailwindcss to ^0.2.0
• Update dependency @react-oauth/google to ^0.12.0
• Update mariadb Docker tag to v10.11
• Update actions/checkout action to v4
• Update actions/setup-node action to v4
• Update actions/upload-artifact action to v4
• Update dependency @reduxjs/toolkit to v2
• Update dependency @types/node to v20
• Update dependency eslint-plugin-unused-imports to v3
• Update dependency husky to v9
• Update dependency i18next to v23
• Update dependency prettier to v3
• Update dependency react-datepicker to v6 (react-datepicker, @types/react-datepicker)
• Update dependency react-i18next to v14
• Update dependency react-icons to v5
• Update dependency react-redux to v9
• Update dependency react-verification-input to v4
• Update mariadb Docker tag to v11
• Update softprops/action-gh-release action to v2
• Update typescript-eslint monorepo to v7 (major) (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
• 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update dependency vite to v4.5.2 [SECURITY]
• Update dependency axios to ^0.28.0 [SECURITY]
• Update dependency @vitejs/plugin-react to v4
• Update dependency typescript to v5
• Click on this checkbox to rebase all open PRs at once

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• Replace dependency react-query with @tanstack/react-query ^4.0.5

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

in the Flutter version there is device settings section

and possible to disable Live PDF Preview

in React version I couldn't find it.

Hi,
the advanced options menu in the user space has two options to remove a user. But only delete really removes it, while remove does nothing. After deleting a redirect to the user overview page should happen - it doesn't

This is only for the top three totals.
Total Revenue, Total Expenses, Total Outstanding
Other tables below are showing the currency accordingly.

React App

Flutter App

in Vendor Page., purchase orders not listed.
Vendor Page

But there is a purchase order exists for it.

the translation-property add_item translates in germany to "Artikel hinzufügen". Which means like a purchaseable item or a basked like item or simmilar. But not line or element.
When used in places like Tasks, we dont add items to be purchased and therefore you better use "Element" (elements) or "Zeile" (line) instead.

I think a complete replace to "Zeile hinzufügen" should be the way to go.

Basically invoiceninja/admin-portal#424 but for the regular web interface as used in standard web browsers. The current UI requires the user to manually toggle a "Dark mode" switch in the preferences, but it should use the operating system theme indication with @media (prefers-color-scheme: dark) { blah blah } to handle everything automatically by default instead.

Steps to reproduce:

• Create new invoice
• Select customer
• Add product
• Try to change the product

I can't select a different product, after adding a product to the invoice. This morning, everything was still working fine, I guess the latest update created the problem.

Using hosted InvoiceNinja with the React Web UI

The Flutter interface sorts the invoices by number, descending. The React interface sorts them ascending. Descending makes more sense since I'm now seeing four-year-old invoices first. I am working more with the most recent ones.

Setup

• Version: 5.1
• Environment: Kubernetes

Checklist

• Can you replicate the issue on our v5 demo site https://demo.invoiceninja.com or https://react.invoicing.co/demo? no
• Have you searched existing issues? yes
• Have you reported this to Slack/forum before posting? no
• Have you inspected the logs in storage/logs/laravel.log for any errors? no

Describe the bug

When selecting the default tax rates, I get many unexpected options, which probably once existed and have been deleted.
Also, if I select 19% it is applied correctly in invoices, but still displays 0% there.

Expected Behavior

Only the active rates are available.

With the latest commits as of 2023-03-03 I don't see any names/contacts in the payment creation sidebar of the transaction view. A screenshot is attached below:

With the "old" version it would show the contact name instead.

Screenshot is in German, if it helps I retake it in English.

Setup

• Version: 5.7.34
• Environment: Docker

Checklist

• Open Invoice Ninja and Developer Tools (F12)
• On Developer go to Network Monitor

Describe the bug

External script https://accounts.google.com/gsi/client is loading, even Google Auth is not used. Caused by @react-oauth-b05f2590.js

Expected Behavior

Load only if it is configured.

Hi,

List headers are not filtering as expected.

See Payments and try filtering Invoice Number column. In my case, filtering is random.
I didn't observe this isue elsewhere !

The breadcrumbs in the /quotes/import page to go back to the /quotes page is incorrect.

The expected value should be /quotes
The current value is /quote

Steps to reproduce:

• Add new Invoice
• Select Customer (first error: just a limited list of customers can be selected)
• Add Product (second error: no way to add Product, instead there is a loading icon)
  

Using hosted InvoiceNinja with the React Web UI

Current Version: 5.7.5 in Self Hosted Environment

Informations
Point 1: Before few versions I can do dupe a invoice to a reminder / dunning out from the invoice table. Now it's gone and more complicated. So in my UI I can't find it anymore (for both UI; Flutter and React). Is there any chance to get it back? It will be much more comforble and smarter to create reminders.

Point 2: Check the Dropdown Menu CSS errors form the pictures. :-)

Point 3: Maybe a side menu points with "Reminders / Dunnings" which I send to customers? And also a Side menu entry in the customer portal.

Point 4: Show Reminders and Dunnings correctly in the Invoice History.

Screenshots

Hi,

The settings for the customer groups is missing in the react ui. It's still available in flutter, but would be nice to have it in react also ;)

Thanks!

In v5 (tested on the Pro SaaS version), if you toggle off the main menu's sidebar with the < button, close the browser (or the tab) and reopen the page, its state gets reset open on the next load. Also, it gets shown in situations where it isn't realistic to show it.

• If not pinned to a particular state It should also probably auto-collapse when space is clearly insufficient, which would help a little bit with my "small dedicated tasks list / time tracker window" usecase.
• If the user explicitly opened or closed it, then it should automatically remember its user-set state, per device with a browser cookie (i.e. I want it to be always closed on my tiny window app mode, but not on my full-width big browser, which are two different browsers).

To be usable in closed state, its icons should have alt text and title hover labels: #1355.

Issue description

When you configure a reminder using the ReactUI, the form allows you to delete what's in the "Days" field and save the parameters. On the server side, there is no validation either and an empty string is saved in the database. However, the flutter app expect to receive an integer and so it throws a deserialization error which prevent you from login.

Expected behavior

The "Days" field should either be set as required or, like in the flutter app, be set to 0 if it's empty.

Hi,
in the dashbord of the new web ui there are two missing texts:

• And in the dashboard graph settings
  

Modules not populated in React App,

in Settings

Version information may be useful in about modal.

in Admin Portal

in React App, it is not possible to add custom fields as a column.

For multiple companies, it shows unrelated documents.

Hi,
in the module section "Transactions" is missing. Even when the module is disabled using the old app. It's shown in the sidebar.

To keep this issue description short, please see title.

No browser_download_url attribute present in the assets JSON here due to missing zip during release: https://api.github.com/repos/invoiceninja/ui/releases/latest

The text boxes for public and private remarks are not visible anymore in the React interface:

Hi,
There is a difference in payment types displayed in the Payments page list.

When selected as payment type, Flutter displays Bank Transfer, but React displays Credit
Same for Cash in Flutter displayed as 2 in React.

See screenshots

It would be nice if the status badges for invoices would have colors like the flutter interface..
I am not handy enough to create a good pull request ;) but I thought of something like a case switch in the StatusBadge.tsx

Something like...

  ...
  let className = 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium';

  // colors
  switch(props.code) { 
     case '1': { 
        //draft 
        className += ' bg-gray-100 text-gray-800';
        break; 
     }
     case '2': {
        //send
        className += ' bg-blue-100 text-blue-800';
        break; 
     }
     case '3': { 
        //partial/paid 
        className += ' bg-orange-100 text-orange-800';
        break; 
     }
     case '4': { 
        //paid
        className += ' bg-green-100 text-green-800';
        break; 
     }
     default: { 
        //default 
        className += ' bg-gray-100 text-gray-800';
        break; 
     } 
  } 
  ...

https://github.com/invoiceninja/ui/blob/main/src/components/StatusBadge.tsx

I think there is also missing a status code for invoices due over the date.

In v8/3/23 the invoice list shows all old invoices with the status "Overdue".
If you browse a detail page of a customer and open the tab invoices, they get correctly tagged as Paid.

The Flutter interface shows it correctly.

If you filter on Unpaid in the invoice list, you also get those old Paid invoices.

I'm a user of the paid SaaS version, and I waited as long as possible before doing the upgrade to v5 because I wanted to give you more time to polish things up, and to run into the least issues possible. However, as I upgraded now, I see that https://app.invoicing.co/#/tasks is a big usability & UX regression for me compared to the traditional https://app.invoiceninja.com/time_tracker?q=Ftime_tracker ...especially as I'm using it with a bookmark in a separate browser window (or as an Epiphany with Invoice Ninja set as a "web app"!) as a quick minimalist time tracking app while I'm working.

Speed/efficiency

The previous UI had a very simple workflow: you open the time tracker, you type a few characters to quick search the task (or client, or project) you want, select the task, click the big green "Resume" button, and "Stop" when you're done. This could be done in the blink of an eye, extremely important when you need to start a task on a dime when receiving a phone call or during a meeting. I really liked that big obvious single-click button in the top-right corner, though I guess I can learn to live with the need to go through a menu for a task to be "Started" or "Stopped", but it would be nice if this was a prime action rather than buried in a submenu.

Adapting to any window width

The old v4 time tracker, with its multiline rows, behaved fine and looked well balanced even at tiny window sizes, there was no way to "break" it:

v5's tasks list is really not consistently responsive, whether I test with Firefox or with Epiphany (I particularly like using Epiphany's app mode). Both the tasks table and its filters bar above it break in so many ways, it's really not a pleasant experience. Below are screenshots of how broken it looks at various widths.

First, the only minimum width where it is not broken: around 1500 px wide:

Shrink a bit, and the buttons in the rightmost column get cut off:

Shrink more, and those buttons become entirely off-screen, and the filters bar's widgets start breaking apart and becoming multiline:

Now this is just getting silly:

...and even with the main menu sidebar turned off, the table still can't display all its stuff!

Could you please make it breakdown nicely at any width? And probably automatically toggle off the main menu sidebar when width is way too small to be practical showing table data anyway.

For starters, it would probably help if your table rows were multi-line to display the client and project name below the task name, like the v4 UI, and didn't display the state column twice (!), or a task number column (that's a new thing in v5 it seems? why don't my existing tasks not have a number, and why should I care to see the task's number in a table?)

These icons are undecipherable (and all too similar) unless you somehow memorize them:

They also don't seem to be accessible, at first glance.

They should have both the alt and title attributes for screen readers and for people with mice.

After upgrading my Pro v4 SaaS account to v5, I was able to test the dark theme (although it is not automatically enabled based on the system's theme, invoiceninja/admin-portal#424), however the color palette is bad for accessibility. For example, right on the dashboard page, the "Recent payments" table:

This table row has a multitude of color problems (which can probably be seen in various other places in the InvoiceNinja UI):

• The hyperlinks are medium-dark blue on a dark blue background, which provides terrible contrast. They should be a brighter sky blue (like Firefox does in its articles Readability mode), a bit closer to white.
• The white row divider lines are, ironically, waaaaay too bright and contrasty. They're not supposed to be the thing grabbing my eyes here. The dashboard's revenue "Overview" graph also has what seems like very bright grid lines, I suspect it will distract from the visuals.
• White text on a bright-green button (or white on light blue, for example: ) also fails to be readable. Black text on that type of bright button, or darker button background colors, please. But not too dark because then you end up with this situation where your button totally blends into the background:
  

You can easily avoid such problems by using this. It would be good to use that tool to review all the theme colors used throughout the UI.

Hi everybody,
just switched to the nee frontend:

I noticed, that the Company currency isn't applied, and in the payment graph the dates aren't translated.

I just noticed a difference between the flutter app and the react app. within flutter, i was able to edit the subject, when sending a email to a invoice. within react this was not possible.

I guess the react app probably does not reconise my white-label-license, because i get the buy option on the dashboard too.

Hi,
since the latest update the graphs are now localised. Thank you!!!
But the y-scale misses a currency sign, and the data points are not rounded and miss a currency sign as well:

Version: v5.5.6-C89 (according to the Flutter frontend)

Refreshing the page in the browser does not work as expected.

Expected result

• I can hit refresh just fine.
• I can share working links with my workmates. (The Flutter frontend misses this feature in the first place)

Actual result

You’ll end up with an error 404 page.

Seems like those routes aren’t registered to be handled by the frontend.
I’d suggest doing either:

• Redirect those routes to the frontend
• Don’t use the PushState API

In the Flutter interface and v4, you can enter a subset of a name to filter invoices. In the React interface currently, the filter seems to filter only on invoice numbers.