feat: Admin payment reports

assets/src/utils/Bootstrap.js

@@ -12,6 +12,10 @@ import Multiselect from 'vue-multiselect'
 import Modal from './components/Modal.vue'
 import Switches from './components/Switches.vue'
 import "vue-multiselect/dist/vue-multiselect.min.css"
+import * as VueChartJS from 'vue-chartjs'
+
+import * as Date_Helper from './date-helper';
+window.Date_Helper = Date_Helper;
 
 import dayjs from 'dayjs';
 window.dayjs = dayjs;
@@ -28,6 +32,9 @@ Vue.use(VueDatePicker, {
     lang: 'en'
 });
 
+import DateRangePicker from 'vue2-daterange-picker';
+import 'vue2-daterange-picker/dist/vue2-daterange-picker.css';
+
 Vue.directive( 'tooltip', VTooltip )
 Vue.directive( 'close-popover', VClosePopover )
 Vue.component( 'v-popover', VPopover )
@@ -73,16 +80,18 @@ window.wepos_get_lib = function( lib ) {
 
 export const EventBus = new Vue();
 
-window.weLo_                    = _;
-window.wepos._                  = _;
-window.wepos.api                = new API_Helper();
-window.wepos.libs['Vue']        = Vue;
-window.wepos.libs['Router']     = Router;
-window.wepos.libs['Vuex']       = Vuex;
-window.wepos.libs['TextEditor'] = TextEditor;
-window.wepos.libs['EventBus']   = EventBus;
-window.wepos.libs['Modal']      = Modal;
-window.wepos.libs['Switches']   = Switches;
+window.weLo_                         = _;
+window.wepos._                       = _;
+window.wepos.api                     = new API_Helper();
+window.wepos.libs['Vue']             = Vue;
+window.wepos.libs['Router']          = Router;
+window.wepos.libs['Vuex']            = Vuex;
+window.wepos.libs['TextEditor']      = TextEditor;
+window.wepos.libs['EventBus']        = EventBus;
+window.wepos.libs['Modal']           = Modal;
+window.wepos.libs['Switches']        = Switches;
+window.wepos.libs['DateRangePicker'] = DateRangePicker;
+window.wepos.libs['VueChartJS']      = VueChartJS;
 
 // WordPress Hooks
 import { createHooks } from '@wordpress/hooks';

assets/src/utils/date-helper.js

@@ -0,0 +1,123 @@
+/**
+ * Get DayJS supported date format.
+ *
+ * @since WEPOS_LITE_SINCE
+ *
+ * @param {string} dateFormat The date format to convert
+ *
+ * @return {string} DayJS supported date format
+ */
+export function wepos_get_dayjs_date_format( dateFormat = wepos.wp_date_format ) {
+    let formatMap = {
+        // Day
+        d: 'DD',
+        D: 'ddd',
+        j: 'D',
+        // Month
+        F: 'MMM',
+        m: 'MM',
+        M: 'MMM',
+        n: 'M',
+        // Year
+        Y: 'YYYY',
+        y: 'YY'
+    }
+
+    let dayJsDateFormat = '';
+
+    for ( let i = 0; i < dateFormat.length; i++ ) {
+        const char = dateFormat[i];
+
+        dayJsDateFormat += formatMap[char] ? formatMap[char] : char;
+    }
+
+    return dayJsDateFormat;
+}
+
+/**
+ * Get date range picker supported date format.
+ *
+ * @since WEPOS_LITE_SINCE
+ *
+ * @param {string} dateFormat The date format to convert
+ *
+ * @return {string} Date range picker supported date format
+ */
+export function wepos_get_daterange_picker_date_format( dateFormat = wepos.wp_date_format ) {
+    let formatMap = {
+        // Day
+        d: 'dd',
+        D: 'ddd',
+        j: 'd',
+        // Month
+        F: 'mmmm',
+        m: 'mm',
+        M: 'mmm',
+        n: 'm',
+        // Year
+        Y: 'yyyy',
+        y: 'yy'
+    }
+
+    let dateRangePickerFormat = '';
+
+    for ( let i = 0; i < dateFormat.length; i++ ) {
+        const char = dateFormat[i];
+
+        dateRangePickerFormat += formatMap[char] ? formatMap[char] : char;
+    }
+
+    return dateRangePickerFormat;
+}
+
+/**
+ * Get custom date ranges.
+ *
+ * @since WEPOS_LITE_SINCE
+ *
+ * @param {string} dateContext The date context
+ *
+ * @return {array} Date range
+ */
+export function wepos_get_custom_date_ranges( dateContext = "this year" ) {
+    let dateRange = [];
+
+    switch ( dateContext ) {
+        case "today":
+            dateRange["start"] = dayjs().startOf('day').toDate();
+            dateRange["end"]   = dayjs().endOf('day').toDate();
+            break;
+
+        case "yesterday":
+            dateRange["start"] = dayjs().subtract( 1, 'days' ).startOf( 'day' ).toDate();
+            dateRange["end"]   = dayjs().subtract( 1, 'days' ).endOf( 'day' ).toDate();
+            break;
+
+        case "this week":
+            dateRange["start"] = dayjs().startOf( 'week' ).toDate();
+            dateRange["end"]   = dayjs().endOf( 'week' ).toDate();
+            break;
+
+        case "this month":
+            dateRange["start"] = dayjs().startOf( 'month' ).toDate();
+            dateRange["end"]   = dayjs().endOf( 'month' ).toDate();
+            break;
+
+        case "this quarter":
+            dateRange["start"] = dayjs().startOf( 'quarter' ).toDate();
+            dateRange["end"]   = dayjs().endOf( 'quarter' ).toDate();
+            break;
+
+        case "last month":
+            dateRange["start"] = dayjs().subtract( 1, 'months' ).startOf( 'month' ).toDate();
+            dateRange["end"]   = dayjs().subtract( 1, 'months' ).endOf( 'month' ).toDate();
+            break;
+
+        case "this year":
+        default:
+            dateRange["start"] = dayjs().startOf( 'year' ).toDate();
+            dateRange["end"]   = dayjs().endOf( 'year' ).toDate();
+    }
+
+    return dateRange;
+}

includes/Admin/Admin.php

@@ -69,10 +69,12 @@ public function enqueue_scripts() {
         wp_enqueue_style( 'wepos-style' );
         wp_enqueue_style( 'wepos-bootstrap' );
         wp_enqueue_style( 'wepos-admin' );
+        wp_enqueue_style( 'wepos-select2' );
 
         wp_enqueue_script( 'wepos-tinymce-plugin' );
         wp_enqueue_script( 'wepos-vendor' );
         wp_enqueue_script( 'wepos-blockui' );
+        wp_enqueue_script( 'wepos-select2' );
 
         wp_enqueue_script( 'wepos-bootstrap' );
         do_action( 'wepos_load_admin_scripts' );

includes/Assets.php

@@ -107,6 +107,11 @@ public function get_scripts() {
                 'version'   => filemtime( WEPOS_PATH . '/assets/js/vendor'. $prefix .'.js' ),
                 'in_footer' => true
             ],
+            'wepos-select2' => [
+                'src'       => WEPOS_ASSETS . '/js/select2.min.js',
+                'version'   => filemtime( WEPOS_PATH . '/assets/js/select2.min.js' ),
+                'in_footer' => true
+            ],
             'wepos-bootstrap' => [
                 'src'       => WEPOS_ASSETS . '/js/bootstrap'. $prefix .'.js',
                 'deps'      => $dependency,
@@ -165,6 +170,9 @@ public function get_styles() {
                 'deps'    => array(),
                 'version' => time()
             ],
+            'wepos-select2' => [
+                'src' =>  WEPOS_ASSETS . '/css/select2.min.css'
+            ],
         ];
 
         return $styles;
@@ -178,12 +186,14 @@ public function enqueue_all_scripts() {
             wp_enqueue_style( 'wepos-style' );
             wp_enqueue_style( 'wepos-bootstrap' );
             wp_enqueue_style( 'wepos-frontend' );
+            wp_enqueue_style( 'wepos-select2' );
 
             // Load scripts
             wp_enqueue_script( 'wepos-blockui' );
             wp_enqueue_script( 'wepos-accounting' );
             wp_enqueue_script( 'wepos-vendor' );
             wp_enqueue_script( 'wepos-bootstrap' );
+            wp_enqueue_script( 'wepos-select2' );
 
             do_action( 'wepos_load_forntend_scripts' );
 
@@ -219,6 +229,7 @@ public function register_localize() {
             'currency_format_thousand_sep' => esc_attr( wc_get_price_thousand_separator() ),
             'currency_format'              => esc_attr( str_replace( array( '%1$s', '%2$s' ), array( '%s', '%v' ), get_woocommerce_price_format() ) ), // For accounting JS
             'rounding_precision'           => wc_get_rounding_precision(),
+            'admin_url'                    => get_admin_url(),
             'assets_url'                   => WEPOS_ASSETS,
             'placeholder_image'            => wc_placeholder_img_src(),
             'ajax_loader'                  => WEPOS_ASSETS . '/images/spinner-2x.gif',
@@ -227,7 +238,9 @@ public function register_localize() {
             'countries'                    => WC()->countries->get_countries(),
             'states'                       => WC()->countries->get_states(),
             'current_user_id'              => get_current_user_id(),
-            'home_url'                     => home_url()
+            'home_url'                     => home_url(),
+            'wp_date_format'               => get_option( 'date_format' ),
+            'wp_time_format'               => get_option( 'time_format' ),
         ] );
 
         wp_localize_script( 'wepos-vendor', 'wepos', $localize_data );

package.json

@@ -15,17 +15,19 @@
   "dependencies": {
     "@mathieustan/vue-datepicker": "^0.2.11",
     "@wordpress/hooks": "^3.14.0",
+    "chart.js": "^2.9.4",
     "dayjs": "^1.11.4",
     "lodash": "^4.17.21",
     "v-hotkey": "^0.9.0",
     "v-tooltip": "^2.0.0-rc.33",
     "vue": "^2.7.8",
+    "vue-chartjs": "^3.5.1",
     "vue-js-popover": "^1.2.1",
     "vue-mugen-scroll": "^0.2.6",
     "vue-multiselect": "^2.1.6",
-    "vue-resize": "^1.0.1",
     "vue-router": "^3.5.4",
     "vue-sweetalert2": "^5.0.5",
+    "vue2-daterange-picker": "^0.6.8",
     "vuex": "^3.6.2"
   },
   "devDependencies": {