Documentation - ReadyKit

Layout overview

The dashboard is mostly designed by Bootstrap. You can find the documentation here getbootstrap.com
In our ReadyKit app we use app-navbar and sidebar component For layout view. Here the developer guideline for working with sidebar and navbar resources/js/core/components/layouts/readme.md

Components overview

To design a complete application almost all of the necessary components are built here. You can use your custom design components also for your application. All the components are built with VueJS.

Avatars

To use the component you have to call app-avatar. There many types of image avatar design available. See the full documentation of this component in the directory resources/js/core/components/avatars/readme.md. You can also find groups of avatars documentation here resources/js/core/components/avatars-group/readme.md

Badges & Notes

There are numbers of badges & notes available here. To use the badge component you have to call app-badge and note component call app-note See the full documentation of badge and note component in resources/js/core/components/badge/readme.md

Buttons

To use the button component you have to call app-button. See the full documentation of button component in resources/js/core/components/buttons/readme.md

Breadcrumb

To use the component you have to call app-breadcrumb. See the full documentation of this component in the directory resources/js/core/components/breadcrumb/readme.md

Icons

We used "Feather Icon" in our application. You can see all their icons here feathericons.com. We built a app-icon component to use icon anywhere. You just have to pass the icon name. See details documentation of icon component resources/js/core/components/icon/readme.md

Media Object

To use the component you have to call app-media-object. Contains image title and subtitle. Full uses documentation here resources/js/core/components/media-object/readme.md.

Modals

For anything confirmation like yes or no with modal. You may call app-confirmation-modal. See documentation on modal from resources/js/core/components/confirmation-modal/readme.md

Confirmation Modals

We provide different designed modal for webpage. Using app-modal component you can add modal to any page. See documentation on modal from resources/js/core/components/modal/readme.md

Form Input

By calling app-input you can add different kind of inputs in a web page. See details documentation of input here resources/js/core/components/input/readme.md

Charts

There we have different type of charts for viewing statistically. we build app-chart component for this. There have different type of chart available here. Find the detail documentation on chart from resources/js/core/components/charts/readme.md

Datatable

Datatable is one of the premium component of our dashboard. With a lot of filters type you can easily display and manipulate your data in a table. Find the detail documentation on datatable from resources/js/core/components/datatable/readme.md

Custom Datatable

To make the Datatable more dynamic we introduce Custom Datatable feature to this application where you can add any datatable for the defined context.

You can add Custom Datatable in the Settings >> Custom Table section.

Add Custom Datatable

You can add any custom datatable by specifying name, context and columns. Here context is very important. Custom datatable option will be shown in the side menu according to the context. By default we added only one context named datatable and showed in the Sidebar's Datatables section.
Custom Datatable Context

For adding multiple context for showing custom datatable in multiple module you have to add some code to some specific files.
1. To add context to custom datatable create form please go to resources/js/app/Components/Views/Settings/CustomTable/CustomTableModal.vue file and modify the context select option to add more context.
2. For viewing the Custom table to the Sidebar menu please go to app/Http/Composer/SidebarComposer.php file and merge the custom table to the submenu option as like as the example. You only have to change the context name to filter out the specific custom tables for that menu.

Tabs

We provide both horizontal and vertical tab design for application. See full app-tab component documentation from resources/js/core/components/tabs/readme.md

Group Tabs

We provide Group tab design for application. See full app-tab-group component documentation from resources/js/core/components/tabs-group/readme.md

Loader

We provide Overlay-loader, Pre-loader and Skeleton-loader for application. See full app-tab component documentation from resources/js/core/components/tabs/readme.md

Form wizard

We provide form wizard design for application. It will help you to give permission to others tabs. See full app-form-wizard component documentation from resources/js/core/components/form-wizard/readme.md

Advance Datatable

List view

Use laravel export package for datatable export functionality. Documentation

Gridview Datatable

First you should use app-table component.
Then we should send cardView = true in options of datatable component.
And then send componentName = 'YourComponentName' in options which is your desire card. where you can inject your own design.
please check the usages in resources/js/app/components/views/Demo/tables/grid-view
List view
Grid view

Chat

This is the view of Chat. You can chat with the application users. Before that, you have to configure the pusher.
please check the usages in resources/js/app/components/views/Demo/Pages/chat/Index.vue

Invoice

This is the view of Invoice. You can use the view.
please check the usages in resources/js/app/Components/Views/Demo/Pages/Invoice.vue

Maps

This is the view of Maps. You can use the view.
please check the usages in resources/js/app/Components/Views/Demo/Pages/map/index.vue

Payment Method

Paypal and Stripe payments method already integrated into this application. You can make it usable for your application as you want.
Go to "Settings" > Payment Methods > Add Payment Method
See documentation from here : Paypal | Stripe | Razorpay
please check the usages in resources/js/app/components/views/Demo/Pages/PaymentMethodView.vue

User & Roles

Users and Roles management is an important feature for any application. You may need different types of Roles for Users. For that you have to create roles as you required and gives them permission to access.

Users

Click on Invite User, It will open a modal which requires User Email and Roles that will assigned to that user. Invited user will get an confirmation email with a link. That link will redirect to a page where user can set their basic information.
In Users table you can search by user's 'first name', 'last name' and user's 'email'. And also can filtered by 'Active', 'Inactive', 'Invited'.
There are some options in users table action buttons. These options are 'Edit', 'Delete', 'De-activate', 'Active', 'Manage Role'. For invited users 'De-activate', 'Active', options will not be available.
Pressing on 'Edit' button a modal will come and here you can change user's first name nad last name.
You can manage roles of any user by clicking on 'Manage Role' of that specific user from "Action" column.

Roles

Click on Add Role, It will open a modal which requires Role name and permissions for that role
You can manage users of any role by clicking on 'Manage Users' of that specific role from "Action" column.
You can manage permissions of any role by clicking on 'Manage' of that specific role from "Permission" column also.

Settings

We provide some basic settings in our application which will faster your development

General Settings

Go to "Settings" > "General Setting"

In this setting you can set your company name.
You can upload company logo, icon and banner.
Change suitable Language for application.
Set Date and Time format and Timezone the way you want to see date/time in your application .
Decimal separator, Thousand separator, Number of decimal also can be set.
Enable or disable user registration feature.

Email Settings

Go to "Settings" > "Email Setting"

From this setting you can set your email delivery for your application

We provide 6 supported mail services for set email

Amazon SES

Amazon SES needed Api Region, Access Key, Secret Access key, Host name, From name and From email to set up.

Follow this link to know how you can verify the email address
Mailgun

To set up Mailgun you will need a Domain name (Here is how you can add domain in mailgun), API key, From name, and From email.
SMTP

To set SMTP mail service provider you need to set smtp host, Port, Password to access from the email sent and a encryption type, N.B: Don't forget to enable less secure app permission in the email which you sent from.
Sendmail

Sendmail needs a host name, port, username and password to access to the mail.

SMS Settings

Go to "Settings" > "SMS Setting"

This setting will help you to send SMS to your application user

We use Nexmo for sending SMS. See Nexmo documentation from here

We also use Twilio for sending SMS. See Twilio documentation from here

ReCAPTCHA Settings

Go to "Settings" > "ReCAPTCHA Setting"

To enable reCaptcha in authentication you have to enter your site key and secret key from google

See documentation from here here

Broadcasting Setup

Go to .env file > Configure your Pushser with proper credentials.

In the .env file, Change the "BROADCAST_DRIVER=pusher".
Configure your pusher to provide credentials.

How to get pusher broadcasting setup credential

Sign in pusher.com
Create a app from dashboard.pusher.com/channels
Login "Pusher" > Can view "Channels" > Select your application name > Click on "App keys" from the left side menu > Now you can generate "Pusher" credentials.

Notification Settings

Go to "Settings" > "Notification Setting"

You can update settings from here and Also can update the template of notification. You have the following option in notification setting:

You can set channels where the notification will send.
You can set choose users who will be notified on selected event.
You can set choose roles to set these audiences under that roles to get notified.
You can set up the template for the notification.

Storage Configuration

Go to "Settings" > "Storage Configuration"

You can update settings from here and Also can update the storage location.

Configure your AWS S3 with valid credentials

How to get AWS S3 setup credential

Create IAM User for AWS S3 (Credentials - Access key id and secret access key)

Sign in aws.amazon.com
Click My security Credentials at the top right corner dropdown
Click Users Menu from left panel
Click Add user button
Enter any user name then click Next
Set permission for the user
Review user information and click create user
Select user name from the list
Select security credentials from the menu
Scroll down and click on Create access key
Choose following use cases and alternatives and click on next
Set description tag if if needed and click on Create access key
Copy "Access key" as well as "Secret access key" and click on Done

S3 Bucket Creation

Sign in aws.amazon.com
Search for s3(Scalable storage in the cloud)
Click Create Bucket
Review all input if necessary than click Create bucket
Click on newly created bucket for adding policies
Click on Permissions from the menu and click edit button of Bucket policy

Add policy and click on save changes. Reference

                            
                            {
                                "Version": "2012-10-17",
                                "Statement": [
                                    {
                                        "Sid": "PublicReadGetObject",
                                        "Effect": "Allow",
                                        "Principal": "*",
                                        "Action": "s3:GetObject",
                                        "Resource": "arn:aws:s3:::bucket_name/*"
                                    }
                                ]
                            }

Now again in the permissions menu scroll down to find Cross-origin resource sharing (CORS) and click on edit button.

Add CORS policy and finally click on save changes. Reference [Use example 1]

                        
                            [
                        {
                            "AllowedHeaders": [
                                "*"
                            ],
                            "AllowedMethods": [
                                "GET",
                                "PUT",
                                "POST",
                                "DELETE"
                            ],
                            "AllowedOrigins": [
                                "https://domain.test/"
                            ],
                            "ExposeHeaders": []
                        },
                        {
                            "AllowedHeaders": [
                                "*"
                            ],
                            "AllowedMethods": [
                                "GET",
                                "PUT",
                                "POST",
                                "DELETE"
                            ],
                            "AllowedOrigins": [
                                "https://domain.test/"
                            ],
                            "ExposeHeaders": []
                        },
                        {
                            "AllowedHeaders": [],
                            "AllowedMethods": [
                                "GET"
                            ],
                            "AllowedOrigins": [
                                "*"
                            ],
                            "ExposeHeaders": []
                        }
                    ]