From ff39f1e23147bce798d351dabf6708d4180f1379 Mon Sep 17 00:00:00 2001
From: Rifcki12 <168059971+Rifcki12@users.noreply.github.com>
Date: Tue, 28 May 2024 21:46:50 +0700
Subject: [PATCH 1/8] Password for Show data

---
 test.html | 110 +++++++++++++++++++++++++++++-------------------------
 1 file changed, 60 insertions(+), 50 deletions(-)

diff --git a/test.html b/test.html
index f8a9b68..a955102 100644
--- a/test.html
+++ b/test.html
@@ -44,7 +44,7 @@ <h1 class="font-weight-bold" >
                 </div>
                 <!--SHOW RAW DATA-->
                 <div class="#">
-                    <button type="button" class="button" data-toggle="modal" data-target="#dataTableModal">Show Data</button>
+                    <button type="button" class="button" id="clickModal" data-toggle="modal" data-target="#dataTableModal">Show Data</button>
                 </div>
 
                  <!--DROPDOWN STATE-->
@@ -909,57 +909,67 @@ <h5 class="modal-title" id="dataTableModalLabel">Data Table</h5>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
  <script>
-     $(document).ready(function() {
-        let dataTableInitialized = false;
-
-         function initializeDataTable(data) {
-             $('#dataTable').DataTable({
-                 data: data,
-                 columns: [
-                     { data: 'Order ID' },
-                     { data: 'Order Date' },
-                     { data: 'Ship Date' },
-                     { data: 'Ship Mode' },
-                     { data: 'Customer ID' },
-                     { data: 'Customer Name' },
-                     { data: 'Segment' },
-                     { data: 'Country' },
-                     { data: 'City' },
-                     { data: 'State' },
-                     { data: 'Postal Code' },
-                     { data: 'Region' },
-                     { data: 'Product ID' },
-                     { data: 'Category' },
-                     { data: 'Sub-Category' },
-                     { data: 'Product Name' },
-                     { data: 'Sales' },
-                     { data: 'Quantity' },
-                     { data: 'Discount' },
-                     { data: 'Profit' }
-                 ],
-                 pageLength: 5, 
-                 lengthMenu: [5, 10, 15, 30], 
-                 responsive: true,
-                 scrollX: true // Enable horizontal scrolling
-             });
-             dataTableInitialized = true;
-         }
+    document.getElementById('clickModal').addEventListener('click', function () {
+            const password = prompt('Enter password:');
+            
+          
+            if (password === 'team16') {
+                $(document).ready(function() {
+                    let dataTableInitialized = false;
+
+                    function initializeDataTable(data) {
+                        $('#dataTable').DataTable({
+                            data: data,
+                            columns: [
+                                { data: 'Order ID' },
+                                { data: 'Order Date' },
+                                { data: 'Ship Date' },
+                                { data: 'Ship Mode' },
+                                { data: 'Customer ID' },
+                                { data: 'Customer Name' },
+                                { data: 'Segment' },
+                                { data: 'Country' },
+                                { data: 'City' },
+                                { data: 'State' },
+                                { data: 'Postal Code' },
+                                { data: 'Region' },
+                                { data: 'Product ID' },
+                                { data: 'Category' },
+                                { data: 'Sub-Category' },
+                                { data: 'Product Name' },
+                                { data: 'Sales' },
+                                { data: 'Quantity' },
+                                { data: 'Discount' },
+                                { data: 'Profit' }
+                            ],
+                            pageLength: 5, 
+                            lengthMenu: [5, 10, 15, 30], 
+                            responsive: true,
+                            scrollX: true // Enable horizontal scrolling
+                        });
+                        dataTableInitialized = true;
+                    }
 
-         // Fetch data and initialize DataTable when modal is shown
-        
-         $('#dataTableModal').on('shown.bs.modal', function () {
-        if (!dataTableInitialized) { 
-            fetchData(DataUrl).then(data => {
-                initializeDataTable(data);
-            });
-        } else {
-            $('#dataTable').DataTable().clear().draw();
-            fetchData(DataUrl).then(data => {
-                $('#dataTable').DataTable().rows.add(data).draw();
-            });
-        }
+                    // Fetch data and initialize DataTable when modal is shown
+                    
+                    $('#dataTableModal').on('shown.bs.modal', function () {
+                    if (!dataTableInitialized) { 
+                        fetchData(DataUrl).then(data => {
+                            initializeDataTable(data);
+                        });
+                    } else {
+                        $('#dataTable').DataTable().clear().draw();
+                        fetchData(DataUrl).then(data => {
+                            $('#dataTable').DataTable().rows.add(data).draw();
+                        });
+                    }
+                });
+             });
+            } else {
+                
+            }
     });
-     });
+     
  </script>
 
 <script src="https://cdn.jsdelivr.net/npm/dom-to-image@2.6.0/dist/dom-to-image.min.js"></script>

From 78a105c0c2a1bdfac642428fc99b4b700c067985 Mon Sep 17 00:00:00 2001
From: Rifcki12 <168059971+Rifcki12@users.noreply.github.com>
Date: Sat, 1 Jun 2024 09:17:58 +0700
Subject: [PATCH 2/8] Update yearly.html

---
 html/yearly.html | 2 --
 1 file changed, 2 deletions(-)

diff --git a/html/yearly.html b/html/yearly.html
index cf560a8..fb3659e 100644
--- a/html/yearly.html
+++ b/html/yearly.html
@@ -5,7 +5,6 @@
         <title>Document</title>
         <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
         <link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
-        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
         <link rel="stylesheet" href="./css/style.css">
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/apexcharts/dist/apexcharts.css">
         <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
@@ -306,5 +305,4 @@ <h5 class="modal-title" id="dataTableModalLabel">Data Table</h5>
         });
     });
 });
-
 </script>
\ No newline at end of file

From 03906fe1c92f270e2383ee1bf321a1e68c7ffba3 Mon Sep 17 00:00:00 2001
From: Rifcki12 <168059971+Rifcki12@users.noreply.github.com>
Date: Sat, 1 Jun 2024 12:00:07 +0700
Subject: [PATCH 3/8] Modals

---
 html/css/style.css |  52 +++++++-
 html/yearly.html   |  41 +-----
 testfitur.html     | 302 ++++++++++++++++++++++++---------------------
 3 files changed, 218 insertions(+), 177 deletions(-)

diff --git a/html/css/style.css b/html/css/style.css
index 5397e51..03eaa7d 100644
--- a/html/css/style.css
+++ b/html/css/style.css
@@ -132,7 +132,7 @@ body{
   width: 100%;
   height: auto;
   text-align: center;
-  padding: 10px 30px;
+  padding: 15px 30px;
   text-decoration: none;
   font-size: 12px;
   background-color: rgb(230, 230, 230);
@@ -359,6 +359,56 @@ th {
   width: 100% !important; /* Ensure the table takes full width of the modal */
 }
 
+    /* ----------------------------------Modal styles --------------------------------*/
+    body.modal-open {
+      overflow: hidden;
+  }
+    .modal {
+      display: none;
+      position: fixed;
+      z-index: 1;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+      background-color: rgba(0,0,0,0.5);
+  }
+  .modal-dialog {
+      margin: 2% auto;
+      padding: 25px;
+      width: 95%;
+      background-color: white;
+      border-radius: 5px;
+      box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+  }
+  .modal-header, .modal-footer {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 1px solid #e5e5e5;
+  }
+  .modal-header {
+      border-bottom: none;
+  }
+  .modal-body {
+      padding: 5px;
+  }
+  .close {
+      font-size: 1.5rem;
+      cursor: pointer;
+      background: none;
+      border: none;
+  }
+  .btn-secondary {
+      padding: 10px 20px;
+      background-color: #6c757d;
+      color: white;
+      border: none;
+      cursor: pointer;
+      border-radius: 5px;
+  }
+
 @media screen and (max-width: 768px) {
   /* Ketika lebar layar kurang dari atau sama dengan 768px */
   .cards {
diff --git a/html/yearly.html b/html/yearly.html
index fb3659e..fa397e4 100644
--- a/html/yearly.html
+++ b/html/yearly.html
@@ -162,11 +162,11 @@ <h2 class="font-weight-bold">Top 5 Product Sold based on Quantity Sales</h2>
         
 
     <!-- Modal -->
-    <div class="modal fade" id="dataTableModal" tabindex="-1" role="dialog" aria-labelledby="dataTableModalLabel" aria-hidden="true">
-        <div class="modal-dialog modal-lg" role="document">
+    <div class="modal" id="dataTableModal" tabindex="-1" role="dialog" aria-labelledby="dataTableModalLabel" aria-hidden="true">
+        <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
-                    <h5 class="modal-title" id="dataTableModalLabel">Data Table</h5>
+                    <h5 class="modal-title" id="dataTableModalLabel">Superstore Sales</h5>
                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                         <span aria-hidden="true">&times;</span>
                     </button>
@@ -271,38 +271,3 @@ <h5 class="modal-title" id="dataTableModalLabel">Data Table</h5>
      });
 </script>
 
-
-<script>
-    // Include the html2canvas and jsPDF libraries in the download.js script
-document.write('<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.3.2/dist/html2canvas.min.js"><\/script>');
-document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"><\/script>');
-
-// Function to download the page as a PDF
-document.addEventListener('DOMContentLoaded', function () {
-    document.getElementById('downloadPDF').addEventListener('click', function () {
-        const { jsPDF } = window.jspdf;
-        const doc = new jsPDF();
-
-        html2canvas(document.body).then(canvas => {
-            const imgData = canvas.toDataURL('image/png');
-            const imgWidth = 210; // A4 width in mm
-            const pageHeight = 295; // A4 height in mm
-            const imgHeight = canvas.height * imgWidth / canvas.width;
-            let heightLeft = imgHeight;
-            let position = 0;
-
-            doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
-            heightLeft -= pageHeight;
-
-            while (heightLeft >= 0) {
-                position = heightLeft - imgHeight;
-                doc.addPage();
-                doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
-                heightLeft -= pageHeight;
-            }
-
-            doc.save('page.pdf');
-        });
-    });
-});
-</script>
\ No newline at end of file
diff --git a/testfitur.html b/testfitur.html
index 60caa56..454a39e 100644
--- a/testfitur.html
+++ b/testfitur.html
@@ -1,164 +1,190 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Stacked Bar Chart of Sales</title>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.3.2/dist/html2canvas.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
-</head>
-<body>
-    <canvas id="StackedBarChartSalesPerState" width="400" height="200"></canvas>
-    <button id="downloadPDF">Download as PDF</button>
-    <script>
-        const DataUrl = 'http://localhost:3000/data';
-        const colorPalette = ['#1B1A17', '#F0A500', '#E45826', '#E6D5B8'];
-
-        // Function to fetch data from the given URL
-        function fetchData(url) {
-            return fetch(url)
-                .then(response => {
-                    if (!response.ok) {
-                        throw new Error('Network response was not ok');
-                    }
-                    return response.json();
-                })
-                .catch(error => {
-                    console.error('There was a problem with the fetch operation:', error);
-                });
+    <title>Dropdown with Checkbox Options</title>
+    <style>
+        .dropdown-checkbox {
+            position: relative;
+            display: inline-block;
+            margin-right: 20px;
         }
 
-        // Function to process data and calculate sales per category in each state
-        function processStackedBarChartSalesDataPerCategory(data) {
-            const SalesDataPerCategory = {};
-
-            data.forEach(item => {
-                const state = item["State"];
-                const category = item["Category"];
-                const sales = parseFloat(item["Sales"].replace('$', '').replace(',', '.'));
-
-                if (!SalesDataPerCategory[state]) {
-                    SalesDataPerCategory[state] = {};
-                }
-                if (SalesDataPerCategory[state][category]) {
-                    SalesDataPerCategory[state][category] += sales;
-                } else {
-                    SalesDataPerCategory[state][category] = sales;
-                }
-            });
-
-            return SalesDataPerCategory;
+        .dropdown-checkbox .dropdown-toggle {
+            padding: 10px 20px;
+            border: none;
+            border-radius: 5px;
+            background-color: #f0f0f0;
+            cursor: pointer;
+            margin-bottom: 10px;
         }
 
-        // Function to prepare chart data for Chart.js
-        function prepareStackedChartData(SalesDataPerCategory) {
-            const states = Object.keys(SalesDataPerCategory);
-            const categories = new Set();
-
-            states.forEach(state => {
-                Object.keys(SalesDataPerCategory[state]).forEach(category => {
-                    categories.add(category);
-                });
-            });
+        .dropdown-checkbox .dropdown-menu {
+            position: absolute;
+            top: 100%;
+            left: 0;
+            background-color: #f9f9f9;
+            border: 1px solid #ccc;
+            padding: 10px;
+            display: none;
+            z-index: 1;
+            width: 200px;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.15);
+        }
 
-            const totalSalesByState = states.map(state => {
-                return {
-                    state: state,
-                    totalSales: Object.values(SalesDataPerCategory[state]).reduce((a, b) => a + b, 0)
-                };
-            });
+        .dropdown-checkbox .dropdown-menu.show {
+            display: block;
+        }
 
-            totalSalesByState.sort((a, b) => b.totalSales - a.totalSales);
+        .dropdown-checkbox .checkbox-list {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+        }
 
-            // Select top 10 states by total sales
-            const topStates = totalSalesByState.slice(0, 10).map(item => item.state);
+        .dropdown-checkbox .checkbox-list label {
+            display: block;
+            padding: 10px;
+            border-bottom: 1px solid #ccc;
+            cursor: pointer;
+        }
 
-            const datasets = Array.from(categories).map((category, index) => {
-                return {
-                    label: category,
-                    data: topStates.map(state => SalesDataPerCategory[state][category] || 0),
-                    backgroundColor: colorPalette[index % colorPalette.length]
-                };
-            });
+        .dropdown-checkbox .checkbox-list label:last-child {
+            border-bottom: none;
+        }
 
-            return {
-                labels: topStates,
-                datasets: datasets
-            };
+        .dropdown-checkbox .checkbox-list input[type="checkbox"] {
+            margin-right: 10px;
         }
 
-        let StackedBarChart = null;
+        .dropdown-checkbox .search-input {
+            width: 100%;
+            padding: 8px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            margin-bottom: 10px;
+            box-sizing: border-box;
+        }
+    </style>
+</head>
+<body>
+    <div class="dropdown-checkbox">
+        <button class="dropdown-toggle" type="button" id="categoryButton">
+            Select Category
+        </button>
+        <div class="dropdown-menu" aria-labelledby="categoryButton">
+            <div class="checkbox-list" id="categoryOptions">
+                <!-- Categories will be dynamically populated here -->
+            </div>
+        </div>
+    </div>
+
+    <div class="dropdown-checkbox">
+        <button class="dropdown-toggle" type="button" id="segmentButton">
+            Select Segment
+        </button>
+        <div class="dropdown-menu" aria-labelledby="segmentButton">
+            <div class="checkbox-list" id="segmentOptions">
+                <!-- Segments will be dynamically populated here -->
+            </div>
+        </div>
+    </div>
+
+    <div class="dropdown-checkbox">
+        <button class="dropdown-toggle" type="button" id="stateButton">
+            Select State
+        </button>
+        <div class="dropdown-menu" aria-labelledby="stateButton">
+            <input type="text" class="search-input" placeholder="Search...">
+            <div class="checkbox-list" id="stateOptions">
+                <!-- States will be dynamically populated here -->
+            </div>
+        </div>
+    </div>
+
+    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
+    <script>
+        $(document).ready(function() {
+            const DataUrl = 'http://localhost:3000/data'; // URL to fetch data from
+
+            // Function to fetch data from URL
+            function fetchData(url) {
+                return fetch(url)
+                    .then(response => {
+                        if (!response.ok) {
+                            throw new Error('Network response was not ok');
+                        }
+                        return response.json();
+                    })
+                    .catch(error => {
+                        console.error('There was a problem with the fetch operation:', error);
+                    });
+            }
 
-        function createStackedBarChart(chartData) {
-            const ctxSBC = document.getElementById('StackedBarChartSalesPerState').getContext('2d');
-            if (StackedBarChart != null) {
-                StackedBarChart.data = chartData;
-                return StackedBarChart.update();
+            // Function to populate dropdown options
+            function populateDropdownOptions(options, containerId) {
+                const container = $('#' + containerId);
+                container.empty(); // Clear existing options
+                
+                // Add other options
+                options.forEach(option => {
+                    const label = $('<label>');
+                    const checkbox = $('<input>').attr({
+                        type: 'checkbox',
+                        value: option,
+                    });
+                    label.append(checkbox, option);
+                    container.append(label);
+                });
             }
 
-            StackedBarChart = new Chart(ctxSBC, {
-                type: 'bar',
-                data: chartData,
-                options: {
-                    scales: {
-                        x: {
-                            stacked: true
-                        },
-                        y: {
-                            stacked: true,
-                            beginAtZero: true
+            // Event listener for dropdown toggle
+            $('.dropdown-checkbox .dropdown-toggle').click(function() {
+                $(this).next('.dropdown-menu').toggleClass('show');
+
+                // Fetch data and populate dropdown options
+                const dropdownId = $(this).attr('id');
+                const optionsId = dropdownId.replace('Button', 'Options');
+
+                fetchData(DataUrl)
+                    .then(data => {
+                        let options;
+                        switch (dropdownId) {
+                            case 'categoryButton':
+                                options = [...new Set(data.map(row => row.Category))];
+                                break;
+                            case 'segmentButton':
+                                options = [...new Set(data.map(row => row.Segment))];
+                                break;
+                            case 'stateButton':
+                                options = [...new Set(data.map(row => row.State))];
+                                break;
+                            default:
+                                options = [];
+                                break;
                         }
-                    }
-                }
+                        populateDropdownOptions(options, optionsId);
+                    })
+                    .catch(error => {
+                        console.error('Failed to fetch data:', error);
+                    });
             });
-        }
 
-        // Dummy filter function - replace with actual filter logic if needed
-        function applyFilters(data) {
-            // Add your filter logic here, for now it returns the data unfiltered
-            return data;
-        }
+            // Event listener for search input (only for the State dropdown)
+            $('#stateButton').click(function() {
+                $('.search-input').val(''); // Clear search input
+                filterDropdownOptions(''); // Show all options initially
+            });
 
-        // Fetch, process, and render the data
-        function filterStackedBarChart() {
-            fetchData(DataUrl).then(data => {
-                if (data) {
-                    const filteredData = applyFilters(data);
-                    const SalesDataPerCategory = processStackedBarChartSalesDataPerCategory(filteredData);
-                    const chartData = prepareStackedChartData(SalesDataPerCategory);
-                    createStackedBarChart(chartData);
-                }
+            $('.search-input').keyup(function() {
+                const searchText = $(this).val();
+                filterDropdownOptions(searchText);
             });
-        }
 
-        // Initial call to load the chart
-        filterStackedBarChart();
-
-        // Function to download the page as a PDF
-        document.getElementById('downloadPDF').addEventListener('click', function () {
-            const { jsPDF } = window.jspdf;
-            const doc = new jsPDF();
-
-            html2canvas(document.body).then(canvas => {
-                const imgData = canvas.toDataURL('image/png');
-                const imgWidth = 210; // A4 width in mm
-                const pageHeight = 295; // A4 height in mm
-                const imgHeight = canvas.height * imgWidth / canvas.width;
-                let heightLeft = imgHeight;
-                let position = 0;
-
-                doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
-                heightLeft -= pageHeight;
-
-                while (heightLeft >= 0) {
-                    position = heightLeft - imgHeight;
-                    doc.addPage();
-                    doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
-                    heightLeft -= pageHeight;
+            // Close the dropdown if the user clicks outside of it
+            $(window).click(function(event) {
+                if (!$(event.target).closest('.dropdown-checkbox').length) {
+                    $('.dropdown-menu').removeClass('show');
                 }
-
-                doc.save('page.pdf');
             });
         });
     </script>

From d3441190bac585956e7ff56f2c53946a2d274f2f Mon Sep 17 00:00:00 2001
From: Rifcki12 <168059971+Rifcki12@users.noreply.github.com>
Date: Wed, 5 Jun 2024 20:25:42 +0700
Subject: [PATCH 4/8] FIXED

---
 html/css/style.css               |  87 +++++++++--
 html/javascript/monthlyscript.js | 194 -------------------------
 html/monthly.html                | 239 -------------------------------
 html/yearly.html                 | 135 ++++++++---------
 testfitur.html                   | 232 +++++++++---------------------
 5 files changed, 207 insertions(+), 680 deletions(-)
 delete mode 100644 html/javascript/monthlyscript.js
 delete mode 100644 html/monthly.html

diff --git a/html/css/style.css b/html/css/style.css
index 03eaa7d..59a24d0 100644
--- a/html/css/style.css
+++ b/html/css/style.css
@@ -2,6 +2,7 @@ h1, h2, h3, h4, h5, h6 {
   font-family: 'Roboto', sans-serif;
   font-size: 26px;
 }
+
 .judul{
   font-size: 18px !important;
 }
@@ -21,7 +22,19 @@ body{
   padding-top: 1%;
   margin-bottom: -2%;
 }
+.footer {
+  bottom: 0;
+  width: 100%;
+  background-color: #222;
+  color: #fff;
+  padding: 10px 0;
+  text-align: center;
+ }
 
+.footer-bottom {
+  background-color: #222;
+  padding: 5px 0;
+}
 /*========================================================= HEADER ========================================*/
 .image-responsive{
   width: 100%;
@@ -30,18 +43,9 @@ body{
 .topnav-container {
     background-color: white;
     overflow: hidden;
-
   }
 
-.navbar-nav .nav-link:hover {
-    background-color: transparent !important;
-    color: inherit !important;
-    pointer-events: none;
-}
-
-.nav-text-disabled .nav-link_judul:hover  {
-  color: black !important;
-}
+  
   
   /* Style the links inside the navigation bar */
   .topnav-a {
@@ -245,8 +249,9 @@ select::-ms-expand {
 /*========================================================= SLIDER ========================================*/
 .skorcard{
   position: flex;
-  width: 100%;
+  width: 97.8%;
   left: 0;
+  align-content: center;
 }
 .cards{
   width: 100%;
@@ -283,6 +288,7 @@ select::-ms-expand {
 /*=========================================================  ========================================*/
 .chartContainer{
   display: flex;
+  flex-direction: row;
   flex: 1;
 }
 .left {
@@ -309,8 +315,13 @@ canvas {
 
 .line-chart{
   width: 100%;
+  margin-bottom: 20px;
   margin-left: 20px;
 }
+.lineCustom{
+  width: 100%;
+  height: 100%;
+}
 
 h2 {
   margin-top: 20px;
@@ -411,13 +422,65 @@ th {
 
 @media screen and (max-width: 768px) {
   /* Ketika lebar layar kurang dari atau sama dengan 768px */
+  h1, h2, h3, h4, h5, h6 {
+    font-family: 'Roboto', sans-serif;
+    font-size: 20px;
+  }
+  .judul{
+  font-size: 16px !important;
+  }
+  b{
+    font-family: 'Roboto', sans-serif;
+    font-size: 15px;
+  }
+  body{
+    font-family: 'Roboto', sans-serif;
+    font-size: 10;
+  }
+  .header-cust {
+    text-align: center;
+  }
+  .header-container {
+    display:flex;
+    flex-direction: column;
+    overflow: hidden;
+    margin-bottom: 2em;
+  }
+  .topnav-special {
+    float: left;
+    color: black;
+    text-align: left;
+    text-decoration: none;
+    font-size: 17px;
+  }
+  .chartContainer{
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    flex: 1;
+    flex-wrap: wrap;
+  }
+  .BarChartSalesCategoryCustom{
+    height: 50px;
+  }
   .cards {
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Menyesuaikan jumlah kolom dan lebar kartu */
     grid-gap: 10px; /* Mengurangi jarak antara kartu */
+    padding: 10px;
+  }
+  .skorcard {
+    width: 95%;
   }
-
   .topnav-logo {
     display: none;
   }
+  .footer-container {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .footer-left, .footer-center, .footer-right {
+      margin: 20px 0;
+  }
 }
 
diff --git a/html/javascript/monthlyscript.js b/html/javascript/monthlyscript.js
deleted file mode 100644
index 3b084f7..0000000
--- a/html/javascript/monthlyscript.js
+++ /dev/null
@@ -1,194 +0,0 @@
-   //------------------------------ GENERAL FUNCTION ----------------------------------
-   const DataUrl = 'http://localhost:3000/data';
-            
-   // Ambil data dari json
-   function fetchData(url) {
-       return fetch(url)
-           .then(response => {
-               if (!response.ok) {
-                   throw new Error('Network response was not ok');
-               }
-               return response.json();
-           })
-           .catch(error => {
-               console.error('There was a problem with the fetch operation:', error);
-           });
-   }
-
-
-//------------------------------ SCORE CARD FUNCTION ----------------------------------
-function isiDropdownFilter(selectElement, items) {
-   if (Array.isArray(items)) {
-       items.forEach(function(item) {
-           const option = document.createElement('option');
-           option.value = item;
-           option.textContent = item;
-           selectElement.appendChild(option);
-       });
-   } else {
-       console.error('Expected an array but got:', items);
-   }
-}
-
-// Populasi dropdowns dengan nilai unik dari data
-function populateDropdowns(data) {
-   const states = [...new Set(data.map(row => row.State))];
-   const categories = [...new Set(data.map(row => row.Category))];
-   const segments = [...new Set(data.map(row => row.Segment))];
-
-   isiDropdownFilter(document.getElementById('stateSelect'), states);
-   isiDropdownFilter(document.getElementById('categorySelect'), categories);
-   isiDropdownFilter(document.getElementById('segmentSelect'), segments);
-}
-
-// Ambil value Filter
-function applyFilters(data) {
-   const selectedState = document.getElementById('stateSelect').value;
-   const selectedCategory = document.getElementById('categorySelect').value;
-   const selectedSegment = document.getElementById('segmentSelect').value;
-
-   return data.filter(row => {
-       return (!selectedState || row.State === selectedState) &&
-           (!selectedCategory || row.Category === selectedCategory) &&
-           (!selectedSegment || row.Segment === selectedSegment);
-   });
-}
-
-// Hitung Total Sales
-function calculateTotalSales(data) {
-   let totalSales = 0;
-   data.forEach(row => {
-       const sales = parseFloat(row.Sales.replace(/\$/g, '').replace(/,/g, ''));
-       totalSales += sales;
-   });
-   return totalSales;
-}
-
-// Hitung Total Profit
-function calculateTotalProfit(data) {
-   let totalProfit = 0;
-   data.forEach(row => {
-       const profit = parseFloat(row.Profit.replace(/\$/g, '').replace(/,/g, ''));
-       totalProfit += profit;
-   });
-   return totalProfit;
-}
-
-// Hitung Total Orders
-function calculateTotalOrders(data) {
-   return data.length;
-}
-
-// Post To Card
-function postDataCard() {
-   fetchData(DataUrl).then(data => {
-       const filteredData = applyFilters(data);
-
-       const totalOrder = calculateTotalOrders(filteredData);
-       const formattedTotalOrder = totalOrder.toLocaleString('en-US');
-       document.getElementById('cardOrder').innerText = `${formattedTotalOrder}`;
-
-       // Total Sales
-       const totalSales = calculateTotalSales(filteredData);
-       const formattedTotalSales = totalSales.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
-       document.getElementById('cardSales').innerText = `$ ${formattedTotalSales}`;
-
-       // Total Profit
-       const totalProfit = calculateTotalProfit(filteredData);
-       const formattedTotalProfit = totalProfit.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
-       document.getElementById('cardProfit').innerText = `$ ${formattedTotalProfit}`;
-
-       // Profit Ratio
-       const profitRatio = (totalProfit / totalSales) * 100;
-       const formattedTotalProfitRatio = Math.round(profitRatio).toLocaleString('en-US');
-       document.getElementById('cardProfitRatio').innerText = `${formattedTotalProfitRatio} %`;
-   });
-}
-
-//------------------------------------------------- KALAU MAU TAMBAH CHART DISINI!!!!! ------------------------------------------------
-    
-// Fungsi untuk memproses data penjualan per negara bagian
-function processSalesData(data) {
-    const aggregatedData = {};
-
-    data.forEach(row => {
-        const state = row.State;
-        const sales = parseFloat(row.Sales.replace(/\$/g, '').replace(/,/g, ''));
-
-        if (aggregatedData[state]) {
-            aggregatedData[state] += sales;
-        } else {
-            aggregatedData[state] = sales;
-        }
-    });
-
-    return aggregatedData;
-}
-
-// Variabel global untuk chart
-let BarChart = null;
-
-// Fungsi untuk membuat bar chart
-function createBarChartSalesState(data) {
-    const ctx = document.getElementById("BarChartSalesPerState").getContext("2d");
-    if (BarChart != null) {
-        BarChart.destroy(); // Hapus chart sebelumnya jika ada
-    }
-
-    BarChart = new Chart(ctx, {
-        type: "bar",
-        data: {
-            labels: Object.keys(data), // Label adalah nama negara bagian
-            datasets: [
-                {
-                    label: "Total Sales by State",
-                    data: Object.values(data), // Data adalah total penjualan
-                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
-                    borderColor: 'rgba(75, 192, 192, 1)',
-                    borderWidth: 1,
-                },
-            ],
-        },
-        options: {
-            responsive: true,
-            maintainAspectRatio: false,
-            scales: {
-                y: {
-                    beginAtZero: true,
-                    ticks: {
-                        callback: function(value) {
-                            return '$' + value.toLocaleString(); // Format angka menjadi dolar
-                        }
-                    }
-                },
-            },
-        },
-    });
-}
-
-// Ambil data penjualan dari server, proses, dan buat chart
-fetchData(DataUrl)
-    .then(data => {
-        const processedData = processSalesData(data);
-        createBarChartSalesState(processedData);
-    });
-
-
-
-
-
-
-
-
-//------------------------------------^^^^^^^ KALAU MAU TAMBAH CHART DISINI (INI BATASNYA)!!!!! ^^^^^-----------------------------------------
-//------------------------------------------------ EVENT LISTENER ------------------------------------------------
-// Tambah event listeners ke dropdowns
-document.getElementById('stateSelect').addEventListener('change', postDataCard);
-document.getElementById('categorySelect').addEventListener('change', postDataCard);
-document.getElementById('segmentSelect').addEventListener('change', postDataCard);
-
-// Fetch data, populate dropdowns, dan lakukan kalkulasi awal
-fetchData(DataUrl).then(data => {
-   populateDropdowns(data);
-   postDataCard();
-}); 
\ No newline at end of file
diff --git a/html/monthly.html b/html/monthly.html
deleted file mode 100644
index fd368a5..0000000
--- a/html/monthly.html
+++ /dev/null
@@ -1,239 +0,0 @@
-<html lang="en">
-    <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>Document</title>
-        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-        <link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
-        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
-        <link rel="stylesheet" href="./css/style.css">
-        
-
-
-    </head>
-    
-    <body>
-        <section>
-            <div class="header-container">
-                <!--Header-->
-                <div class="topnav-container header-cust">
-                    <a class="topnav-logo navbar-nav nav-link"><img class="image-responsive" src="./assets/logo-header-resized-120px.png" alt="Logo Perusahaan"></a>
-                    <a class="topnav-special navbar-nav nav-link nav-text-disabled nav-link_judul">
-                        <div class="navbar-nav nav-link">
-                            <div class="kotak navbar-nav nav-link">
-                                <h1 class="font-weight-bold" >
-                                    Superstore Year Sales Performance Overview
-                                </h1>
-                            </div>
-                            <div>
-                                <img class="image-responsive" src="./assets/Rectangle 205.png" alt="garis">
-                            </div>
-                        </div>
-                    </a>
-                    <a class="topnav-button-position topnav-a topnav-hover navbar-nav nav-link" href="#news"> Monthly Sales</a>
-                    <a class="topnav-button-position topnav-a-active topnav-hover navbar-nav nav-link" href="#home">Yearly Sales</a>
-                </div>
-
-                <!--FILTER-->
-                <div class="sections">
-                    <!--BUTTON DOWNLOAD PDF-->
-                    <div class="#">
-                        <button class="button">Download PDF</button>
-                    </div>
-                    <!--SHOW RAW DATA-->
-                    <div class="#">
-                        <button type="button" class="button" data-toggle="modal" data-target="#dataTableModal">Show Data</button>
-                    </div>
-
-                    <!--DROPDOWN STATE-->
-                    <div class="select">
-                        <select name="state" id="stateSelect">
-                            <option value="">All State</option>
-                        </select>
-                    </div>
-                    
-                    <!--DROPDOWN CATEGORY-->
-                    <div class="select">
-                        <select name="category" id="categorySelect">
-                            <option value="">All Categories</option>
-                        </select>
-                    </div>
-
-                    <!--SEGMENT-->
-                    <div class="select">
-                        <select name="segment" id="segmentSelect">
-                            <option value="">All Segment</option>
-                        </select>
-                    </div>
-
-                    <!--<div class="slider-container">
-                        <div class="slider-items">
-                            <p>Year</p>
-                        </div>
-                        <div class="slider-items slider-width">
-                            <input type="range" min="1" max="100" value="50" class="slider" id="#">
-                        </div>
-                    </div>-->
-                </div>
-            </div>
-
-            <!--SCORE CARD-->
-            <div class="skorcard"> 
-                <div class="cards">
-                    <div class="tampilan-card">
-                        <div class="card-content ">
-                            <div class="card-name "><b>Total Order</b></div>
-                            <div class="number" id="cardOrder"></div>
-                        </div>
-                    </div>
-                    <div class="tampilan-card">
-                        <div class="card-content">
-                            <div class="card-name"><b>Sales</b></div>
-                            <div class="number" id="cardSales"></div>
-                        </div>
-                    </div>
-                    <div class="tampilan-card">
-                        <div class="card-content">
-                            <div class="card-name"><b>Profit</b></div>
-                            <div class="number" id="cardProfit"></div>
-                        </div>
-                    </div>
-                    <div class="tampilan-card">
-                        <div class="card-content ">
-                            <div class="card-name">Profit Ratio</b></div>
-                            <div class="number" id="cardProfitRatio"></div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <!--//------------------------------------------------- KALAU MAU TAMBAH CHART DISINI!!!!! ----------------------------------------------!-->
-            <!-- CHART ROW 1 (ini di hapus/diganti aja) -->
-            <div class="chartContainer">
-                <div class="left">
-                    <h2 class="font-weight-bold judul">Sales by Category</h2>
-                    <div><canvas id="BarChartSalesPerState" width="800" height="400"></canvas></div>
-                </div>
-
-                <div class="right">
-                    <h2 class="font-weight-bold judul">Dummy</h2>
-                    <div><canvas id="DummyChart"></canvas></div>
-                </div>
-            </div>
-
-            <!-- CHART ROW 2 (ini di hapus/diganti aja) -->
-            <div class="line-chart">
-                <h2 class="font-weight-bold judul">YoY Sales Performance</h2>
-                <div><canvas id="LineChartSalesProfit"width="400" height="100"></canvas></div>
-            </div>
-        </section>
-        
-         <!--//------------------^^^^^^^ KALAU MAU TAMBAH CHART DISINI (INI BATASNYA)!!!!! ^^^^^---------------------------------------!-->
-    <!-- Modal -->
-    <div class="modal fade" id="dataTableModal" tabindex="-1" role="dialog" aria-labelledby="dataTableModalLabel" aria-hidden="true">
-        <div class="modal-dialog modal-lg" role="document">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title" id="dataTableModalLabel">Data Table</h5>
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                        <span aria-hidden="true">&times;</span>
-                    </button>
-                </div>
-                <div class="modal-body">
-                    <table id="dataTable" class="display" style="width:100%">
-                        <thead>
-                            <tr>
-                                <th>Order ID</th>
-                                <th>Order Date</th>
-                                <th>Ship Date</th>
-                                <th>Ship Mode</th>
-                                <th>Customer ID</th>
-                                <th>Customer Name</th>
-                                <th>Segment</th>
-                                <th>Country</th>
-                                <th>City</th>
-                                <th>State</th>
-                                <th>Postal Code</th>
-                                <th>Region</th>
-                                <th>Product ID</th>
-                                <th>Category</th>
-                                <th>Sub-Category</th>
-                                <th>Product Name</th>
-                                <th>Sales</th>
-                                <th>Quantity</th>
-                                <th>Discount</th>
-                                <th>Profit</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <!-- Data will be populated by JavaScript -->
-                        </tbody>
-                    </table>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                </div>
-            </div>
-        </div>
-    </body>
-  
-</html>
-
-
-<script src="./javascript/monthlyscript.js">  </script>
-<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
-<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
-
-<script>
-      $(document).ready(function() {
-        let dataTableInitialized = false;
-
-         function initializeDataTable(data) {
-             $('#dataTable').DataTable({
-                 data: data,
-                 columns: [
-                     { data: 'Order ID' },
-                     { data: 'Order Date' },
-                     { data: 'Ship Date' },
-                     { data: 'Ship Mode' },
-                     { data: 'Customer ID' },
-                     { data: 'Customer Name' },
-                     { data: 'Segment' },
-                     { data: 'Country' },
-                     { data: 'City' },
-                     { data: 'State' },
-                     { data: 'Postal Code' },
-                     { data: 'Region' },
-                     { data: 'Product ID' },
-                     { data: 'Category' },
-                     { data: 'Sub-Category' },
-                     { data: 'Product Name' },
-                     { data: 'Sales' },
-                     { data: 'Quantity' },
-                     { data: 'Discount' },
-                     { data: 'Profit' }
-                 ],
-                 pageLength: 5, 
-                 lengthMenu: [5, 10, 15, 30], 
-                 responsive: true,
-                 scrollX: true // Enable horizontal scrolling
-             });
-             dataTableInitialized = true;
-         }
-
-         // Fetch data and initialize DataTable when modal is shown
-        
-         $('#dataTableModal').on('shown.bs.modal', function () {
-        if (!dataTableInitialized) { 
-            fetchData(DataUrl).then(data => {
-                initializeDataTable(data);
-            });
-        } else {
-            $('#dataTable').DataTable().clear().draw();
-            fetchData(DataUrl).then(data => {
-                $('#dataTable').DataTable().rows.add(data).draw();
-            });
-        }
-    });
-     });
-</script>
diff --git a/html/yearly.html b/html/yearly.html
index fa397e4..eb1bca3 100644
--- a/html/yearly.html
+++ b/html/yearly.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html lang="en">
     <head>
         <meta charset="UTF-8">
@@ -8,7 +9,6 @@
         <link rel="stylesheet" href="./css/style.css">
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/apexcharts/dist/apexcharts.css">
         <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
-        
     </head>
     
     <body>
@@ -16,10 +16,10 @@
             <div class="header-container">
                 <!--Header-->
                 <div class="topnav-container header-cust">
-                    <a class="topnav-logo navbar-nav nav-link"><img class="image-responsive" src="./assets/logo-header-resized-120px.png" alt="Logo Perusahaan"></a>
-                    <a class="topnav-special navbar-nav nav-link nav-text-disabled nav-link_judul">
-                        <div class="navbar-nav nav-link">
-                            <div class="kotak navbar-nav nav-link">
+                    <a class="topnav-logo"><img class="image-responsive" src="./assets/logo-header-resized-120px.png" alt="Logo Perusahaan"></a>
+                    <a class="topnav-special">
+                        <div class="">
+                            <div class="kotak">
                                 <h1 class="font-weight-bold" >
                                     Superstore Year Sales Performance Overview
                                 </h1>
@@ -29,17 +29,10 @@ <h1 class="font-weight-bold" >
                             </div>
                         </div>
                     </a>
-                    <a class="topnav-button-position topnav-a topnav-hover navbar-nav nav-link" href="#news"> Monthly Sales</a>
-                    <a class="topnav-button-position topnav-a-active topnav-hover navbar-nav nav-link" href="#home">Yearly Sales</a>
                 </div>
-
+                
                 <!--FILTER-->
                 <div class="sections">
-                    <!--BUTTON DOWNLOAD PDF-->
-                    <div class="#">
-                        <button class="button" id="downloadPDF">Download PDF</button>
-                    </div>
-                    <!--SHOW RAW DATA-->
                     <div class="#">
                         <button type="button" class="button" data-toggle="modal" data-target="#dataTableModal">Show Data</button>
                     </div>
@@ -64,15 +57,6 @@ <h1 class="font-weight-bold" >
                             <option value="">All Segment</option>
                         </select>
                     </div>
-
-                    <!--<div class="slider-container">
-                        <div class="slider-items">
-                            <p>Year</p>
-                        </div>
-                        <div class="slider-items slider-width">
-                            <input type="range" min="1" max="100" value="50" class="slider" id="#">
-                        </div>
-                    </div>-->
                 </div>
             </div>
 
@@ -99,7 +83,7 @@ <h1 class="font-weight-bold" >
                     </div>
                     <div class="tampilan-card">
                         <div class="card-content ">
-                            <div class="card-name">Profit Ratio</b></div>
+                            <div class="card-name"><b>Profit Ratio</b></div>
                             <div class="number" id="cardProfitRatio"></div>
                         </div>
                     </div>
@@ -120,10 +104,13 @@ <h2 class="font-weight-bold">State sales performance</h2>
             </div>
 
             <!-- CHART ROW 2 -->
-            <div class="line-chart">
-                <h2 class="font-weight-bold">YoY Sales Performance</h2>
-                <div><canvas id="LineChartSalesProfit" width="400" height="100"></canvas></div>
+            <div class="chartContainer">
+                <div class="line-chart">
+                    <h2 class="font-weight-bold">YoY Sales Performance</h2>
+                    <div><canvas class="lineCustom" id="LineChartSalesProfit" width="400" height="100"></canvas></div>
+                </div>
             </div>
+            
 
             <!-- CHART ROW 3 -->
             <div class="chartContainer">
@@ -160,58 +147,62 @@ <h2 class="font-weight-bold">Top 5 Product Sold based on Quantity Sales</h2>
             </div>
         </section>
         
-
-    <!-- Modal -->
-    <div class="modal" id="dataTableModal" tabindex="-1" role="dialog" aria-labelledby="dataTableModalLabel" aria-hidden="true">
-        <div class="modal-dialog">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title" id="dataTableModalLabel">Superstore Sales</h5>
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                        <span aria-hidden="true">&times;</span>
-                    </button>
-                </div>
-                <div class="modal-body">
-                    <table id="dataTable" class="display" style="width:100%">
-                        <thead>
-                            <tr>
-                                <th>Order ID</th>
-                                <th>Order Date</th>
-                                <th>Ship Date</th>
-                                <th>Ship Mode</th>
-                                <th>Customer ID</th>
-                                <th>Customer Name</th>
-                                <th>Segment</th>
-                                <th>Country</th>
-                                <th>City</th>
-                                <th>State</th>
-                                <th>Postal Code</th>
-                                <th>Region</th>
-                                <th>Product ID</th>
-                                <th>Category</th>
-                                <th>Sub-Category</th>
-                                <th>Product Name</th>
-                                <th>Sales</th>
-                                <th>Quantity</th>
-                                <th>Discount</th>
-                                <th>Profit</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <!-- Data will be populated by JavaScript -->
-                        </tbody>
-                    </table>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+        <!-- Modal -->
+        <div class="modal" id="dataTableModal" tabindex="-1" role="dialog" aria-labelledby="dataTableModalLabel" aria-hidden="true">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="dataTableModalLabel">Superstore Sales</h5>
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                            <span aria-hidden="true">&times;</span>
+                        </button>
+                    </div>
+                    <div class="modal-body">
+                        <table id="dataTable" class="display" style="width:100%">
+                            <thead>
+                                <tr>
+                                    <th>Order ID</th>
+                                    <th>Order Date</th>
+                                    <th>Ship Date</th>
+                                    <th>Ship Mode</th>
+                                    <th>Customer ID</th>
+                                    <th>Customer Name</th>
+                                    <th>Segment</th>
+                                    <th>Country</th>
+                                    <th>City</th>
+                                    <th>State</th>
+                                    <th>Postal Code</th>
+                                    <th>Region</th>
+                                    <th>Product ID</th>
+                                    <th>Category</th>
+                                    <th>Sub-Category</th>
+                                    <th>Product Name</th>
+                                    <th>Sales</th>
+                                    <th>Quantity</th>
+                                    <th>Discount</th>
+                                    <th>Profit</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <!-- Data will be populated by JavaScript -->
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                    </div>
                 </div>
             </div>
         </div>
+
+        <footer class="footer">
+            <div class="footer-bottom">
+                <p>&copy; Team 16</p>
+            </div>
+        </footer>
     </body>
-  
 </html>
 
-
 <script src="./javascript/yearlyscript.js">  </script>
 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
diff --git a/testfitur.html b/testfitur.html
index 454a39e..6fd6b99 100644
--- a/testfitur.html
+++ b/testfitur.html
@@ -1,192 +1,98 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
-    <title>Dropdown with Checkbox Options</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
     <style>
-        .dropdown-checkbox {
-            position: relative;
-            display: inline-block;
-            margin-right: 20px;
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
         }
 
-        .dropdown-checkbox .dropdown-toggle {
-            padding: 10px 20px;
-            border: none;
-            border-radius: 5px;
-            background-color: #f0f0f0;
-            cursor: pointer;
-            margin-bottom: 10px;
+        .footer {
+            background-color: #333;
+            color: #fff;
+            padding: 20px 0;
+            text-align: center;
         }
 
-        .dropdown-checkbox .dropdown-menu {
-            position: absolute;
-            top: 100%;
-            left: 0;
-            background-color: #f9f9f9;
-            border: 1px solid #ccc;
-            padding: 10px;
-            display: none;
-            z-index: 1;
-            width: 200px;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.15);
+        .footer-container {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-around;
+            padding: 20px;
         }
 
-        .dropdown-checkbox .dropdown-menu.show {
-            display: block;
+        .footer-left, .footer-center, .footer-right {
+            flex: 1;
+            margin: 10px;
         }
 
-        .dropdown-checkbox .checkbox-list {
-            list-style: none;
-            padding: 0;
-            margin: 0;
+        .footer h3 {
+            margin-bottom: 10px;
         }
 
-        .dropdown-checkbox .checkbox-list label {
-            display: block;
-            padding: 10px;
-            border-bottom: 1px solid #ccc;
-            cursor: pointer;
+        .footer p {
+            margin: 5px 0;
         }
 
-        .dropdown-checkbox .checkbox-list label:last-child {
-            border-bottom: none;
+        .social-links a {
+            color: #fff;
+            margin: 0 10px;
+            text-decoration: none;
         }
 
-        .dropdown-checkbox .checkbox-list input[type="checkbox"] {
-            margin-right: 10px;
+        .social-links a:hover {
+            text-decoration: underline;
         }
 
-        .dropdown-checkbox .search-input {
-            width: 100%;
-            padding: 8px;
-            border: 1px solid #ccc;
-            border-radius: 5px;
-            margin-bottom: 10px;
-            box-sizing: border-box;
+        .footer-bottom {
+            background-color: #222;
+            padding: 10px 0;
+        }
+
+        @media (max-width: 768px) {
+            .footer-container {
+                flex-direction: column;
+                align-items: center;
+            }
+            
+            .footer-left, .footer-center, .footer-right {
+                margin: 20px 0;
+            }
         }
     </style>
 </head>
 <body>
-    <div class="dropdown-checkbox">
-        <button class="dropdown-toggle" type="button" id="categoryButton">
-            Select Category
-        </button>
-        <div class="dropdown-menu" aria-labelledby="categoryButton">
-            <div class="checkbox-list" id="categoryOptions">
-                <!-- Categories will be dynamically populated here -->
-            </div>
-        </div>
-    </div>
+    <!-- Konten lainnya di sini -->
 
-    <div class="dropdown-checkbox">
-        <button class="dropdown-toggle" type="button" id="segmentButton">
-            Select Segment
-        </button>
-        <div class="dropdown-menu" aria-labelledby="segmentButton">
-            <div class="checkbox-list" id="segmentOptions">
-                <!-- Segments will be dynamically populated here -->
+    <footer class="footer">
+        <div class="footer-container">
+            <div class="footer-left">
+                <h3>About Us</h3>
+                <p>Company Name is a leading provider of quality services and products in the industry. Our mission is to provide excellent customer service and satisfaction.</p>
             </div>
-        </div>
-    </div>
-
-    <div class="dropdown-checkbox">
-        <button class="dropdown-toggle" type="button" id="stateButton">
-            Select State
-        </button>
-        <div class="dropdown-menu" aria-labelledby="stateButton">
-            <input type="text" class="search-input" placeholder="Search...">
-            <div class="checkbox-list" id="stateOptions">
-                <!-- States will be dynamically populated here -->
+            <div class="footer-center">
+                <h3>Contact Us</h3>
+                <p>Email: info@companyname.com</p>
+                <p>Phone: +123 456 7890</p>
+                <p>Address: 123 Street Name, City, Country</p>
+            </div>
+            <div class="footer-right">
+                <h3>Follow Us</h3>
+                <div class="social-links">
+                    <a href="https://www.facebook.com" target="_blank">Facebook</a>
+                    <a href="https://www.twitter.com" target="_blank">Twitter</a>
+                    <a href="https://www.instagram.com" target="_blank">Instagram</a>
+                    <a href="https://www.linkedin.com" target="_blank">LinkedIn</a>
+                </div>
             </div>
         </div>
-    </div>
-
-    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
-    <script>
-        $(document).ready(function() {
-            const DataUrl = 'http://localhost:3000/data'; // URL to fetch data from
-
-            // Function to fetch data from URL
-            function fetchData(url) {
-                return fetch(url)
-                    .then(response => {
-                        if (!response.ok) {
-                            throw new Error('Network response was not ok');
-                        }
-                        return response.json();
-                    })
-                    .catch(error => {
-                        console.error('There was a problem with the fetch operation:', error);
-                    });
-            }
-
-            // Function to populate dropdown options
-            function populateDropdownOptions(options, containerId) {
-                const container = $('#' + containerId);
-                container.empty(); // Clear existing options
-                
-                // Add other options
-                options.forEach(option => {
-                    const label = $('<label>');
-                    const checkbox = $('<input>').attr({
-                        type: 'checkbox',
-                        value: option,
-                    });
-                    label.append(checkbox, option);
-                    container.append(label);
-                });
-            }
-
-            // Event listener for dropdown toggle
-            $('.dropdown-checkbox .dropdown-toggle').click(function() {
-                $(this).next('.dropdown-menu').toggleClass('show');
-
-                // Fetch data and populate dropdown options
-                const dropdownId = $(this).attr('id');
-                const optionsId = dropdownId.replace('Button', 'Options');
-
-                fetchData(DataUrl)
-                    .then(data => {
-                        let options;
-                        switch (dropdownId) {
-                            case 'categoryButton':
-                                options = [...new Set(data.map(row => row.Category))];
-                                break;
-                            case 'segmentButton':
-                                options = [...new Set(data.map(row => row.Segment))];
-                                break;
-                            case 'stateButton':
-                                options = [...new Set(data.map(row => row.State))];
-                                break;
-                            default:
-                                options = [];
-                                break;
-                        }
-                        populateDropdownOptions(options, optionsId);
-                    })
-                    .catch(error => {
-                        console.error('Failed to fetch data:', error);
-                    });
-            });
-
-            // Event listener for search input (only for the State dropdown)
-            $('#stateButton').click(function() {
-                $('.search-input').val(''); // Clear search input
-                filterDropdownOptions(''); // Show all options initially
-            });
-
-            $('.search-input').keyup(function() {
-                const searchText = $(this).val();
-                filterDropdownOptions(searchText);
-            });
-
-            // Close the dropdown if the user clicks outside of it
-            $(window).click(function(event) {
-                if (!$(event.target).closest('.dropdown-checkbox').length) {
-                    $('.dropdown-menu').removeClass('show');
-                }
-            });
-        });
-    </script>
+        <div class="footer-bottom">
+            <p>&copy; 2024 Company Name. All rights reserved.</p>
+        </div>
+    </footer>
 </body>
 </html>

From f1f6a8ea854b7fdb632be865b74471a58c249b25 Mon Sep 17 00:00:00 2001
From: Rifcki12 <168059971+Rifcki12@users.noreply.github.com>
Date: Wed, 5 Jun 2024 20:29:38 +0700
Subject: [PATCH 5/8] delete file

---
 test.html      | 1011 ------------------------------------------------
 testfitur.html |   98 -----
 2 files changed, 1109 deletions(-)
 delete mode 100644 test.html
 delete mode 100644 testfitur.html

diff --git a/test.html b/test.html
deleted file mode 100644
index a955102..0000000
--- a/test.html
+++ /dev/null
@@ -1,1011 +0,0 @@
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
-    <link rel="stylesheet" href="html/css/style.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/apexcharts/dist/apexcharts.css">
-    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
-    <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.3.2/dist/html2canvas.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
-
-</head>
-  
-<body>
-    <section>
-        <div class="header-container">
-            <!--Header-->
-            <div class="topnav-container header-cust">
-                <a class="topnav-logo navbar-nav nav-link"><img class="image-responsive" src="html/assets/logo-header-resized-120px.png" alt="Logo Perusahaan"></a>
-                <a class="topnav-special navbar-nav nav-link nav-text-disabled nav-link_judul">
-                    <div class="navbar-nav nav-link">
-                        <div class="kotak navbar-nav nav-link">
-                            <h1 class="font-weight-bold" >
-                                Superstore Year Sales Performance Overview
-                            </h1>
-                        </div>
-                        <div>
-                            <img class="image-responsive" src="html/assets/Rectangle 205.png" alt="garis">
-                        </div>
-                    </div>
-                </a>
-                <a class="topnav-button-position topnav-a topnav-hover navbar-nav nav-link" href="#news"> Monthly Sales</a>
-                <a class="topnav-button-position topnav-a-active topnav-hover navbar-nav nav-link" href="#home">Yearly Sales</a>
-            </div>
-
-            <!--FILTER-->
-            <div class="sections">
-                 <!--BUTTON DOWNLOAD PDF-->
-                <div class="#">
-                    <button class="button" id="downloadPDF">Download PDF</button>
-                </div>
-                <!--SHOW RAW DATA-->
-                <div class="#">
-                    <button type="button" class="button" id="clickModal" data-toggle="modal" data-target="#dataTableModal">Show Data</button>
-                </div>
-
-                 <!--DROPDOWN STATE-->
-                <div class="select">
-                    <select name="state" id="stateSelect">
-                        <option value="">All State</option>
-                    </select>
-                </div>
-                
-                 <!--DROPDOWN CATEGORY-->
-                <div class="select">
-                    <select name="category" id="categorySelect">
-                        <option value="">All Categories</option>
-                    </select>
-                </div>
-
-                 <!--SEGMENT-->
-                <div class="select">
-                    <select name="segment" id="segmentSelect">
-                        <option value="">All Segment</option>
-                    </select>
-                </div>
-
-                <!--<div class="slider-container">
-                    <div class="slider-items">
-                        <p>Year</p>
-                    </div>
-                    <div class="slider-items slider-width">
-                        <input type="range" min="1" max="100" value="50" class="slider" id="#">
-                    </div>
-                </div>-->
-            </div>
-        </div>
-
-        <!--SCORE CARD-->
-        <div class="skorcard"> 
-            <div class="cards">
-                <div class="tampilan-card">
-                    <div class="card-content">
-                        <div class="card-name">Total Order</div>
-                        <div class="number" id="cardOrder"></div>
-                    </div>
-                </div>
-                <div class="tampilan-card">
-                    <div class="card-content">
-                        <div class="card-name">Sales</div>
-                        <div class="number" id="cardSales"></div>
-                    </div>
-                </div>
-                <div class="tampilan-card">
-                    <div class="card-content">
-                        <div class="card-name">Profit</div>
-                        <div class="number" id="cardProfit"></div>
-                    </div>
-                </div>
-                <div class="tampilan-card">
-                    <div class="card-content">
-                        <div class="card-name">Profit Ratio</div>
-                        <div class="number" id="cardProfitRatio"></div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        
-        <!-- CHART ROW 1 -->
-        <div class="chartContainer">
-            <div class="left">
-                <h2 class="font-weight-bold">Sales by Category</h2>
-                <div><canvas id="BarChartSalesPerCategory" width="400"></canvas></div>
-            </div>
-
-            <div class="right">
-                <h2 class="font-weight-bold">State sales performance</h2>
-                <canvas id="StackedBarChartSalesPerState" width="400" ></canvas>
-            </div>
-        </div>
-
-        <!-- CHART ROW 2 -->
-        <div class="line-chart">
-            <h2 class="font-weight-bold">YoY Sales Performance</h2>
-            <div><canvas id="LineChartSalesProfit" width="400" height="100"></canvas></div>
-        </div>
-
-        <!-- CHART ROW 3 -->
-        <div class="chartContainer">
-            <div class="left">
-                <h2 class="font-weight-bold">Top Performanced Salesman</h2>
-                <table id="salesman-table">
-                    <thead>
-                        <tr>
-                            <th>Salesman</th>
-                            <th>Total Sales
-                                <button id="sortAscBtn">↓</button>
-                                <button id="sortDescBtn">↑</button></th>
-                        </tr>
-                    </thead>
-                    <tbody id="salesman-body">
-                        <!-- Table content will be added dynamically using JavaScript -->
-                    </tbody>
-                </table>
-            
-                <div class="pagination">
-                        <button id="prevBtn" disabled>&laquo; Previous</button>
-                        <span id="pageInfo">Page 1</span>
-                        <button id="nextBtn">Next &raquo;</button>
-                </div>
-            </div>
-
-            <div class="left">
-                <h2 class="font-weight-bold">Sales per Region</h2>
-                <div id="chart"></div>
-            </div>
-            <div class="right">
-                <h2 class="font-weight-bold">Top 5 Product Sold based on Quantity Sales</h2>
-                <div><canvas id="VerticalBarchartProductSales" height="300"></canvas></div>
-            </div>
-        </div>
-    </section>
-    
-
-   <!-- Modal -->
-   <div class="modal fade" id="dataTableModal" tabindex="-1" role="dialog" aria-labelledby="dataTableModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-lg" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title" id="dataTableModalLabel">Data Table</h5>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                </button>
-            </div>
-            <div class="modal-body">
-                <table id="dataTable" class="display" style="width:100%">
-                    <thead>
-                        <tr>
-                            <th>Order ID</th>
-                            <th>Order Date</th>
-                            <th>Ship Date</th>
-                            <th>Ship Mode</th>
-                            <th>Customer ID</th>
-                            <th>Customer Name</th>
-                            <th>Segment</th>
-                            <th>Country</th>
-                            <th>City</th>
-                            <th>State</th>
-                            <th>Postal Code</th>
-                            <th>Region</th>
-                            <th>Product ID</th>
-                            <th>Category</th>
-                            <th>Sub-Category</th>
-                            <th>Product Name</th>
-                            <th>Sales</th>
-                            <th>Quantity</th>
-                            <th>Discount</th>
-                            <th>Profit</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <!-- Data will be populated by JavaScript -->
-                    </tbody>
-                </table>
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-            </div>
-        </div>
-    </div>
-</body>
-  
-</html>
-
-
-<script>
-     //------------------------------ GENERAL FUNCTION ----------------------------------
-    const DataUrl = 'http://localhost:3000/data';
-            
-            // Ambil data dari json
-            function fetchData(url) {
-                return fetch(url)
-                    .then(response => {
-                        if (!response.ok) {
-                            throw new Error('Network response was not ok');
-                        }
-                        return response.json();
-                    })
-                    .catch(error => {
-                        console.error('There was a problem with the fetch operation:', error);
-                    });
-            }
-    
-
-        //------------------------------ SCORE CARD & FILTER FUNCTION ----------------------------------
-
-        //FILTER
-        function isiDropdownFilter(selectElement, items) {
-            if (Array.isArray(items)) {
-                items.forEach(function(item) {
-                    const option = document.createElement('option');
-                    option.value = item;
-                    option.textContent = item;
-                    selectElement.appendChild(option);
-                });
-            } else {
-                console.error('Expected an array but got:', items);
-            }
-        }
-
-        // Populasi dropdowns dengan nilai unik dari data
-        function populateDropdowns(data) {
-            const states = [...new Set(data.map(row => row.State))];
-            const categories = [...new Set(data.map(row => row.Category))];
-            const segments = [...new Set(data.map(row => row.Segment))];
-
-            isiDropdownFilter(document.getElementById('stateSelect'), states);
-            isiDropdownFilter(document.getElementById('categorySelect'), categories);
-            isiDropdownFilter(document.getElementById('segmentSelect'), segments);
-        }
-
-        // Ambil value Filter
-        function applyFilters(data) {
-            const selectedState = document.getElementById('stateSelect').value;
-            const selectedCategory = document.getElementById('categorySelect').value;
-            const selectedSegment = document.getElementById('segmentSelect').value;
-
-            return data.filter(row => {
-                return (!selectedState || row.State === selectedState) &&
-                    (!selectedCategory || row.Category === selectedCategory) &&
-                    (!selectedSegment || row.Segment === selectedSegment);
-            });
-        }
-
-        // Hitung Total Sales
-        function calculateTotalSales(data) {
-            let totalSales = 0;
-            data.forEach(row => {
-                const sales = parseFloat(row.Sales.replace(/\$/g, '').replace(/,/g, ''));
-                totalSales += sales;
-            });
-            return totalSales;
-        }
-
-        // Hitung Total Profit
-        function calculateTotalProfit(data) {
-            let totalProfit = 0;
-            data.forEach(row => {
-                const profit = parseFloat(row.Profit.replace(/\$/g, '').replace(/,/g, ''));
-                totalProfit += profit;
-            });
-            return totalProfit;
-        }
-
-         // Hitung Total Orders
-        function calculateTotalOrders(data) {
-            return data.length;
-        }
-
-        // Post To Card
-        function postDataCard() {
-            fetchData(DataUrl).then(data => {
-                const filteredData = applyFilters(data);
-
-                const totalOrder = calculateTotalOrders(filteredData);
-                const formattedTotalOrder = totalOrder.toLocaleString('en-US');
-                document.getElementById('cardOrder').innerText = `${formattedTotalOrder}`;
-
-                // Total Sales
-                const totalSales = calculateTotalSales(filteredData);
-                const formattedTotalSales = totalSales.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
-                document.getElementById('cardSales').innerText = `$ ${formattedTotalSales}`;
-
-                // Total Profit
-                const totalProfit = calculateTotalProfit(filteredData);
-                const formattedTotalProfit = totalProfit.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
-                document.getElementById('cardProfit').innerText = `$ ${formattedTotalProfit}`;
-
-                // Profit Ratio
-                const profitRatio = (totalProfit / totalSales) * 100;
-                const formattedTotalProfitRatio = Math.round(profitRatio).toLocaleString('en-US');
-                document.getElementById('cardProfitRatio').innerText = `${formattedTotalProfitRatio} %`;
-            });
-        }
-
-
-            //------------------------------ BARCHART SALES PER CATEGORY --------------------------------
-            
-                    const ctxBSC = document.getElementById('BarChartSalesPerCategory').getContext('2d');
-                    
-                    // Hitung Sales per Category
-                    function processSalesDataPerCategory(data) {
-                        const aggregatedData = {};
-            
-                        data.forEach(row => {
-                            const category = row.Category;
-                            const sales = parseFloat(row.Sales.replace(/\$/g, '').replace(/,/g, ''));
-            
-                            // check unique category terus jumlahkan salesnya
-                            if (aggregatedData[category]) {
-                                aggregatedData[category] += sales;
-                            } else {
-                                // Jika kategori belum ada, tambahkan kategori baru
-                                aggregatedData[category] = sales;
-                            }
-                        });
-            
-                        return aggregatedData;
-                    }
-
-                    let BarChart = null;
-
-                    function createBarChartSalesCategory(data) {
-                    let ctxBSC = document.getElementById("BarChartSalesPerCategory").getContext("2d");
-                    if (BarChart != null) {
-                            BarChart.data.labels = Object.keys(data); // Perbarui labels
-                            BarChart.data.datasets.forEach((dataset) => {
-                            dataset.data = Object.values(data); // Perbarui data
-                        });
-                        return BarChart.update();
-                    }
-                    BarChart = new Chart(ctxBSC, {
-                        type: "bar",
-                        data: {
-                            labels: Object.keys(data), // Label adalah kategori
-                            datasets: [
-                                {
-                                    label: "Total Sales by Category",
-                                    data: Object.values(data), // Data adalah total penjualan
-                                    borderWidth: 1,
-                                },
-                            ],
-                        },
-                        options: {
-                            responsive: true,
-                            maintainAspectRatio: false,
-                            scales: {
-                                y: {
-                                    beginAtZero: true,
-                                },
-                            },
-                        },
-                    });
-                }
-            
-                    // Ambil data penjualan dari server, proses, dan buat chart
-                    function filterBarChart (){
-                    fetchData(DataUrl)
-                        .then(data => {
-                            const filteredData = applyFilters(data);
-                            const processedDataBarChart = processSalesDataPerCategory(filteredData);
-                            createBarChartSalesCategory(processedDataBarChart);
-                        });
-                    }
-
-           //------------------------------ LINE CHART YoY PERFORMANCE --------------------------------
-           const preprocessData = (data) => {
-                const result = {};
-
-                data.forEach(order => {
-                    const date = new Date(order["Order Date"]);
-                    const year = date.getFullYear();
-                    const month = date.toLocaleString('default', { month: 'long' });
-
-                    if (!result[year]) {
-                        result[year] = {};
-                    }
-
-                    if (!result[year][month]) {
-                        result[year][month] = { sales: 0, profit: 0 };
-                    }
-
-                    result[year][month].sales += parseFloat(order.Sales.replace(/[^0-9.-]+/g, ""));
-                    result[year][month].profit += parseFloat(order.Profit.replace(/[^0-9.-]+/g, ""));
-                });
-
-                const sortedData = [];
-
-                Object.keys(result).sort().forEach(year => {
-                    Object.keys(result[year]).sort((a, b) => new Date(`1 ${a} ${year}`) - new Date(`1 ${b} ${year}`)).forEach(month => {
-                        sortedData.push({
-                            monthYear: `${month} ${year}`,
-                            sales: result[year][month].sales,
-                            profit: result[year][month].profit
-                        });
-                    });
-                });
-
-                return sortedData;
-            };
-
-            let lineChart = null;
-
-        function createLineChartSalesProfit(processedData) {
-            const labelsMonthYear = processedData.map(data => data.monthYear);
-            const sales = processedData.map(data => data.sales);
-            const profits = processedData.map(data => data.profit);
-
-            const ctxLSP = document.getElementById('LineChartSalesProfit').getContext('2d');
-            if (lineChart != null) {
-                lineChart.data.labels = labelsMonthYear; // Perbarui labels
-                lineChart.data.datasets[0].data = sales; // Perbarui data sales
-                lineChart.data.datasets[1].data = profits; // Perbarui data profits
-                return lineChart.update();
-            }
-
-            lineChart = new Chart(ctxLSP, {
-                type: 'line',
-                data: {
-                    labels: labelsMonthYear,
-                    datasets: [
-                        {
-                            label: 'Sales',
-                            data: sales,
-                            borderColor: 'rgba(75, 192, 192, 1)',
-                            borderWidth: 2,
-                            fill: false,
-                            tension: 0.2,
-                        },
-                        {
-                            label: 'Profit',
-                            data: profits,
-                            borderColor: 'rgba(153, 102, 255, 1)',
-                            borderWidth: 2,
-                            fill: false,
-                            tension: 0.2,
-                        }
-                    ]
-                },
-                options: {
-                    responsive: true, 
-                    maintainAspectRatio: false, 
-                    scales: {
-                        x: {
-                            display: true,
-                            title: {
-                                display: true,
-                                text: 'Month/Year'
-                            }
-                        },
-                        y: {
-                            display: true,
-                            title: {
-                                display: true,
-                                text: 'Amount ($)'
-                            }
-                        }
-                    }
-                }
-            });
-        }
-
-        // Function to fetch and process data
-        function filterLineChart() {
-            fetch(DataUrl)
-                .then(response => response.json())
-                .then(data => {
-                    const filteredData = applyFilters(data); // Apply any filters if needed
-                    const processedDataLineChart = preprocessData(filteredData); // Preprocess data as required
-                    createLineChartSalesProfit(processedDataLineChart); // Create or update the chart
-                })
-                .catch(error => console.error('Error fetching data:', error));
-        }
-</script>  
-
-<script>
-     let currentPage = 1;
-        const itemsPerPage = 5;
-        let totalSalesTable = {}; // Define totalSalesTable globally
-        let sortedSalesmen = [];
-        let sortDirection = 'asc'; // Initialize sort direction
-
-        function calculateTotalSalesTable(orders) {
-            const totalSales = {};
-
-            orders.forEach(order => {
-                const salesman = order["Customer Name"];
-                const sales = parseFloat(order.Sales.replace(/\$/g, '').replace(/,/g, ''));
-
-                // Check unique salesman dan jumlahkan total ordernya
-                if (totalSales[salesman]) {
-                    totalSales[salesman] += sales;
-                } else {
-                    // Jika salesman belum ada, tambahkan salesman baru
-                    totalSales[salesman] = sales;
-                }
-            });
-
-            return totalSales;
-        }
-
-        // Function untuk menampilkan data pada tabel
-        function displaySalesmanTable(totalSalesTable) {
-            const tableBody = document.getElementById('salesman-body');
-
-            tableBody.innerHTML = '';
-
-            const startIndex = (currentPage - 1) * itemsPerPage;
-            const endIndex = startIndex + itemsPerPage;
-
-            const salesmen = sortedSalesmen.slice(startIndex, endIndex);
-            salesmen.forEach(salesman => {
-                const row = `<tr>
-                                <td>${salesman}</td>
-                                <td>${totalSalesTable[salesman].toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</td>
-                            </tr>`;
-                tableBody.innerHTML += row;
-            });
-
-            const prevBtn = document.getElementById('prevBtn');
-            const nextBtn = document.getElementById('nextBtn');
-            prevBtn.disabled = currentPage === 1;
-            nextBtn.disabled = endIndex >= sortedSalesmen.length;
-
-            document.getElementById('pageInfo').textContent = `Page ${currentPage}`;
-        }
-
-        function sortSalesmen(totalSalesTable, direction) {
-            const salesmen = Object.keys(totalSalesTable);
-
-            salesmen.sort((a, b) => {
-                if (direction === 'asc') {
-                    return totalSalesTable[a] - totalSalesTable[b];
-                } else {
-                    return totalSalesTable[b] - totalSalesTable[a];
-                }
-            });
-
-            return salesmen;
-        }
-
-        // Event listener untuk tombol "Previous"
-        document.getElementById('prevBtn').addEventListener('click', () => {
-            currentPage--;
-            displaySalesmanTable(totalSalesTable);
-        });
-
-        // Event listener untuk tombol "Next"
-        document.getElementById('nextBtn').addEventListener('click', () => {
-            currentPage++;
-            displaySalesmanTable(totalSalesTable);
-        });
-
-        // Event listener untuk tombol "Sort Asc"
-        document.getElementById('sortAscBtn').addEventListener('click', () => {
-            sortDirection = 'asc';
-            sortedSalesmen = sortSalesmen(totalSalesTable, sortDirection);
-            currentPage = 1;
-            displaySalesmanTable(totalSalesTable);
-        });
-
-        // Event listener untuk tombol "Sort Desc"
-        document.getElementById('sortDescBtn').addEventListener('click', () => {
-            sortDirection = 'desc';
-            sortedSalesmen = sortSalesmen(totalSalesTable, sortDirection);
-            currentPage = 1;
-            displaySalesmanTable(totalSalesTable);
-        });
-
-        function filterTable() {
-            fetchData(DataUrl).then(data => {
-                const filteredData = applyFilters(data);
-                // Use the global totalSalesTable variable
-                totalSalesTable = calculateTotalSalesTable(filteredData);
-                sortedSalesmen = sortSalesmen(totalSalesTable, sortDirection);
-                displaySalesmanTable(totalSalesTable);
-            });
-        }
-    
-</script>
-
-<script>
-  function processDataRegionSales(data) {
-    const aggregatedData = {};
-
-    data.forEach(row => {
-        const region = row.Region;
-        const sales = parseFloat(row.Sales.replace(/\$/g, '').replace(/,/g, ''));
-
-        if (aggregatedData[region]) {
-            aggregatedData[region] += sales;
-        } else {
-            aggregatedData[region] = sales;
-        }
-    });
-
-    return aggregatedData;
-}
-
-// Create the tree map chart
-function createTreeMapChart(processedDataTreeMap) {
-    const datasetTree = Object.keys(processedDataTreeMap).map(region => ({
-        x: region,
-        y: processedDataTreeMap[region]
-    }));
-
-    const options = {
-        series: [{
-            data: datasetTree
-        }],
-        chart: {
-            type: 'treemap',
-            height: 350
-        },tooltip: {
-            formatter: function(val) {
-                return "Total Sales: $" + (val.toLocaleString('en-US', { maximumFractionDigits: 2 })) + "M";
-            }
-        },
-        colors: ['#ff8f00'],
-        legend: {
-            show: true
-        }
-    };
-
-    const chart = new ApexCharts(document.querySelector("#chart"), options);
-    chart.render();
-}
-
-function filterTreeMapChart() {
-    fetchData(DataUrl)
-        .then(data => {
-            const filteredData = applyFilters(data);
-            const processedDataTreeMap = processDataRegionSales(filteredData);
-            createTreeMapChart(processedDataTreeMap);
-        })
-        .catch(error => {
-            console.error('Error fetching data:', error);
-        });
-}
-
-</script>
-
-<script>
-    const ctxVBPS = document.getElementById('VerticalBarchartProductSales').getContext('2d');
-    // Hitung Sales per Category
-    function processSalesProductData(data) {
-        const aggregatedData = {};
-
-        data.forEach(row => {
-            const product = row["Product Name"];
-            const quantity = row.Quantity;
-
-            // check unique category terus jumlahkan salesnya
-            if (aggregatedData[product]) {
-                aggregatedData[product] += quantity;
-            } else {
-                // Jika kategori belum ada, tambahkan kategori baru
-                aggregatedData[product] = quantity;
-            }
-        });
-         // Urutkan produk berdasarkan penjualan dari tertinggi ke terendah
-        const sortedProducts = Object.keys(aggregatedData).sort((a, b) => aggregatedData[b] - aggregatedData[a]);
-
-        // Ambil hanya 10 produk teratas
-        const top10Products = sortedProducts.slice(0, 5);
-
-        // Buat objek baru untuk menyimpan hanya 10 produk teratas
-        const top10Data = {};
-        top10Products.forEach(product => {
-            top10Data[product] = aggregatedData[product];
-        });
-
-        return top10Data;
-    }
-
-    let VerticalBarChart = null;
-
-    function createVerticalBarChartProductSales(data) {
-    let ctxVBPS = document.getElementById("VerticalBarchartProductSales").getContext("2d");
-    if (VerticalBarChart != null) {
-            VerticalBarChart.data.labels = Object.keys(data);
-            VerticalBarChart.data.datasets.forEach((dataset) => {
-            dataset.data = Object.values(data); 
-        });
-        return VerticalBarChart.update();
-    }
-    VerticalBarChart = new Chart(ctxVBPS, {
-        type: "bar",
-        data: {
-            labels: Object.keys(data), 
-            datasets: [
-                {
-                    label: "Total Quantity Sales Product",
-                    data: Object.values(data), 
-                    borderWidth: 1,
-                },
-            ],
-        },
-        options: {
-            indexAxis: 'y',
-            responsive: true,
-            maintainAspectRatio: false,
-            scales: {
-                y: {
-                    beginAtZero: true,
-                },
-            },
-        },
-    });
-}
-
-    // Ambil data penjualan dari server, proses, dan buat chart
-    function filterVerticalBarChart (){
-    fetchData(DataUrl)
-        .then(data => {
-            const filteredData = applyFilters(data);
-            const processedDataVerticalBarChart = processSalesProductData(filteredData);
-            createVerticalBarChartProductSales(processedDataVerticalBarChart);
-        });
-    }
-    
-    //----------------------------------- STACKED BAR CHART STATE SALES -----------------------------------------
-    const colorPalette = ['#1B1A17', '#F0A500', '#E45826', '#E6D5B8'];
-
-
-    function processStackedBarChartSalesDataPerCategory(data) {
-            const SalesDataPerCategory = {};
-
-            data.forEach(item => {
-                const state = item["State"];
-                const category = item["Category"];
-                const sales = parseFloat(item["Sales"].replace('$', '').replace(',', '.'));
-
-                if (!SalesDataPerCategory[state]) {
-                    SalesDataPerCategory[state] = {};
-                }
-                if (SalesDataPerCategory[state][category]) {
-                    SalesDataPerCategory[state][category] += sales;
-                } else {
-                    SalesDataPerCategory[state][category] = sales;
-                }
-            });
-
-            return SalesDataPerCategory;
-        }
-
-        function prepareStackedChartData(SalesDataPerCategory) {
-            const states = Object.keys(SalesDataPerCategory);
-            const categories = new Set();
-
-            states.forEach(state => {
-                Object.keys(SalesDataPerCategory[state]).forEach(category => {
-                    categories.add(category);
-                });
-            });
-
-            const totalSalesByState = states.map(state => {
-                return {
-                    state: state,
-                    totalSales: Object.values(SalesDataPerCategory[state]).reduce((a, b) => a + b, 0)
-                };
-            });
-
-            totalSalesByState.sort((a, b) => b.totalSales - a.totalSales);
-
-            // Select top 10 states by total sales
-            const topStates = totalSalesByState.slice(0, 10).map(item => item.state);
-
-            const datasets = Array.from(categories).map((category, index) => {
-                return {
-                    label: category,
-                    data: topStates.map(state => SalesDataPerCategory[state][category] || 0),
-                    backgroundColor: colorPalette[index % colorPalette.length]
-                };
-            });
-
-            return {
-                labels: topStates,
-                datasets: datasets
-            };
-        }
-
-        let StackedBarChart = null;
-
-        function createStackedBarChart(chartData) {
-            const ctxSBC = document.getElementById('StackedBarChartSalesPerState').getContext('2d');
-            if (StackedBarChart != null) {
-                StackedBarChart.data = chartData;
-                return StackedBarChart.update();
-            }
-
-            StackedBarChart = new Chart(ctxSBC, {
-                type: 'bar',
-                data: chartData,
-                options: {
-                    scales: {
-                        x: {
-                            stacked: true
-                        },
-                        y: {
-                            stacked: true,
-                            beginAtZero: true
-                        }
-                    }
-                }
-            });
-        }
-
-        // Fetch, process, and render the data
-        function filterStackedBarChart() {
-            fetchData(DataUrl).then(data => {
-                if (data) {
-                    const filteredData = applyFilters(data);
-                    const SalesDataPerCategory = processStackedBarChartSalesDataPerCategory(filteredData);
-                    const chartData = prepareStackedChartData(SalesDataPerCategory);
-                    createStackedBarChart(chartData);
-                }
-            });
-        }
-</script>
-
-<script>
-        //------------------------------------------------ EVENT LISTENER ------------------------------------------------
-        // UPDATE CARD
-        document.getElementById('stateSelect').addEventListener('change', postDataCard);
-        document.getElementById('categorySelect').addEventListener('change', postDataCard);
-        document.getElementById('segmentSelect').addEventListener('change', postDataCard);
-
-        // UPDATE BARCHART (CHART ROW 1 COLS 1)
-        document.getElementById('stateSelect').addEventListener('change', filterBarChart);
-        document.getElementById('categorySelect').addEventListener('change', filterBarChart);
-        document.getElementById('segmentSelect').addEventListener('change', filterBarChart);
-         
-        // UPDATE BARCHART (CHART ROW 1 COLS 2)
-        document.getElementById('stateSelect').addEventListener('change', filterStackedBarChart);
-        document.getElementById('categorySelect').addEventListener('change', filterStackedBarChart);
-        document.getElementById('segmentSelect').addEventListener('change', filterStackedBarChart);
-        
-        // UPDATE LINECHART (CHART ROW 2)
-        document.getElementById('stateSelect').addEventListener('change', filterLineChart);
-        document.getElementById('categorySelect').addEventListener('change', filterLineChart);
-        document.getElementById('segmentSelect').addEventListener('change', filterLineChart);
-
-        // UPDATE TABLE (CHART ROW 3 COLS 1)
-        document.getElementById('stateSelect').addEventListener('change', filterTable);
-        document.getElementById('categorySelect').addEventListener('change', filterTable);
-        document.getElementById('segmentSelect').addEventListener('change', filterTable);
-
-        // UPDATE TREE MAP (CHART ROW 3 COLS 2)
-        document.getElementById('stateSelect').addEventListener('change', filterTreeMapChart);
-        document.getElementById('categorySelect').addEventListener('change', filterTreeMapChart);
-        document.getElementById('segmentSelect').addEventListener('change', filterTreeMapChart);
-
-        // UPDATE VERTICAL CHART (CHART ROW 3 COLS 3)
-        document.getElementById('stateSelect').addEventListener('change', filterVerticalBarChart);
-        document.getElementById('categorySelect').addEventListener('change', filterVerticalBarChart);
-        document.getElementById('segmentSelect').addEventListener('change', filterVerticalBarChart);
-
-        
-        // Fetch data, populate dropdowns, dan lakukan kalkulasi awal
-        fetchData(DataUrl).then(data => {
-            populateDropdowns(data);
-            filterBarChart();
-            filterLineChart();
-            filterVerticalBarChart();
-            filterTreeMapChart();
-            filterTable();
-            filterStackedBarChart();
-            postDataCard();
-        }); 
-</script>
-
-
-
- <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
- <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
- <script>
-    document.getElementById('clickModal').addEventListener('click', function () {
-            const password = prompt('Enter password:');
-            
-          
-            if (password === 'team16') {
-                $(document).ready(function() {
-                    let dataTableInitialized = false;
-
-                    function initializeDataTable(data) {
-                        $('#dataTable').DataTable({
-                            data: data,
-                            columns: [
-                                { data: 'Order ID' },
-                                { data: 'Order Date' },
-                                { data: 'Ship Date' },
-                                { data: 'Ship Mode' },
-                                { data: 'Customer ID' },
-                                { data: 'Customer Name' },
-                                { data: 'Segment' },
-                                { data: 'Country' },
-                                { data: 'City' },
-                                { data: 'State' },
-                                { data: 'Postal Code' },
-                                { data: 'Region' },
-                                { data: 'Product ID' },
-                                { data: 'Category' },
-                                { data: 'Sub-Category' },
-                                { data: 'Product Name' },
-                                { data: 'Sales' },
-                                { data: 'Quantity' },
-                                { data: 'Discount' },
-                                { data: 'Profit' }
-                            ],
-                            pageLength: 5, 
-                            lengthMenu: [5, 10, 15, 30], 
-                            responsive: true,
-                            scrollX: true // Enable horizontal scrolling
-                        });
-                        dataTableInitialized = true;
-                    }
-
-                    // Fetch data and initialize DataTable when modal is shown
-                    
-                    $('#dataTableModal').on('shown.bs.modal', function () {
-                    if (!dataTableInitialized) { 
-                        fetchData(DataUrl).then(data => {
-                            initializeDataTable(data);
-                        });
-                    } else {
-                        $('#dataTable').DataTable().clear().draw();
-                        fetchData(DataUrl).then(data => {
-                            $('#dataTable').DataTable().rows.add(data).draw();
-                        });
-                    }
-                });
-             });
-            } else {
-                
-            }
-    });
-     
- </script>
-
-<script src="https://cdn.jsdelivr.net/npm/dom-to-image@2.6.0/dist/dom-to-image.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
-<script>
-    // Include the html2canvas and jsPDF libraries in the download.js script
-
-// Function to download the page as a PDF
-document.addEventListener('DOMContentLoaded', function () {
-    document.getElementById('downloadPDF').addEventListener('click', function () {
-        const { jsPDF } = window.jspdf;
-        const doc = new jsPDF();
-
-        html2canvas(document.body).then(canvas => {
-            const imgData = canvas.toDataURL('image/png');
-            const imgWidth = 210; // A4 width in mm
-            const pageHeight = 295; // A4 height in mm
-            const imgHeight = canvas.height * imgWidth / canvas.width;
-            let heightLeft = imgHeight;
-            let position = 0;
-
-            doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
-            heightLeft -= pageHeight;
-
-            while (heightLeft >= 0) {
-                position = heightLeft - imgHeight;
-                doc.addPage();
-                doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
-                heightLeft -= pageHeight;
-            }
-
-            doc.save('page.pdf');
-        });
-    });
-});
-</script>
-</body>
-</html>
-
diff --git a/testfitur.html b/testfitur.html
deleted file mode 100644
index 6fd6b99..0000000
--- a/testfitur.html
+++ /dev/null
@@ -1,98 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            margin: 0;
-            padding: 0;
-        }
-
-        .footer {
-            background-color: #333;
-            color: #fff;
-            padding: 20px 0;
-            text-align: center;
-        }
-
-        .footer-container {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: space-around;
-            padding: 20px;
-        }
-
-        .footer-left, .footer-center, .footer-right {
-            flex: 1;
-            margin: 10px;
-        }
-
-        .footer h3 {
-            margin-bottom: 10px;
-        }
-
-        .footer p {
-            margin: 5px 0;
-        }
-
-        .social-links a {
-            color: #fff;
-            margin: 0 10px;
-            text-decoration: none;
-        }
-
-        .social-links a:hover {
-            text-decoration: underline;
-        }
-
-        .footer-bottom {
-            background-color: #222;
-            padding: 10px 0;
-        }
-
-        @media (max-width: 768px) {
-            .footer-container {
-                flex-direction: column;
-                align-items: center;
-            }
-            
-            .footer-left, .footer-center, .footer-right {
-                margin: 20px 0;
-            }
-        }
-    </style>
-</head>
-<body>
-    <!-- Konten lainnya di sini -->
-
-    <footer class="footer">
-        <div class="footer-container">
-            <div class="footer-left">
-                <h3>About Us</h3>
-                <p>Company Name is a leading provider of quality services and products in the industry. Our mission is to provide excellent customer service and satisfaction.</p>
-            </div>
-            <div class="footer-center">
-                <h3>Contact Us</h3>
-                <p>Email: info@companyname.com</p>
-                <p>Phone: +123 456 7890</p>
-                <p>Address: 123 Street Name, City, Country</p>
-            </div>
-            <div class="footer-right">
-                <h3>Follow Us</h3>
-                <div class="social-links">
-                    <a href="https://www.facebook.com" target="_blank">Facebook</a>
-                    <a href="https://www.twitter.com" target="_blank">Twitter</a>
-                    <a href="https://www.instagram.com" target="_blank">Instagram</a>
-                    <a href="https://www.linkedin.com" target="_blank">LinkedIn</a>
-                </div>
-            </div>
-        </div>
-        <div class="footer-bottom">
-            <p>&copy; 2024 Company Name. All rights reserved.</p>
-        </div>
-    </footer>
-</body>
-</html>

From 8319f05d219c13ba3439c310f7aa9e517b82ca04 Mon Sep 17 00:00:00 2001
From: Rifcki12 <168059971+Rifcki12@users.noreply.github.com>
Date: Wed, 5 Jun 2024 20:42:28 +0700
Subject: [PATCH 6/8] fixxx

---
 html/css/style.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/html/css/style.css b/html/css/style.css
index 59a24d0..f748e0e 100644
--- a/html/css/style.css
+++ b/html/css/style.css
@@ -6,10 +6,12 @@ h1, h2, h3, h4, h5, h6 {
 .judul{
   font-size: 18px !important;
 }
+
 b{
   font-family: 'Roboto', sans-serif;
   font-size: 17px;
 }
+
 body{
   font-family: 'Roboto', sans-serif;
   font-size: 12;
@@ -23,11 +25,10 @@ body{
   margin-bottom: -2%;
 }
 .footer {
+  background: #f3f3f3;
   bottom: 0;
-  width: 100%;
   background-color: #222;
   color: #fff;
-  padding: 10px 0;
   text-align: center;
  }
 

From 1314aa647c6f31803131c969abb62c9443980142 Mon Sep 17 00:00:00 2001
From: Rifcki12 <168059971+Rifcki12@users.noreply.github.com>
Date: Wed, 5 Jun 2024 20:47:28 +0700
Subject: [PATCH 7/8] Root file

---
 {html/assets => assets}/Rectangle 205.png           | Bin
 .../assets => assets}/logo-header-resized-120px.png | Bin
 .../assets => assets}/logo-header-resized-180px.png | Bin
 .../assets => assets}/logo-header-resized-70px.png  | Bin
 {html/assets => assets}/logo.png                    | Bin
 {html/css => css}/style.css                         |   0
 {html/javascript => javascript}/yearlyscript.js     |   0
 html/yearly.html => yearly.html                     |   0
 8 files changed, 0 insertions(+), 0 deletions(-)
 rename {html/assets => assets}/Rectangle 205.png (100%)
 rename {html/assets => assets}/logo-header-resized-120px.png (100%)
 rename {html/assets => assets}/logo-header-resized-180px.png (100%)
 rename {html/assets => assets}/logo-header-resized-70px.png (100%)
 rename {html/assets => assets}/logo.png (100%)
 rename {html/css => css}/style.css (100%)
 rename {html/javascript => javascript}/yearlyscript.js (100%)
 rename html/yearly.html => yearly.html (100%)

diff --git a/html/assets/Rectangle 205.png b/assets/Rectangle 205.png
similarity index 100%
rename from html/assets/Rectangle 205.png
rename to assets/Rectangle 205.png
diff --git a/html/assets/logo-header-resized-120px.png b/assets/logo-header-resized-120px.png
similarity index 100%
rename from html/assets/logo-header-resized-120px.png
rename to assets/logo-header-resized-120px.png
diff --git a/html/assets/logo-header-resized-180px.png b/assets/logo-header-resized-180px.png
similarity index 100%
rename from html/assets/logo-header-resized-180px.png
rename to assets/logo-header-resized-180px.png
diff --git a/html/assets/logo-header-resized-70px.png b/assets/logo-header-resized-70px.png
similarity index 100%
rename from html/assets/logo-header-resized-70px.png
rename to assets/logo-header-resized-70px.png
diff --git a/html/assets/logo.png b/assets/logo.png
similarity index 100%
rename from html/assets/logo.png
rename to assets/logo.png
diff --git a/html/css/style.css b/css/style.css
similarity index 100%
rename from html/css/style.css
rename to css/style.css
diff --git a/html/javascript/yearlyscript.js b/javascript/yearlyscript.js
similarity index 100%
rename from html/javascript/yearlyscript.js
rename to javascript/yearlyscript.js
diff --git a/html/yearly.html b/yearly.html
similarity index 100%
rename from html/yearly.html
rename to yearly.html

From b4c44dd7fe1310cd3465bf124d24579a7a89c1a3 Mon Sep 17 00:00:00 2001
From: Rifcki12 <168059971+Rifcki12@users.noreply.github.com>
Date: Wed, 5 Jun 2024 20:49:51 +0700
Subject: [PATCH 8/8] define index

---
 yearly.html => index.html | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename yearly.html => index.html (100%)

diff --git a/yearly.html b/index.html
similarity index 100%
rename from yearly.html
rename to index.html