Plugins
Templates

Jobly - Business Management Like Jobber Template

Template page link: https://zeroqode.com/template/jobly---service-business-template-1550405095050x994159001944719400

Introduction

Jobly template is built without code to help you run SaaS (software as service business). A robust service business management app like Jobber and Kickserv allows professional home service businesses to manage major aspects of their business such as work requests, quotes, jobs, invoices, customers, locations, scheduling, etc.

As a Company owner you can create and/or access your company's account, then add team members to your account so they can use the app to view their schedules, clock in and out, and more.

To use the app as an Employee your company must have an Owner account, and employees must be added to the account as an authorized user. Employees comprise managers, team leads and staff members.

Managers can manage the operations through the app by assigning tasks to employees, staff members, creating/checking/editing work requests, quotes, jobs, invoices, etc.

Team leads can assign tasks to employees, schedule the work requests, jobs, etc.

Customers can view their work requests, quotes, invoices and jobs. They can also make new work requests, request changes to quotes, and make payments for invoices.

FEATURES:

  • Advanced scheduling with support for recurring and one-time jobs

  • Customer center with a password-less login system

  • Fully responsive pages and user dashboard

  • Admin Dashboard for Management

  • Regular sign up & social sign up via Google

  • Instant invoice payments with Stripe

Payments: See the documentation on how to set Stripe Payments in Bubble App.

Data Structure

Organization

Organizations are service businesses that use the application to manage their customers. This data type stores basic information about the organization like name, logo, address, etc., as well as fields containing list of all customers and list of users that are team members.

User

Users are team members who must be part of an organization. This data type stores the profile info (photo, name, email), their organization and also has a role field which is used for access control.

Customer

Customer data type implies customers of an organization. This data type stores contact info and has fields for a list of requests, quotes, jobs, invoices and locations related to them. The balance field stores information about the customer's balance. If it's negative, represents their deposit or what the company owes them. The access_token field stores a hash used for secure login.

Location

Locations are work sites (with separate addresses) of customers. They store address info and the customer they belong to. Customers' requests, quotes and jobs can be tied to specific locations but invoices cannot.

Work

The four following data types request, quote, job and invoice are the key "work" data types.

Request

Request is a work request made by customers who are looking to get some services provided to them. It has fields for start_date and end_date for assessment and a boolean for whether or not an assessment is required. It also has a field for team members (users) assigned to do the assessment.

Quote

Quote usually (but not necessarily) follows up work requests. In addition to other self-explanatory fields, it has the job_converts field, which is a list of jobs based on the quote in question, a change_requests field which is a list of changes requested by the customers, and charge_group that handles the list of items/products/services to bill the customer.

Job

Jobs are the most robust data type in this group. They can be created from quotes or directly and are of two types: recurring or onetime which are variables under the field job_type.

Other key fields:

visits: a list of schedules which are of type visit. They are specific to jobs and are created using API workflows.

visits_count: an integer that stores the number of visits. On job creation, this number is set even before all the visits are created in the back-end. This helps in UX such that a "loading state" is displayed where the repeating group of visits should be indicating that they are currently being created.

recurring_duration_mode: can be either week or month. The value determines which API workflow is used to create the visits in the backend as can be seen in the workflow for creating a new job.

recurring_duration: is a number that determines how many weeks or months the job lasts.

recurring_repeat: is a number that determines how often recurring_duration of the job will take place. The recurring_duration divided by recurring_repeat is what gives the visits_count.

schedule_text: is concatenated from the inputs where some of the values are pulled during the job creation. Example: Monthly on the 23rd of every month or Weekly on Fridays.

billing_type: This can either be visit or fixed and determines in part how invoices that include the job will be generated.

When it is visit, the user will need to select one or more visits. Each visit's charges (sum of charges) will be added to the total for that job at the point of invoice creation. For example for a job with weekly visits including two items of $10 each (total $20), two of these are selected during invoice creation (job selection) and added to the invoice called "Weekly Service" totaling $20 each.

When it is fixed, there will be no visits to select during job selection stage. On the invoice creation page, the default charges of that job will be listed in the line items. For example for a job with weekly visits whose default charges includes two items Clean ($10) and Cut ($15), when the job is selected during job selection stage of invoice creation, on the invoice creation page there will be two line items from it Clean ($10) and Cut ($15) totaling $25.

invoice_timing: it indicates when or how invoices should be generated. For both visit and fixed billing type it can be set to As needed, Once when job is completed or Monthly on the last day of the month. Additionally for visit type it can be set to After every visit.

invoice_reminders: is a list of reminders which are created when the invoice_timing is set to Monthly on the last day of the month.

invoice_on_completion: is a boolean which when set to "yes" will prompt you to generate an invoice for the job when you mark it as completed. During job creation, it is set to "yes" when the job_type is onetime and on the user side (front end) there is the checkbox to remind you to invoice on completion. It is checked when the job_type is recurring and the dropdowns for invoice_timing are set to Once when job is completed.

default_charge_lines: is a list of charge_lines. Charge_lines are duplicates of the original charges that a job has. They are used in the creation of additional visits to display the same items the original job has, but allow you to edit the quantity or add extra items.

charge_group: is a bill which contains a list of charges, as well as discount and tax applied, however, in case of jobs it doesn't include either tax or discount and the sub_total is the real Total. Charges are basically line items that contain an item, description, quantity, price, total.

Invoice

Invoices are meant for customers and may or may not be based on existing jobs for the customers. The amount field has the same value as the total field of the invoice's charge_group. The balance field starts out once the job was invoiced.It decreases as payments are received from the customer.

Schedule

Schedules are to-dos that can be assigned to team members and have a type of either visit or task. They also have the following fields which are specific to visit type:

job: is the job that this schedule/visit is attached to.

charge_lines: are similar data types to charges. Each of them takes one of the charges from the job the schedule is attached to and has a different quantity and total.

service_charge: is a special kind of charge. There are two types of service_charge: Weekly Service and Monthly Service. They are used when the job has a visit billing_type. This means when you select multiple visits to invoice, each will be reflected on the invoice charges as a separate Weekly/Monthly Service.

Reminder

Reminders are invoice reminders created for jobs that are set to be billed monthly (recurring payment).

Time_entry

Time_entries saves the information of time spent on the job. They have duration values in different fields for easy formatting and a user field containing the team member who performs the job. They can be attached to a job, otherwise the title will be General.

Charge

Charges are like line items on an invoice or bill. They contain an item and the quantity, unit price and total, as well as title and description.

Charge_group

Charge_groups are simply groups of charges with a total which is set in the sub_total field and with some optional fields attached to them. The following fields apply to charge_groups used for invoices:

discount_type: This value can either be percentage or flat and determines how the discount_number would be treated.

discount_number: This value can either be rate like 0.05 (5%) or flat number like 50 depending on the discount_type.

tax: This is the tax rate applied to the charge group.

total: This is the final amount due to be paid on the invoice after applying the discount and adding tax to the sub_total.

Tax_rate

Tax_rates are taxes like VAT or Sales tax. They have a name and a rate field.

Transaction

Transactions are basically used to consolidate 3 other data types for easy handling. They are payments, deposits and invoices. Each transaction can have one of those 3 data types which can easily be known from the type field whose value is either payment, deposit or invoice.

Payment

Payments are records of funds collected from a customer and optionally for a particular invoice.

Deposit

Deposits are records of funds collected from a customer and optionally for a particular invoice.

Note

Notes are additional information for invoices, requests, quotes or jobs and contain a text field and a list of files/attachments. A note can contain only one thing of either invoices, requests, quotes or jobs they are attached to.

Plan

Plans are the pricing plans for the whole app. They contain stripe plan_ids for monthly or yearly plans used to subscribe users to a Stripe product plan and an important level field used for access control (Limiting access to certain parts of the app for users on certain plans).

Email

Emails are used for record-keeping of all emails sent from within the app to customers. Emails are sent for quotes, invoices, payments and deposits.

Change_requests

These are changes/revisions which customers have requested to be made to quotes that have been sent to them.

App_payment

These are used to record subscription payments made by customers.

Pages

Index

This is the main landing page of the template. It has basic information for new customers to learn more about the application. It has a header, hero, client showcase, video section, features listing section, call-to-action and footer.

Pricing

The pricing page contains the pricing block that has 4 paid plans, each with a list of features. The plan price can be toggled from yearly to monthly billing.

Element

State

Note

Group billing mode switch

mode

Determines whether pricing displayed is per month or per year. Values are yearly or monthly

Signup

This contains the sign-up form and allows users to sign up with email or via Google. During the sign up process an organization is created for the user with the subscription_due date set to 14 days of free trial period.

Login

This contains the login form and allows users to login with email or via Google.

Customer-Center

This is the self-service dashboard for organizations' customers. They can view their work requests, quotes, invoices and jobs here. It also allows customers to make new work requests, request changes to quotes and make payments for invoices.

Dashboard_lite

This shows the user recommended actions, assignments for the day and a preview of outstanding balances, past due invoices, upcoming jobs and time entries for the day. This page is only accessible by users with level 3 user access & above.

Dashboard View

Schedule

This shows a list of all schedules (both of type visit & task) that the user has access to. Users on level 1 of user accesss can only see schedules assigned to them as defined in the privacy roles.

Work

The Work page is where users manage requests, quotes, jobs and invoices. For each of those 4 data types there is a list view, detailed view and edit/create form. This page is only accessible by users with level 3 of user accesss & above.

Customers

The Customers page is where users manage customers and locations. For each of those 2 data types there is a list view, detailed view and edit/create form. This page is only accessible by users with level 3 & above.

Timesheet

The Timesheet shows all time entries for a the selected day for a selected user. Here a user can edit or add new time entries that may or may not be attached to a job. They can also delete time entries from here. This page is only accessible by users with level 3 of user access & above.

Management

This is where users can see reports (of which there are 8) and approve timesheet entries up to a select date.

Settings

Here users can manage various settings: company information, account & billing, team members, payments and notifications.

Invoice_view

This page is used in the backend to render a pdf of an invoice. The invoice is being rendered when visiting the invoices section on the Customer-center and clicking the Download button.

Quote_view

This is similar to Invoice_view and is primarily used to display information about a quote.

Job_view

This page is similar to Invoice_view and is primarily used to display information about a job.

Terms

This page is used to display Terms of use of the platform.

Privacy

This page is used to display the Privacy Policies of the platform.

Cancel-account

This page is used to inform users about account cancellation when they choose to do that.

Features

This page displays the available features on the platform. There you can start a free trial as well.

Reset_pw

This page is used for resetting the password.

404

The 404 page is also known as an “error page” or “Page Not Found” page. This page indicates that the user reached the domain they requested, but the URL path provided no information.

Reusable elements

This element is used at the top of the page and offers overall navigation through the platform.

The footer offers basic navigation through the platform.

Charges

This reusable is used for charges creation and editing. You can also add discounts and extra taxes which are also displayed in this reusable.

Charges View

As the name suggests, this reusable is used to display information about charges.

Charges View (No price)

This reusable is used only on the Job_view page and it's meant to display only textual information about charges. It doesn't display information about costs or discounts and extra taxes.

Charges (Job)

This reusable is used for charges creation and editing specifically for jobs. You can't add discounts and extra taxes for this charges.

CTA Block

This reusable is used for starting a trial.

Internal notes create

This reusable is used to create notes and add file attachments that are linked to a quote, job, etc.

Internal notes

This reusable is used to create/edit and display a note that was attached to a quote, job, etc.

Schedule

This reusable is used to schedule visits for a customer and display their details.

Things to note

Sign up

Users are able to sign up with email or via Google. During the sign up process an organization is created for the user with the subscription_due date set to trial period of 14 days. A plan is also set for the organization.This plan can be specified from the plan parameter on the signup page url. If the parameter doesn't exist, the unlimited plan is set for the organization.

Google Authentication

You would need to create an app/project in the developer console:

Google: https://console.developers.google.com

Ensure that you add all live & test URLs for these pages: /signup, /signin & /dashboard as authorized redirect URLs.

Dashboard_lite and other individual pages (Work, Schedule, Timesheet, Management, Customers, Settings)

Navigation in these pages makes use of custom states and conditions. It also makes use of Javascript and plugins for AJAX-style navigation and URL handling/deeplinking.

When the page is loaded the URL's path is split with a JS call and each part is used to fetch a different thing and set a different state. In this implementation there are 3 parts named one, two and three.

  • Part 'one' comes right after the page name and is usually set as the state of the sub menu group for that page. For example when you load the URL https://example.com/work/overview, the value of the first part one = overview and overview is set as the value of the work sub menu custom state current.

  • Part 'two' either carries an id of an object such as requests or quotes or it carries the value new and triggers workflow actions for creating an object. For example, when you load the URL https://example.com/work/requests/214625, the value of the first part one = requests and requests is set as the value of the work sub menu custom state current. Then the value of the second part two = 214625. This is used to search and fetch the request and is passed to a workflow that handles the viewing of a request. In another example when you load the URL https://example.com/work/requests/new, the value of the first part one = requests but because part two = new, requests is not set as the value of the work sub menu custom state current. Instead this triggers the show of the customer selection popup which handles the next steps for creating a new request.

  • Part 'three' only carries the value of edit when the second part carries the id of an object. The presence of edit triggers a workflow for editing the object instead of viewing it. For example when you load the URL https://example.com/work/requests/214625/edit, the value of the first part one = requests and requests is set as the value of the work sub menu custom state current. Then the value of the second part two = 214625. This is used to search and fetch the request but because three = edit the fetched request is passed to a triggered workflow for editing the request object.

There are various buttons or groups that are clicked for viewing, editing and creating objects. The workflows for these contain first an action for replacing the URL of the browser and then next it trigger a custom event called Deeplinking. This event runs a javascript that splits the URL into parts, sets the values of some JStoBubble elements which then trigger their own events that result in the view, edit or creation events being triggered as described above.

Customer-Center

Navigation in the customer-center makes use of custom states and conditions. It also makes use of Javascript and plugins for AJAX-style navigation and URL handling.

When the page is loaded the URL's path is split with a JS call and each part is used to fetch a different thing and set a different state. In this implementation there are 3 major parts namely organization, main and sub.

In a URL https://example.com/customer-centre/org/main/sub

org is the username or the organization. The organization with that username is searched and set as a state on the page when it is loaded.

main can either be one of requests, quotes, jobs or invoices. It can also be login or confirmation when the customer is not logged in.

sub when available is the ID of the data type specified in main.

The url of the customer center is made like this for data list view:

website home url + customer-center + organization's username + data type

Example: https://servo.com/customer-centre/klinhomes/invoices

The url of the customer center is made like this for data detailed view:

website home url + customer-center + organization's username + data type + object ID

Example: https://servo.com/customer-centre/klinhomes/invoices/345299

In the list view of the 4 major data types requests, quotes, jobs and invoices, there is search & filtering functionality. To make it work, a "base" repeating group is first used to filter the data with sorting and dates and then the main repeating group can further filter the first repeating group's data with statuses. The Search&Autocorrect plugin is used for search&autocorrect, and it has its datasource defined similarly to the main repeating group. When the search&autocorrect is in use, the main repeating group shows the result of the search&autocorrect's search.

Account & Billing

Subscriptions are handled via the organization data type of each team using the app. The organization data type stores the Stripe customer ID, Stripe subscription ID, subscription due date, as well as the plan data type representing the plan the organization is on.

When choosing or changing a plan, the user can select either monthly or yearly billing. If monthly, the monthly_id or the chosen plan is used in the Stripe workflow, and if yearly, the yearly_id is used.

When an organization's subscription is renewed or paid for the first time, the subscription due date is pushed forward 1 month or year in the future accordingly via API workflow triggered by Stripe webhook. If the user subscribes to a new plan, the API workflow finds the plan with matching ID and updates the organization's plan field.

Payments

This template uses Stripe for payments powered by Bubble's Stripe plugin and Stripe.js plugin.

To setup your Stripe account, create an account with https://stripe.com. You can access your dashboard once you have successfully verified your email address and activated your account.

Click on Developers and then, API keys. Copy your API keys. Ensure to use a live API key when your template goes live.

Payments: See the documentation on how to set Stripe Payments in Bubble App.

Webhooks

This template uses two Stripe webhooks. One for successful invoice payment which renews or updates subscription plan and one for unsuccessful which cancels the plan.

To configure them

PDF Downloads

PDF downloads are powered by an API call which converts PDF formatted pages within the template to PDF. These pages are invoice_view, job_view, quote_view. This API is deployed on Heroku and you can make your own deployment by following the steps below:

  • Click on the "Deploy to Heroku" button and follow the prompts from there

  • After that go to Bubble > Plugins > API Connector > PDF Generate > Render and replace the URL with that of your own Heroku app.

Notes

This template comes with explicit notes for Database fields, states, etc, which will guide you through the DB structure.

Overlapping Elements

The Dashboard_lite page has many overlapping elements. All major sub pages, data views and forms are overlapping. In addition, in major repeating groups, there exist desktop and mobile versions overlapping each other.

You will find other overlapping elements of note within these groups. Simply copy the element name and search for it. Note that this is for minor groups not easily found in the elements tree.

Page

Element

Dashboard

Group Set Job Scheduling

Dashboard

Group Set Job Invoicing

Dashboard

Sub menus

Header (Reusable)

Header

Header (Reusable)

Group Inner Mobile

Header (Reusable)

Group Inner Desktop

Custom Code

Schedule, Work, Customers, Management, Timesheet & Settings Page

  • Popstate custom event workflow: The custom javascript used here does not need to be changed. It is used for navigating between tabs. It also relies on the JavascriptToBubble elements which must not be removed or edited.

Work & Customers Page

  • Deeplink custom event workflow: The custom javascript used here does not need to be changed. It is used for navigating between tabs. It also relies on the JavascriptToBubble elements which must not be removed or edited.

Customer-center Page

  • Page is loaded workflow: The custom javascript used here does not need to be changed. It is used for navigating between tabs. It also relies on the JavascriptToBubble elements which must not be removed or edited.

Tip: You can find the above workflows & elements using the search bars in design tab or workflow tab as the case may be.

Demo to preview the template