Any way to improve v5 usability challenges?

Is there any way I can mitigate/change some of the usability challenges we’re facing (trying to retrain users coming from v4)…

1.) VERY poor performance in Google Chrome = absolutely nails CPU utilization (works beautifully in Firefox)

2.) Admin > View Client > Telephone = copies to clipboard, we have a Chrome plugin that links and automatically tags 10+ digit numbers w/ ‘tel:’ prefix (for dialing w/ IP Telephone) >>> the very BIG reason why we would much rather use Chrome over Firefox or Windows Store App

3.) Admin > View Client > Website = copies to clipboard, this is a link/href in v4 (which enables users to 1-click to internal notes site using MediaWiki)

4.) Client Portal > Profile > Website = shows/displays, even though Admin > Settings > Client Registration -and- Website are both disabled (any way to hide fields or even sections?)

5.) Admin > View Client > Google Maps API = no longer going to be used (below client details & above Quotes/Invoices/etc)?

6.) Admin > View Client > Toolbar = no more 1-click button for “New Quote”? Have to go to Quotes tab now?

7.) Admin > View Client > Addresses = no longer obvious which address is for billing, and which is for shipping (i.e. not identified any more)

8.) Admin > View Client > Contacts = no longer obvious there are any more than a single contact for any given client, unless the user happens to hover the mouse over the iframe/div/pane and the scroll bar appears.

9.) Admin > Settings > Email Settings > Email Design = any way to modify the Plain / Light / Dark?

10.) Admin > Settings > Templates & Reminders > Preview = does not accurately reproduce using Email Design, only good for preview of text modification (having to play the guessing game on how to correct the Email Design)

11.) Admin > About > Update = works beautifully (HUGE improvement over v4), but always times out w/ execution timeout error (even though the update was actually successful - sorry, I didn’t record actual text)

…I would modify the code, but don’t want to lose the changes with every single update.

  1. You can either use the desktop app (Desktop Apps | Invoice Ninja) or the React app

  2. The React app should help

  3. We’ll look into changing this

  4. I believe those are unrelated features

  5. The React app should help

  6. We’ll look into it

  7. We’ll look into it

  8. We’ll look into it

  9. You can use a custom email design

  10. How is it inaccurate?

  11. It may help to increase the PHP memory and/or timeout

1.) When I try to change to the React app via Flutter WebUI, I get error 401: You are not authorized to view or perform this action.

4.) That’s fine, my goal is to hide things (e.g. WebSite) from the Client Portal, because they are fields that our users/agents need (but customers should not see or atleast edit).

9.) Yes, I agree… I just wish I had the code for Plain / Light / Dark (i.e. like Invoice Design) so I could tweak it instead of writing new.

10.) The background coloring behind logo and email text is reversed from the preview, and the spacing appears different.

11.) Increased memory_limit from 768M to 1024M, and already had max_execution_time set to 300… need to go higher?

@david any thoughts here?

@theshniz

  1. Can you advise the url the app lands on when you see that particular page please?
  2. It may help to inspect the logs for the exact error on this, it sounds odd. You should not need that much memory to complete the upgrade.

Invoice Ninja v5.4.12 initially installed via Softaculous, and updated to v5.5.21-C92 via WebUI
Running on Shared Hosting running PHP 8.1 (w/ shell access)
Clean database with zero users/products/etc (only admin user)
FYI: we will NOT be migrating any data from v4

URL = https://subdomain.mydomain.com/public/index.php#/
This is a pet peeve of mine, it would be REALLY nice to cut off the trailing ‘index.php#/’

/.env just updated APP_DEBUG=“true”

/storage/logs is chmod 755

/storage/logs/laravel.log is being written to and currently populates cleanly w/ ‘updating currencies’ & ‘Performing Autobilling’

/storage/logs/laravel.log has recorded errors from over a week ago, that I would probably attribute to an older (then current) version of v5.5.x
Stripe\Exception\InvalidArgumentException(code: 0)
Symfony\Component\Process\Exception\ProcessSignaledException(code: 0)
App\Repositories\QuoteRepository::save

/storage/logs/laravel.log is NOT recording any errors for changing to React app

Just used phpMyAdmin and set ‘accounts.set_react_as_default_ap = 1’
URL = https://subdomain.mydomain.com/dashboard/
FYI: Had to https://subdomain.mydomain.com/?clear_local=true and it came up!

1.) Very GOOD performance in Google Chrome

2.) Works!

3.) Works (but painfully)… I can see users getting aggravated w/ spelling ‘http://’

v4 allowed Website of ‘notes/Whatever’
v5 translates to https://subdomain.mydomain.com/clients/notes/Whatever
v4 allowed Website of ‘www.whatever.com
v5 translates to https://subdomain.mydomain.com/clients/www.whatever.com
v5 works IF Website is ‘http://notes/Whatever’ or https://www.whatever.com

4.) Client Portal not affected by React app (would still like ability to hide fields/sections)

5.) Google Maps API = not used in React app?
I do indeed have ./env set to GOOGLE_MAPS_API_KEY=something_really_long

6.) Works! (just like v4)

7.) Does NOT show Shipping Address

8.) Works, but does NOT show ‘Phone’ (used very often) and missing ‘View in Client Portal’ links (found only in edit quote/invoice)

9.) Would still like ability to modify Plain / Light / Dark, or use code as base in Custom

10.) Same

11.) Given that Admin > About only shows User’s Name & Email, is it suggested to switch back to Flutter for upgrade via WebUI, and then switch back?

12.) Some settings do NOT appear to copy over from Flutter
Admin > Settings > User Details > Notifications
Admin > Settings > Client Portal > Authorization

13.) No ability for user to log out, produces error ‘Something went wrong’
Please see attached screenshot-user.jpg

X.) You can see error when trying to switch to React w/ attached screenshot-react.jpg

If you see index.php in the URL it likely means mod_rewrite needs to be enabled

The React is still being developed, it isn’t yet feature complete with the Flutter app.

@david any thoughts on the error logging out?

I’ve confirmed mod_rewrite is indeed enabled on the web server, and only the Flutter app seems to be affected…

URL’s as seen in browser:
https://subdomain.mydomain.com/public/index.php#/
https://subdomain.mydomain.com/login
https://subdomain.mydomain.com/dashboard
https://subdomain.mydomain.com/public/client

Both ‘.htaccess’ and ‘public/.htaccess’ are unmodified…

/.htaccess = RewriteRule ^(.*)$ public/$1 [L]
/public/.htacccess = RewriteRule ^ index.php [L]

@david do you have any suggestions?

@theshniz

Can you open the browser console and watch for the exact URL the system is trying to reach when trying to switch to the react app please.

1.) Trying to switch to React (via WebUI) outputs…

PUT: https://subdomain.mydomain.com/public/index.php/api/v1/accounts/VolejRejNm? main.foss.dart.js:72015:78

2.) I also increased ‘max_execution_time’ to 360 (a few days ago now), and just updated to v5.5.22-C93 (which is again successful)… the error that is (still) generated complains of taking 5min, even though max_execution_time is set @ 6min.

I think the webserver is timing you out in this instance, not the backend.

The file is ~ 110mb in size, do you have sufficient bandwidth to download this file in ~ 30 seconds? it may be timing out as there is not enough time to pull the file and then unpack.

I agree, and would suggest a feature request of… Check for Update > Download > Update (2-step process) -or- even ability to specify local path (for manual upload) given its filesize.

Looking forward to next release, thank you for all the hard work!

2.) Possible for ‘copy to clipboard’ to be an optional setting perhaps? (just plain text)

3.) Works (but painfully) in v5.5.23-C93! … I can see users getting aggravated w/ spelling ‘http://’

v4 allowed Website of ‘notes/Whatever’
v5 Flutter translates to https://subdomain.mydomain.com/public/notes/Whatever
v4 allowed Website of ‘www.whatever.com
v5 Flutter translates to https://subdomain.mydomain.com/public/www.whatever.com
v5 Flutter works IF Website is ‘http://notes/Whatever’ or https://www.whatever.com

6.) Thank you, present in v5.5.23-C93!

7.) Thank you, titles in v5.5.23-C93!

8.) I think the header ‘Contacts (#)’ is good, but I just wish…

  • there was a way to compact the ‘view portal’ & ‘copy link’ buttons (e.g. right justified, similar to client addresses) to fit more than 1x contact

  • may help to have the scrollbar always visible (i.e. overflow: scroll)

X.) Also, possible to make email addresses as ‘mailto:’ instead of ‘copy to clipboard’?

Thanks for the feedback, we’ll look into these suggestions.

9.) I was able to modify the ‘Light’ email template @ resources/views/email/template/client.blade.php and is much better now, but cannot figure out how to correct the template’s Button (e.g. View Invoice / View Quote) to display properly in Microsoft Outlook (in regards to the CSS padding).

screenshot-outlook

It displays fine in webmail and mobile clients, but majority of businesses use Outlook

screenshot-web

X.) I realize the React app is a work in progress…

  • Missing ‘Product ID’ field from Quotes & Invoices (required to populate products, makes useless)

  • Users must be a full administrator, otherwise they only see Purchase Orders

screenshot-users

a.) FYI: I just noticed the Flutter URL’s are different based on browser:

Chrome = https://subdomain.mydomain.com/#/
Firefox = https://subdomain.mydomain.com/public/index.php#/

b.) Is there any way to ‘trust the device’ via 2-Factor in Flutter/React, like in v4? (users won’t use otherwise)

Also, what is the purpose of the ‘Optional Secret’ on user login to Flutter/React?

c.) How can I remove ‘Paid to Date’ from Quotes? (they should always be $0)

…this is using current v5.5.24-C93, thank you!

I’m not sure why the browsers would have different URLs, index.php is usually a sign that mod_rewrite needs to be enabled.

The secret value can be set in the .env file and provides an extra layer of security.

cc @david @ben

Just updated to v5.5.25-C95 …

2.) Admin > View Client > Telephone = Option to leave as plain text? (do NOT copy to clipboard so plugins can ‘tel:5551234567’)

3.) Admin > View Client > Website = works (kinda), but can you make the link so Invoice Ninja does NOT assume https/443 (i.e. let the browser handle it)

7.) Admin > View Client > Addresses = Much better!

8.) Admin > View Client > Contacts = Much better!

Flutter URL’s are normalized now:

Chrome = https://subdomain.mydomain.com/#/
Firefox = https://subdomain.mydomain.com/#/

2-Factor authentication without ability to trust devices is impractical

How can I hide ‘Optional Secret’ from login page? (having a hard time to find where/file for manual edit)

I’m not sure if web plugins would work with a Flutter app.

Since invoicing is sensitive data we assume most people require HTTPS to access the webapp.

This is the code for the Flutter app but you may find it easier to modify the React app.