fix: layout dashboard

resources/js/pages/Dashboards/Index.vue

@@ -57,224 +57,254 @@ const lineOptions = null
 <template>
   <DashboardLayout title="Dashboard">
     <div class="grid">
-      <div class="col-12 lg:col-6 xl:col-3">
-        <div class="card mb-0">
-          <div class="flex justify-content-between mb-3">
-            <div>
-              <span class="block text-500 font-medium mb-3">Produk</span>
-              <div class="text-900 font-medium text-xl">152</div>
-            </div>
-            <div
-              class="flex align-items-center justify-content-center bg-blue-100 border-round"
-              style="width: 2.5rem; height: 2.5rem"
-            >
-              <i class="pi pi-th-large text-blue-500 text-xl"></i>
+      <div class="col-12">
+        <div class="grid">
+          <div class="col-12 lg:col-6 xl:col-3">
+            <div class="card mb-0">
+              <div class="flex justify-content-between mb-3">
+                <div>
+                  <span class="block text-500 font-medium mb-3">Produk</span>
+                  <div class="text-900 font-medium text-xl">152</div>
+                </div>
+                <div
+                  class="flex align-items-center justify-content-center bg-blue-100 border-round"
+                  style="width: 2.5rem; height: 2.5rem"
+                >
+                  <i class="pi pi-th-large text-blue-500 text-xl"></i>
+                </div>
+              </div>
+              <span class="text-green-500 font-medium">24 produk </span>
+              <span class="text-500">hari ini</span>
             </div>
           </div>
-          <span class="text-green-500 font-medium">24 produk </span>
-          <span class="text-500">hari ini</span>
-        </div>
-      </div>
 
-      <div class="col-12 lg:col-6 xl:col-3">
-        <div class="card mb-0">
-          <div class="flex justify-content-between mb-3">
-            <div>
-              <span class="block text-500 font-medium mb-3">Pembelian</span>
-              <div class="text-900 font-medium text-xl">284</div>
-            </div>
-            <div
-              class="flex align-items-center justify-content-center bg-yellow-100 border-round"
-              style="width: 2.5rem; height: 2.5rem"
-            >
-              <i class="pi pi-shopping-cart text-yellow-500 text-xl"></i>
+          <div class="col-12 lg:col-6 xl:col-3">
+            <div class="card mb-0">
+              <div class="flex justify-content-between mb-3">
+                <div>
+                  <span class="block text-500 font-medium mb-3">Pembelian</span>
+                  <div class="text-900 font-medium text-xl">284</div>
+                </div>
+                <div
+                  class="flex align-items-center justify-content-center bg-yellow-100 border-round"
+                  style="width: 2.5rem; height: 2.5rem"
+                >
+                  <i class="pi pi-shopping-cart text-yellow-500 text-xl"></i>
+                </div>
+              </div>
+              <span class="text-green-500 font-medium">28 pembelian </span>
+              <span class="text-500">hari ini</span>
             </div>
           </div>
-          <span class="text-green-500 font-medium">28 pembelian </span>
-          <span class="text-500">hari ini</span>
-        </div>
-      </div>
 
-      <div class="col-12 lg:col-6 xl:col-3">
-        <div class="card mb-0">
-          <div class="flex justify-content-between mb-3">
-            <div>
-              <span class="block text-500 font-medium mb-3">Penjualan</span>
-              <div class="text-900 font-medium text-xl">284</div>
-            </div>
-            <div
-              class="flex align-items-center justify-content-center bg-purple-100 border-round"
-              style="width: 2.5rem; height: 2.5rem"
-            >
-              <i class="pi pi-shopping-cart text-purple-500 text-xl"></i>
+          <div class="col-12 lg:col-6 xl:col-3">
+            <div class="card mb-0">
+              <div class="flex justify-content-between mb-3">
+                <div>
+                  <span class="block text-500 font-medium mb-3">Penjualan</span>
+                  <div class="text-900 font-medium text-xl">284</div>
+                </div>
+                <div
+                  class="flex align-items-center justify-content-center bg-purple-100 border-round"
+                  style="width: 2.5rem; height: 2.5rem"
+                >
+                  <i class="pi pi-shopping-cart text-purple-500 text-xl"></i>
+                </div>
+              </div>
+              <span class="text-green-500 font-medium">8 penjualan </span>
+              <span class="text-500">hari ini</span>
             </div>
           </div>
-          <span class="text-green-500 font-medium">8 penjualan </span>
-          <span class="text-500">hari ini</span>
-        </div>
-      </div>
 
-      <div class="col-12 lg:col-6 xl:col-3">
-        <div class="card mb-0">
-          <div class="flex justify-content-between mb-3">
-            <div>
-              <span class="block text-500 font-medium mb-3">Stok Barang</span>
-              <div class="text-900 font-medium text-xl">2848</div>
-            </div>
-            <div
-              class="flex align-items-center justify-content-center bg-orange-100 border-round"
-              style="width: 2.5rem; height: 2.5rem"
-            >
-              <i class="pi pi-box text-orange-500 text-xl"></i>
+          <div class="col-12 lg:col-6 xl:col-3">
+            <div class="card mb-0">
+              <div class="flex justify-content-between mb-3">
+                <div>
+                  <span class="block text-500 font-medium mb-3"
+                    >Stok Barang</span
+                  >
+                  <div class="text-900 font-medium text-xl">2848</div>
+                </div>
+                <div
+                  class="flex align-items-center justify-content-center bg-orange-100 border-round"
+                  style="width: 2.5rem; height: 2.5rem"
+                >
+                  <i class="pi pi-box text-orange-500 text-xl"></i>
+                </div>
+              </div>
+              <span class="text-green-500 font-medium">0 barang baru </span>
+              <span class="text-500">hari ini</span>
             </div>
           </div>
-          <span class="text-green-500 font-medium">0 barang baru </span>
-          <span class="text-500">hari ini</span>
         </div>
       </div>
 
       <div class="col-12 xl:col-6">
-        <div class="card">
-          <h5>Pembelian dan Penjualan</h5>
-          <Chart type="line" :data="lineData" :options="lineOptions" />
-        </div>
-      </div>
-
-      <div class="col-12 xl:col-6">
-        <div class="card">
-          <div class="flex justify-content-between align-items-center mb-5">
-            <h5>Produk Terlaris</h5>
+        <div class="grid">
+          <div class="col-12">
+            <div class="card">
+              <h5>Pembelian dan Penjualan</h5>
+              <Chart type="line" :data="lineData" :options="lineOptions" />
+            </div>
           </div>
-          <ul class="list-none p-0 m-0">
-            <li
-              class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4"
-            >
-              <div>
-                <span class="text-900 font-medium mr-2 mb-1 md:mb-0"
-                  >Space T-Shirt</span
-                >
-                <div class="mt-1 text-600">Clothing</div>
-              </div>
-              <div class="mt-2 md:mt-0 flex align-items-center">
-                <div
-                  class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem"
-                  style="height: 8px"
-                >
-                  <div class="bg-orange-500 h-full" style="width: 50%"></div>
-                </div>
-                <span class="text-orange-500 ml-3 font-medium">%50</span>
+
+          <div class="col-12">
+            <div class="card">
+              <div class="flex justify-content-between align-items-center mb-5">
+                <h5>Produk Terlaris</h5>
               </div>
-            </li>
-            <li
-              class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4"
-            >
-              <div>
-                <span class="text-900 font-medium mr-2 mb-1 md:mb-0"
-                  >Portal Sticker</span
+              <ul class="list-none p-0 m-0">
+                <li
+                  class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4"
                 >
-                <div class="mt-1 text-600">Accessories</div>
-              </div>
-              <div class="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center">
-                <div
-                  class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem"
-                  style="height: 8px"
+                  <div>
+                    <span class="text-900 font-medium mr-2 mb-1 md:mb-0"
+                      >Space T-Shirt</span
+                    >
+                    <div class="mt-1 text-600">Clothing</div>
+                  </div>
+                  <div class="mt-2 md:mt-0 flex align-items-center">
+                    <div
+                      class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem"
+                      style="height: 8px"
+                    >
+                      <div
+                        class="bg-orange-500 h-full"
+                        style="width: 50%"
+                      ></div>
+                    </div>
+                    <span class="text-orange-500 ml-3 font-medium">%50</span>
+                  </div>
+                </li>
+                <li
+                  class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4"
                 >
-                  <div class="bg-cyan-500 h-full" style="width: 16%"></div>
-                </div>
-                <span class="text-cyan-500 ml-3 font-medium">%16</span>
-              </div>
-            </li>
-            <li
-              class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4"
-            >
-              <div>
-                <span class="text-900 font-medium mr-2 mb-1 md:mb-0"
-                  >Supernova Sticker</span
+                  <div>
+                    <span class="text-900 font-medium mr-2 mb-1 md:mb-0"
+                      >Portal Sticker</span
+                    >
+                    <div class="mt-1 text-600">Accessories</div>
+                  </div>
+                  <div
+                    class="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center"
+                  >
+                    <div
+                      class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem"
+                      style="height: 8px"
+                    >
+                      <div class="bg-cyan-500 h-full" style="width: 16%"></div>
+                    </div>
+                    <span class="text-cyan-500 ml-3 font-medium">%16</span>
+                  </div>
+                </li>
+                <li
+                  class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4"
                 >
-                <div class="mt-1 text-600">Accessories</div>
-              </div>
-              <div class="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center">
-                <div
-                  class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem"
-                  style="height: 8px"
+                  <div>
+                    <span class="text-900 font-medium mr-2 mb-1 md:mb-0"
+                      >Supernova Sticker</span
+                    >
+                    <div class="mt-1 text-600">Accessories</div>
+                  </div>
+                  <div
+                    class="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center"
+                  >
+                    <div
+                      class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem"
+                      style="height: 8px"
+                    >
+                      <div class="bg-pink-500 h-full" style="width: 67%"></div>
+                    </div>
+                    <span class="text-pink-500 ml-3 font-medium">%67</span>
+                  </div>
+                </li>
+                <li
+                  class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4"
                 >
-                  <div class="bg-pink-500 h-full" style="width: 67%"></div>
-                </div>
-                <span class="text-pink-500 ml-3 font-medium">%67</span>
-              </div>
-            </li>
-            <li
-              class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4"
-            >
-              <div>
-                <span class="text-900 font-medium mr-2 mb-1 md:mb-0"
-                  >Wonders Notebook</span
+                  <div>
+                    <span class="text-900 font-medium mr-2 mb-1 md:mb-0"
+                      >Wonders Notebook</span
+                    >
+                    <div class="mt-1 text-600">Office</div>
+                  </div>
+                  <div
+                    class="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center"
+                  >
+                    <div
+                      class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem"
+                      style="height: 8px"
+                    >
+                      <div class="bg-green-500 h-full" style="width: 35%"></div>
+                    </div>
+                    <span class="text-green-500 ml-3 font-medium">%35</span>
+                  </div>
+                </li>
+                <li
+                  class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4"
                 >
-                <div class="mt-1 text-600">Office</div>
-              </div>
-              <div class="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center">
-                <div
-                  class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem"
-                  style="height: 8px"
+                  <div>
+                    <span class="text-900 font-medium mr-2 mb-1 md:mb-0"
+                      >Mat Black Case</span
+                    >
+                    <div class="mt-1 text-600">Accessories</div>
+                  </div>
+                  <div
+                    class="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center"
+                  >
+                    <div
+                      class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem"
+                      style="height: 8px"
+                    >
+                      <div
+                        class="bg-purple-500 h-full"
+                        style="width: 75%"
+                      ></div>
+                    </div>
+                    <span class="text-purple-500 ml-3 font-medium">%75</span>
+                  </div>
+                </li>
+                <li
+                  class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4"
                 >
-                  <div class="bg-green-500 h-full" style="width: 35%"></div>
-                </div>
-                <span class="text-green-500 ml-3 font-medium">%35</span>
-              </div>
-            </li>
-            <li
-              class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4"
-            >
-              <div>
-                <span class="text-900 font-medium mr-2 mb-1 md:mb-0"
-                  >Mat Black Case</span
-                >
-                <div class="mt-1 text-600">Accessories</div>
-              </div>
-              <div class="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center">
-                <div
-                  class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem"
-                  style="height: 8px"
-                >
-                  <div class="bg-purple-500 h-full" style="width: 75%"></div>
-                </div>
-                <span class="text-purple-500 ml-3 font-medium">%75</span>
-              </div>
-            </li>
-            <li
-              class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4"
-            >
-              <div>
-                <span class="text-900 font-medium mr-2 mb-1 md:mb-0"
-                  >Robots T-Shirt</span
-                >
-                <div class="mt-1 text-600">Clothing</div>
-              </div>
-              <div class="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center">
-                <div
-                  class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem"
-                  style="height: 8px"
-                >
-                  <div class="bg-teal-500 h-full" style="width: 40%"></div>
-                </div>
-                <span class="text-teal-500 ml-3 font-medium">%40</span>
-              </div>
-            </li>
-          </ul>
+                  <div>
+                    <span class="text-900 font-medium mr-2 mb-1 md:mb-0"
+                      >Robots T-Shirt</span
+                    >
+                    <div class="mt-1 text-600">Clothing</div>
+                  </div>
+                  <div
+                    class="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center"
+                  >
+                    <div
+                      class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem"
+                      style="height: 8px"
+                    >
+                      <div class="bg-teal-500 h-full" style="width: 40%"></div>
+                    </div>
+                    <span class="text-teal-500 ml-3 font-medium">%40</span>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
         </div>
       </div>
 
       <div class="col-12 xl:col-6">
-        <div class="card">
-          <h5>Pembelian</h5>
-          <Chart type="bar" :data="barData" :options="lineOptions" />
-        </div>
-      </div>
+        <div class="grid">
+          <div class="col-12">
+            <div class="card">
+              <h5>Pembelian</h5>
+              <Chart type="bar" :data="barData" :options="lineOptions" />
+            </div>
+          </div>
 
-      <div class="col-12 xl:col-6">
-        <div class="card">
-          <h5>Pendapatan</h5>
-          <Chart type="bar" :data="barData" :options="lineOptions" />
+          <div class="col-12">
+            <div class="card">
+              <h5>Pendapatan</h5>
+              <Chart type="bar" :data="barData" :options="lineOptions" />
+            </div>
+          </div>
         </div>
       </div>
     </div>