Weekly update – 30 September 2022 – Invoice app profile

[ryan]

This week I've been working on something a little different: developing a new site profile in ProcessWire. Actually, I should probably call it an application profile rather than a site profile, as it's not a website profile. Instead it's a profile for an invoicing application in ProcessWire. Though you would install and run it on a web server, but it would be an independent application rather than part of a website... perhaps something you run in a subdirectory, subdomain, or even localhost.

This is something I've been wanting to build for awhile—ever since the invoice service I use raised their rates beyond my budget. So I thought I'd build a replacement that I could use, as well as share for others that might have a similar need. I think it might also be a pretty decent PW profile example in general, too.

I'd originally considered building it as a Process module but decided not to for a few reasons. Though the biggest one is that a site profile enables the greatest potential for customization and expansion according to each person's needs. Since you can expand upon it by adding your own fields and templates, or editing existing ones, most can really tailor it to their own needs a lot more easily than they could if it were a Process module. Likewise, since the actual invoices (and invoice emails) are rendered from front-end pages, you can customize the look and feel of them to match your brand very easily. (This is something I always wished I could do with the invoice service I've been using previously)

This invoice profile requires nothing other than the ProcessWire core. It has no 3rd party or Pro module dependencies. I've got it largely functional at this stage, though will be putting a couple more weeks work into it before releasing it. I'd like to build in the option for clients to pay an invoice with a credit card (via Stripe) for instance. 

Below are a few screenshots of the work in progress. First is the page-list which shows the current invoices in the system and their status. 

(click image to view larger)

As you can see, there are also pages for Clients and Settings. The client pages contain all the information about each client that invoices can be created for. The Settings page is where you can edit your own company information, logo and billing preferences. 

Next is the invoice editor. Here we have a repeater for each line item in the invoice. We also have a repeater for payments. All of the totals add up automatically as you type (Javascript added via hooks). They are also calculated automatically at the server side, so that everything stays consistent whether working with the API or in the page editor. 

(click image to view larger)

At the bottom of the invoice editor you'll see a collapsed input for "Invoice action". This is where you can select actions to apply to the invoice. The two we currently have are "Email invoice to client" and "Email invoice to another address". 

Next up is what we see when viewing the invoice on the front-end. This is just the output of a template file but it is optimized for printing, saving to PDF and sending through email.  I've kept it intentionally simple but of course the logo would be replaced with your own and all markup/styles are fully under your control. 

(click image to view larger)

What I plan to add next are payment options, enabling a client to pay by credit card right from the invoice URL or email. 

What do you think, is this type of PW profile useful to you or someone you know? I've initially built it towards my own client invoicing needs, but I'm curious what other features you would like it to have? Or do you think it's better to keep it simple so that people can more easily take it in different directions? Thanks for your feedback. Have a great weekend!

[Jonathan Lahijani]

Very cool Ryan.  I built something very similar for my own purposes in ProcessWire as well (invoices, clients, projects, proposals, expenses).  It's similar to FreshBooks but with my own needs.  It uses the Table field (profields) and ListerPro to make things more convenient.

[DaveP]

This is great. A few years ago I worked briefly for a security company and one of my responsibilities standing in for the accountant when she was off, was billing for services (mainly door security - 'bouncers' here in the UK) and we used an online system very much like this.

Some summary pages (monthly/yearly/all time totals etc) would be an obvious addition and tax liability calculations where appropriate perhaps. Of course, being built on top of PW, customisation should be straightforward on this kind of foundation.

[maddmac]

Looks very impressive Ryan.  Keep us posted. I assume the "products" can be changed using pages. Would that be the case?

[szabesz]

Thanks in advance for releasing it for free!

2 hours ago, ryan said:

I'm curious what other features you would like it to have?

While I am pretty sure it will serve as good example (which I can't wait to learn form) and as a solid base to build upon, I wish there was a way to upgrade site profiles, similar to module upgrades.

[MarkE]

Looks good @ryan   I’ve already built 2 apps with invoicing as part of them. The approach is pretty similar. I used hanna codes quite a bit for the invoice layout. 
To my mind, the important thing would be the ability to integrate into a wider app (which might, for example, handle products and stock levels). In some ways I think the profile approach is better than a module for this. However, if someone wants to use it in an existing app (or one already in development) we once again hit the issue of “migrations” about which I know there are various views. Ideally you need a way to incorporate the code and database components into another project. 

[Kiwi Chris]

This looks great. I'd been considering building something similar myself as I have a need for it.

I do have a need for it to integrate with an existing site, but from the looks of the latest Rock Migrations, there's an easy way to get the configuration of fields and templates to paste them into a migrations file, and that's something else I've been meaning to have a play with, so I might set up a local version of this profile, install Rock Migrations, and see if I can build a migration that allows me to apply this to an existing site.

[grimezy]

2 hours ago, Jonathan Lahijani said:

It's similar to FreshBooks but with my own needs.

I also moved away from Freshbooks.  They trippled their fee (was on a grandfathered plan) and their support when extracting and closing my account was a nightmare! (They sent my entire backup to someone else and didn't close my account properly, so clients were getting 2 lots of invoices from me!)  I'm glad I built a new more customised system suited to how I process things for my business using PW.  The amazing thing is, when I look back at it... it took me only about 1 full week to migrate and get going thanks to how easy it was using PW ?

It now takes care of invoicing clients, online payments using form builder, PDF tax reports and expenses, multiple business setup (wife sells magazines and books), invoice activity/history.  

Will be interested to see how some things are done with this invoicing profile to improve on my setup.  Well done @ryan.

[Fuzen]

@ryan, this is awesome. Question: Can invoices be viewed within the body of the recipient’s email while also attaching a copy as a PDF? And I take it that receipts would all be handled through Stripe if and when you implement that payment method?

[dragan]

@ryanThis looks awesome! At first glance, the only thing missing for me is VAT. Do you plan to add that later? If not, how easy would it be to add this?

[teppo]

22 hours ago, ryan said:

What do you think, is this type of PW profile useful to you or someone you know?

As it happens, I'm about to hop in a project where invoicing is a key part; while I don't know if I'll be able to use your site profile directly, at the very least it'll be interesting to dig in for ideas. What we see here already looks awesome ?

22 hours ago, ryan said:

What I plan to add next are payment options, enabling a client to pay by credit card right from the invoice URL or email. 

Would be nice if this was implemented in a way where one can easily swap the payment processor, kind of like what Antti did with PaymentModule (and PaymentStripe, PaymentPaypal, etc.)

[ryan]

@maddmac

Quote

I assume the "products" can be changed using pages. Would that be the case?

Yes. Though currently they are a FieldtypeOptions field, but can be changed/added to just as easily. Still, maybe I should convert from Options to Page fields for stuff like this. 

@MarkE

Quote

 Ideally you need a way to incorporate the code and database components into another project. 

A module is something you might integrate into an existing project. I see this instead as a separate app and not something that you integrate into an existing website or project. Though extending it into a new project, using it as a starting point, building on top of it, etc., is definitely the purpose of any site profile. Though this particular site profile is one that you might use as-is, or extend it, depending on your needs. 

@fuzenco

Quote

Question: Can invoices be viewed within the body of the recipient’s email while also attaching a copy as a PDF? And I take it that receipts would all be handled through Stripe if and when you implement that payment method?

I currently have 2 versions of the default invoice template. One is using Uikit 3 markup. The second is using email-friendly plain HTML and a tool that converts class attributes to inline styles at render time for broad email compatibility. When you send an email, it uses the invoice email template and when you view or send the client the URL it uses the Uikit template. Either can be printed to PDF in your browser, but generating PDFs isn't built-in to the site profile (at least not yet). 

Quote

And I take it that receipts would all be handled through Stripe if and when you implement that payment method?

Yeah these are already features of Stripe. Handling payments isn't really my expertise and other than that I know how to work with Stripe reasonably well, so that's the direction I'd take for that. Though all my clients pay by check or bank transfer so not sure I'll be using the feature myself. 

@dragan

Quote

At first glance, the only thing missing for me is VAT. Do you plan to add that later? If not, how easy would it be to add this?

I don't know anything about VAT, so am not sure what that entails. Though I understand it's something tax related and think it would be fairly simple to integrate tax related things. I'll have to research it further, though that may be something we leave for people to add on their own according to their own needs. 

@teppo

Quote

Would be nice if this was implemented in a way where one can easily swap the payment processor, kind of like what Antti did with PaymentModule (and PaymentStripe, PaymentPaypal, etc.)

That's an interesting idea! I'll have to look at what Antti did with that. Though I do wonder to what extent people need payment processing with invoices. It hasn't been part of the invoice services I've used to date. With an online store it's very much connected, but with an invoice it kind of depends how you bill or whether you use credit cards at all. I don't use credit cards for client billing because it's not worth the fees. If I charge $5k for a web development project, then Stripe's cut would be $200, which is significant. I'd rather just have the client send me a check or bank transfer, no fees. But for smaller stuff, I do think it would be nice to have the credit card option built-in. 

[Fuzen]

@ryan thank you for answering my questions.

[gornycreative]

Just so I understand the use of this - are you creating this within your personal business website and redirecting clients to your site to view and pay their invoices, or are you including this in installs in order to be able to have invoices appear on the backend of client sites?

I agree the ability to add a captioned math field that could include either a number or a formula would be helpful. Being able to order those fields and just have the calculations run in order would probably do it (some places allow you to tax freight costs as part of the invoice).

Thanks,

J

[MatthewSchenker]

Ryan,

This looks excellent! As always, ProcessWire just does it!

I've been using Pancake for several years, and it has a lot of the features you're developing. I've been happy with it. But I'd MUCH prefer to do invoicing with ProcessWire, so my invoicing would be the same framework as all my web apps.

As always, thanks for your amazing work!

[thetuningspoon]

Very cool. I developed something like this for Solution Innovators, along with a front end for our customers to view their invoices and pay off their total balance. I like how you modified the page editor here.

I used separate pages for the invoice items and payments instead of repeaters because I found repeaters difficult to work with when summing and reporting data, and also mapping them to models required some hacking (or did at the time - https://github.com/processwire/processwire-requests/issues/239). How are you handling this? (or is that beyond the feature set of this project?)

We also built our whole time tracking software on ProcessWire :)

[zoeck]

On 9/30/2022 at 8:14 PM, ryan said:

Does anyone have an example of how to put calculations into a repeater (Subtotal, Received, Total due)?
I need exactly such a function ? 

[ukyo]

@zoeck

wire()->addHookAfter('InputfieldRepeater::render', function (HookEvent $e) {
	/**
     * @var InputfieldRepeater $repeater
     * @var Page $page Repeater page
     */
    $repeater = $e->object;
    $page = $repeater->hasPage;

    if ($repeater->getAttribute('name') == 'repeater_name') {
        $return = $e->return;

        $e->return = $return . 'Hello World !';
    }
});

 

[Macrura]

This looks great – I'm still using an old copy of Kedisoft Totals for all my invoicing, but it's getting long in the tooth, many things don't work right. Looking forward to trying this out!

[Chris B]

Hi,

May I ask where you are in the publication of this module ? I am very interested, and it would bother me to have to delve into programming such a function on my own if it is about to be released. 

Thank you in advance.