initial commit

This commit is contained in:
2025-11-11 14:55:29 +07:00
commit 7c17aa7843
2490 changed files with 606138 additions and 0 deletions

View File

@@ -0,0 +1,79 @@
"use strict";
// Class definition
var KTProjectList = function () {
var initChart = function () {
// init chart
var element = document.getElementById("kt_project_list_chart");
if (!element) {
return;
}
var config = {
type: 'doughnut',
data: {
datasets: [{
data: [30, 45, 25],
backgroundColor: ['#00A3FF', '#50CD89', '#E4E6EF']
}],
labels: ['Active', 'Completed', 'Yet to start']
},
options: {
chart: {
fontFamily: 'inherit'
},
borderWidth: 0,
cutout: '75%',
cutoutPercentage: 65,
responsive: true,
maintainAspectRatio: false,
title: {
display: false
},
animation: {
animateScale: true,
animateRotate: true
},
stroke: {
width: 0
},
tooltips: {
enabled: true,
intersect: false,
mode: 'nearest',
bodySpacing: 5,
yPadding: 10,
xPadding: 10,
caretPadding: 0,
displayColors: false,
backgroundColor: '#20D489',
titleFontColor: '#ffffff',
cornerRadius: 4,
footerSpacing: 0,
titleSpacing: 0
},
plugins: {
legend: {
display: false
}
}
}
};
var ctx = element.getContext('2d');
var myDoughnut = new Chart(ctx, config);
}
// Public methods
return {
init: function () {
initChart();
}
}
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTProjectList.init();
});

View File

@@ -0,0 +1,316 @@
"use strict";
// Class definition
var KTProjectOverview = function () {
// Colors
var primary = KTUtil.getCssVariableValue('--bs-primary');
var lightPrimary = KTUtil.getCssVariableValue('--bs-primary-light');
var success = KTUtil.getCssVariableValue('--bs-success');
var lightSuccess = KTUtil.getCssVariableValue('--bs-success-light');
var gray200 = KTUtil.getCssVariableValue('--bs-gray-200');
var gray500 = KTUtil.getCssVariableValue('--bs-gray-500');
// Private functions
var initChart = function () {
// init chart
var element = document.getElementById("project_overview_chart");
if (!element) {
return;
}
var config = {
type: 'doughnut',
data: {
datasets: [{
data: [30, 45, 25],
backgroundColor: ['#00A3FF', '#50CD89', '#E4E6EF']
}],
labels: ['Active', 'Completed', 'Yet to start']
},
options: {
chart: {
fontFamily: 'inherit'
},
cutoutPercentage: 75,
responsive: true,
maintainAspectRatio: false,
cutout: '75%',
title: {
display: false
},
animation: {
animateScale: true,
animateRotate: true
},
tooltips: {
enabled: true,
intersect: false,
mode: 'nearest',
bodySpacing: 5,
yPadding: 10,
xPadding: 10,
caretPadding: 0,
displayColors: false,
backgroundColor: '#20D489',
titleFontColor: '#ffffff',
cornerRadius: 4,
footerSpacing: 0,
titleSpacing: 0
},
plugins: {
legend: {
display: false
}
}
}
};
var ctx = element.getContext('2d');
var myDoughnut = new Chart(ctx, config);
}
var initGraph = function () {
var element = document.getElementById("kt_project_overview_graph");
var height = parseInt(KTUtil.css(element, 'height'));
if (!element) {
return;
}
var options = {
series: [{
name: 'Incomplete',
data: [70, 70, 80, 80, 75, 75, 75]
}, {
name: 'Complete',
data: [55, 55, 60, 60, 55, 55, 60]
}],
chart: {
type: 'area',
height: height,
toolbar: {
show: false
}
},
plotOptions: {
},
legend: {
show: false
},
dataLabels: {
enabled: false
},
fill: {
type: 'solid',
opacity: 1
},
stroke: {
curve: 'smooth',
show: true,
width: 3,
colors: [primary, success]
},
xaxis: {
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
labels: {
style: {
colors: gray500,
fontSize: '12px'
}
},
crosshairs: {
position: 'front',
stroke: {
color: primary,
width: 1,
dashArray: 3
}
},
tooltip: {
enabled: true,
formatter: undefined,
offsetY: 0,
style: {
fontSize: '12px'
}
}
},
yaxis: {
labels: {
style: {
colors: gray500,
fontSize: '12px',
}
}
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px',
},
y: {
formatter: function (val) {
return val + " tasks"
}
}
},
colors: [lightPrimary, lightSuccess],
grid: {
borderColor: gray200,
strokeDashArray: 4,
yaxis: {
lines: {
show: true
}
}
},
markers: {
//size: 5,
colors: [lightPrimary, lightSuccess],
strokeColor: [primary, success],
strokeWidth: 3
}
};
var chart = new ApexCharts(element, options);
chart.render();
}
var initTable = function () {
var table = document.querySelector('#kt_profile_overview_table');
if (!table) {
return;
}
// Set date data order
const tableRows = table.querySelectorAll('tbody tr');
tableRows.forEach(row => {
const dateRow = row.querySelectorAll('td');
const realDate = moment(dateRow[1].innerHTML, "MMM D, YYYY").format();
dateRow[1].setAttribute('data-order', realDate);
});
// Init datatable --- more info on datatables: https://datatables.net/manual/
const datatable = $(table).DataTable({
"info": false,
'order': []
});
// Filter dropdown elements
const filterOrders = document.getElementById('kt_filter_orders');
const filterYear = document.getElementById('kt_filter_year');
// Filter by order status --- official docs reference: https://datatables.net/reference/api/search()
filterOrders.addEventListener('change', function (e) {
datatable.column(3).search(e.target.value).draw();
});
// Filter by date --- official docs reference: https://momentjs.com/docs/
var minDate;
var maxDate;
filterYear.addEventListener('change', function (e) {
const value = e.target.value;
switch (value) {
case 'thisyear': {
minDate = moment().startOf('year').format();
maxDate = moment().endOf('year').format();
datatable.draw();
break;
}
case 'thismonth': {
minDate = moment().startOf('month').format();
maxDate = moment().endOf('month').format();
datatable.draw();
break;
}
case 'lastmonth': {
minDate = moment().subtract(1, 'months').startOf('month').format();
maxDate = moment().subtract(1, 'months').endOf('month').format();
datatable.draw();
break;
}
case 'last90days': {
minDate = moment().subtract(30, 'days').format();
maxDate = moment().format();
datatable.draw();
break;
}
default: {
minDate = moment().subtract(100, 'years').startOf('month').format();
maxDate = moment().add(1, 'months').endOf('month').format();
datatable.draw();
break;
}
}
});
// Date range filter --- offical docs reference: https://datatables.net/examples/plug-ins/range_filtering.html
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var min = minDate;
var max = maxDate;
var date = parseFloat(moment(data[1]).format()) || 0; // use data for the age column
if ((isNaN(min) && isNaN(max)) ||
(isNaN(min) && date <= max) ||
(min <= date && isNaN(max)) ||
(min <= date && date <= max)) {
return true;
}
return false;
}
);
// Search --- official docs reference: https://datatables.net/reference/api/search()
var filterSearch = document.getElementById('kt_filter_search');
filterSearch.addEventListener('keyup', function (e) {
datatable.search(e.target.value).draw();
});
}
// Public methods
return {
init: function () {
initChart();
initGraph();
initTable();
}
}
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTProjectOverview.init();
});

View File

@@ -0,0 +1,104 @@
"use strict";
// Class definition
var KTProjectSettings = function () {
// Private functions
var handleForm = function () {
// Init Datepicker --- For more info, please check Flatpickr's official documentation: https://flatpickr.js.org/
$("#kt_datepicker_1").flatpickr();
// Form validation
var validation;
var _form = document.getElementById('kt_project_settings_form');
var submitButton = _form.querySelector('#kt_project_settings_submit');
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
validation = FormValidation.formValidation(
_form,
{
fields: {
name: {
validators: {
notEmpty: {
message: 'Project name is required'
}
}
},
type: {
validators: {
notEmpty: {
message: 'Project type is required'
}
}
},
description: {
validators: {
notEmpty: {
message: 'Project Description is required'
}
}
},
date: {
validators: {
notEmpty: {
message: 'Due Date is required'
}
}
},
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
submitButton: new FormValidation.plugins.SubmitButton(),
//defaultSubmit: new FormValidation.plugins.DefaultSubmit(), // Uncomment this line to enable normal button submit after form validation
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row'
})
}
}
);
submitButton.addEventListener('click', function (e) {
e.preventDefault();
validation.validate().then(function (status) {
if (status == 'Valid') {
swal.fire({
text: "Thank you! You've updated your project settings",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn fw-bold btn-light-primary"
}
});
} else {
swal.fire({
text: "Sorry, looks like there are some errors detected, please try again.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn fw-bold btn-light-primary"
}
});
}
});
});
}
// Public methods
return {
init: function () {
handleForm();
}
}
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTProjectSettings.init();
});

View File

@@ -0,0 +1,38 @@
"use strict";
// Class definition
var KTProjectTargets = function () {
var initDatatable = function () {
const table = document.getElementById('kt_profile_overview_table');
// set date data order
const tableRows = table.querySelectorAll('tbody tr');
tableRows.forEach(row => {
const dateRow = row.querySelectorAll('td');
const realDate = moment(dateRow[1].innerHTML, "MMM D, YYYY").format();
dateRow[1].setAttribute('data-order', realDate);
});
// init datatable --- more info on datatables: https://datatables.net/manual/
const datatable = $(table).DataTable({
"info": false,
'order': [],
"paging": false,
});
}
// Public methods
return {
init: function () {
initDatatable();
}
}
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTProjectTargets.init();
});

View File

@@ -0,0 +1,52 @@
"use strict";
// Class definition
var KTProjectUsers = function () {
var initTable = function () {
// Set date data order
const table = document.getElementById('kt_project_users_table');
if (!table) {
return;
}
const tableRows = table.querySelectorAll('tbody tr');
tableRows.forEach(row => {
const dateRow = row.querySelectorAll('td');
const realDate = moment(dateRow[1].innerHTML, "MMM D, YYYY").format();
dateRow[1].setAttribute('data-order', realDate);
});
// Init datatable --- more info on datatables: https://datatables.net/manual/
const datatable = $(table).DataTable({
"info": false,
'order': [],
"columnDefs": [{
"targets": 4,
"orderable": false
}]
});
// Search --- official docs reference: https://datatables.net/reference/api/search()
var filterSearch = document.getElementById('kt_filter_search');
if (filterSearch) {
filterSearch.addEventListener('keyup', function (e) {
datatable.search(e.target.value).draw();
});
}
}
// Public methods
return {
init: function () {
initTable();
}
}
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTProjectUsers.init();
});