Update

Kampus-Merdeka-Software-Engineering · Jun 9, 2024 · 7b964fb · 7b964fb
1 parent c95a574
commit 7b964fb
Show file tree

Hide file tree

Showing 592 changed files with 866,078 additions and 0 deletions.
diff --git a/Sales.xlsx b/Sales.xlsx
diff --git a/app.js b/app.js
@@ -0,0 +1,47 @@
+document.addEventListener('DOMContentLoaded', function () {
+  axios
+    .get('json/profit.json')
+    .then((response) => {
+      const profitData = response.data;
+      const years = profitData.map((data) => data.Year);
+      const profit = profitData.map((data) => data.Profit);
+
+      const ctx = document.getElementById('lib=neChart').getContext('2d');
+      new Chart(ctx, {
+        type: 'line',
+        data: {
+          labels: years,
+          datasets: [
+            {
+              label: 'Revenue',
+              data: revenues,
+              borderColor: 'rgba(75, 192, 192, 1)',
+              backgroundColor: 'rgba(75, 192, 192, 0.2)',
+            },
+          ],
+        },
+        options: {
+          responsive: true,
+          scales: {
+            x: {
+              display: true,
+              title: {
+                display: true,
+                text: 'Year',
+              },
+            },
+            y: {
+              display: true,
+              title: {
+                display: true,
+                text: 'Revenue',
+              },
+            },
+          },
+        },
+      });
+    })
+    .catch((error) => {
+      console.error(error);
+    });
+});
diff --git a/assets/accessories.png b/assets/accessories.png
diff --git a/assets/bike.png b/assets/bike.png
diff --git a/assets/clothing.png b/assets/clothing.png
diff --git a/assets/logo.png b/assets/logo.png
diff --git a/assets/mail.png b/assets/mail.png
diff --git a/assets/revou.png b/assets/revou.png
diff --git a/assets/sort_asc.png b/assets/sort_asc.png
diff --git a/assets/sort_asc_disabled.png b/assets/sort_asc_disabled.png
diff --git a/assets/sort_both.png b/assets/sort_both.png
diff --git a/assets/sort_desc.png b/assets/sort_desc.png
diff --git a/assets/sort_desc_disabled.png b/assets/sort_desc_disabled.png
diff --git a/index.html b/index.html
@@ -0,0 +1,209 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Team Five Bicycle Dashboard</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
+  <link rel="stylesheet" href="prduct.css" />
+  <link href='https://fonts.googleapis.com/css?family=Mulish' rel='stylesheet'>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
+  <link rel="icon" href="assets/revou.png" />  
+  <link rel="stylesheet" href="table.css">
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+</head>
+<body>
+  <!-- Header -->
+  <header id="header">
+    <div class="name">
+      <h1><span>TEAM 5 SURABAYA</span></h1>
+      <span class="names">Selamat datang di Dashboard Team Five Bicycle!</span>
+    </div>
+    <!-- navbar -->
+    <nav>
+      <p class="fas fa-envelope" id="contact-button"></p>
+      <div id="contact-form-container">
+        <form id="contact-form">
+          <p class="fas fa-envelope" id="contact-email"></p>
+          <label for="name">Name:</label>
+          <input type="text" id="name" name="name" placeholder="enter your name" required />
+          <label for="email">Email:</label>
+          <input type="email" id="email" name="email" placeholder="enter your email" required />
+          <label for="message">Message:</label>
+          <textarea id="message" name="message" rows="5" cols="30" placeholder="write a message" required></textarea>
+          <button type="submit">Send</button>
+        </form>
+      </div>
+    </nav>
+  </header>
+  <!-- hamburger menu -->
+  <button id="menu-toggle" class="hamburger">
+    <span class="bar"></span>
+    <span class="bar"></span>
+    <span class="bar"></span>
+  </button>
+  <!-- Category Filter -->
+  <label class="categoryFilter" for="categoryFilter">Categories</label>
+  <select id="categoryFilter">
+    <option value="all">All Categories</option>
+    <option value="bikes">Bikes</option>
+    <option value="accessories">Accessories</option>
+    <option value="clothing">Clothing</option>
+  </select>
+  <!-- Year Filter -->
+  <label class="yearFilter" for="yearFilter">Years</label>
+  <select id="yearFilter">
+    <option value="all">All Years</option>
+    <option value="2011">2011</option>
+    <option value="2012">2012</option>
+    <option value="2013">2013</option>
+  </select>
+
+  <!-- aside -->
+  <aside id="aside">
+    <div class="logo">
+    <img src="assets/logo.png" alt="Logo" />
+  </div>
+    <a href="index.html" class="aside-link active">
+      <i class="fas fa-tachometer-alt"></i>
+      <span>Dashboard</span>
+    </a>
+    <a href="insights/insights.html" class="aside-link">
+      <i class="fas fa-chart-line"></i>
+      <span>Insights</span>
+    </a>
+    <!-- Dropdown for Products -->
+    <button class="aside-link" id="dropdown-product">
+      <i class="fas fa-shopping-bag"></i>
+      <span>Products</span>
+    </button>
+    <div class="aside-link-products" id="link-products">
+      <a href="product/accessories.html"></i><span>Accessories</span></a>
+      <a href="product/bikes.html"></i><span>Bikes</span></a>
+      <a href="product/clothing.html"></i><span>Clothing</span></a>
+    </div>
+    <a href="profit/profit.html" class="aside-link">
+      <i class="fas fa-dollar-sign"></i>
+      <span>&nbsp;&nbsp;Profit</span>
+    </a>
+  </aside>
+  <!-- main -->
+  <main>
+    <div class="boxes">
+      <!-- Profit Percentage Box -->
+      <div class="box box1">
+        <i class="fas fa-percentage"></i>
+        <span class="number-container">
+          <span class="number" data-target="43">0</span><span class="suffix">%</span>
+        </span>
+        <span class="text">Percentage Profit</span>
+      </div>
+      <!-- Country Box -->
+      <div class="box box2">
+        <i class="fas fa-globe-americas"></i>
+        <span class="number" data-target="6">0</span>
+        <span class="text">Country</span>
+      </div>
+      <!-- Product Box -->
+      <div class="box box3">
+        <i class="fas fa-box-open"></i>
+        <span class="number" data-target="130">0</span>
+        <span class="text">Product</span>
+      </div>
+      <!-- Total Order Box -->
+      <div class="box box4">
+        <i class="fas fa-shopping-cart"></i>
+        <span class="number-container">
+        <spanclass="prefix"></spanclass=><span class="number" data-target="298">0</span>
+<span class="prefix">,</span><span class="number" data-target="679">0</span>
+</span>
+<span class="text">Total Order</span>
+</div>
+<!-- Total Cost Box -->
+<div class="box box4">
+<i class="fas fa-money-bill-alt"></i>
+<span class="number-container">
+<span class="prefix">$</span><span class="number" data-target="14">0</span>
+<span class="prefix">,</span><span class="number" data-target="944">0</span>
+<span class="prefix">,</span><span class="number" data-target="199">0</span>
+</span>
+<span class="text">Total Cost</span>
+</div>
+<!-- Revenue Box -->
+<div class="box box4">
+<i class="fas fa-money-check-alt"></i>
+<span class="number-container">
+<span class="prefix">$</span><span class="number" data-target="26">0</span>
+<span class="prefix">,</span><span class="number" data-target="100">0</span>
+<span class="prefix">,</span><span class="number" data-target="670">0</span>
+</span>
+<span class="text">Revenue</span>
+</div>
+</div>
+  </main>
+  <!-- Charts and Table Section -->
+  <section>
+    <div class="charts">
+      <!-- Line Chart for Profit -->
+      <div class="chart-container">
+        <p>Profit</p>
+        <canvas id="lineChart"></canvas>
+      </div>
+      <!-- Doughnut Chart for Profit by Country -->
+      <div class="chart-container">
+        <p>Profit By Country</p>
+        <canvas id="doughnutChart"></canvas>
+      </div>
+      <!-- Bar Chart for Profit by Product -->
+      <div class="chart-container">
+        <p>Profit By Product</p>
+        <canvas id="barChart"></canvas>
+      </div>
+    </div>
+  </section>
+    <!-- Table for Top Products -->
+    <section>
+    <div class="charts2">
+      <div class="chart2-containerTable">
+        <p>Top Product</p>
+        <table id="DataTable" class="display">
+          <thead>
+            <tr>
+              <th>Product</th>
+              <th>Product Category</th>
+              <th>Order Quantity</th>
+            </tr>
+          </thead>
+          <tbody id="example-body">
+          </tbody>
+        </table>
+      </div>
+      <div class="charts3">
+        <div class="chart-container3">
+          <p>Net Difference</p>
+          <canvas id="barChartDifference"></canvas>
+        </div>
+        <!-- Bar Chart for Order Quantity -->
+        <div class="chart-container3">
+          <p>Order Quantity</p>
+          <canvas id="barChartQty"></canvas>
+        </div>
+      </div>
+    </div>
+  </section>
+  <br /><br />
+  <!-- footer -->
+  <footer>
+    <span class="footer-container">
+      <p>&copy; Revou Tech Academy 2024 | Team 5 Surabaya</p>
+    </span>
+  </footer>
+  <!-- Scripts -->
+  <script src="index.js"></script>
+  <script src="https://cdn.datatables.net/2.0.8/js/dataTables.js"></script>    
+  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+  <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.js"></script>
+</body>
+</html>
+