Invoicely - Invoicing Template
Template page link: https://zeroqode.com/template/invoicely---invoicing-and-payments-template-1591350727212x649382089293377700​
Invoicely - Invoicing and Payments Template is a no-code template for small businesses or freelancers that offers a simple way to create invoices for products and services so that your customers could easily pay with their credit cards through a personal dashboard.
Stripe integration for credit card payments
Customer, Manager and Admin dashboards
Create your customer accounts
Email notifications
Responsive design
Dynamic database structure
Data structure contains database related information about data types, fields and dependencies.
Data type | Field | Type | List? | Notes |
Gender | ​ | ​ | ​ | ​ |
​ | Name | text | No | It stores the gender types, which is used in the radiochecker on sign up. |
Invoice |
|
| ​ | ​ |
​ | Amount | Number | No | The invoice price |
| Description | Text |
| Invoice description |
| Document | File |
| PDF attachment |
​ | Issued to | User |
| The user who should pay the invoice |
| New Invoice | Boolean |
| Is used to mark that a new invoice is issued to you. |
​ | New Transaction | Boolean |
| Is used to mark that a new transaction is made by you. |
| Payment date | Date |
| Inserts the date when the invoice was paid. |
| Status | Text | ​ | Show the invoice status: Paid/Pending |
Menu |
|
|
|
|
​ | Image | Image | No | Default icon for menu |
​ | Image_colored | Image |
| Colored icon for menu when hovered/selected |
| Name | Text |
| Menu title |
​ | Order | Number |
| It is used to organize the order of menus |
| Show | Boolean |
| It is used to limit the display of some menus depending on user type. |
Privacy & Terms |
|
|
|
|
​ | Privacy | Text | No | Here is stored the Privacy Policy content. |
| Terms | Text | ​ | Here is stored the Terms and Conditions content. |
Request | ​ | ​ | ​ | ​ |
​ | Body | Text | No | It stores the request main content. |
​ | Subject | Text | ​ | It stores the request subject. |
​ | Viewed | Boolean | ​ | It stores the request state: viewed by admin or not. |
User |
|
|
|
|
​ | Accessrights | Text | No | It determines the type of user |
| Created By | User | ​ | It stores the user who created a new costumer. |
| Default card | Number | ​ | It stores the index number of the CC repeating group |
| First Name | Text | ​ | Personal user first name |
| Gender | Gender | ​ | User Gender |
| Last Name | Text | ​ | Personal user last name |
| Last Seen | Date | ​ | Is used to determine the invoices which the user has already seen and which are new ones. |
| Location | Geogr. Addr. | ​ | Personal user location |
| Profile Photo | Image | ​ | Personal user profile photo |
​ | Requests | List of Requests | Yes | ​ |
Time Chart OS |
|
|
|
|
​ | Display | text | No | It is an option set which stores periods for chart filtering. |
Page Title | States | Element | Notes |
index | ​ | ​ | This is the first page of the template. The login and signup forms are here. You can login by filling your personal info or with demo login for customer or admin. |
​ | loginsignup | index | It lets to switch between Login and SignUp forms. |
invoice | ​ | ​ | This is the page where you can see your invoice PDF document and this is the page where the client can pay his invoice. This page can be accessed from the dashboard -> invoices -> file or from the link received on email when the invoice is created or the reminder is sent. |
terms |
| ​ | The page with the company terms and conditions which the users should take in considerations in order to use your service. This page can be accessed from the link in the footer. Only admin can edit the content. |
​ | Edit | terms | It lets to switch between edit mode and saved mode. |
404 | ​ | ​ | When a page with your domain doesn’t exist, this page will appear. |
dashboard | ​ | ​ | On this page are the main functionalities of the template. As there are 3 types of users: customer, manager and admin, there are 3 different dashboards which are described below: Customer dashboard - Home – customer is able to see the graph with visual statistics by year/ month/ week for expanses which he spent for invoices and on the right recent transactions to other parties. - Invoices – customer is able to see invoices issued to him, and they can be filtered by type: All, Paid, Pending, Received (just for customer) and by time: all, year, month, week. By clicking on Description/File it will redirect you to the Invoice page. Being a customer, a new invoice type will appear: Received, these are invoices issued to current user, here it is possible to pay the invoice without going on the Invoice page, just clicking on Unpaid status. - Settings – here user can change his personal data, password, and add/delete cards. Also, by clicking on any card you can set it by default card, it means every time user will pay, it won’t require his card details. The default card can be changed anytime. Manager dashboard - Home – manager is able to see the graph with visual statistics by year/ month/ week for expanses which he spent for invoices and on the right are the most recent paid invoices. - Invoices – in this tab manager is able to see paid, sent, pending, all invoices, is able to add new invoice for payment to a customer, when new invoice is created a mail is sent to customer. By clicking on edit invoice you can send a reminder to the client about his unpaid invoice. By clicking on the name, it will appear invoices issued just to that person. Also, you can search a client in the search input. By clicking on Description/File it will redirect you to the Invoice page. - Settings – in this tab manager will be able to manage his account details profile and privacy without payments. - My customers – in this tab manager sees the list of customers, and can add new customers, when adding new customer an email is sent to notify about it. - Send request – in this tab manager can send message to platform so the admin could see it in his admin panel and reply to it. Admin dashboard - Home – manager is able to see the graph with visual statistics by year/ month/ week for expanses which he spent for invoices and on the right are the most recent paid invoices. - Invoices – in this tab admin is able to see paid, sent, pending, all invoices, is able to add new invoice for payment to a customer, when new invoice is created a mail is sent to customer. By clicking on the name, it will appear invoices issued just to that person. Also, you can search a client in the search input. By clicking on Description/File it will redirect you to the Invoice page. Invoices – the list of all invoices (for admin) and the list of invoices created by current user and issued to current user (for customer). They can be filtered by type: All, Paid, Pending, Received (just for customer) and by time: all, year, month, week. Also, here you can add a new invoice, edit or delete them. Settings – in this tab manager will be able to manage his account details profile and privacy without payments. Customers – the list of all users from the app divided by types: All, Customers, Managers. Here you can create a new user. Requests – admin will see a list of message from manager user who sent the request. From this tab he'll also be able to sent back an email to user who wrote the message request. |
​ | invoice_filter | Dashboard | It filters invoices by type (Paid, Pending, Received) |
| invoice_time | Dashboard | It filters invoices by time (this week, this month, this year) |
| invoice_time_title | Dashboard | It is used for visual representation of the period you chose to filter invoices. |
| menu | Dashboard | It shows the group which have the same name as this state. |
| settings_menu | Dashboard | It switches between 3 tabs from the settings |
| time | Dashboard | It switches between period tabs from analytics diagram |
| users_filter | Dashboard | This is used just for admins. It filters user by their types (customer/admin) |
| customer | Popup Add New Invoice | Is used to determine the user it should make the changes. |
| open | FG menu RG | It is used to hide the desktop menu on mobile. |
| searchedUser | Group Search Options | It is used for searching all invoices of the selected user, on desktop |
| searchedUserMob | Group Search Options Mob | It is used for searching all invoices of the selected user, on mobile. |
privacy |
| ​ | The page with the company privacy rules which the users should take in considerations in order to use your service. This page can be accessed from the link in the footer. Only admin can edit the content. |
​ | Edit | privacy | It lets to switch between edit mode and saved mode. |
reset_pw |
| ​ | It allows you to reset the password, but only through the link received on email. |
Reusable Element | States | Type | Notes |
Header | - | - | - |
Footer | - | - | - |
This template uses Stripe Payment plugin To setup your stripe account, go to stripe.com, create an account. You will be allowed to 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 - Paste the API keys in the stripe settings tab of the plugin. See general documentation on how to set Stripe Payments in Bubble App
For security purposes the template has limited rights for demo users. What that means is that you will not be able to use the admin features at full until this template is purchased and enable the functionalities.
Below you could see the popup which appears for locked features:
In order to remove the locking, simply delete this popup from dashboard page.
Live Demo: https://invoicelytemplate.bubbleapps.io/​