made drag and dropable page, it is saving positions in database and localstorage. in this commit I also upload sql file of the table I created.

dbbackup/auth_chart_order.sql

@@ -0,0 +1,32 @@
+/*
+ Navicat Premium Dump SQL
+
+ Source Server         : local
+ Source Server Type    : MySQL
+ Source Server Version : 100432 (10.4.32-MariaDB)
+ Source Host           : localhost:3306
+ Source Schema         : reportifynew
+
+ Target Server Type    : MySQL
+ Target Server Version : 100432 (10.4.32-MariaDB)
+ File Encoding         : 65001
+
+ Date: 25/09/2024 01:08:34
+*/
+
+SET NAMES utf8mb4;
+SET FOREIGN_KEY_CHECKS = 0;
+
+-- ----------------------------
+-- Table structure for auth_chart_order
+-- ----------------------------
+DROP TABLE IF EXISTS `auth_chart_order`;
+CREATE TABLE `auth_chart_order`  (
+  `id` int NOT NULL,
+  `user_id` int NULL DEFAULT NULL,
+  `order` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL,
+  `insert_date` datetime NULL DEFAULT current_timestamp ON UPDATE CURRENT_TIMESTAMP,
+  PRIMARY KEY (`id`) USING BTREE
+) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic;
+
+SET FOREIGN_KEY_CHECKS = 1;

public/userarea/statkpi/chartorder.php

@@ -0,0 +1,38 @@
+<?php 
+include('../../Connections/repnew.php'); 
+include('../include/headscript.php');
+include("../class/company.php");
+
+$conn = new mysqli($servername, $username, $password, $database);
+
+if ($conn->connect_error) {
+    die("Connection failed: " . $conn->connect_error);
+}
+
+// two methods save and load data
+if ($_POST['method'] == 'save') {
+    $order = $_POST['order'];
+    $user_id = $iduserlogin;
+    // check if user already have order
+    $sql = "SELECT * FROM auth_chart_order WHERE user_id = $user_id";
+    $result = $conn->query($sql);
+    $order = implode(',', $order);
+    if ($result->num_rows > 0) {
+        $sql = "UPDATE auth_chart_order SET `order` = '$order' WHERE user_id = $user_id";
+    } else {
+        $sql = "INSERT INTO auth_chart_order (user_id, `order`) VALUES ($user_id, '$order')";
+    }  
+    $conn->query($sql);
+    echo 'Data saved';
+} else if($_POST['method'] == 'load') {
+    $sql = "SELECT `order` FROM auth_chart_order WHERE user_id = $iduserlogin ORDER BY insert_date DESC LIMIT 1";
+    $result = $conn->query($sql);
+    if($result->num_rows == 0) {
+        echo json_encode([]);
+        return;
+    }else{ 
+        $row = $result->fetch_assoc(); 
+        $order_list = explode(',', $row['order']);
+        echo json_encode($order_list);
+    }
+}

public/userarea/statkpi/statkpi.php

@@ -193,6 +193,17 @@ include('parsedatachart.php');
             font-weight: bold;
             margin-top: 10px;
         }
+
+        .chart-container {
+            width: 100%; 
+            margin: 20px;
+        }
+        .chart-box {  
+            display: flex;
+            justify-content: center;
+            align-items: center; 
+        }
+
     </style>
 
 </head>
@@ -429,7 +440,9 @@ include('parsedatachart.php');
                         </div>
                         <!-- end row -->
 
-                        <div class="row">
+                        <div class="chart-container" id="charts">
+
+                            <div class="row chart-box" id="chart1" data-id="1">
                                 <div class="col-xl-12">
                                     <div class="card">
                                         <div class="card-body">
@@ -490,7 +503,7 @@ include('parsedatachart.php');
                             </div>
                             <!-- end row -->
 
-                        <div class="row">
+                            <div class="row chart-box" id="chart2" data-id="2">
                                 <div class="col-md-4"> <!-- Colonna per il primo grafico (Pie Chart) -->
                                     <div class="card">
                                         <div class="card-body">
@@ -509,7 +522,7 @@ include('parsedatachart.php');
                                 </div>
                             </div>
 
-                        <div class="row">
+                            <div class="row chart-box" id="chart3" data-id="3">
                                 <div class="col-md-12">
                                     <div class="card">
                                         <div class="card-body">
@@ -520,7 +533,7 @@ include('parsedatachart.php');
                                 </div>
                             </div>
 
-                        <div class="row">
+                            <div class="row chart-box" id="chart4" data-id="4">
                                 <div class="col-md-12">
                                     <div class="card">
                                         <div class="card-body">
@@ -531,7 +544,7 @@ include('parsedatachart.php');
                                 </div>
                             </div>
 
-                        <div class="row">
+                            <div class="row chart-box" id="chart5" data-id="5">
                                 <div class="col-md-12">
                                     <div class="card">
                                         <div class="card-body">
@@ -544,7 +557,7 @@ include('parsedatachart.php');
 
 
 
-
+                        </div>
                     </div><!-- container -->
 
                 </div> <!-- Page content Wrapper -->
@@ -558,7 +571,73 @@ include('parsedatachart.php');
 
     </div>
     <!-- END wrapper -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>
     <script>
+        document.addEventListener("DOMContentLoaded", function() {
+            const chartContainer = document.getElementById('charts');
+            const sortable = new Sortable(chartContainer, {
+                animation: 150,
+                onEnd: function () {
+                    saveChartOrder(); // Save chart order after dragging
+                }
+            });
+
+            // Function to save chart order to localStorage
+            function saveChartOrder() {
+                const order = Array.from(chartContainer.children).map(chart => chart.dataset.id);
+                localStorage.setItem('chartOrder', JSON.stringify(order));
+
+                // lets save it for the user
+                $.ajax({
+                    url: 'chartorder.php',
+                    method: 'POST',
+                    data: {
+                        method:'save',
+                        order: order
+                    },
+                    success: function(response) {
+                        console.log(response);
+                    },
+                    error: function() {
+                        alert('Error saving chart order.');
+                    }
+                });
+            }
+
+            // Function to restore chart order from localStorage
+            function loadChartOrder() {
+
+                // Load the saved order from localStorage
+
+                const savedOrder = JSON.parse(localStorage.getItem('chartOrder'));
+                if (savedOrder) {
+                    savedOrder.forEach(id => {
+                        const chart = document.querySelector(`[data-id='${id}']`);
+                        chartContainer.appendChild(chart); // Append charts in saved order
+                    });
+                }
+
+                // Load the saved order from the database
+                $.ajax({
+                    url: 'chartorder.php',
+                    method: 'POST',
+                    data: {
+                        method:'load'
+                    },
+                    success: function(response) {
+                        console.log(response);
+                        const order = JSON.parse(response);
+                        order.forEach(id => {
+                            const chart = document.querySelector(`[data-id='${id}']`);
+                            chartContainer.appendChild(chart); // Append charts in saved order
+                        });
+                    },
+                });
+            }
+
+            // Load the saved chart order when the page loads
+            loadChartOrder();
+        });
     </script>