winvoice-gui

winvoice-gui is a front-end for winvoice-server, written in TypeScript with React. It allows graphical management of invoices for any number of clients.

Screenshots

Features

• Manage jobs, timesheets, and expenses. Amount owed is automatically calculated when a job is exported.
  • Powerful searching capable of performing simple and advanced queries.
• Text may contain any markdown syntax.
• Designed from the ground up to support international environments.
  • Timezones are automatically converted and accounted for when creating and searching for records.
  • Currencies are automatically managed by the location of the client— but you can request jobs be exported in any currency tracked by the ECB.
• Robust permissions allocation, provided from winvoice-server. Don't worry about an intern editing critical historical information.
• May be used locally by freelancers, or deployed on a server for organization-wide access.

Setup

Requirements

• npm
• winvoice-server is installed and configured.

Instructions

For Local/Personal Use (localhost)

Note

Requires mkcert, unless you are familiar with the process of setting up a local trust authority yourself.

1. Setting up a local Trust Authority

First, it is necessary to create a local trust authority so that winvoice-server can operate using HTTPS. If you are familiar with how to do this, or have already done so in the past, you can skip this step. Otherwise, mkcert can be used.

Issue the following commands in any shell environment where mkcert.

mkcert -install
mkcert -key-file key.pem -cert-file cert.pem localhost "127.0.0.1" "::1"

This will allow you to run winvoice-server, as it requires the -c and -k arguments which specify the locations of the "cert.pem" and "key.pem" files (respectively) that have just been created.

2. Run winvoice-server

The winvoice-server help command should help guide you through this process. An example of what the final command may look like is:

winvoice-server \
    -c cert.pem -k key.pem \
    -l trace \
    -O 'http://localhost:3001' \
    -M model.conf -p policy.csv \
    postgres -d <DATABASE_NAME> -H <DATABASE_HOST> -u <USERNAME> -p <PASSWORD> # If you're unsure, `-H` is probably `localhost`.

This will bind winvoice-server to localhost.

3. Build winvoice-gui

To do this, simply enter a shell environment where npm is available and run:

npm run build # if this produces an error, please search the issues for a duplicate, or report it if there is none
npm run start -- -p <PORT> # you probably want '3001', since winvoice-server is on 3000

Then, go into your browser and enter the URL it displays to you:

In this case, localhost (click this link to go there).

For Organizational/Remote Use

Setup instructions for organizational use are quite similar to those for personal use (covered just above), except that the address that winvoice-gui is bound to must be publicly accessible (or at least, privately accessible). Instructions for how to do that are found here.

Usage

Requirements

• A browser (LibreWolf / FireFox recommended)