I want my header and content to have distance from the menu bar instead of my screen-CodePudding

I tried everything I could to set a distance from navbar and dashboard from menu but I have no idea how to make it work :). I'm still very new in this programming.

Also every time I click the menu-button, yes it works but the navbar moves weirdly and wasn't maximized.

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  list-style-type: none;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
}

#menu {
  width: 345px;
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  background-color: #1e1e1e;
  z-index: 100;
  transition: width 300ms;
}

#logo {
  height: 90px;
  padding: 32px 0px 16px 20px;
  color: #fff;
}

#logo a {
  text-decoration: none;
  color: #fff;
}

#logo h2 {
  margin-top: -49px;
  padding-left: 50px;
}

#menubar li {
  width: 100%;
  margin-bottom: 27px;
  padding-left: 16px;
  padding-right: 16px;
}

#menubar a {
  padding-left: 16px;
  display: block;
  color: #a9a9a9;
  font-size: 14pt;
}

#menubar a#home {
  margin-top: 50px;
  color: #a9a9a9;
}

#menubar a:hover {
  color: #fff;
  transition: 0.5s;
}

#menubar a span:first-child {
  font-size: 18pt;
  padding-right: 16px;
}

#nav-toggle:checked #menu {
  width: 90px;
}

#nav-toggle:checked #menu #logo h2,
#nav-toggle:checked #menu li a {
  padding-left: 16px;
}

#nav-toggle:checked #menu #logo h2,
#nav-toggle:checked #menu li a span:last-child {
  display: none;
}

#navbar {
  transition: margin-left 300ms;
  margin-left: 345px;
}

#nav-toggle:checked~#navbar {
  margin-left: 90px;
}

#nav-toggle:checked~#navbar header {
  width: calc(100% - 70px);
}

header {
  display: flex;
  justify-content: space-between;
  padding: 16px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  position: fixed;
  width: calc(100% - 345px);
  background-color: #fff;
  transition: left 300ms;
}

.dashboard-title {
  display: flex;
  margin-top: -39px;
  margin-left: 50px;
}

#nav-toggle {
  display: none;
}

.menu-button {
  margin-top: 10px;
}

#search {
  border: 1px solid #ccc;
  border-radius: 15px;
  height: 50px;
  display: flex;
  align-items: center;
  overflow-x: hidden;
}

#search span {
  display: inline-block;
  padding: 0px 16px;
  font-size: 16pt;
}

#search input {
  height: 100%;
  padding: 8px;
  border: none;
  outline: none;
}

#user {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

main {
  padding: 32px 24px;
  min-height: calc(100vh - 0px);
  background-color: #f1f5f9;
}

#dashboard {
  margin-left: 345px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 32px;
  margin-top: 100px;
}

#box {
  display: flex;
  justify-content: space-between;
  background: #fff;
  padding: 32px;
  border-radius: 10px;
}

#box span {
  margin-top: 50px;
  margin-left: -110px;
  color: #a9a9a9;
}

#box .customer {
  float: left;
  margin-left: -115px;
}

#box .box-sign {
  color: #a9a9a9;
}

#dashboard-second {
  margin-left: 345px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 32px;
  margin-top: 32px;
}

#box-second {
  display: flex;
  justify-content: space-between;
  background: #fff;
  padding: 32px;
  border-radius: 10px;
}

#box-second h2 {
  font-size: 14pt;
  margin-right: 300px;
}

#box-second .kalendar {
  margin-right: 370px;
}

.tabel {
  margin-left: 345px;
  margin-top: 150px;
  padding: 30px 40px 40px 30px;
  border-radius: 10px;
  background-color: #fff;
}

table,
th,
td {
  border-collapse: collapse;
  height: 50px;
}

thead {
  box-shadow: 0px 3px rgba(0, 0, 0, 0.1);
}

table {
  width: 100%;
}

table tr {
  border-bottom: 1px solid #a9a9a9;
}

table th {
  text-align: left;
  padding-left: 10px;
}

.table-spacing {
  padding-left: 10px;
}

table button {
  background-color: #24a0ed;
  color: #fff;
  font-weight: bold;
  padding: 7px 20px 7px 20px;
  border-radius: 5px;
  display: block;
  margin: auto;
  border: 0;
  cursor: pointer;
}

.transaksi-icon {
  padding-left: 10px;
}

.tabel-customer {
  margin-left: 400px;
  padding-top: 200px;
  padding-right: 40px;
}

.customer-icon {
  padding-left: 10px;
}

.laporan-icon {
  padding-left: 10px;
}

.tabel-laporan {
  margin-left: 400px;
  padding-top: 200px;
  padding-right: 40px;
}

#dashboard-third {
  margin-left: 345px;
  padding-top: 70px;
  padding-bottom: 20px;
  padding-right: 25px;
  padding-left: 25px;
  background-color: #fff;
  margin-top: 35px;
  border-radius: 10px;
}

#box-third {
  margin-top: -50px;
}

#box-third h2 {
  margin-top: -32px;
  padding-left: 30px;
  font-size: 14pt;
}

@media only screen and (max-width: 1200px) {
  #menu {
    width: 90px;
  }
  #menu #logo h2,
  #menu li a {
    padding-left: 16px;
  }
  #menu #logo h2,
  #menu li a span:last-child {
    display: none;
  }
  #navbar {
    margin-left: 90px;
  }
  #navbar header {
    width: calc(100% - 70px);
  }
}

@media only screen and (max-width: 960px) {
  #dashboard {
    grid-template-columns: repeat(3, 1fr);
  }
}

<div id="all">

  <input type="checkbox" id="nav-toggle">
  <div id="menu">
    <div id="logo">
      <a href="index.html">
        <iconify-icon icon="ic:outline-local-laundry-service" width="50"></iconify-icon>
        <h2>Low'n Dry</h2>
      </a>
    </div>
    <div id="menubar">
      <ul>
        <li>
          <a href="index.html" ><span><iconify-icon icon="ant-design:home-outlined"></iconify-icon></span>
                                <span>Dashboard</span>
                            </a>
        </li>
        <li>
          <a href="#" ><span><iconify-icon icon="ant-design:user-outlined"></iconify-icon></span>
                                <span>Manajemen User</span>
                            </a>
        </li>
        <li>
          <a href="transaksi.html" ><span><iconify-icon icon="ep:money"></iconify-icon></span>
                                <span>Transaksi</span>
                            </a>
        </li>
        <li>
          <a href="#" ><span><iconify-icon icon="grommet-icons:package"></iconify-icon></span>
                                <span>Paket Laundry</span>
                            </a>
        </li>
        <li>
          <a href="customer.html" ><span><iconify-icon icon="ic:outline-people"></iconify-icon></span>
                                <span>Customer</span>
                            </a>
        </li>
        <li>
          <a href="laporan.html" ><span><iconify-icon icon="carbon:report" ></iconify-icon></span>
                                <span>Laporan</span>
                            </a>
        </li>
      </ul>
    </div>
  </div>

  <div id="navbar">
    <header>
      <label for="nav-toggle">
                        <iconify-icon icon="ant-design:menu-outlined"  width="43" height="29"></iconify-icon>
                        <h2 >Dashboard</h2>
                    </label>
      <div id="search">
        <span ><iconify-icon icon="codicon:search"></iconify-icon></span>
        <input type="search" placeholder="Search" />
      </div>
      <div id="user">
        <div>
          <h4>Admin</h4>
        </div>
      </div>
    </header>
  </div>


  <main>
    <div id="dashboard">
      <div id="box">
        <h1>23</h1>
        <span >Customer</span>
        <iconify-icon icon="ic:outline-people"  width="40px"></iconify-icon>
      </div>
      <div id="box">
        <h1>21</h1>
        <span>Karyawan</span>
        <iconify-icon icon="ic:outline-people"  width="40px"></iconify-icon>
      </div>
      <div id="box">
        <h1>21</h1>
        <span>New Order</span>
        <iconify-icon icon="ant-design:shopping-cart-outlined"  width="40px"></iconify-icon>
      </div>
      <div id="box">
        <h1>29</h1>
        <span>Total Order</span>
        <iconify-icon icon="ant-design:shopping-cart-outlined"  width="40px"></iconify-icon>
      </div>
    </div>
    <div id="dashboard-second">
      <div id="box-second">
        <iconify-icon icon="bi:bar-chart" width="25px" ></iconify-icon>
        <h2>Grafik Penjualan</h2>
      </div>
      <div id="box-second">
        <iconify-icon icon="ant-design:calendar-outlined" width="25px" ></iconify-icon>
        <h2 >Kalender</h2>
      </div>
    </div>
    <div id="dashboard-third">
      <div id="box-third">
        <iconify-icon icon="ant-design:clock-circle-outlined" width="25px" ></iconify-icon>
        <h2>Order Terbaru</h2>
      </div>
      <table >
        <thead>
          <tr>
            <th>No.</th>
            <th>Tgl. Transaksi</th>
            <th>Customer</th>
            <th>Paket</th>
            <th>Pembayaran</th>
            <th>Status Order</th>
            <th>Total</th>
            <th>Aksi</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td >1. </td>
            <td >01/10/2022</td>
            <td >Budi</td>
            <td >Paket A</td>
            <td >Belum Lunas</td>
            <td  style="color: rgb(50, 233, 108)">Diambil</td>
            <td >Rp 60.000</td>
            <td>
              <button type="button">Detail</button>
            </td>
          </tr>
          <tr>
            <td >2. </td>
            <td >05/10/2022</td>
            <td >Dibu</td>
            <td >Paket B</td>
            <td  style="color:rgb(50, 233, 108)">Lunas</td>
            <td >Baru</td>
            <td >Rp 240.000</td>
            <td>
              <button type="button">Detail</button>
            </td>
          </tr>
          <tr>
            <td >3. </td>
            <td >11/10/2022</td>
            <td >Ubid</td>
            <td >Paket A</td>
            <td >Belum Lunas</td>
            <td >Baru</td>
            <td >Rp 85.000</td>
            <td>
              <button type="button">Detail</button>
            </td>
          </tr>
          <tr>
            <td >4. </td>
            <td >14/10/2022</td>
            <td >Ibud</td>
            <td >Paket C</td>
            <td >Belum Lunas</td>
            <td >Baru</td>
            <td >Rp 72.000</td>
            <td>
              <button type="button">Detail</button>
            </td>
          </tr>
          <tr>
            <td >5. </td>
            <td >18/10/2022</td>
            <td >Bidu</td>
            <td >Paket C</td>
            <td >Belum Lunas</td>
            <td >Baru</td>
            <td >Rp 60.000</td>
            <td>
              <button type="button">Detail</button>
            </td>
          </tr>
          <tr>
            <td >6. </td>
            <td >20/10/2022</td>
            <td >Udib</td>
            <td >Paket B</td>
            <td >Belum Lunas</td>
            <td >Baru</td>
            <td >Rp 240.000</td>
            <td>
              <button type="button">Detail</button>
            </td>
          </tr>
          <tr>
            <td >7. </td>
            <td >28/10/2022</td>
            <td >Dubi</td>
            <td >Paket B</td>
            <td >Belum Lunas</td>
            <td >Baru</td>
            <td >Rp 85.000</td>
            <td>
              <button type="button">Detail</button>
            </td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <th>No.</th>
            <th>Tgl. Transaksi</th>
            <th>Customer</th>
            <th>Paket</th>
            <th>Pembayaran</th>
            <th>Status Order</th>
            <th>Total</th>
            <th>Aksi</th>
          </tr>
        </tfoot>
      </table>
    </div>
</div>
</main>
</div>
</body>

CodePudding user response：

You've got your header as position:fixed which means it's got no height and the content overflows it. If you remove that then set the header to 100% it'll work.

For the main element, add the margin to that and not it's children then all you need to do is change margin-left for that for the css #nav-toggle:checked rules

Finally you've hard coded the widths when the menu is toggled, if you use CSS variables then you only need to change one value.

I've also altered your logo and logo text to show you how to align the icon and text a bit neater. You can use that example for the rest of your items and the stuff in the main element. All markup changes are highlighted.

body {
  --width-wide-menu: 345px;
  --width-narrow-menu: 90px;
}

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  list-style-type: none;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
}

#menu {
  width: 345px;
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  background-color: #1e1e1e;
  z-index: 100;
  transition: width 300ms;
}

#logo {
  /* height: 90px; */
  display: flex;
  /* added this */
  align-items: center;
  padding: 32px 0px 16px 20px;
  color: #fff;
}

#logo a {
  text-decoration: none;
  color: #fff;
}

#logo h2 {
  margin-top: 0;
  display: flex;
  height: 100%;
  justify-content: center;
  /* padding-left: 50px; */
}

#menubar li {
  width: 100%;
  margin-bottom: 27px;
  padding-left: 16px;
  padding-right: 16px;
}

#menubar a {
  padding-left: 16px;
  display: block;
  color: #a9a9a9;
  font-size: 14pt;
}

#menubar a#home {
  margin-top: 50px;
  color: #a9a9a9;
}

#menubar a:hover {
  color: #fff;
  transition: 0.5s;
}

#menubar a span:first-child {
  font-size: 18pt;
  padding-right: 16px;
}

#nav-toggle:checked #menu {
  width: 90px;
}

#nav-toggle:checked #menu #logo h2,
#nav-toggle:checked #menu li a {
  padding-left: 16px;
}

#nav-toggle:checked #menu #logo h2,
#nav-toggle:checked #menu li a span:last-child {
  display: none;
}

#navbar {
  transition: margin-left 300ms;
  margin-left: var(--width-wide-menu);
}

#nav-toggle:checked~#navbar {
  margin-left: 90px;
}

#nav-toggle:checked~main {
  margin-left: 90px;
}

#nav-toggle:checked~#navbar header {
  /* width: calc(100% - 70px); */
}

header {
  display: flex;
  justify-content: space-between;
  padding: 16px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  /* position: fixed; */
  /* width: calc(100% - 345px); */
  width: 100%;
  /* Added this */
  background-color: #fff;
  transition: left 300ms;
}

.dashboard-title {
  display: flex;
  margin-top: -39px;
  margin-left: 50px;
}

#nav-toggle {
  display: none;
}

.menu-button {
  margin-top: 10px;
}

#search {
  border: 1px solid #ccc;
  border-radius: 15px;
  height: 50px;
  display: flex;
  align-items: center;
  overflow-x: hidden;
}

#search span {
  display: inline-block;
  padding: 0px 16px;
  font-size: 16pt;
}

#search input {
  height: 100%;
  padding: 8px;
  border: none;
  outline: none;
}

#user {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

main {
  padding: 32px 24px;
  min-height: calc(100vh - 0px);
  background-color: #f1f5f9;
  margin-left: var(--width-wide-menu);
  /* added this */
}

#dashboard {
  /* margin-left: 345px; */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 32px;
  margin-top: 100px;
}

#box {
  display: flex;
  justify-content: space-between;
  background: #fff;
  padding: 32px;
  border-radius: 10px;
}

#box span {
  margin-top: 50px;
  margin-left: -110px;
  color: #a9a9a9;
}

#box .customer {
  float: left;
  margin-left: -115px;
}

#box .box-sign {
  color: #a9a9a9;
}

#dashboard-second {
  /* margin-left: 345px; */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 32px;
  margin-top: 32px;
}

#box-second {
  display: flex;
  justify-content: space-between;
  background: #fff;
  padding: 32px;
  border-radius: 10px;
}

#box-second h2 {
  font-size: 14pt;
  margin-right: 300px;
}

#box-second .kalendar {
  margin-right: 370px;
}

.tabel {
  /* margin-left: 345px; */
  margin-top: 150px;
  padding: 30px 40px 40px 30px;
  border-radius: 10px;
  background-color: #fff;
}

table,
th,
td {
  border-collapse: collapse;
  height: 50px;
}

thead {
  box-shadow: 0px 3px rgba(0, 0, 0, 0.1);
}

table {
  width: 100%;
}

table tr {
  border-bottom: 1px solid #a9a9a9;
}

table th {
  text-align: left;
  padding-left: 10px;
}

.table-spacing {
  padding-left: 10px;
}

table button {
  background-color: #24a0ed;
  color: #fff;
  font-weight: bold;
  padding: 7px 20px 7px 20px;
  border-radius: 5px;
  display: block;
  margin: auto;
  border: 0;
  cursor: pointer;
}

.transaksi-icon {
  padding-left: 10px;
}

.tabel-customer {
  margin-left: 400px;
  padding-top: 200px;
  padding-right: 40px;
}

.customer-icon {
  padding-left: 10px;
}

.laporan-icon {
  padding-left: 10px;
}

.tabel-laporan {
  margin-left: 400px;
  padding-top: 200px;
  padding-right: 40px;
}

#dashboard-third {
  /* margin-left: 345px; */
  padding-top: 70px;
  padding-bottom: 20px;
  padding-right: 25px;
  padding-left: 25px;
  background-color: #fff;
  margin-top: 35px;
  border-radius: 10px;
}

#box-third {
  margin-top: -50px;
}

#box-third h2 {
  margin-top: -32px;
  padding-left: 30px;
  font-size: 14pt;
}

@media only screen and (max-width: 1200px) {
  #menu {
    width: var(--width-narrow-menu);
  }
  #menu #logo h2,
  #menu li a {
    padding-left: 16px;
  }
  #menu #logo h2,
  #menu li a span:last-child {
    display: none;
  }
  #navbar {
    margin-left: var(--width-narrow-menu);
    width: 100%;
    /*Added this */
  }
  main {
    margin-left: var(--width-narrow-menu);
    /* added this */
  }
  #navbar header {
    width: calc(100% - 70px);
  }
}

@media only screen and (max-width: 960px) {
  #dashboard {
    grid-template-columns: repeat(3, 1fr);
  }
}

<script src="https://code.iconify.design/iconify-icon/1.0.1/iconify-icon.min.js"></script>
<div id="all">
  <input type="checkbox" id="nav-toggle">
  <div id="menu">
    <div id="logo">
      <!-- <a href="index.html"> -->
      <iconify-icon icon="ic:outline-local-laundry-service" width="50"></iconify-icon>
      <h2>Low'n Dry</h2>
      <!-- </a> -->
    </div>
    <div id="menubar">
      <ul>
        <li>
          <a href="index.html" ><span>
                <iconify-icon icon="ant-design:home-outlined"></iconify-icon>
              </span>
              <span>Dashboard</span>
            </a>
        </li>
        <li>
          <a href="#" ><span>
                <iconify-icon icon="ant-design:user-outlined"></iconify-icon>
              </span>
              <span>Manajemen User</span>
            </a>
        </li>
        <li>
          <a href="transaksi.html" ><span>
                <iconify-icon icon="ep:money"></iconify-icon>
              </span>
              <span>Transaksi</span>
            </a>
        </li>
        <li>
          <a href="#" ><span>
                <iconify-icon icon="grommet-icons:package"></iconify-icon>
              </span>
              <span>Paket Laundry</span>
            </a>
        </li>
        <li>
          <a href="customer.html" ><span>
                <iconify-icon icon="ic:outline-people"></iconify-icon>
              </span>
              <span>Customer</span>
            </a>
        </li>
        <li>
          <a href="laporan.html" ><span>
                <iconify-icon icon="carbon:report"></iconify-icon>
              </span>
              <span>Laporan</span>
            </a>
        </li>
      </ul>
    </div>
  </div>

  <div id="navbar">
    <header>
      <label for="nav-toggle">
          <iconify-icon icon="ant-design:menu-outlined"  width="43" height="29"></iconify-icon>
          <h2 >Dashboard</h2>
        </label>
      <div id="search">
        <span >
            <iconify-icon icon="codicon:search"></iconify-icon>
          </span>
        <input type="search" placeholder="Search" />
      </div>
      <div id="user">
        <div>
          <h4>Admin</h4>
        </div>
      </div>
    </header>
  </div>
  <main>
    <div id="dashboard">
      <div id="box">
        <h1>23</h1>
        <span >Customer</span>
        <iconify-icon icon="ic:outline-people"  width="40px"></iconify-icon>
      </div>
      <div id="box">
        <h1>21</h1>
        <span>Karyawan</span>
        <iconify-icon icon="ic:outline-people"  width="40px"></iconify-icon>
      </div>
      <div id="box">
        <h1>21</h1>
        <span>New Order</span>
        <iconify-icon icon="ant-design:shopping-cart-outlined"  width="40px"></iconify-icon>
      </div>
      <div id="box">
        <h1>29</h1>
        <span>Total Order</span>
        <iconify-icon icon="ant-design:shopping-cart-outlined"  width="40px"></iconify-icon>
      </div>
    </div>
    <div id="dashboard-second">
      <div id="box-second">
        <iconify-icon icon="bi:bar-chart" width="25px" ></iconify-icon>
        <h2>Grafik Penjualan</h2>
      </div>
      <div id="box-second">
        <iconify-icon icon="ant-design:calendar-outlined" width="25px" ></iconify-icon>
        <h2 >Kalender</h2>
      </div>
    </div>
    <div id="dashboard-third">
      <div id="box-third">
        <iconify-icon icon="ant-design:clock-circle-outlined" width="25px" ></iconify-icon>
        <h2>Order Terbaru</h2>
      </div>
      <table >
        <thead>
          <tr>
            <th>No.</th>
            <th>Tgl. Transaksi</th>
            <th>Customer</th>
            <th>Paket</th>
            <th>Pembayaran</th>
            <th>Status Order</th>
            <th>Total</th>
            <th>Aksi</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td >1. </td>
            <td >01/10/2022</td>
            <td >Budi</td>
            <td >Paket A</td>
            <td >Belum Lunas</td>
            <td  style="color: rgb(50, 233, 108)">Diambil</td>
            <td >Rp 60.000</td>
            <td>
              <button type="button">Detail</button>
            </td>
          </tr>
          <tr>
            <td >2. </td>
            <td >05/10/2022</td>
            <td >Dibu</td>
            <td >Paket B</td>
            <td  style="color:rgb(50, 233, 108)">Lunas</td>
            <td >Baru</td>
            <td >Rp 240.000</td>
            <td>
              <button type="button">Detail</button>
            </td>
          </tr>
          <tr>
            <td >3. </td>
            <td >11/10/2022</td>
            <td >Ubid</td>
            <td >Paket A</td>
            <td >Belum Lunas</td>
            <td >Baru</td>
            <td >Rp 85.000</td>
            <td>
              <button type="button">Detail</button>
            </td>
          </tr>
          <tr>
            <td >4. </td>
            <td >14/10/2022</td>
            <td >Ibud</td>
            <td >Paket C</td>
            <td >Belum Lunas</td>
            <td >Baru</td>
            <td >Rp 72.000</td>
            <td>
              <button type="button">Detail</button>
            </td>
          </tr>
          <tr>
            <td >5. </td>
            <td >18/10/2022</td>
            <td >Bidu</td>
            <td >Paket C</td>
            <td >Belum Lunas</td>
            <td >Baru</td>
            <td >Rp 60.000</td>
            <td>
              <button type="button">Detail</button>
            </td>
          </tr>
          <tr>
            <td >6. </td>
            <td >20/10/2022</td>
            <td >Udib</td>
            <td >Paket B</td>
            <td >Belum Lunas</td>
            <td >Baru</td>
            <td >Rp 240.000</td>
            <td>
              <button type="button">Detail</button>
            </td>
          </tr>
          <tr>
            <td >7. </td>
            <td >28/10/2022</td>
            <td >Dubi</td>
            <td >Paket B</td>
            <td >Belum Lunas</td>
            <td >Baru</td>
            <td >Rp 85.000</td>
            <td>
              <button type="button">Detail</button>
            </td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <th>No.</th>
            <th>Tgl. Transaksi</th>
            <th>Customer</th>
            <th>Paket</th>
            <th>Pembayaran</th>
            <th>Status Order</th>
            <th>Total</th>
            <th>Aksi</th>
          </tr>
        </tfoot>
      </table>
    </div>
  </main>
</div>