invoiceninja / ui Goto Github PK
View Code? Open in Web Editor NEWInvoice Ninja: Web admin portal built with React
Home Page: https://app.invoicing.co
License: Other
Invoice Ninja: Web admin portal built with React
Home Page: https://app.invoicing.co
License: Other
Steps to reproduce:
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.
Would be nice to have a real live report preview in React UI.
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.
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).
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.
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.
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.
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.
Version: v5.5.6-C89 (according to the Flutter frontend)
Refreshing the page in the browser does not work as expected.
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:
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.
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.
Only the active rates are available.
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!
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
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):
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.
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.
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.
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?)
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.
External script https://accounts.google.com/gsi/client is loading, even Google Auth is not used. Caused by @react-oauth-b05f2590.js
Load only if it is configured.
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.
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 !
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.
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.
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?
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.
The "Days" field should either be set as required or, like in the flutter app, be set to 0 if it's empty.
The invoices part in the dashboard shows invoices which are paid with a remaining balance of 0.
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
These updates are currently rate-limited. Click on a checkbox below to force their creation now.
react-datepicker
, @types/react-datepicker
)@typescript-eslint/eslint-plugin
, @typescript-eslint/parser
)These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.
.github/workflows/analyse.yml
actions/checkout v3
actions/setup-node v3
.github/workflows/playwright.yml
shivammathur/setup-php v2
actions/upload-artifact v3
mariadb 10.6
.github/workflows/release.yml
actions/checkout v3
softprops/action-gh-release v1
package.json
@azure/msal-browser ^3.0.1
@emotion/styled ^11.10.5
@headlessui/react ^1.7.4
@headlessui/tailwindcss ^0.1.3
@hello-pangea/dnd ^16.2.0
@monaco-editor/react ^4.4.6
@react-oauth/google ^0.9.0
@reduxjs/toolkit ^1.9.1
@sentry/react ^7.77.0
@sentry/tracing ^7.77.0
@tinymce/tinymce-react ^4.3.0
@tippyjs/react ^4.2.6
antd ^5.6.1
array-move ^4.0.0
axios ^0.27.2
classnames ^2.3.2
collect.js ^4.34.3
currency.js ^2.0.4
dayjs ^1.11.7
dotenv ^16.0.3
formik ^2.2.9
history ^5.3.0
i18next ^22.1.4
jotai ^2.0.3
lodash ^4.17.21
pretty-bytes ^6.0.0
react ^18.2.0
react-colorful ^5.6.1
react-date-range ^1.4.0
react-datepicker ^4.11.0
react-debounce-input ^3.3.0
react-dom ^18.2.0
react-dropzone ^14.2.3
react-feather ^2.0.10
react-hot-toast ^2.4.0
react-i18next ^12.1.1
react-icons ^4.7.1
react-json-tree ^0.18.0
react-phone-number-input ^3.2.23
react-qr-code ^2.0.8
react-query ^3.39.2
react-redux ^8.0.5
react-router-dom ^6.4.4
react-select ^5.7.0
react-string-replace ^1.1.0
react-turnstile ^1.1.2
react-use ^17.4.0
react-verification-input ^3.3.0
recharts ^2.1.16
remove ^0.1.5
styled-components ^6.0.7
tailwind-scrollbar ^3.0.0
uuid ^9.0.0
@faker-js/faker ^8.2.0
@playwright/test ^1.40.1
@tailwindcss/forms ^0.5.3
@types/jest ^29.2.4
@types/lodash ^4.14.191
@types/node ^18.11.11
@types/react ^18.0.26
@types/react-date-range ^1.4.4
@types/react-datepicker ^4.8.0
@types/react-dom ^18.0.9
@types/uuid ^9.0.0
@typescript-eslint/eslint-plugin ^5.45.1
@typescript-eslint/parser ^5.45.1
@vitejs/plugin-react ^3.0.0
autoprefixer ^10.4.13
eslint ^8.29.0
eslint-plugin-react ^7.31.11
eslint-plugin-unused-imports ^2.0.0
husky ^8.0.2
jest ^29.3.1
postcss ^8.4.19
prettier 2.8.8
tailwindcss ^3.2.4
ts-jest ^29.0.3
ts-node ^10.9.1
typescript ^4.9.3
vite ^4.2.0
vite-tsconfig-paths ^4.0.0
node >=16.0.0
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.
To be usable in closed state, its icons should have alt text and title hover labels: #1355.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.