Mise en place de la structure définitive du CRUD et modification de la page principale avec les datas

2025-08-03 16:58:04 +02:00
parent 354c25ac06
commit fd080b2e64
1767 changed files with 147564 additions and 216 deletions
--- a/wwwroot/js/api.js
+++ b/wwwroot/js/api.js
@@ -0,0 +1,122 @@
+const API_USERNAME = 'admin';
+const API_PASSWORD = atob('Mf33ksTRLrPKSqQ4cTXitgiSN6BPBt89');
+
+const Controller = {
+    Revenue: "revenue",
+    Expense: "expense"
+}
+function getApiBaseUrl() {
+    const isLocal = location.hostname === 'localhost' || location.hostname === '127.0.0.1';
+    return isLocal ? 'http://localhost:5018' : 'https://administration.byakurepo.online';
+}
+
+function showApiError(errorInfo) {
+    console.error("❌ Erreur API :");
+    console.error("🔗 URL :", errorInfo.url);
+    console.error("📡 Méthode :", errorInfo.method);
+    console.error("📄 Code HTTP :", errorInfo.status);
+    if (errorInfo.message) console.error("📢 Message :", errorInfo.message);
+    if (errorInfo.body) console.error("📦 Contenu retourné :", errorInfo.body);
+}
+
+/**
+ * 🔁 GET générique
+ */
+async function apiGet(endpoint, options = {}, onSuccess, onError) {
+    const url = getApiBaseUrl() + endpoint;
+    const loader = document.getElementById('loader');
+    if (loader) loader.style.display = 'block';
+
+    try {
+        const response = await fetch(url, {
+            method: 'GET',
+            headers: {
+                'Authorization': 'Basic ' + btoa(`${API_USERNAME}:${API_PASSWORD}`),
+                'Content-Type': 'application/json',
+                ...options.headers
+            },
+            ...options
+        });
+
+        const responseBody = await response.text();
+        if (!response.ok) {
+            const errorInfo = {
+                url,
+                method: 'GET',
+                status: response.status,
+                message: response.statusText,
+                body: responseBody
+            };
+            showApiError(errorInfo);
+            if (onError) onError(errorInfo);
+            return;
+        }
+
+        const data = JSON.parse(responseBody);
+        if (onSuccess) onSuccess(data);
+    } catch (error) {
+        showApiError({ url, method: 'GET', status: 0, message: error.message });
+        if (onError) onError(error);
+    } finally {
+        if (loader) loader.style.display = 'none';
+    }
+}
+
+/**
+ * 🔁 POST générique
+ */
+async function apiPost(endpoint, body = {}, onSuccess, onError) {
+    const url = getApiBaseUrl() + endpoint;
+    const loader = document.getElementById('loader');
+    if (loader) loader.style.display = 'block';
+
+    try {
+        const response = await fetch(url, {
+            method: 'POST',
+            headers: {
+                'Authorization': 'Basic ' + btoa(`${API_USERNAME}:${API_PASSWORD}`),
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(body)
+        });
+
+        const responseBody = await response.text();
+        if (!response.ok) {
+            const errorInfo = {
+                url,
+                method: 'POST',
+                status: response.status,
+                message: response.statusText,
+                body: responseBody
+            };
+            showApiError(errorInfo);
+            if (onError) onError(errorInfo);
+            return;
+        }
+
+        const data = JSON.parse(responseBody);
+        if (onSuccess) onSuccess(data);
+    } catch (error) {
+        showApiError({ url, method: 'POST', status: 0, message: error.message });
+        if (onError) onError(error);
+    } finally {
+        if (loader) loader.style.display = 'none';
+    }
+}
+
+/**
+ * 🌐 Appel GET d’une ressource/action
+ */
+function apiCall(resource, action, queryParams = {}, onSuccess, onError) {
+    const query = new URLSearchParams(queryParams).toString();
+    const endpoint = `/api/${resource}/${action}${query ? `?${query}` : ''}`;
+    apiGet(endpoint, {}, onSuccess, onError);
+}
+
+/**
+ * 🌐 Appel POST d’une ressource/action
+ */
+function apiPostCall(resource, action, body = {}, onSuccess, onError) {
+    const endpoint = `/api/${resource}/${action}`;
+    apiPost(endpoint, body, onSuccess, onError);
+}
--- a/wwwroot/js/demo/chart-area-demo.js
+++ b/wwwroot/js/demo/chart-area-demo.js
@@ -0,0 +1,118 @@
+// Set new default font family and font color to mimic Bootstrap's default styling
+Chart.defaults.global.defaultFontFamily = 'Nunito', '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
+Chart.defaults.global.defaultFontColor = '#858796';
+
+function number_format(number, decimals, dec_point, thousands_sep) {
+  // *     example: number_format(1234.56, 2, ',', ' ');
+  // *     return: '1 234,56'
+  number = (number + '').replace(',', '').replace(' ', '');
+  var n = !isFinite(+number) ? 0 : +number,
+    prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
+    sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
+    dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
+    s = '',
+    toFixedFix = function(n, prec) {
+      var k = Math.pow(10, prec);
+      return '' + Math.round(n * k) / k;
+    };
+  // Fix for IE parseFloat(0.55).toFixed(0) = 0;
+  s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
+  if (s[0].length > 3) {
+    s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
+  }
+  if ((s[1] || '').length < prec) {
+    s[1] = s[1] || '';
+    s[1] += new Array(prec - s[1].length + 1).join('0');
+  }
+  return s.join(dec);
+}
+
+// Area Chart Example
+var ctx = document.getElementById("myAreaChart");
+var myLineChart = new Chart(ctx, {
+  type: 'line',
+  data: {
+    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+    datasets: [{
+      label: "Earnings",
+      lineTension: 0.3,
+      backgroundColor: "rgba(78, 115, 223, 0.05)",
+      borderColor: "rgba(78, 115, 223, 1)",
+      pointRadius: 3,
+      pointBackgroundColor: "rgba(78, 115, 223, 1)",
+      pointBorderColor: "rgba(78, 115, 223, 1)",
+      pointHoverRadius: 3,
+      pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
+      pointHoverBorderColor: "rgba(78, 115, 223, 1)",
+      pointHitRadius: 10,
+      pointBorderWidth: 2,
+      data: [0, 10000, 5000, 15000, 10000, 20000, 15000, 25000, 20000, 30000, 25000, 40000],
+    }],
+  },
+  options: {
+    maintainAspectRatio: false,
+    layout: {
+      padding: {
+        left: 10,
+        right: 25,
+        top: 25,
+        bottom: 0
+      }
+    },
+    scales: {
+      xAxes: [{
+        time: {
+          unit: 'date'
+        },
+        gridLines: {
+          display: false,
+          drawBorder: false
+        },
+        ticks: {
+          maxTicksLimit: 7
+        }
+      }],
+      yAxes: [{
+        ticks: {
+          maxTicksLimit: 5,
+          padding: 10,
+          // Include a dollar sign in the ticks
+          callback: function(value, index, values) {
+            return '$' + number_format(value);
+          }
+        },
+        gridLines: {
+          color: "rgb(234, 236, 244)",
+          zeroLineColor: "rgb(234, 236, 244)",
+          drawBorder: false,
+          borderDash: [2],
+          zeroLineBorderDash: [2]
+        }
+      }],
+    },
+    legend: {
+      display: false
+    },
+    tooltips: {
+      backgroundColor: "rgb(255,255,255)",
+      bodyFontColor: "#858796",
+      titleMarginBottom: 10,
+      titleFontColor: '#6e707e',
+      titleFontSize: 14,
+      borderColor: '#dddfeb',
+      borderWidth: 1,
+      xPadding: 15,
+      yPadding: 15,
+      displayColors: false,
+      intersect: false,
+      mode: 'index',
+      caretPadding: 10,
+      callbacks: {
+        label: function(tooltipItem, chart) {
+          var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
+          return datasetLabel + ': $' + number_format(tooltipItem.yLabel);
+        }
+      }
+    }
+  }
+});
--- a/wwwroot/js/demo/chart-bar-demo.js
+++ b/wwwroot/js/demo/chart-bar-demo.js
@@ -0,0 +1,111 @@
+// Set new default font family and font color to mimic Bootstrap's default styling
+Chart.defaults.global.defaultFontFamily = 'Nunito', '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
+Chart.defaults.global.defaultFontColor = '#858796';
+
+function number_format(number, decimals, dec_point, thousands_sep) {
+  // *     example: number_format(1234.56, 2, ',', ' ');
+  // *     return: '1 234,56'
+  number = (number + '').replace(',', '').replace(' ', '');
+  var n = !isFinite(+number) ? 0 : +number,
+    prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
+    sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
+    dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
+    s = '',
+    toFixedFix = function(n, prec) {
+      var k = Math.pow(10, prec);
+      return '' + Math.round(n * k) / k;
+    };
+  // Fix for IE parseFloat(0.55).toFixed(0) = 0;
+  s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
+  if (s[0].length > 3) {
+    s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
+  }
+  if ((s[1] || '').length < prec) {
+    s[1] = s[1] || '';
+    s[1] += new Array(prec - s[1].length + 1).join('0');
+  }
+  return s.join(dec);
+}
+
+// Bar Chart Example
+var ctx = document.getElementById("myBarChart");
+var myBarChart = new Chart(ctx, {
+  type: 'bar',
+  data: {
+    labels: ["January", "February", "March", "April", "May", "June"],
+    datasets: [{
+      label: "Revenue",
+      backgroundColor: "#4e73df",
+      hoverBackgroundColor: "#2e59d9",
+      borderColor: "#4e73df",
+      data: [4215, 5312, 6251, 7841, 9821, 14984],
+    }],
+  },
+  options: {
+    maintainAspectRatio: false,
+    layout: {
+      padding: {
+        left: 10,
+        right: 25,
+        top: 25,
+        bottom: 0
+      }
+    },
+    scales: {
+      xAxes: [{
+        time: {
+          unit: 'month'
+        },
+        gridLines: {
+          display: false,
+          drawBorder: false
+        },
+        ticks: {
+          maxTicksLimit: 6
+        },
+        maxBarThickness: 25,
+      }],
+      yAxes: [{
+        ticks: {
+          min: 0,
+          max: 15000,
+          maxTicksLimit: 5,
+          padding: 10,
+          // Include a dollar sign in the ticks
+          callback: function(value, index, values) {
+            return '$' + number_format(value);
+          }
+        },
+        gridLines: {
+          color: "rgb(234, 236, 244)",
+          zeroLineColor: "rgb(234, 236, 244)",
+          drawBorder: false,
+          borderDash: [2],
+          zeroLineBorderDash: [2]
+        }
+      }],
+    },
+    legend: {
+      display: false
+    },
+    tooltips: {
+      titleMarginBottom: 10,
+      titleFontColor: '#6e707e',
+      titleFontSize: 14,
+      backgroundColor: "rgb(255,255,255)",
+      bodyFontColor: "#858796",
+      borderColor: '#dddfeb',
+      borderWidth: 1,
+      xPadding: 15,
+      yPadding: 15,
+      displayColors: false,
+      caretPadding: 10,
+      callbacks: {
+        label: function(tooltipItem, chart) {
+          var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
+          return datasetLabel + ': $' + number_format(tooltipItem.yLabel);
+        }
+      }
+    },
+  }
+});
--- a/wwwroot/js/demo/chart-pie-demo.js
+++ b/wwwroot/js/demo/chart-pie-demo.js
@@ -0,0 +1,35 @@
+// Set new default font family and font color to mimic Bootstrap's default styling
+Chart.defaults.global.defaultFontFamily = 'Nunito', '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
+Chart.defaults.global.defaultFontColor = '#858796';
+
+// Pie Chart Example
+var ctx = document.getElementById("myPieChart");
+var myPieChart = new Chart(ctx, {
+  type: 'doughnut',
+  data: {
+    labels: ["Direct", "Referral", "Social"],
+    datasets: [{
+      data: [55, 30, 15],
+      backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc'],
+      hoverBackgroundColor: ['#2e59d9', '#17a673', '#2c9faf'],
+      hoverBorderColor: "rgba(234, 236, 244, 1)",
+    }],
+  },
+  options: {
+    maintainAspectRatio: false,
+    tooltips: {
+      backgroundColor: "rgb(255,255,255)",
+      bodyFontColor: "#858796",
+      borderColor: '#dddfeb',
+      borderWidth: 1,
+      xPadding: 15,
+      yPadding: 15,
+      displayColors: false,
+      caretPadding: 10,
+    },
+    legend: {
+      display: false
+    },
+    cutoutPercentage: 80,
+  },
+});
--- a/wwwroot/js/demo/datatables-demo.js
+++ b/wwwroot/js/demo/datatables-demo.js
@@ -0,0 +1,4 @@
+// Call the dataTables jQuery plugin
+$(document).ready(function() {
+  $('#dataTable').DataTable();
+});
--- a/wwwroot/js/index.js
+++ b/wwwroot/js/index.js
@@ -0,0 +1,96 @@
+/**
+ * Exemple d’utilisation :
+ * Récupère les loyers avec un nombre de lignes défini
+ * @param {number} rows - Nombre de lignes à récupérer
+ */
+
+const Revenue = {
+    GetXRevenues: "x_revenues",
+    GetLastRevenues: "last_revenue",
+    GetAllRevenues: "all_revenues",
+    GetAdditionalRevenues: "additional_revenues"
+};
+
+const Expense = {
+    GetRightExpenses: "last_expenses"
+}
+
+var TotalRevenu = 0, TotalExpense = 0;
+
+function loadRevenues() {
+    return Promise.all([
+        new Promise((resolve, reject) => {
+            apiCall(Controller.Revenue, Revenue.GetXRevenues, { rows: 1 }, data => {
+                const loyer = document.getElementById('salaire');
+                const salaire = parseFloat(data[0]?.salary || 0);
+                if (loyer) loyer.innerText = `${toPriceFormat(salaire)}€`;
+                resolve(salaire);
+            }, reject);
+        }),
+        new Promise((resolve, reject) => {
+            apiCall(Controller.Revenue, Revenue.GetAdditionalRevenues, {}, data => {
+                const additionalRevenues = document.getElementById('additionalRevenues');
+                const totalAR = data.reduce((acc, item) => acc + (parseFloat(item.amount) || 0), 0);
+                if (additionalRevenues) additionalRevenues.innerText = `${toPriceFormat(totalAR)}€`;
+                resolve(totalAR);
+            }, reject);
+        })
+    ]).then(([salary, additional]) => {
+        TotalRevenu = salary + additional;
+    });
+}
+
+function loadExpenses() {
+    return new Promise((resolve, reject) => {
+        apiCall(Controller.Expense, Expense.GetRightExpenses, {}, data => {
+            const loyer = document.getElementById('loyer');
+            const trash = document.getElementById('trash');
+            const electricity = document.getElementById('electricity');
+            const insurance = document.getElementById('insurance');
+            const wifi = document.getElementById('wifi');
+            const groceries = document.getElementById('groceries');
+            const additionalSourcesExpense = document.getElementById('additionalSourcesExpense');
+            const additionalExpensesSub = document.getElementById('additionalExpensesSub');
+            const saving = document.getElementById('saving');
+
+            if (loyer) loyer.innerText = `${toPriceFormat(data.rent)}€`;
+            if (trash) trash.innerText = `${toPriceFormat(data.trash)}€`;
+            if (insurance) insurance.innerText = `${toPriceFormat(data.insurance)}€`;
+            if (electricity) electricity.innerText = `${toPriceFormat(data.electricity)}€`;
+            if (wifi) wifi.innerText = `${toPriceFormat(data.wifi)}€`;
+            if (groceries) groceries.innerText = `${toPriceFormat(data.groceries)}€`;
+            if (saving) saving.innerText = `${toPriceFormat(data.saving)}€`;
+
+            if (additionalSourcesExpense) {
+                const totalAR = data.additionalSourcesExpense.reduce((acc, item) => acc + (parseFloat(item.amount) || 0), 0);
+                additionalSourcesExpense.innerText = `${toPriceFormat(totalAR)}€`;
+            }
+
+            if (additionalExpensesSub) {
+                const totalAR = data.additionalSourcesSub.reduce((acc, item) => acc + (parseFloat(item.amount) || 0), 0);
+                additionalExpensesSub.innerText = `${toPriceFormat(totalAR)}€`;
+            }
+
+            TotalExpense = data.total;
+            resolve();
+        }, reject);
+    });
+}
+
+
+
+
+// Lance automatiquement l’appel au chargement de la page
+document.addEventListener('DOMContentLoaded', () => {
+    const result = document.getElementById('result');
+
+    Promise.all([loadExpenses(), loadRevenues()])
+        .then(() => {
+            if (result) result.innerText = `${toPriceFormat(TotalRevenu - TotalExpense)}€`;
+        })
+        .catch(error => {
+            console.error("❌ Erreur de chargement :", error);
+            if (result) result.innerText = "Erreur lors du calcul";
+        });
+});
+
--- a/wwwroot/js/site.js
+++ b/wwwroot/js/site.js
@@ -1,10 +1,77 @@
-// Please see documentation at https://learn.microsoft.com/aspnet/core/client-side/bundling-and-minification
-// for details on configuring this project to bundle and minify static web assets.
+(function ($) {
+    "use strict"; // Start of use strict

-// Write your JavaScript code.
-function toggleSidebar() {
-    const sidebar = document.getElementById('sidebar');
-    const toggleBtn = document.querySelector('.toggle-btn');
-    sidebar.classList.toggle('collapsed');
-    toggleBtn.classList.toggle('collapsed');
-}
+    // Toggle the side navigation
+    $("#sidebarToggle, #sidebarToggleTop").on('click', function (e) {
+        $("body").toggleClass("sidebar-toggled");
+        $(".sidebar").toggleClass("toggled");
+        if ($(".sidebar").hasClass("toggled")) {
+            $('.sidebar .collapse').collapse('hide');
+        };
+    });
+
+    // Close any open menu accordions when window is resized below 768px
+    $(window).resize(function () {
+        if ($(window).width() < 768) {
+            $('.sidebar .collapse').collapse('hide');
+        };
+
+        // Toggle the side navigation when window is resized below 480px
+        if ($(window).width() < 480 && !$(".sidebar").hasClass("toggled")) {
+            $("body").addClass("sidebar-toggled");
+            $(".sidebar").addClass("toggled");
+            $('.sidebar .collapse').collapse('hide');
+        };
+    });
+
+    // Prevent the content wrapper from scrolling when the fixed side navigation hovered over
+    $('body.fixed-nav .sidebar').on('mousewheel DOMMouseScroll wheel', function (e) {
+        if ($(window).width() > 768) {
+            var e0 = e.originalEvent,
+                delta = e0.wheelDelta || -e0.detail;
+            this.scrollTop += (delta < 0 ? 1 : -1) * 30;
+            e.preventDefault();
+        }
+    });
+
+    // Scroll to top button appear
+    $(document).on('scroll', function () {
+        var scrollDistance = $(this).scrollTop();
+        if (scrollDistance > 100) {
+            $('.scroll-to-top').fadeIn();
+        } else {
+            $('.scroll-to-top').fadeOut();
+        }
+    });
+
+    // Smooth scrolling using jQuery easing
+    $(document).on('click', 'a.scroll-to-top', function (e) {
+        var $anchor = $(this);
+        $('html, body').stop().animate({
+            scrollTop: ($($anchor.attr('href')).offset().top)
+        }, 1000, 'easeInOutExpo');
+        e.preventDefault();
+    });
+
+})(jQuery); // End of use strict
+
+/**
+ * 💶 Formate un nombre en chaîne de caractères au format français avec division par 1000.
+ * Exemples :
+ *    123456  => "123,456"
+ *    5000    => "5,000"
+ *    "1000"  => "1,000"
+ *    null    => "0,000"
+ *
+ * @param {number|string} valeur - Le nombre à formater (peut être une chaîne ou un nombre)
+ * @returns {string} Représentation formatée (ex: "1,234")
+ */
+function toPriceFormat(valeur) {
+    const nombre = parseFloat(valeur);
+    if (isNaN(nombre)) return "0";
+
+    return nombre.toLocaleString('fr-FR', {
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 0
+    });
+}