### 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`

##### 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`

##### 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`

##### 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`

### Advanced view

##### Gridview Datatable

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

##### Kanban View

1. In this view you can manage staging and pipelines like task management.
2. Add update delete tasks and can modified kanban view with your choice.
3. please check the usages in `resources/js/app/components/views/Demo/Pages/kanban-view`

##### Calendar View

1. In this view you can manage event, schedule, calendar (add, update, delete).
2. please check the usages in `resources/js/app/components/views/Demo/Pages/calendar-view`

##### Report

1. There is a demo example by how you can show reports.
2. please check the usages in `resources/js/app/components/views/Demo/Pages/Report.vue`

##### Chat

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

##### Payment Method

1. Paypal and Stripe payments method already integrated into this application. You can make it usable for your application as you want.
2. Go to "Settings" > Payment Methods > Add Payment Method
3. See documentation from here : Paypal | Stripe
4. 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.

##### 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

1. ###### 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

2. ###### 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.

3. ###### 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.`

4. ###### 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

##### 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.

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

How to get pusher broadcasting setup credential

1. Sign in pusher.com
2. Create a app from dashboard.pusher.com/channels
3. 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.