Panel - CompuShare

When i first started working at CompuShare we made workorders on paper. Some time after that i made a simple Wordpress form to improve that workflow. Now, with the experience i've gained, i've build a complete webapp, not only for the work orders, but for:

1. Work orders
2. Delivery orders
3. Hour sheets (importing an Excel hour sheet)
4. Declaration form
5. Client address book

I wanted to build 1 solution

We were using seperate word files for each of those things. We needed to print them out, and fill them in by hand. Afer we would come back from a client, we scanned the paper, and mailed them to ourself.

I wanted to make this easier. The Wordpress form we made some time wasn't really nice too. Each time a company moved, and we needed to change their address, or needed to add a client, we would edit a CSV file, and re-import it.

I wanted to build one application were we could manage everything. This project was also focused on being a learning project for me.

What did i use?

At my internship at Yummygum we were working on a project were the back-end was build with the Prisma ORM and with a Postgres database. Since i already got some experience there, i decided i wanted to build a complete project with it.

For the front-end i wanted to to use React, with the framework Next.js. Since the goal of this project wasn't really front-end focused, but more if i could build my own back-end, and setup this whole project, i've decided to use a open-source component library Mantine.

I've used Typescript, and TailwindCSS for the styling. Auth0 for the authentication (since it's a small company we can use it for free)

How did it go?

The good

I started by setting up the schema, i liked this part the most, were i needed to think about what data would be connected. It went well, but when i was building the application i figured out that i needed to make some changes to the schema. But that was easily done with Prisma.

Building the front-end was also fun to do, the component library i've chosen was the right fit for the job. It had most component i would need.

I tried to make most of the application SSR, but not everything could be SSR as some parts like the modals needed be client sided, but that's okay, as long as the biggest parts were SSR.

I did the data fetching with Apollo, and the typing was done through gql.tada 🪄. It was nice, while setting up the queries everything was already typed.

The difficult

The PDF Generation

One of the hardest parts of the application was something i didn't thought would be a annoying/difficult part. It was the PDF generation, when creating a workorder i wanted it to create a PDF with the data. This was my first time building such thing.

I decided i wanted to make it SSR, so that the device itself wouldn't have to process it. (it's a small company, the server could handle it). I made an api endpoint that would generate the pdf, send an email with the pdf.

I've made the e-mail templates with Handlebars, but i did not like the experience, it was an annoying to test, but there were some nice webapps that made it easier like HBS Editor but it wasn't typed, and caused some issues.

But it's working now, the server spins up a headless browser Puppeteer which makes the pdf, saves it, sends it.

---

The hoursheets import

We made hour sheets, what we worked on at which times, dates, which client, and what we did, in Excel. It was okay to do. But i wanted to link all that data with the data we had available in the application.

I wanted to load each row in, get the company, try to match it with the company in hour database, so that we could lookup a company and see "Oh, my colleague went there to replace the router last friday".

The issue

I got it working. I tested it with a small sheet of mine, and it worked. I released it to my colleague's, but they didn't got it working. The issue was that their sheets were much bigger, and i converted the rows in text in the e-mail it sends after the import. But that e-mail would never arrive, it was too big.

The fault i made was by testing it with a far too small sheet, and not knowing about the limit of e-mail content. So i needed to rethink my solution.

The solution

Instead of formatting it in the e-mail content, i moved it over to the PDF generation. This fixed the e-mail not arriving anymore.

Now that we have each row of the hoursheet, i order it in the pdf. So i sorted all company's, and calculated the total time spent to each company.