dropways/deskapp

DeskApp Admin is a free to use Bootstrap 4 admin template.

deskapp

DeskApp Admin is a free to use Bootstrap 4 admin template. This template uses the default Bootstrap 4 styles along with a variety of powerful jQuery plugins and tools to create a powerful framework for creating admin panels or back-end dashboards.

Theme uses several libraries for charts, calendar, text forms, date range, upload area, form autocomplete, range slider, progress bars, notifications and much more.

We would love to see how you use this awesome admin template. You can notify us about your site. Once the list will grown long enough we will write a post similar to this to showcase the best examples.

Quick start

Several quick start options are available:

• Clone the repo: git clone https://github.com/dropways/deskapp.git
• Install with npm: npm install deskapp

Built With

• Bootstrap 4
• Bootstrap Select
• Bootstrap Tagsinput
• Bootstrap Touchspin
• Bootstrap-wysihtml5
• Moment Js
• Clipboard Js
• Air Datepicker
• Cropperjs
• Datatables
• Dropzone
• Fancybox 3
• Fullcalendar
• Highcharts
• Ion-rangeslider
• jQuery Ascolorpicker
• jQuery Asgradient
• jQuery Knob
• jQuery Steps
• Jvectormap
• Mcustom scrollbar
• Plyr
• Select2
• Slick Slider
• Sweetalert2
• Switchery
• Timedropper

Sample Screens

Demo link

A fully functional demo is available at

• demo 1 https://dropways.github.io/deskapp/
• demo 2 https://deskapp-dashboard.herokuapp.com/
• demo 3 https://deskapp.netlify.app/

Bugs Reports

Have a bug or a feature request? Please open a new issue.

MIT License

Copyright (c) 2018 DeskApp

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

deskapp's Issues

This is not an issue but a wish

Provide a way to collapse the left sidebar, (not only when is resized)

Off air

Steps to reproduce

when entering the site

Print of error

No needs to use role="navigation" on <nav aria-label="breadcrumb">

As defined on https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Navigation_Role

In gallery how to make full screen slideshow

I understand it is built on the fancybox how to make the image to cover the whole display on clicking the full-screen

the menu isn't active after it's clicked

Steps to reproduce

1. install the template into the codeigniter format
2. if I click one of the menus that are made, the menu is not automatically active

Expected result

1. when clicked the menu will automatically active

Actual result

1. after click menu not active
   
2. my code
   
3. header
   
4. footer
   

is there something wrong with the code? or what should I do?

Dark Mode and Bootstrap v5 plsssss

Pls add Dark Mode and Bootstrap v5

ReactJS integration

Some features not working when Integrated with ReactJS, eg. jQuery Steps ...

Would appreciate a solutions.

Country code flag icon is not showing on form in for loop

I am trying to getting flag icon on every edit form of each datatable row have edit button. but unfortunately I can see flag icon only in 1st row of edit form of datatable grid. and in other rows I am not able to see flag icon. Can you help us how can I modified my javascript so I can see flag icon on every edit form of each row of datatable.

NOTE : We have code is in Django Python and the variable is in DTL (djnango Template Language)

Datatable Code:

{{adduser.brl_name}}

<span class="dt-checkbox-label"> </span> </div> </th> <th>Department Name</th> <th>Name</th> <th>SMS No.</th> <th>WhatsApp No.</th> <th>Email</th> <th>Country</th> <th>City</th> <th>Zip Code</th> <th>Activity</th> </tr> </thead> <tbody> {% for vr in adduser.adduser.all %} <tr> <td></td> <td>{{vr.dept_nm}}</td> <td>{{vr.f_name}} {{vr.l_name}}</td> <td>{{vr.sms_no}}</td> <td>{{vr.whtsp_no}}</td> <td>{{vr.e_mail}}</td> <td>{{vr.country}}</td> <td>{{vr.city}}</td> <td>{{vr.zip}}</td> <td> <a href="#userEditModal-{{forloop.counter}}" data-toggle="modal" class="btn btn-primary" onclick="getCountryCode()"><span class="fa fa-pencil"></span> Edit</a> <a href="{% url 'deleteuser' id=vr.id %}" class="btn btn-danger" data-target="success-modal-delete"><span class="fa fa-trash"></span> Delete</a> </td> </tr> {% endfor %} </tbody> </table> </div> </div> HTML Code : <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.17/js/intlTelInput.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> Edit Form : {% for vr in adduser.adduser.all %} <div class="modal fade" id="userEditModal-{{forloop.counter}}" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true"> <div class="modal-dialog modal-lg modal-dialog-centered"> <div class="modal-content"> <form method="POST" action="{% url 'edituser' vr.id %}" class="needs-validation" novalidate> {% csrf_token %} <div class="modal-header"> <h5 class="modal-title">Edit Contact Data</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <!--Form Start--> <div class="form-row"> <div class="form-group col-md-6"> <label for="FirstName">First Name<span style="color:#ff0000">*</span></label> <input type="text" class="form-control" name="firstname" id="firstname" placeholder="Type FirstName here...." value="{{vr.f_name}}" required /> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> <div class="form-group col-md-6"> <label for="LastName">Last Name<span style="color:#ff0000">*</span></label> <input type="text" class="form-control" name="lastname" id="lastname" placeholder="Type LastName here...." value="{{vr.l_name}}" required /> </div> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="Address">Address Line1<span style="color:#ff0000">*</span></label> <input type="text" class="form-control" name="addln1" id="addln1" placeholder="Type Address here...." value="{{vr.add_ln1}}" required /> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> <div class="form-group col-md-6"> <label for="Address">Address Line2</label> <input type="text" class="form-control" name="addln2" id="addln2" placeholder="Type Address here...." value="{{vr.add_ln2}}" /> </div> </div> <div class="form-row"> <div class="form-group col-md-4"> <label for="Country">City<span style="color:#ff0000">*</span></label> <input type="text" class="form-control" name="city" id="city" placeholder="Type city here...." required value="{{vr.city}}" /> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> <div class="form-group col-md-4"> <label for="Country">Country<span style="color:#ff0000">*</span></label> <input type="text" class="form-control" name="country" id="country" placeholder="Type Country here...." value="{{vr.country}}" required /> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> <div class="form-group col-md-4"> <label for="Country">Zip Code<span style="color:#ff0000">*</span></label> <input type="text" class="form-control" name="zip" id="zip" placeholder="Type zipcode here...." value="{{vr.zip}}" required /> </div> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> <div class="form-row"> <div class="form-group col-md-6 smsForm_edit"> <label for="contact1">SMS No.<span style="color:#ff0000">*</span></label> <input type="tel" class="form-control" name="smsno_edit" id="smsno_edit" value="{{vr.sms_no}}" placeholder="SMS No." pattern="^(00|\+)[1-9]{1}([0-9][\s]*){9,16}$" required /> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please enter valid contact no.</div> </div> <div class="form-group col-md-6 whatsappForm_edit"> <label for="contact2">WhatsApp No.<span style="color:#ff0000">*</span></label> <input type="text" class="form-control" name="whtspno_edit" id="whtspno_edit" value="{{vr.whtsp_no}}" placeholder="WhatsApp No." pattern="^(00|\+)[1-9]{1}([0-9][\s]*){9,16}$" required /> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please enter valid contact no.</div> </div> </div> <script> const phoneInputField_edit = document.querySelector("#smsno_edit"); const phoneInputField2_edit = document.querySelector("#whtspno_edit"); const phoneInput_edit = window.intlTelInput(phoneInputField_edit, {}); const phoneInput2_edit = window.intlTelInput(phoneInputField2_edit, {}); $(document).ready(function () { $('.smsForm_edit .iti__flag-container').click(function () { var countryCode = $('.smsForm_edit .iti__selected-flag').attr('title'); var countryCode = countryCode.replace(/[^0-9]/g, ''); $('#smsno_edit').val(""); $('#smsno_edit').val("+" + countryCode + $('#smsno_edit').val()); }); $('.whatsappForm_edit .iti__flag-container').click(function () { var countryCode = $('.whatsappForm_edit .iti__selected-flag').attr('title'); var countryCode = countryCode.replace(/[^0-9]/g, ''); $('#whtspno_edit').val(""); $('#whtspno_edit').val("+" + countryCode + $('#whtspno_edit').val()); }); }); </script> <div class="form-row"> <div class="form-group col-md-6"> <label for="email">Email<span style="color:#ff0000">*</span></label> <input type="email" class="form-control" name="email" id="email" placeholder="Type email here...." value="{{vr.e_mail}}" pattern="[^@\s]+@[^@\s]+\.[^@\s]+" required /> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please enter valid email address.</div> </div> <div class="form-group col-md-6"> <label for="Department">Department Name<span style="color:#ff0000">*</span></label> <select class="form-control" name="deptnm" id="deptnm" required readonly> <option>{{vr.dept_nm}}</option> </select> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> </div> <div class="form-row"> <div class="form-group col-md-6"> <label>Broadcast list<span style="color:#ff0000">*</span></label> <input type="text" class="form-control" id="brdctlst" name="brdctlst" value="{{adduser.brl_name}}" readonly> </select> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> </div> <!--Form End--> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal"> Close </button> <button href="{% url 'broadcastlist' %}" id="UpdateUser" type="submit" class="btn btn-primary">Update</button> </div> </form> <div class="alert alert-info" style="display: none;"></div> </div> </div> </div> {% endfor %} <!--Edit Model End From Here-->

Unable to import core.css in angular style due to missing mCSB_buttons.png;

Steps to reproduce

1. Import core.css in new angular projects styles.css
2. And run ng serve

Expected result

1. Angular app should compile successfully

Actual result

1. Can't resolve '../malihu-custom-scrollbar-plugin-master/mCSB_buttons.png' in 'S:\kerp\kerp-admin-frontend\node_modules\deskapp\vendors\styles'

Solution -

Please add the missing png file on line 8539 of core.css or remove background image

selectepicker has no scrollbar

In basic form when i click on selectpicker no scrollbar is there

How can I install it?

Notes concept

I started an example of java ee and decided to use your theme. One of the concepts will be notes, therefore, I have created a view on html first. I will create a PR if you want to incorporate it.

autocomplete not working

autocomplete not working and 3 level side menu not working properly.....

project run slow

Steps to reproduce

1. click menu selection

Expected result

1. switch menu page to another page quickly

Actual result

1. almost cost 1~2 sec on loading

CPU 9750H GPU 1660ti-maxq
your project very beautifal, but a little slow to use.

gulp-clean-css required twice in gulpfile.js

why gulp-clean-css plugin required twice under "minify" line 12 and "cleanCSS" line 17 inside the gulpfile.js?

Separate Bootstrap css an site css

Is it possible to separate the bootstrap css from the vendors/styles/style.css?
It should be easier to upgrade bootstrap

How to display number of events counts in calendar view?

Steps to reproduce

jQuery(document).ready(function(){
jQuery('.datetimepicker').datepicker({
timepicker: true,
language: 'en',
range: true,
multipleDates: true,
multipleDatesSeparator: " - "
});
jQuery("#add-event").submit(function(){
alert("Submitted");
var values = {};
$.each($('#add-event').serializeArray(), function(i, field) {
values[field.name] = field.value;
});
console.log(
values
);
});
});

(function () {
//alert("in fucntion");
'use strict';
// ------------------------------------------------------- //
// Calendar
// ------------------------------------------------------ //
jQuery(function() {
// page is ready
//alert("in fucntion in in");
jQuery('#calendar').fullCalendar({
themeSystem: 'bootstrap4',
// emphasizes business hours
businessHours: false,
defaultView: 'month',
// event dragging & resizing
editable: true,
// header
header: {
left: 'title',
center: 'month,agendaWeek,agendaDay',
right: 'today prev,next'
},

        eventAfterAllRender: function(view) {

  $('#calendar .fc-day.fc-widget-content').each(function(i) {
    var date = $(this).data('date');
    var count = $('#calendar a.fc-event.event-on-' + date).length;

    if (count > 0) {
      $(this).html('<div class="fc-event-count">+' + count + '<div>');
    }
  });
},

eventRender: function (event, element, view) { 
        $(element).each(function () { 
            $(this).attr('date-num', event.start.format('YYYY-MM-DD')); 
        });
    },

		events: [
			{
				title: 'Barber',
				description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.',
				start: '2022-10-05',
				
				className: 'fc-bg-default',
				
			},
			{
				title: 'Flight Paris',
				description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.',
				start: '2022-10-08T14:00:00',
				
				className: 'fc-bg-deepskyblue',
				
				allDay: false
			},
			{
				title: 'Team Meeting',
				description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.',
				start: '2022-10-10T13:00:00',
				
				className: 'fc-bg-pinkred',
				
				allDay: false
			},
			{
				title: 'Meeting',
				description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.',
				start: '2022-10-12',
				className: 'fc-bg-lightgreen',
				
			},
			{
				title: 'Conference',
				description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.',
				start: '2022-10-13',
				
				className: 'fc-bg-lightgreen',
				
			},
            {
				title: 'Conference',
				description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.',
				start: '2022-10-13',
				
				className: 'fc-bg-lightgreen',
				
			 },
             {
				title: 'Conference',
				description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.',
				start: '2022-10-13',
				
				className: 'fc-bg-lightgreen',
				
			 },

             {
				title: 'Conference',
				description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.',
				start: '2022-10-13',
				
				className: 'fc-bg-lightgreen',
				
			 },

             {
				title: 'Conference',
				description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.',
				start: '2022-10-13',
				
				className: 'fc-bg-lightgreen',
				
			 },
			{
				title: 'Baby Shower',
				description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.',
				start: '2022-10-13',
				
				className: 'fc-bg-default',
				
			},
			{
				title: 'Birthday',
				description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.',
				start: '2022-10-13',
				
				className: 'fc-bg-default',
				
			},
			{
				title: 'Restaurant',
				description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.',
				start: '2022-10-15T09:30:00',
				
				className: 'fc-bg-default',
				
				allDay: false
			},
			{
				title: 'Dinner',
				description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.',
				start: '2022-10-15T20:00:00',
				
				className: 'fc-bg-default',
				
				allDay: false
			},
			{
				title: 'Shooting',
				description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.',
				start: '2022-10-25',
				
				className: 'fc-bg-blue',
				
			},
			{
				title: 'Go Space :)',
				description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.',
				start: '2022-10-27',
				
				className: 'fc-bg-default',
				
			},
			{
				title: 'Dentist',
				description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.',
				start: '2022-10-29T11:30:00',
				
				className: 'fc-bg-blue',
				
				allDay: false
			}
		],
		
		dayClick: function(date, allDay, jsEvent, view) {
			// jQuery('#modal-view-event-add').modal();


            
           
           location.href=('gridViewc');


		},
		eventClick: function(event, jsEvent, view) {
		        jQuery('.event-icon').html("<i class='fa fa-"+event.icon+"'></i>");
				jQuery('.event-title').html(event.title);
				jQuery('.event-body').html(event.description);
				jQuery('.eventUrl').attr('href',event.url);
				// jQuery('#modal-view-event').modal();
                location.href=('gridViewc');
                
		},

        

	})
});

})(jQuery);
</script>

Expected result

Actual result

1. [Screenshot, logs]

as per screenshot I have highlighted count area that functionality currently I try i am able to fetch no. of count on day but how can I show in calender view date cell?

Herokuapp Demo Not working

Steps to reproduce

Came to know about this theme from Themewagon (https://themewagon.com/themes/free-bootstrap-4-html5-responsive-admin-dashboard-template-deskapp/) and wanted to use this for my cross-platform desktop app. but sample there is not working same as the Herokuapp Demo mentioned in the readme.
Just click on second sample link : https://deskapp-dashboard.herokuapp.com/

Expected result

Should open the Demo

Actual result (Screem Message)

Application error

An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details. You can do this from the Heroku CLI with the command
heroku logs --tail

Highcharts issue

Steps to reproduce

add to "vendors\scripts\highchart-setting.js" for chart1:
Highcharts.chart('chart1', {
chart: {
type: 'spline'
},
plotOptions: {
spline: {
marker: {
enabled: false
}
},
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},

Expected result

no datapoint symbols on lines and colored dashes as prefix for legend

Actual result

no datapoint symbols on lines and no prefix for legend

If you want to get line chart without datapoints symbols, you should add follow code:
plotOptions: { spline: { marker: { enabled: false } } }
But it also removes colored prefixes from legend. Originally, it should remove only symbols from legend, but left colored lines as prefix for line labels.

Please, make some css class to unmargin and unpadding lists (ol, ul), don't do it globally

google map error

[Question] Why does the scrollbar extend up into the top nav?

The first thing I noticed after encountering this admin template was how clean and polished it looked.

Not 2 seconds later I was surprised by the way the top nav continues to change position every time a modal dialog is displayed - causing the scrollbar to disappear. Because the scrollbar extends the entire length of the page - including the top nav - when the scrollbar disappears, the top nav shifts right... when the scrollbar reappears, the top nav shifts back left!

Is there a way to not extend up into the top nav? The "main-container" and "header" divs are completely separate, so I assume this behavior is being affected by JavaScript somewhere? Whatever is responsible for this behavior... I don't think it's desirable.

Jason

Right to left support

Right to left support
I did not find support from right to left

Can you provide the file list you included in "vendors/styles/style.css" and "vendors/scripts/stript.js" file?

Demo

Hi,
I report you that the demo page is not working.

Scroll problems

Hi I'm italian so Sorry foto my English. I used deskapp to create my software but i see that scroll doesn't work by phone. The deskapp demo gave me the same problems, i Can scroll It touching the navbar on the right side, but i cant scroll the Page with my finger touch. What Can i do?
Thanks

Printing Document

how to change the text DeskApp Dashboard on printing a document or in DataTable? response pls

validate form step wizard

Hi, how can i do to validate input at form wizard?

Icons not responding

Hello, the template at the moment works perfectly but when creating an html within a directory not in the root, the icons disappear. I would greatly appreciate an answer to be able to solve it. Best regards.

how to fetch row values on checkbox selection?

Steps to reproduce

Expected result

Actual result

1. [Screenshot, logs]